52 lines
1.7 KiB
Vue
52 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
const route = useRoute()
|
|
const cid = route.params.cid as string
|
|
const content = ref<IBlogResponse<IPostFull>>()
|
|
|
|
const getPost = get<IBlogResponse<IPostFull>, any>('/blog/index.php/api/post', {
|
|
params: {
|
|
cid: cid,
|
|
md: false
|
|
}
|
|
})
|
|
|
|
const title = computed(() => content.value?.data.title || 'Can not see me... can not see me...')
|
|
const text = computed(() => content.value?.data.text || '## Ops!')
|
|
const date = computed(() => new Date((content.value?.data.date.timeStamp || 0) * 1000)
|
|
.toISOString()
|
|
.split('T')[0]
|
|
)
|
|
const category = computed(() => content.value?.data.category || 'default')
|
|
const 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> |