fix: slugging
This commit is contained in:
parent
71ab7523da
commit
d19401373f
|
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -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) => {
|
||||||
|
|
|
||||||
|
|
@ -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) {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue