add blog page
This commit is contained in:
parent
5de45341a9
commit
d10399a590
@ -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>
|
||||
|
@ -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
14
pages/blog.vue
Normal file
@ -0,0 +1,14 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
onMounted( () => {
|
||||
emitter.emit('startLoading', false)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nuxt-page/>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
@ -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>
|
||||
|
@ -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
12
types/blog.d.ts
vendored
@ -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
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user