68 lines
2.0 KiB
Vue
68 lines
2.0 KiB
Vue
<template>
|
||
<div class="blog-detail blog-section card-item" id="blog-section">
|
||
<div class="blog-title">
|
||
<span class="title">{{ blogStore.currentBlog.title }}</span>
|
||
<blog-label :basic-blog="getBasicBlog(blogStore.currentBlog)"/>
|
||
</div>
|
||
|
||
<div class="blog-md card-item">
|
||
<MdPreview editorId="blog-id"
|
||
v-model="blogStore.currentBlog.content"
|
||
:theme="appStore.isDark ? 'dark' : 'light'"/>
|
||
</div>
|
||
|
||
<div class="blog-copyright">
|
||
<span>
|
||
<strong>本文作者: </strong> Cxx
|
||
</span>
|
||
<span>
|
||
<strong>本文链接: </strong>
|
||
<a href="https://www.microsoft.com/">{{ currentUrl.href }}</a>
|
||
</span>
|
||
<span>
|
||
<strong>版权声明: </strong>
|
||
本博客所有文章除特别声明外，均采用
|
||
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">©BY-NC-SA</a>
|
||
许可协议。转载请注明出处！
|
||
</span>
|
||
</div>
|
||
|
||
<div class="blog-ending">
|
||
<span>-------------本文结束♥感谢您的阅读♥给个五星好评吧~~-------------</span>
|
||
</div>
|
||
|
||
<blog-comment-edit :parent-id="0"/>
|
||
|
||
<blog-comment />
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import BlogLabel from '@/components/Content/BlogLabel.vue'
|
||
import BlogCommentEdit from '@/components/Comment/BlogCommentEdit.vue'
|
||
import BlogComment from '@/components/Comment/BlogComment.vue'
|
||
import { MdPreview } from 'md-editor-v3'
|
||
import 'md-editor-v3/lib/style.css'
|
||
import { useBlogStore } from '@/store/blog.ts'
|
||
import { useAppStore } from '@/store/app'
|
||
import { getBasicBlog } from '@/utils/blog/blogUtil.ts'
|
||
import { useRoute } from 'vue-router'
|
||
import { onMounted } from 'vue'
|
||
|
||
const blogStore = useBlogStore()
|
||
const appStore = useAppStore()
|
||
const route = useRoute()
|
||
|
||
const currentUrl = new URL(window.location.href)
|
||
|
||
onMounted(async () => {
|
||
const blogId = route.params.id as number
|
||
blogStore.currentBlogId = blogId
|
||
await blogStore.queryBlogById(blogId)
|
||
})
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@use "@/styles/blog/blog.detail.module.scss";
|
||
</style>
|