fix: slugging

This commit is contained in:
hypercross 2026-03-19 11:22:12 +08:00
parent 71ab7523da
commit d19401373f
3 changed files with 9 additions and 3 deletions

View File

@ -43,7 +43,7 @@ const App: Component = () => {
</div> </div>
</header> </header>
<main class="max-w-4xl mx-auto px-4 py-8 pt-20 md:ml-64 2xl:ml-auto flex justify-center items-center"> <main class="max-w-4xl mx-auto px-4 py-8 pt-20 md:ml-64 2xl:ml-auto flex justify-center items-center">
<Article class="prose-sm max-w-none flex-1" src={currentPath()} /> <Article class="prose-sm max-w-full xl:max-w-none flex-1" src={currentPath()} />
</main> </main>
</div> </div>
); );

View File

@ -81,7 +81,7 @@ export const HeadingNode: Component<{
depth: number; depth: number;
}> = (props) => { }> = (props) => {
const navigate = useNavigate(); const navigate = useNavigate();
const anchor = props.node.title.toLowerCase().replace(/\s+/g, "-"); const anchor = props.node.id || "";
const href = `${props.basePath}#${anchor}`; const href = `${props.basePath}#${anchor}`;
const handleClick = (e: MouseEvent) => { const handleClick = (e: MouseEvent) => {

View File

@ -1,8 +1,11 @@
import Slugger from "github-slugger";
/** /**
* *
*/ */
export interface TocNode { export interface TocNode {
title: string; title: string;
id?: string;
path?: string; path?: string;
level: number; level: number;
children?: TocNode[]; children?: TocNode[];
@ -24,6 +27,7 @@ export function extractHeadings(content: string): TocNode[] {
const headings: TocNode[] = []; const headings: TocNode[] = [];
const lines = content.split("\n"); const lines = content.split("\n");
const stack: { node: TocNode; level: number }[] = []; const stack: { node: TocNode; level: number }[] = [];
const slugger = new Slugger();
for (const line of lines) { for (const line of lines) {
const match = line.match(/^(#{1,6})\s+(.+)$/); const match = line.match(/^(#{1,6})\s+(.+)$/);
@ -31,7 +35,9 @@ export function extractHeadings(content: string): TocNode[] {
const level = match[1].length; const level = match[1].length;
const title = match[2].trim(); const title = match[2].trim();
const node: TocNode = { title, level }; // 使用 github-slugger 生成 ID与 marked-gfm-heading-id 保持一致
const id = slugger.slug(title.toLowerCase());
const node: TocNode = { title, id, level };
// 找到合适的父节点 // 找到合适的父节点
while (stack.length > 0 && stack[stack.length - 1].level >= level) { while (stack.length > 0 && stack[stack.length - 1].level >= level) {