markdown-navbar更改data-id

要更改 `markdown-navbar` 组件中生成的导航链接的 `data-id` 属性，你可以使用 `remark` 和 `remark-slug` 插件来为 markdown 中的标题添加自定义的 `slug`，然后在 `markdown-navbar` 中使用 `slug` 来覆盖默认的 `id` 和 `data-id` 属性。

以下是一个示例代码：

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 代码来实现。