markdown-navbar锚点不生效
时间: 2023-07-24 12:00:48 浏览: 392
如果在使用 `markdown-navbar` 组件时,锚点链接没有生效,可能是因为你没有为 markdown 中的标题添加 `id` 属性。`markdown-navbar` 默认使用标题的 `id` 属性来生成锚点链接,如果标题没有 `id` 属性,那么锚点链接就无法跳转到正确的位置。
要解决这个问题,一种简单的方法是使用 `remark` 和 `remark-slug` 插件为 markdown 中的标题添加自定义的 `slug`,然后在 `markdown-navbar` 中使用 `slug` 来覆盖默认的 `id` 属性。
以下是一个示例代码:
```jsx
import React from 'react';
import ReactMarkdown from 'react-markdown';
import Navbar from 'markdown-navbar';
import 'markdown-navbar/dist/navbar.css';
import remarkSlug from 'remark-slug';
import unified from 'unified';
const MyMarkdown = ({ source }) => {
const processor = unified().use(remarkSlug);
const markdownAST = processor.parse(source);
const headings = [];
processor.runSync(markdownAST).children.forEach((node) => {
if (node.type === 'heading') {
// 获取自定义的 slug
const slug = node.data?.hProperties?.slug;
// 将 slug 赋值给 id 属性
node.data = {
hProperties: {
id: slug,
},
};
headings.push({
level: node.depth,
title: node.children[0].value,
slug,
});
}
});
return (
<>
<Navbar headings={headings} />
<ReactMarkdown astPlugins={[remarkSlug]}>{source}</ReactMarkdown>
</>
);
};
export default MyMarkdown;
```
在这个示例中,我们使用 `unified` 和 `remark-slug` 插件为 markdown 中的标题添加了自定义的 `slug`,然后在 `MyMarkdown` 组件中将 `slug` 赋值给了标题节点的 `id` 属性。这样就可以保证锚点链接能够正确跳转到相应的位置。
需要注意的是,`data-id` 属性并非标准的 HTML 属性,如果需要使用这个属性来进行一些操作,可能需要自己编写相应的 JavaScript 代码来实现。
阅读全文
相关推荐

















