50 lines
1.2 KiB
TypeScript
50 lines
1.2 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
|
|
interface TocItem {
|
|
id: string;
|
|
text: string;
|
|
depth: number;
|
|
}
|
|
|
|
export function PostToc() {
|
|
const [items, setItems] = useState<TocItem[]>([]);
|
|
|
|
useEffect(() => {
|
|
const headings = Array.from(
|
|
document.querySelectorAll<HTMLElement>('article h2, article h3')
|
|
);
|
|
const mapped = headings
|
|
.filter((el) => el.id)
|
|
.map((el) => ({
|
|
id: el.id,
|
|
text: el.innerText,
|
|
depth: el.tagName === 'H3' ? 3 : 2
|
|
}));
|
|
setItems(mapped);
|
|
}, []);
|
|
|
|
if (items.length === 0) return null;
|
|
|
|
return (
|
|
<nav className="sticky top-20 text-xs text-slate-500 dark:text-slate-400">
|
|
<div className="mb-2 font-semibold text-slate-700 dark:text-slate-200">
|
|
目錄
|
|
</div>
|
|
<ul className="space-y-1">
|
|
{items.map((item) => (
|
|
<li key={item.id} className={item.depth === 3 ? 'pl-3' : ''}>
|
|
<a
|
|
href={`#${item.id}`}
|
|
className="line-clamp-2 hover:text-blue-600 dark:hover:text-blue-400"
|
|
>
|
|
{item.text}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</nav>
|
|
);
|
|
}
|