tone/tonePage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化 前端BlogContent

Browse Source
This commit is contained in:
tone
2024-10-12 12:27:25 +08:00
parent f990d81ca2
commit 0ebcb79259
1 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
tonecn/src/views/BlogContent.vue
View File

@@ -80,7 +80,11 @@ onUnmounted(() => {
<div> <div>
<h1 class="text-center text-[28px] font-semibold dark:text-white text-[#222]">{{ blogInfo.title }}</h1> <h1 class="text-center text-[28px] font-semibold dark:text-white text-[#222]">{{ blogInfo.title }}</h1>
<p class="my-[15px] mx-auto text-[14px] text-[#888] dark:text-[#ccc] text-center">发布于 {{ <p class="my-[15px] mx-auto text-[14px] text-[#888] dark:text-[#ccc] text-center">发布于 {{
timestampToString(blogInfo.publish_time) }}</p> timestampToString(blogInfo.publish_time) }} ｜ {{ blogInfo.like_count }} 点赞</p>
<!-- TODO <p class="mt-[-10px] mx-auto text-[14px] text-[#888] dark:text-[#ccc] text-center whitespace-pre">
{{ blogInfo.visit_count }} 访问
{{ blogInfo.like_count }} 点赞
</p> -->
</div> </div>
<div v-html="blogContent" id="blogContentContainer"></div> <div v-html="blogContent" id="blogContentContainer"></div>
</div> </div>
@@ -92,7 +96,7 @@ onUnmounted(() => {
<style> <style>
/* markdown CSS */ /* markdown CSS */
#blogContentContainer img { #blogContentContainer img {
@apply w-full; @apply w-full my-[5px];
} }
#blogContentContainer p { #blogContentContainer p {
@@ -100,7 +104,7 @@ onUnmounted(() => {
} }
#blogContentContainer p code { #blogContentContainer p code {
@apply bg-[#dedede] py-[2px] px-[3px]; @apply bg-[#dedede] dark:bg-[#ffffff44] py-[1px] px-[3px] rounded-[3px];
} }
#blogContentContainer blockquote { #blogContentContainer blockquote {
@@ -129,11 +133,11 @@ onUnmounted(() => {
} }
#blogContentContainer h1 { #blogContentContainer h1 {
@apply text-[28px] border-b-[#ddd] border-b; @apply text-[28px] border-b-[#ddd] dark:border-b-[#999] border-b;
} }
#blogContentContainer h2 { #blogContentContainer h2 {
@apply text-[24px] border-b-[#ddd] border-b; @apply text-[24px] border-b-[#ddd] dark:border-b-[#999] border-b;
} }