WebIndex/pages/article/[cid].vue

<script setup lang="ts">
const route = useRoute(),
  cid = route.params.cid as string,
  content = ref<IBlogResponse<IPostFull>>(),

  getPost = get<IBlogResponse<IPostFull>, any>('/blog/index.php/api/post', {
    params: {
      cid,
      md: false,
    },
  }),

  title = computed(() => content.value?.data.title || 'Can not see me... can not see me...'),
  text = computed(() => content.value?.data.text || '## Ops!'),
  date = computed(() => new Date((content.value?.data.date.timeStamp || 0) * 1000)
    .toISOString()
    .split('T')[0],
  ),
  category = computed(() => content.value?.data.category || 'default'),
  url = computed(() => content.value?.data.url || '/error/404')

content.value = await getPost()
</script>

<template>
  <section class="container m-4 mx-auto rounded-xl bg-white p-8 shadow-md lg:max-w-screen-lg">
    <div class="mb-4 border-b-2 border-dashed border-gray-200 pb-4">
      <h1 class="text-center text-3xl font-bold">
        {{ title }}
      </h1>
      <div class="flex w-full items-center justify-center gap-4 text-gray-600">
        <!-- 日期 -->
        <div class="flex items-center gap-2">
          <font-awesome-icon :icon="['far', 'clock']" />
          <time>{{ date }}</time>
        </div>
        <!-- 分类 -->
        <div class="flex items-center gap-2">
          <font-awesome-icon :icon="['far', 'folder']" />
          <span>{{ category }}</span>
        </div>
        <div class="flex items-center gap-2">
          <font-awesome-icon :icon="['fas', 'link']" />
          <a :href="url">原文链接</a>
        </div>
      </div>
    </div>
    <markdown-section :content="text" />
  </section>
</template>

<style scoped>

</style>