RhenCloud/Cloud-Blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Rhen Cloud
2026-01-03 21:21:53 +08:00
parent 9aace76a1a
commit 77e1d5ed9e
6 changed files with 273 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
app/pages/posts/[post].vue
View File

@@ -5,6 +5,8 @@ import siteConfig from "~/config";
const { path } = useRoute();
const isTocOpen = ref(false);
const { data: articles, error } = await useAsyncData(`blog-post-${path}`, () =>
queryCollection("content").path(path).first(),
);
@@ -54,7 +56,7 @@ useHead({
:description="data.description"
:tags="data.tags" />
<div
class="prose prose-zinc dark:prose-invert max-w-none w-full prose-headings:scroll-mt-28 prose-headings:tracking-tight prose-headings:font-bold prose-h1:text-4xl prose-h2:text-3xl prose-h3:text-2xl prose-p:leading-relaxed prose-p:text-zinc-600 dark:prose-p:text-zinc-400 prose-a:text-violet-600 dark:prose-a:text-violet-400 prose-a:no-underline hover:prose-a:underline prose-blockquote:border-l-4 prose-blockquote:border-violet-500 prose-blockquote:bg-violet-500/5 prose-blockquote:py-1 prose-blockquote:px-6 prose-blockquote:rounded-r-xl prose-blockquote:italic prose-img:rounded-3xl prose-img:shadow-xl prose-code:text-violet-600 dark:prose-code:text-violet-400 prose-code:bg-violet-500/10 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded-md prose-code:before:content-none prose-code:after:content-none prose-pre:bg-slate-900 dark:prose-pre:bg-slate-950 prose-pre:rounded-2xl prose-pre:shadow-2xl prose-pre:border prose-pre:border-white/5">
class="prose prose-zinc dark:prose-invert max-w-none w-full prose-headings:scroll-mt-28 prose-headings:tracking-tight prose-headings:font-bold prose-h1:text-4xl prose-h2:text-3xl prose-h3:text-2xl prose-p:leading-relaxed prose-a:no-underline hover:prose-a:underline prose-blockquote:py-1 prose-blockquote:px-6 prose-blockquote:rounded-r-xl prose-blockquote:italic prose-img:rounded-3xl prose-img:shadow-xl prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded-md prose-code:before:content-none prose-code:after:content-none prose-pre:bg-slate-900 dark:prose-pre:bg-slate-950 prose-pre:rounded-2xl prose-pre:shadow-2xl prose-pre:border prose-pre:border-white/5">
<ContentRenderer v-if="articles" :value="articles">
<template #empty>
<p>No content found.</p>
@@ -68,5 +70,51 @@ useHead({
<!-- 侧边目录 -->
<BlogToc v-if="articles?.body?.toc?.links?.length" :links="articles.body.toc.links" />
<!-- 移动端目录 -->
<ClientOnly>
<div v-if="articles?.body?.toc?.links?.length" class="lg:hidden">
<!-- 悬浮按钮 -->
<button
class="fixed bottom-6 right-6 z-50 h-12 w-12 rounded-full bg-primary text-white shadow-2xl flex items-center justify-center transition-all active:scale-90 hover:opacity-90"
@click="isTocOpen = true">
<Icon name="heroicons:list-bullet" class="w-6 h-6" />
</button>
<!-- 弹出层背景遮罩 -->
<Teleport to="body">
<Transition
enter-active-class="transition-opacity duration-300"
enter-from-class="opacity-0"
enter-to-class="opacity-100"
leave-active-class="transition-opacity duration-300"
leave-from-class="opacity-100"
leave-to-class="opacity-0">
<div
v-if="isTocOpen"
class="fixed inset-0 bg-black/50 backdrop-blur-sm z-100"
@click="isTocOpen = false" />
</Transition>
<!-- 弹出层内容 -->
<Transition
enter-active-class="transition-transform duration-300 ease-out"
enter-from-class="translate-y-full"
enter-to-class="translate-y-0"
leave-active-class="transition-transform duration-300 ease-in"
leave-from-class="translate-y-0"
leave-to-class="translate-y-full">
<div v-if="isTocOpen" class="fixed bottom-0 left-0 right-0 z-101 max-h-[80vh]">
<div class="bg-white dark:bg-slate-900 rounded-t-3xl shadow-2xl">
<BlogToc
:links="articles.body.toc.links"
:is-mobile="true"
@close="isTocOpen = false" />
</div>
</div>
</Transition>
</Teleport>
</div>
</ClientOnly>
</div>
</template>