55 lines
1.7 KiB
Vue
55 lines
1.7 KiB
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>
|