什么是 docsify-tools
docsify-tools 是一个基于 npm 包的文档构建工具，使用它可以快速地创建一份美观简洁的文档页面。它是 docsify 的扩展，为其提供了一些更为方便的功能。
如何安装
我们首先需要使用 npm 将它安装到我们的本地项目中：
--- ------- ------------- ----------
如何使用
在我们的项目中，我们需要创建一个 docs 目录，其中包括我们所需要的文档文件，如 index.html、README.md 等。在 docs 目录下，我们可以创建一个名为 _sidebar.md 的文件，这个文件将作为我们文档页面的目录树。
- ------- - --------------------- - ---------------------- - ---------------------- - ------------ - ------------------- - -------------------
这个文件中的内容将作为目录树，方便我们浏览整个文档。
接下来，我们在我们的项目中的任何 HTML 页面中插入以下代码即可：
--------- -----
------
------
----- ----------------
--------- ---------------------
----- ---------------- ---------------------------------------------------------------
-------
------
---- ---------------
------- -----------------------------------------------------------------------
------- ------------------------------------------------------------------------------------
--------
--- ------ - -
------------ -----
--------- -----
--------- ------
-
--- ------------ - -------------------
---------------------------
---------
-------
-------在这里我们引入了 docsify 和 docsify-tools 两个 JavaScript 文件，并在正文中运行了 docsifyTools.render(config)。
这里我们还需要注意一个非常重要的点，就是 basePath 参数的设定。假如我们在项目的根目录下创建了 docs 目录，那么这个参数值为 'docs'。这个设置告诉了 docsify-tools 从哪里开始读取我们的文档内容。
接下来，我们的文档页面就完成了。我们可以通过浏览器打开这个页面，即可看到我们的文档了。
如何定制页面
我们可以在 config 中为 docsifyTools.render() 方法传输一些其他参数用于定制页面。如：
- container: 我们的文档将插入页面中的哪个 HTML 元素。
- loadSidebar: 页面中是否加载目录树。
- auto2top: 在页面切换时，是否自动滚动到页面头部。
- subMaxLevel: 目录树的最大层级。
- relativePath: 如果我们不想使用 basePath，那么就可以将这个路径作为文档路径的相对路径。
--- ------ - - ---------- ------- ------------ ----- --------- ----- ------------ -- ------------- ---- --
实际应用
好了，现在我们已经了解了 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