首页markdown-navbar更改data-id

markdown-navbar更改data-id

时间: 2023-10-06 18:05:15 浏览: 292

要更改 `markdown-navbar` 组件中生成的导航链接的 `data-id` 属性，你可以使用 `remark` 和 `remark-slug` 插件来为 markdown 中的标题添加自定义的 `slug`，然后在 `markdown-navbar` 中使用 `slug` 来覆盖默认的 `id` 和 `data-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 和 data-id 属性 node.data = { hProperties: { id: slug, 'data-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` 属性。最后，我们将生成的导航栏和 markdown 内容渲染了出来。需要注意的是，`data-id` 属性并非标准的 HTML 属性，如果你需要使用这个属性来进行一些操作，可能需要自己编写相应的 JavaScript 代码来实现。

阅读全文