add blog page

This commit is contained in:
Jeffrey Hsu 2024-12-02 20:00:21 +08:00
parent 5de45341a9
commit d10399a590
6 changed files with 78 additions and 13 deletions

View File

@ -13,16 +13,12 @@ const thumbUrl = computed(() => {
return props.post.fields.thumb.value
})
const handleOnCardClick = () => {
window.open(props.post.url, '_self')
}
</script>
<template>
<div :title="post.title"
<nuxt-link :title="post.title"
class="container relative h-56 overflow-hidden rounded-2xl text-white hover:cursor-pointer hover:text-amber-200 hover:shadow-lg"
@click="handleOnCardClick">
:to="{name: 'blog-cid', params: {cid: post.cid}}">
<!-- 图片 -->
<div class="container h-full">
<img :src="thumbUrl" alt=""
@ -43,7 +39,7 @@ const handleOnCardClick = () => {
<font-awesome-icon :icon="['far', 'clock']" class="mr-1 text-sm"/>
<span>{{ post.date.year }}-{{ post.date.month }}-{{ post.date.day }}</span>
</div>
</div>
</nuxt-link>
</template>
<style scoped>

View File

@ -5,9 +5,15 @@ defineProps<{
</script>
<template>
<div class="render" v-html="$mdRender.render(content)"></div>
<div class="markdown-body" v-html="$mdRender.render(content)"/>
</template>
<style lang="scss">
.markdown-body {
img {
display: block;
margin: 0 auto;
}
}
</style>

14
pages/blog.vue Normal file
View File

@ -0,0 +1,14 @@
<script setup lang="ts">
onMounted( () => {
emitter.emit('startLoading', false)
})
</script>
<template>
<nuxt-page/>
</template>
<style scoped>
</style>

View File

@ -1,12 +1,50 @@
<script setup lang="ts">
const route = useRoute()
const cid = route.params.cid as string
onMounted( () => {
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 mx-auto m-4 p-8 bg-white rounded-xl shadow-md lg:max-w-screen-lg">
<div class="border-b-2 border-gray-200 border-dashed pb-4 mb-4">
<h1 class="text-center text-3xl font-bold">{{ title }}</h1>
<div class="text-gray-600 flex items-center justify-center w-full gap-4">
<!-- 日期 -->
<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>

View File

@ -1,6 +1,6 @@
import {library, config} from '@fortawesome/fontawesome-svg-core'
import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
import {faClock} from '@fortawesome/free-regular-svg-icons'
import {faClock, faFolder} from '@fortawesome/free-regular-svg-icons'
import {
faXmark,
faBlog,
@ -15,7 +15,8 @@ import {
faBrush,
faChessRook,
faBars,
faChevronDown
faChevronDown,
faLink
} from '@fortawesome/free-solid-svg-icons'
import {faWeibo, faQq, faGithubAlt, faSteamSymbol} from '@fortawesome/free-brands-svg-icons'
@ -25,7 +26,7 @@ config.autoAddCss = false
export default defineNuxtPlugin((nuxtApp) => {
library.add(
faClock, faXmark, faBlog, faGauge, faCodeBranch, faCloud, faWeibo, faQq, faGithubAlt, faSteamSymbol, faChevronRight,
faCodeCommit, faCode, faHouse, faPen, faBrush, faChessRook, faBars, faChevronDown
faCodeCommit, faCode, faHouse, faPen, faBrush, faChessRook, faBars, faChevronDown, faFolder, faLink
)
nuxtApp.vueApp.component('font-awesome-icon', FontAwesomeIcon)

12
types/blog.d.ts vendored
View File

@ -1,3 +1,9 @@
declare interface IBlogResponse<T> {
status: string
message: string
data: T
}
declare interface IPostsData {
page: number
pageSize: number
@ -52,8 +58,12 @@ declare interface ICategory {
}
declare interface IDate {
timestamp: number
timeStamp: number
year: string
month: string
day: string
}
declare interface IPostFull extends IPost {
text: string
}