延續昨天的成果，今天來為文章頁面加上 frontmatter 裡面有的發表日期與標籤（tags）。

發表日期

為了讓我們能更方便處理日期相關的資料，這邊會用到一款名為 luxon 的套件與其型別定義套件：

$ pnpm install -D luxon @types/luxon

編輯 @/pages/articles/[...slug].vue，並在昨天預留的地方加上相關程式碼：

<template>
  ....
  <!-- 預計放上發表時間 -->
  <div class="text-sm text-gray-600 dark:text-gray-400">
    <time
      v-if="post.published_at"
      :datetime="post.published_at"
      :title="dateFormater(post.published_at, dateTimeFormat)"
    >
      發表於
      {{ dateFormater(post.published_at, dateFormat) }}
    </time>
  </div>
  ....
</template>
<script setup lang="ts">
import { DateTime } from 'luxon'

const dateFormat = 'yyyy-LL-dd'
const dateTimeFormat = `${dateFormat} HH:mm`

const dateFormater = (date: string, format: string) => {
return DateTime.fromISO(date).toLocal().toFormat(format)
}
</script>

標籤

這邊會需要做到英文字母與符號的轉換，將會使用一款名為 loadash 的套件與其型別定義套件：
``

$ pnpm install -D lodash-es @types/lodash

之所以是安裝 lodash-es，而不是 lodash，是因為想維持使用 ES Module 引入套件的一致性。

編輯 @/pages/articles/[...slug].vue，並在昨天預留的地方加上相關程式碼：

<template>
  ....
  <div v-if="post.tags?.length > 0">
    <p class="inline mr-2">Tags:</p>
    <ul class="inline">
      <li v-for="tag in post.tags" :key="tag" class="inline">
        <NuxtLink
          :href="'/tags/' + kebabCase(tag)"
          class="mr-3 text-sm font-medium uppercase text-teal-500">
          {{ tag.split(' ').join('-') }}
        </NuxtLink>
      </li>
    </ul>
  </div>
  ....
</template>
<script setup lang="ts">
import { kebabCase } from 'lodash-es/string'
</script>

這邊先檢查 post 底下有沒有 tags 這個屬性，如果有得的話，其中的元素是否大於 0。接著就透過迴圈的方式將其印出來。

渲染出來的整體效果如下圖，感覺更有模有樣了呢！