fix: wip blog by tag

components/templates/TheHeader.vue

@@ -98,7 +98,16 @@ export default class TheHeader extends Vue {
     {
       title: 'Blog',
       link: '/blog',
-      subMenu: []
+      subMenu: [
+        {
+          title: 'Tất cả bài viết',
+          link: '/blog'
+        },
+        {
+          title: 'Bài viết theo chủ đề',
+          link: '/tags'
+        }
+      ]
     },
     {
       title: 'eHandy Teams',

content/blog/2020/a-blue-bird.md

@@ -2,7 +2,7 @@
 title: How to code
 description: 'Empower your NuxtJS application with @nuxt/content module: write in a content/ directory and fetch your Markdown, JSON, YAML and CSV files through a MongoDB like API, acting as a Git-based Headless CMS.'
 image: 'http://placekitten.com/g/1920/1080'
-tags: ['VueJS', 'Nuxt']
+tags: ['VueJS', 'Nuxt', 'Frontend']
 published: '2020-02-12'
 ---
 

content/blog/2020/optimize-your-website.md

@@ -2,7 +2,7 @@
 title: Optimize your website
 description: 'Empower your NuxtJS application with @nuxt/content module: write in a content/ directory and fetch your Markdown, JSON, YAML and CSV files through a MongoDB like API, acting as a Git-based Headless CMS.'
 image: 'http://placekitten.com/g/1920/1080'
-tags: ['VueJS', 'Nuxt']
+tags: ['NodeJs', 'Nuxt', 'Optimize']
 published: '2020-03-30'
 ---
 

content/blog/2020/vue/deep-folder.md

@@ -2,7 +2,7 @@
 title: Deep folder Vue 
 description: 'Empower your NuxtJS application with @nuxt/content module: write in a content/ directory and fetch your Markdown, JSON, YAML and CSV files through a MongoDB like API, acting as a Git-based Headless CMS.'
 image: 'http://placekitten.com/g/1920/1080'
-tags: ['VueJS']
+tags: ['vuejs']
 published: '2020-01-12'
 ---
 

content/blog/2021/first-blog-post-ehandy copy.md

@@ -2,7 +2,7 @@
 title: Fisrt Blog Post eHandy
 description: 'Empower your NuxtJS application with @nuxt/content module: write in a content/ directory and fetch your Markdown, JSON, YAML and CSV files through a MongoDB like API, acting as a Git-based Headless CMS.'
 image: 'http://placekitten.com/g/1920/1080'
-tags: ['VueJS', 'Nuxt']
+tags: ['Share', 'Nuxt']
 published: '2021-01-30'
 ---
 

content/blog/2021/how-to-code.md

@@ -2,7 +2,7 @@
 title: Fisrt Blog Post eHandy
 description: 'Empower your NuxtJS application with @nuxt/content module: write in a content/ directory and fetch your Markdown, JSON, YAML and CSV files through a MongoDB like API, acting as a Git-based Headless CMS.'
 image: 'http://placekitten.com/g/1920/1080'
-tags: ['VueJS', 'Nuxt']
+tags: ['Node', 'Nuxt']
 published: '2021-03-30'
 ---
 

content/blog/2021/placeholder-image-shopify.md

@@ -2,7 +2,7 @@
 title: Placeholder image shopify
 description: 'Empower your NuxtJS application with @nuxt/content module: write in a content/ directory and fetch your Markdown, JSON, YAML and CSV files through a MongoDB like API, acting as a Git-based Headless CMS.'
 image: 'http://placekitten.com/g/1920/1080'
-tags: ['VueJS', 'Nuxt']
+tags: ['Fun', 'Nuxt']
 published: '2021-05-30'
 ---
 

content/blog/2021/shopify-partner.md

@@ -2,7 +2,7 @@
 title: Shopify partner
 description: 'Empower your NuxtJS application with @nuxt/content module: write in a content/ directory and fetch your Markdown, JSON, YAML and CSV files through a MongoDB like API, acting as a Git-based Headless CMS.'
 image: 'http://placekitten.com/g/1920/1080'
-tags: ['VueJS', 'Nuxt']
+tags: ['VueJS', 'Shopify']
 published: '2022-06-30'
 ---
 

pages/tags/index.vue

@@ -1,8 +1,11 @@
 <template>
   <section>
-    <h1>All tag</h1>
+    <div class="container">
-    <ul>
+      <h1 class="title is-3 mt-3 mb-3 is-flex is-justify-content-center is-align-items-center">
-      <li v-for="tag in tags" :key="tag" class="text-center mb-2">
+        All Tags
+      </h1>
+      <ul class="columns">
+        <li v-for="tag in tags" :key="tag" class="column">
           <nuxt-link
             :to="{ name: 'tags-tag', params: { tag: tag.toLowerCase() } }"
             class="text-4xl hover:underline"
@@ -11,6 +14,7 @@
           </nuxt-link>
         </li>
       </ul>
+    </div>
   </section>
 </template>