什么是 docsify-tools
docsify-tools 是一个基于 npm 包的文档构建工具，使用它可以快速地创建一份美观简洁的文档页面。它是 docsify 的扩展，为其提供了一些更为方便的功能。
如何安装
我们首先需要使用 npm 将它安装到我们的本地项目中：
npm install docsify-tools --save-dev
如何使用
在我们的项目中，我们需要创建一个 docs 目录，其中包括我们所需要的文档文件，如 index.html、README.md 等。在 docs 目录下，我们可以创建一个名为 _sidebar.md 的文件，这个文件将作为我们文档页面的目录树。
- [首页](/) - [快速上手](quickstart.md) - [安装](quickstart.md#安装) - [使用](quickstart.md#使用) - [文档](doc.md) - [功能介绍](doc.md#功能介绍) - [示例代码](doc.md#示例代码)
这个文件中的内容将作为目录树，方便我们浏览整个文档。
接下来，我们在我们的项目中的任何 HTML 页面中插入以下代码即可：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- --------- --------------------- ----- ---------------- --------------------------------------------------------------- ------- ------ ---- --------------- ------- ----------------------------------------------------------------------- ------- ------------------------------------------------------------------------------------ -------- --- ------ - - ------------ ----- --------- ----- --------- ------ - --- ------------ - ------------------- --------------------------- --------- ------- -------展开代码
在这里我们引入了 docsify 和 docsify-tools 两个 JavaScript 文件，并在正文中运行了 docsifyTools.render(config)。
这里我们还需要注意一个非常重要的点，就是 basePath 参数的设定。假如我们在项目的根目录下创建了 docs 目录，那么这个参数值为 'docs'。这个设置告诉了 docsify-tools 从哪里开始读取我们的文档内容。
接下来，我们的文档页面就完成了。我们可以通过浏览器打开这个页面，即可看到我们的文档了。
如何定制页面
我们可以在 config 中为 docsifyTools.render() 方法传输一些其他参数用于定制页面。如：
- container: 我们的文档将插入页面中的哪个 HTML 元素。
- loadSidebar: 页面中是否加载目录树。
- auto2top: 在页面切换时，是否自动滚动到页面头部。
- subMaxLevel: 目录树的最大层级。
- relativePath: 如果我们不想使用 basePath，那么就可以将这个路径作为文档路径的相对路径。
var config = { container: '#app', loadSidebar: true, auto2top: true, subMaxLevel: 2, relativePath: true };
实际应用
好了，现在我们已经了解了 docsify-tools 的基本用法及其参数设置。接下来，我们可以结合一个实际项目来演示一下它的应用场景。
假设我们正在开发一个管理后台，在这个后台中有非常多的表格需要管理，我们展示这些表格时，经常需要对表格进行一些排序和筛选操作。如果我们想要在页面中内嵌一个可搜索、可排序、可筛选的表格，我们可以使用 ag-Grid 插件。
但是在文档编写时，我们又该如何介绍 ag-Grid 的使用呢？
这时候，docsify-tools 就派上用场了。我们可以编写一个 demo，提供代码、使用方法等信息。
- 在 docs 目录下新建一个 table.md 文件：
-- -------------------- ---- ------- - ------- ------ ------- ---------------------------------- --- ------------- ------- - ---------- ------------------- ------- ------ ------- ------- --------------------------------------------------------------------------------- ----- ---------------- ------------------------------------------------------------------- ----- ---------------- ---------------------------------------------------------------------------展开代码
接下来，我们将创建并配置 ag-Grid。
-- -------------------- ---- ------- --- ----------- - - ----------- - - ------ ------ -- - ------ ------- -- - ------ ------- - -- -------- - - ----- --------- ------ --------- ------ ----- -- - ----- ------- ------ --------- ------ ----- -- - ----- ---------- ------ --------- ------ ----- - -- -------------- - ---------- ----- ------- ----- --------- ---- -- ----------- ----- ------------------- - -- -- - --- --------- ------- ------------- - -------- -- - --- ------- - ---------------------------------- --- -------------------- ------------- -展开代码
这里的 gridOptions 可以像这样部分定制：
- columnDefs：列的定义。
- rowData：表格中的数据。
- defaultColDef：列的默认设置。
- pagination：是否开启分页。
- paginationPageSize：分页时每页的最大行数。
这份代码将会在一个 id 为 myGrid 的元素中创建一个 ag-Grid 的表格。
使用这个例子，我们演示了 ag-Grid 的样式、配置，以及给出了一份简短的使用说明。
这里可以看一个完整的 demo。
-- -------------------- ---- ------- - - ---- ------- ----------- --------- ---- -------- ----------- - ------- - --------------------- - ---------------------- - ---------------------- - ------------ - ------------------- - ------------------- - ----------------展开代码
- 在项目的根目录下编写一个 HTML 页面，引用必要的 CSS、JavaScript 文件：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- --------- --------------------- ----- ---------------- --------------------------------------------------------------- ---- -- ------- ----- --- ----- ---------------- ------------------------------------------------------------------- ----- ---------------- --------------------------------------------------------------------------- ------- ------ ---- --------------- ------- ----------------------------------------------------------------------- ------- ------------------------------------------------------------------------------------ ------- --------------------------------------------------------------------------------- -------- --- ------ - - ------------ ----- --------- ----- --------- ------ - --- ------------ - ------------------- --------------------------- --------- ------- -------展开代码
好了，现在我们可以通过浏览器访问这个文档页面，查看我们编写的 ag-Grid 的使用文档了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedca32b5cbfe1ea06123bc
