一、背景简介
Hexo 是一个快速、简洁且高效的博客框架。它使用 Node.js 编写并且可以借助大量的 npm 包扩展其功能。hexo-title-hash 是其中一款适用于 Hexo 的 npm 包，它可以为文章标题添加自动生成的锚点链接，提高网站的用户体验和 SEO 效果。
二、下载和安装
使用 npm 可以非常方便地下载和安装 hexo-title-hash 包，只需在终端输入以下命令即可：
npm install hexo-title-hash --save
三、配置
在 Hexo 的 _config.yml 中，需要添加 hexo-title-hash 的配置信息，例如：
hexo-title-hash: enable: true selector: 'h1,h2,h3,h4,h5,h6' style: 'visibility: hidden; display: block; position: absolute; top: -50px;'
其中 enable 表示是否启用 hexo-title-hash 包，默认为 true。selector 用于指定需要添加锚点的标题元素，可以是 h1、h2、h3、h4、h5 或 h6。style 则定义了锚点链接的样式。
四、使用
在文章中使用 hexo-title-hash 包非常简单，只需要在需要生成锚点的标题前添加 {#} 符号即可，例如：
# {#}这是文章标题在网页中，生成的锚点链接会带有与标题相同的 ID，例如：
<a href="#这是文章标题" class="titlehash-link"></a>
五、示例代码
以下是一个示例页面的 HTML 代码，可以看到 hexo-title-hash 自动生成了标题的锚点链接：
-- -------------------- ---- ------- --------- ----- ------ ------ ------ ---------------- ------------ ----- ---- ------------ ------- ------ --- ---------------------------- ---------------------------- --------------------------------------- ----- ---- --------- --------- --------------- ---------- --- ------------ ---------- ---------------------------------------- ------ --------------- ------------------ --- ------- --- ------------ ---------- ---------------------------------------- ---- ---- - ----------- ----- --------------- ---------- ------- -------
六、总结
通过本文的介绍和示例，我们了解了如何使用 hexo-title-hash 包为 Hexo 博客中的文章标题添加锚点链接。除了提高用户阅读体验和 SEO 效果之外，hexo-title-hash 还可以提高网站的可访问性，帮助阅读器和屏幕阅读器更好地解析网页。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005569181e8991b448d35a3