Skip to content

Commit 8913831

Browse files
CatCodeMeCatCodeMe
committed
修复乱序目录层级渲染问题
1 parent f2c148f commit 8913831

3 files changed

Lines changed: 265 additions & 30 deletions

File tree

‎packages/pure/components/pages/TOC.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ const toc = generateToc(headings)
5050

5151
// Initialize the headings and tocLinks
5252
this.headings = Array.from(
53-
document.querySelectorAll('article h2, article h3, article h4, article h5, article h6')
53+
document.querySelectorAll('article h1, article h2, article h3, article h4, article h5, article h6')
5454
)
5555
this.tocLinks = Array.from(this.querySelectorAll('a[href^="#"]')).map((link) => ({
5656
element: link as HTMLAnchorElement,

‎packages/pure/plugins/toc.ts‎

Lines changed: 16 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -4,38 +4,25 @@ export interface TocItem extends MarkdownHeading {
44
subheadings: TocItem[]
55
}
66

7-
function diveChildren(item: TocItem, depth: number): TocItem[] {
8-
if (depth === 1 || !item.subheadings.length) {
9-
return item.subheadings
10-
} else {
11-
// e.g., 2
12-
return diveChildren(item.subheadings[item.subheadings.length - 1] as TocItem, depth - 1)
13-
}
14-
}
15-
16-
export function generateToc(headings: readonly MarkdownHeading[]) {
17-
// this ignores/filters out h1 element(s)
18-
const bodyHeadings = [...headings.filter(({ depth }) => depth > 1)]
19-
const toc: TocItem[] = []
7+
export function generateToc(headings: readonly MarkdownHeading[]): TocItem[] {
8+
const root: TocItem = { depth: 0, slug: 'root', text: 'Root', subheadings: [] }
9+
const stack: TocItem[] = [root]
2010

21-
bodyHeadings.forEach((h) => {
11+
headings.forEach((h) => {
2212
const heading: TocItem = { ...h, subheadings: [] }
2313

24-
// add h2 elements into the top level
25-
if (heading.depth === 2) {
26-
toc.push(heading)
27-
} else {
28-
const lastItemInToc = toc[toc.length - 1]!
29-
if (heading.depth < lastItemInToc.depth) {
30-
throw new Error(`Orphan heading found: ${heading.text}.`)
31-
}
32-
33-
// higher depth
34-
// push into children, or children's children
35-
const gap = heading.depth - lastItemInToc.depth
36-
const target = diveChildren(lastItemInToc, gap)
37-
target.push(heading)
14+
// Find the correct parent in the stack.
15+
// The parent is the last item on the stack with a depth less than the current heading.
16+
while (stack[stack.length - 1].depth >= heading.depth) {
17+
stack.pop()
3818
}
19+
20+
// Add the new heading as a child of the correct parent.
21+
stack[stack.length - 1].subheadings.push(heading)
22+
23+
// Push the new heading onto the stack, making it the current deepest heading.
24+
stack.push(heading)
3925
})
40-
return toc
26+
27+
return root.subheadings
4128
}

‎src/content/blog/test/test.md‎

Lines changed: 248 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,248 @@
1+
---
2+
title: test
3+
publishDate: 2025-07-27
4+
description: 'astro-theme-pure Personalized Customization Guide'
5+
tags:
6+
- Waline
7+
- Vercel
8+
- Supabase
9+
heroImage: { src: './thumbnail.jpg', color: '#64574D' }
10+
language: 'English'
11+
---
12+
13+
## h2
14+
15+
Currently supported social media include:
16+
17+
- `coolapk`
18+
- `telegram`
19+
- `github`
20+
- `bilibili`
21+
- `twitter`
22+
- `zhihu`
23+
- `steam`
24+
- `netease_music`
25+
Currently supported social media include:
26+
27+
- `coolapk`
28+
- `telegram`
29+
- `github`
30+
- `bilibili`
31+
- `twitter`
32+
- `zhihu`
33+
- `steam`
34+
- `netease_music`
35+
Currently supported social media include:
36+
37+
- `coolapk`
38+
- `telegram`
39+
- `github`
40+
- `bilibili`
41+
- `twitter`
42+
- `zhihu`
43+
- `steam`
44+
- `netease_music`
45+
Currently supported social media include:
46+
47+
- `coolapk`
48+
- `telegram`
49+
- `github`
50+
- `bilibili`
51+
- `twitter`
52+
- `zhihu`
53+
- `steam`
54+
- `netease_music`
55+
[astro-theme-pure](https://github.com/cworld1/astro-theme-pure)
56+
57+
Customizing this theme requires adjusting a significant amount of source code.
58+
59+
We have made efforts to centralize the configuration options in the `src/site.config.ts` file for user convenience and have integrated a variety of common social media/tools icons. If you want to add new icons, you will need to modify the source code yourself.
60+
61+
You can globally search for the following keywords to find the text that needs to be replaced:
62+
63+
# 1
64+
- `Lorem ipsum`
65+
- `astro-theme-pure`
66+
- `cworld`
67+
68+
69+
Currently supported social media include:
70+
71+
- `coolapk`
72+
- `telegram`
73+
- `github`
74+
- `bilibili`
75+
- `twitter`
76+
- `zhihu`
77+
- `steam`
78+
- `netease_music`
79+
Currently supported social media include:
80+
81+
- `coolapk`
82+
- `telegram`
83+
- `github`
84+
- `bilibili`
85+
- `twitter`
86+
- `zhihu`
87+
- `steam`
88+
- `netease_music`
89+
Currently supported social media include:
90+
91+
- `coolapk`
92+
- `telegram`
93+
- `github`
94+
- `bilibili`
95+
- `twitter`
96+
- `zhihu`
97+
- `steam`
98+
- `netease_music`
99+
Currently supported social media include:
100+
101+
- `coolapk`
102+
- `telegram`
103+
- `github`
104+
- `bilibili`
105+
- `twitter`
106+
- `zhihu`
107+
- `steam`
108+
- `netease_music`
109+
Currently supported social media include:
110+
111+
- `coolapk`
112+
- `telegram`
113+
- `github`
114+
- `bilibili`
115+
- `twitter`
116+
- `zhihu`
117+
- `steam`
118+
- `netease_music`
119+
Currently supported social media include:
120+
121+
- `coolapk`
122+
- `telegram`
123+
- `github`
124+
- `bilibili`
125+
- `twitter`
126+
- `zhihu`
127+
- `steam`
128+
- `netease_music`
129+
Currently supported social media include:
130+
131+
- `coolapk`
132+
- `telegram`
133+
- `github`
134+
- `bilibili`
135+
- `twitter`
136+
- `zhihu`
137+
- `steam`
138+
- `netease_music`
139+
Currently supported social media include:
140+
141+
- `coolapk`
142+
- `telegram`
143+
- `github`
144+
- `bilibili`
145+
- `twitter`
146+
- `zhihu`
147+
- `steam`
148+
- `netease_music`
149+
150+
### 3
151+
Next, we will introduce each aspect in detail.
152+
153+
154+
Currently supported social media include:
155+
156+
- `coolapk`
157+
- `telegram`
158+
- `github`
159+
- `bilibili`
160+
- `twitter`
161+
- `zhihu`
162+
- `steam`
163+
- `netease_music`
164+
Currently supported social media include:
165+
166+
- `coolapk`
167+
- `telegram`
168+
- `github`
169+
- `bilibili`
170+
- `twitter`
171+
- `zhihu`
172+
- `steam`
173+
- `netease_music`
174+
Currently supported social media include:
175+
176+
- `coolapk`
177+
- `telegram`
178+
- `github`
179+
- `bilibili`
180+
- `twitter`
181+
- `zhihu`
182+
- `steam`
183+
- `netease_music`
184+
Currently supported social media include:
185+
186+
- `coolapk`
187+
- `telegram`
188+
- `github`
189+
- `bilibili`
190+
- `twitter`
191+
- `zhihu`
192+
- `steam`
193+
- `netease_music`
194+
Currently supported social media include:
195+
196+
- `coolapk`
197+
- `telegram`
198+
- `github`
199+
- `bilibili`
200+
- `twitter`
201+
- `zhihu`
202+
- `steam`
203+
- `netease_music`
204+
See [Configuration Files](/docs/setup/configuration) for details.
205+
206+
#### Waline Comment System
207+
208+
See [Waline Comment System](/docs/integrations/comment) for details.
209+
210+
211+
Currently supported social media include:
212+
213+
- `coolapk`
214+
- `telegram`
215+
- `github`
216+
- `bilibili`
217+
- `twitter`
218+
- `zhihu`
219+
- `steam`
220+
- `netease_music`
221+
222+
If you want to add new social media, you need to modify the following files:
223+
224+
- `src/types.ts`: Add a new `SocialLink.name` enum value and the icon mapping relationship for `SocialMediaIconId`
225+
- `public/icons/social.svg`: Follow the existing format and add a new icon as a symbol
226+
227+
It is recommended to find social media icons on the following websites to maintain consistency:
228+
229+
- [remixicon](https://remixicon.com/)
230+
- [mingcute](https://www.mingcute.com/)
231+
232+
233+
- `public/favicon`: The site's favicon. You can generate a favicon at [favicon.io](https://favicon.io/favicon-converter/)
234+
- `public/images/social-card.png`: The site's social card
235+
- `src/assets/`: This directory contains client-rendered avatars, sponsorship QR codes, and other images. Please replace them with your own images
236+
237+
238+
Currently supported icons can be found in the `src/icons` directory.
239+
240+
If you want to add new Tools icons, you need to add a new icon in the `src/icons` directory.
241+
242+
It is recommended to find new icons on the following websites to maintain consistency:
243+
244+
- [iconify](https://icon-sets.iconify.design/)
245+
- [icones](https://icones.js.org/)
246+
247+
248+
See [Deployment](/docs/deployment) for details.

0 commit comments

Comments
 (0)