Add frontmatter tags on content

vitepress/.vitepress/theme/ArticlesIndex.vue

@@ -33,7 +33,7 @@ onBeforeMount(() => {
     <h2><a :href="url" v-html="title"/></h2>
 
     <datetime :date="publishedAt" formatter="longdate"/>
-    <tags v-if="tags" :tags="tags" />
+    <tags :tags="tags" />
 
     <p v-if="excerpt" v-html="excerpt"></p>
   </template>

vitepress/.vitepress/theme/components/Tags.vue

@@ -1,14 +1,23 @@
 <script setup>
-defineProps({
+import { useData } from 'vitepress'
+
+const props = defineProps({
   tags: {
     type: Array[String, Number],
-    required: true,
+    required: false,
+    default: undefined,
   },
 })
+
+let tags = props.tags ?? useData().frontmatter.value.tags
+
+if (typeof tags == 'string') {
+  tags = tags.split(',').map(tag => tag.trim())
+}
 </script>
 
 <template>
-  <ul class="tags">
+  <ul v-if="tags.length" class="tags">
     <li class="tag" v-for="tag in tags">
       <Badge class="tag__badge">{{ tag }}</Badge>
     </li>

vitepress/.vitepress/theme/index.js

@@ -1,10 +1,12 @@
 import './custom.css'
 import DefaultTheme from 'vitepress/theme'
 import Datetime from './components/Datetime.vue'
+import Tags from './components/Tags.vue'
 
 export default {
   extends: DefaultTheme,
   enhanceApp({ app }) {
     app.component('datetime', Datetime)
+    app.component('tags', Tags)
   }
 }

vitepress/articles/vitepress-cleanurls-on-nginx-environment.md

@@ -16,6 +16,8 @@ On this blog using [Vitepress](https://vitepress.dev) on a [Nginx](https://nginx
 # Vitepress `cleanUrls` option on a Nginx server
 
 <datetime :date="$frontmatter.publishedAt" formatter="longdate"/>
+<tags/>
+
 Setting Vitepress [`cleanUrls`](https://vitepress.dev/reference/site-config#cleanurls) to `true` removes the trailing `.html` from URLs. The internal links of your Vitepress app changes **from `<a href="/something.html">` to `<a href="/something">`**.
 
 However, `cleanUrls` does not change the file names or the folder structure of the generated HTML files, which means your server must now be able to serve the `/something.html` file when the `/something` URL is requested.