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 17:36:01 +08:00
parent 61dca772b8
commit 9aace76a1a
3 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
app/components/blog/Toc.vue
View File

@@ -1,14 +1,13 @@
<script setup lang="ts"> <script setup lang="ts">
const { path } = useRoute();
const articles = await queryCollection("content").path(path).first();
interface TocLink { interface TocLink {
id: string; id: string;
text: string; text: string;
children?: TocLink[]; children?: TocLink[];
} }
const links = (articles?.body?.toc?.links || []) as TocLink[]; const props = defineProps<{
links: TocLink[];
}>();
const activeId = ref(""); const activeId = ref("");
@@ -35,7 +34,7 @@ onMounted(() => {
{ rootMargin: "-100px 0% -80% 0%" }, { rootMargin: "-100px 0% -80% 0%" },
); );
flattenLinks(links).forEach((link) => { flattenLinks(props.links).forEach((link) => {
const el = document.getElementById(link.id); const el = document.getElementById(link.id);
if (el) observer.observe(el); if (el) observer.observe(el);
}); });
@@ -45,16 +44,16 @@ onMounted(() => {
</script> </script>
<template> <template>
<div class="lg:col-span-4 sticky top-28 h-fit hidden lg:block"> <div class="w-full lg:w-1/3 hidden lg:block sticky top-28">
<div <div
class="bg-white/40 dark:bg-slate-900/40 backdrop-blur-md border border-white/20 dark:border-white/5 p-6 rounded-3xl shadow-sm"> class="h-fit max-h-[calc(100vh-8rem)] overflow-y-auto bg-white/40 dark:bg-slate-900/40 backdrop-blur-md border border-white/20 dark:border-white/5 p-6 rounded-3xl shadow-sm">
<h3 <h3
class="text-xs font-bold uppercase tracking-widest text-zinc-400 dark:text-zinc-500 mb-4 flex items-center gap-2"> class="text-xs font-bold uppercase tracking-widest text-zinc-400 dark:text-zinc-500 mb-4 flex items-center gap-2">
<Icon name="heroicons:list-bullet" class="w-4 h-4" /> <Icon name="heroicons:list-bullet" class="w-4 h-4" />
Table Of Content Table Of Content
</h3> </h3>
<nav class="space-y-1"> <nav class="space-y-1">
<template v-for="link in links" :key="link.id"> <template v-for="link in props.links" :key="link.id">
<NuxtLink <NuxtLink
:to="`#${link.id}`" :to="`#${link.id}`"
class="block text-sm py-1.5 px-3 rounded-xl transition-all duration-200" class="block text-sm py-1.5 px-3 rounded-xl transition-all duration-200"

2
app/layouts/default.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts"></script> <script setup lang="ts"></script>
<template> <template>
<div class="font-spacegrotesk relative min-h-screen overflow-x-hidden flex flex-col"> <div class="font-spacegrotesk relative min-h-screen flex flex-col">
<MainHeader /> <MainHeader />
<main class="flex-1"> <main class="flex-1">
<slot /> <slot />

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

@@ -43,8 +43,9 @@ useHead({
</script> </script>
<template> <template>
<div class="px-4 md:px-6 container max-w-6xl mx-auto sm:grid grid-cols-12 gap-x-12"> <div
<div class="col-span-12 lg:col-span-8"> class="px-4 md:px-6 container max-w-6xl mx-auto flex flex-col lg:flex-row gap-12 items-start">
<div class="w-full" :class="{ 'lg:w-2/3': articles?.body?.toc?.links?.length }">
<BlogHeader <BlogHeader
:title="data.title" :title="data.title"
:image="data.image" :image="data.image"
@@ -66,6 +67,6 @@ useHead({
</div> </div>
<!-- 侧边目录 --> <!-- 侧边目录 -->
<BlogToc /> <BlogToc v-if="articles?.body?.toc?.links?.length" :links="articles.body.toc.links" />
</div> </div>
</template> </template>