为标题添加 ID

这里有一个两秒钟的回顾。 如果一个元素有 ID，您可以使用浏览器的自然行为链接到它。 标题有 ID 非常棒，因为直接链接到特定内容部分通常很有用。

<h3 id="step-2">Step 2</a>

如果我愿意，我可以直接链接到此标题，无论是通过 URL，例如 https://my-website.com/#step-2，还是通过页面内链接，例如

<a href="#step-2">Jump to Step 2</a>

因此，所有标题都有唯一的 ID 是理想的。

但我发现手动为所有标题添加 ID 太费事了。 很多年来，我一直使用这个网站上的 jQuery 来做到这一点（别告我）。

// Adjust this for targetting the headers important to have IDs
const $headers = $(".article-content > h3");

$headers.each((i, el) => {
  const $el = $(el);

  // Probably a flexbox layout style page
  if ($el.has("a").length != 0) {
    return;
  }

  let idToLink = "";

  if ($el.attr("id") === undefined) {
    // give it ID
    idToLink = "article-header-id-" + i;
    $el.attr("id", idToLink);
  } else {
    // already has ID
    idToLink = $el.attr("id");
  }

  const $headerLink = $("<a />", {
    html: "#",
    class: "article-headline-link",
    href: "#" + idToLink
  });

  $el.addClass("has-header-link").prepend($headerLink);
});

该脚本除了添加 ID（如果它还没有 ID）之外，还在标题内添加了一个 # 链接，该链接指向该标题。 这样做的目的是为了证明标题确实有 ID，并且方便了右键单击复制链接等操作。 这里有一个演示，如果您想查看。

问题！ 突然间，它停止工作了。

不是脚本本身，脚本工作正常。 但是，允许浏览器在页面加载时跳转到标题的原生浏览器行为已损坏。 我想这可能是一个竞争条件。

1. HTML 到达
2. 页面开始渲染
3. 浏览器正在寻找 URL 中的 ID 以滚动到该位置
4. 它没有找到它……
5. 哦，等等，它就在那里！
6. 滚动到那里。

哦，等等，它就在那里！ 这一步来自脚本执行并把 ID 添加到标题上。 我真的不怪浏览器没有跳转到动态插入的链接。 我很惊讶它能工作这么长时间。

在 HTML 到达之前就让标题上有 ID 要好得多。 这个网站是 WordPress，我知道我可以使用某种内容过滤器来做到这一点。 事实证明，我甚至不需要费心，因为当然，有一个插件可以做到这一点：Karolína Vyskočilová 的 Add Anchor Links。 对我来说效果很好。 它的技术是在锚点链接本身添加 ID，这也是完全可以的。 我想这是另一种避免弄乱现有 ID 的方法。

如果我没有 WordPress，我会找到其他方法来在服务器端处理 HTML，以确保以某种方式发生某种标题链接。 总是会有办法的。 事实上，如果在构建过程中或在服务器端过滤器中这样做太奇怪、太麻烦或其他什么，我会考虑在服务工作者中完成它。 我一直玩得很好玩 Cloudflare 的 HTMLRewriter，它完全能够做到这一点。