在前端开发中,经常会使用到 GitBook 来编写技术文档,而 gitbook-plugin-anchor-navigation-ex-eus 这个 npm 包则可以为 GitBook 添加锚点导航功能,在阅读文档时可以方便地跳转到指定位置。本文详细介绍 gitbook-plugin-anchor-navigation-ex-eus 的使用方法,以及如何在 GitBook 中启用和配置该插件。
1. 安装
首先需要在本地全局安装 GitBook:
npm install gitbook-cli -g
接着,通过 npm 安装 gitbook-plugin-anchor-navigation-ex-eus:
npm install gitbook-plugin-anchor-navigation-ex-eus --save-dev
其中 --save-dev
表示将该包作为项目的开发依赖安装,因为该插件只用于开发文档。
2. 配置
在 GitBook 项目目录下的 book.json
文件中添加插件配置:
-- -------------------- ---- ------- - ---------- ----------------------------- ---------------- - --------------------------- - --------------- ------ ----------- ----- ------------ ----- -------------- ---- - - -
以上配置参数的含义如下:
allowRepeats
: 是否允许同一标题被重复锚点,默认为false
contents
: 导航列表标题,默认为Table of Contents
hideIndex
: 是否隐藏导航列表的索引(数字编号),默认为true
scrollToTop
: 是否启用回到顶部按钮,默认为true
3. 使用
配置完毕后,启动 GitBook 预览即可看到添加了锚点导航的效果。
注意,插件默认只能为一级标题(h1
)和二级标题(h2
)生成锚点导航。如果需要为其他级别的标题生成锚点导航,可以使用以下语法:
### [1.2] 这是一个三级标题
其中 [1.2]
表示该标题的编号,该编号将用于在导航列表中显示该标题的顺序。在 allowRepeat
参数为 false
时,编号会自动根据已有的标题编号生成。
另外,如果想要在一段文字中添加跳转链接,可以使用以下语法:
这是一段[跳转链接](#anchor-id)的文字。
其中 anchor-id
表示要跳转到的标题的 ID 属性值。该属性值应该与标题中的文本相同,以保证正确的跳转。如果需要为标题添加 ID 属性,可以在标题后面使用以下语法:
# 这是一个标题 {#anchor-id}
注意花括号 {}
的使用方式。
4. 示例代码
-- -------------------- ---- ------- - -- - ------- -- -- - --------- --- ----- -- - --------- --- ----- -- - ---------- -------------------------- - ---- - ---- - --------------------------------------------------------------------------------------------------------------- - -------- -------------------------------- - ------------------------------------------------------------------------------ -------- ------------------------------------------------------------------------------------------------------------------------