如何向 docusaurus 中的元素添加 id ？

Question

他们在文档中对此进行了解释，但这仅适用于标题 标题。

我还读到，通常这是通过 [Some Text](/some/text/etc){#ID} 实现的（在 vanilla md 中），但在 Docusaurus 中这似乎并非如此去工作。

Answer 1

要添加 docusaurus 可以链接到的随机内联锚点（带有 id 标签），而不会收到 onBrokenAnchors 警告，这就是我所做的：

1. 我制作了一个名为 的文件>Anchor.js 带有 JSX 组件。
2. 在该文件中，我导入并使用了 useBrokenLinks docusaurus 模块我认为它是内置于 docusaurus 中的。它使用了 useBrokenLinks 返回的对象的 .collectAnchor() 方法。
3. 我将 .md 文件更改为 .mdx 文件。
4. 在 .mdx 文件中，我导入了 Anchor.js 组件并使用它来创建具有 id 的元素。

/docs/components/Anchor.js:

import useBrokenLinks from '@docusaurus/useBrokenLinks';

export function Anchor(props) {
  useBrokenLinks().collectAnchor(props.id);
  return <span style={{scrollMarginTop: "var(--ifm-navbar-height)"}} {...props}/>;
}

/docs/docs_page.mdx:

import { Anchor } from "/docs/components/Anchor.js";

If you want to [read more details about this](#details).

...other content

These are <Anchor id="details">the details</Anchor>:

1. Detail 1
2. Detail 2

您可以看到我还向 Anchor 组件添加了内联样式 (style={{scrollMarginTop: "var(- -ifm-navbar-height)"}})。如果没有这种风格，每当有人访问该锚点时，链接就会被网站的导航栏掩盖。

文档现在不谈论 .collectAnchor()，只是谈论 .collectLink()，所以也许有一些理由避免 .collectAnchor() code>，但我认为它们都只是让 docusaurus 将锚点放在其锚点列表上，以便 docusaurus 跟踪内联锚点，就像跟踪标题一样。到目前为止，它对我来说效果很好。

与 .collectLink() 相比，我更喜欢 .collectAnchor()，原因如下：

1. 我可以在更少的地方使用 Anchor 组件。如果我必须使用链接类型组件，我就必须在每个链接上使用它。指向这些锚点的链接比实际锚点本身还要多。
2. Anchor 组件更容易维护，因为如果我想更改 id，我只需在一处编辑 id - 重要的地方 -然后我会收到有关任何过期链接的有用 onBrokenAnchors 警告。如果我为每个单独的链接使用 .collectLink() 组件，则链接永远不会知道某些内容已损坏。