使用Docsify快速搭建目录网站

Docsify 使用方法

1. 安装并初始化

在命令行中输入以下命令：

npm i docsify-cli -g

安装完成后，使用以下命令初始化项目：

docsify init ./docs

其中，./docs指定了文档存放的位置，也可以指定为其他路径。

1. 编写文档

将 Markdown 格式的文档放置在./docs目录下即可，docsify 会自动将其转换为网站。

1. 本地预览

使用以下命令启动本地服务：

docsify serve ./docs

访问http://localhost:3000就可以在本地预览文档网站了。

1. 部署到远端

可以使用 Github Pages 等静态网站托管平台将文档网站部署到远端，具体方式可参考相应平台的文档。

API 用法及示例

API 一览

以下是 docsify 提供的 API 及其用法：

• docsify.dom.getNode(selector, parentEl): 获取匹配选择器的第一个节点。
• docsify.dom.getNodes(selector, parentEl): 获取匹配选择器的所有节点。
• docsify.dom.toggleClass(el, className, force): 切换节点的 class 属性。当force为 true 时强制添加 class，为 false 时强制删除 class，不指定时则自动判断。
• docsify.util.extend(target, ...sources): 对象合并，将多个对象的属性合并到第一个对象中。
• docsify.util.debounce(func, wait, immediate): 函数去抖，将频繁调用的函数延迟到指定时间后执行。
• docsify.util.throttle(func, wait, options): 函数节流，将高频率事件的响应时间间隔控制在指定时间内。
• docsify.util.getAndDecode(uri): 获取指定 url 的内容并解码为字符串。
• docsify.util.toHtml(str, replace): 将 markdown 格式的文本转化为 html 格式，可通过 replace 参数自定义转换规则。
• docsify.util.encodeHTML(str): 将指定文本中的特殊字符转义为 html 实体。

API 示例

以下是 docsify 提供的 API 示例：

1. docsify.dom.getNode(selector, parentEl)示例

<div class="example">
  <p>这是一个段落</p>
  <p class="target">这是要查找的节点</p>
</div>

const targetEl = docsify.dom.getNode(
  ".target",
  document.querySelector(".example")
);
// 获取class为example下class为target的节点

1. docsify.dom.getNodes(selector, parentEl)示例

<ul class="example">
  <li>第一项</li>
  <li class="target">第二项</li>
  <li class="target">第三项</li>
</ul>

const targetEls = docsify.dom.getNodes(
  ".target",
  document.querySelector(".example")
);
// 获取class为example下所有class为target的节点数组

1. docsify.dom.toggleClass(el, className, force)示例

<div class="example">这是一个div</div>

const exampleEl = document.querySelector(".example");
docsify.dom.toggleClass(exampleEl, "active");
// 给class为example的节点添加class为active

docsify.dom.toggleClass(exampleEl, "hidden", true);
// 给class为example的节点强制添加class为hidden

docsify.dom.toggleClass(exampleEl, "active", false);
// 给class为example的节点强制删除class为active

1. docsify.init(fn)

初始化函数，该函数会在网页加载时触发。可以在该函数内部添加一些逻辑控制，比如监控文档的变化等。示例代码如下：

docsify.init(function () {
  // 初始化逻辑
});

1. docsify.count(el, container, reverse)

计算容器 container 中的容器 el 相对于视口的位置。可以通过 reverse 参数将相对位置反转。示例代码如下：

var el = document.getElementById("myElement");
var container = document.querySelector(".container");

var offset = docsify.count(el, container, false);

1. docsify.scrollTo(element, index)

滚动到指定元素中的高亮索引处。该 API 可以在文档发生变化时重新定位当前位置，非常实用。示例代码如下：

var element = "#my-element";
var index = 0;

docsify.scrollTo(element, index);

1. docsify.get(source)

异步获取 Markdown 文件，返回一个 Promise，可以使用该函数自定义 Markdown 文件的获取方法，比如请求远程 API 或本地文件。示例代码如下：

docsify.get("/path/to/file.md").then(function (content) {
  console.log(content);
});

1. docsify.util.debounce(func, wait)

用于函数去抖，可以防止在某些高频事件下出现过多的重复操作。示例代码如下：

var myFunction = function () {
  // 一些操作
};

var debouncedFn = docsify.util.debounce(myFunction, 500);

1. docsify.util.isMobile()

判断当前设备是否为移动设备（如手机或平板电脑）。示例代码如下：

if (docsify.util.isMobile()) {
  // 在移动设备上的一些操作
}

1. docsify.util.isPrimitive(type)

判断某个数据类型是否为原始数据类型，比如字符串、数字和布尔值等。示例代码如下：

var isString = docsify.util.isPrimitive("my string");
var isNumber = docsify.util.isPrimitive(123);

这些是 Docsify 中的一些常用 API 及其示例。当然，Docsify 提供的 API 还有很多，可以根据实际需求去查找相关文档。