1
  toc: {
2
    enable: true, // Display the table of contents on the right side of the post
3
    depth: 2, // Maximum heading depth to show in the table, from 1 to 3
4
  },

1
            <SideBar class="mb-4 row-start-2 row-end-3 col-span-2 lg:row-start-1 lg:row-end-2 lg:col-span-1 lg:max-w-[17.5rem] onload-animation" headings={headings}></SideBar>
2

3
            <main id="swup-container" class="transition-swup-fade col-span-2 lg:col-span-1 overflow-hidden">
4
                <div id="content-wrapper" class="onload-animation">
5
                    <!-- the overflow-hidden here prevent long text break the layout-->
6
                    <!-- make id different from windows.swup global property -->
7
                    <slot></slot>
8
                    <div class="footer col-span-2 onload-animation hidden lg:block">
9
                        <Footer></Footer>
10
                    </div>
11
                </div>
12
            </main>
13

14
            <div class="footer col-span-2 onload-animation block lg:hidden">
15
                <Footer></Footer>
16
            </div>
17
        </div>
18

19
        <BackToTop></BackToTop>
20
    </div>
21
</div>
22

23
<!-- The things that should be under the banner, only the TOC for now -->
24
<!-- <div class="absolute w-full z-0 hidden 2xl:block">
25
    <div class="relative max-w-[var(--page-width)] mx-auto">
26
         #TOC component
27
        {siteConfig.toc.enable && <div id="toc-wrapper" class:list={["hidden lg:block transition absolute top-0 -left-[var(--toc-width)] w-[var(--toc-width)] items-center",
28
            {"toc-hide": siteConfig.banner.enable}]}
29
        >
30
            <div id="toc-inner-wrapper" class="fixed top-14 w-[var(--toc-width)] h-[calc(100vh_-_20rem)] overflow-y-scroll overflow-x-hidden hide-scrollbar">
31
                <div id="toc" class="w-full h-full transition-swup-fade ">
32
                    <div class="h-8 w-full"></div>
33
                    <TOC headings={headings}></TOC>
34
                    <div class="h-8 w-full"></div>
35
                </div>
36
            </div>
37
        </div>}
38

39
         #toc needs to exist for Swup to work normally
40
        {!siteConfig.toc.enable && <div id="toc"></div>}
41
    </div>
42
</div> -->
43
</Layout>

1
---
2
import { siteConfig } from "@/config";
3

4
import type { MarkdownHeading } from "astro";
5
import Categories from "./Categories.astro";
6

7
import Profile from "./Profile.astro";
8
import Tag from "./Tags.astro";
9
import TOC from "./TOC.astro"; // 1. 导入 TOC 组件
10

11
interface Props {
12
  class?: string;
13
  headings?: MarkdownHeading[];
14
}
15
const { headings = [] } = Astro.props;
16
const className = Astro.props.class;
17
---
18
<div id="sidebar" class:list={[className, "w-full"]}>
19
    <div class="flex flex-col w-full gap-4 mb-4">
20
        <Profile></Profile>
21
    </div>
22
    <div id="sidebar-sticky" class="transition-all duration-700 flex flex-col w-full gap-4 top-4 sticky top-4">
23
        <Categories class="onload-animation" style="animation-delay: 150ms"></Categories>
24
        <Tag class="onload-animation" style="animation-delay: 200ms"></Tag>
25
        <TOC headings={headings}></TOC>
26
    </div>
27
</div>