在将ID添加到标题上

将ID添加到标题中以进行平滑链接

本文解决了与网页（尤其是针对标题的特定部分）建立易于访问链接的挑战。核心概念很简单：具有独特ID的标题允许通过浏览器行为直接链接（例如， https://my-website.com/https://www.php.cn/link/86317a3269e7927536b010c2615aeab5 ://my-website.com/https://www.php.cn/link/86317a3269E79927536B010C2615AEAB5）。

例如，标题：

<h3 id="步骤">步骤2</h3>

可以链接到使用：

<a href="https://www.php.cn/link/86317a3269e7927536b010c2615aeab5">跳到步骤2</a>

虽然手动向所有标题添加ID是乏味的，但作者最初使用jQuery在其网站上自动化此过程。该脚本不仅添加了ID（如果丢失），而且还插入了每个标题中的链接以方便复制链接。

但是，由于种族条件，这种方法被证明是不可靠的：浏览器试图在jQuery脚本添加它之前找到ID。这突出了在页面渲染开始之前，在HTML中存在ID的重要性。

作者的解决方案利用其WordPress网站，涉及一个插件（KarolínaVyskočilová的“添加锚点”），该插件优雅地将ID添加到锚点链接中，避免了与现有ID的冲突。

对于非媒介站点，建议使用服务器端HTML处理（在构建过程或通过服务器端过滤器），以确保ID在初始HTML中包含。另外，一个可能利用Cloudflare的HTMLwrewriter等工具的服务工作者提供了客户端的解决方案来实现相同的结果。关键是要在浏览器启动其链接行为之前确保ID可用。

以上是在将ID添加到标题上的详细内容。更多信息请关注PHP中文网其他相关文章！