docsify - 技术栈

macos

cpp 复制代码

➜  ~ node -v
v16.20.2

cpp 复制代码

➜  ~ npm --version
8.19.4

全局安装 docsify-cli 工具

cpp 复制代码

npm i docsify-cli -g

cpp 复制代码

➜  ~ docsify -v

docsify-cli version:
  4.4.4

初始化项目

cpp 复制代码

docsify init ./docs

cpp 复制代码

ls -ah docs
.  ..  .nojekyll  README.md  index.html

index.html 入口文件
README.md 会做为主页内容渲染
.nojekyll 用于阻止 GitHub Pages 忽略掉下划线开头的文件

多页文档

本地预览

cpp 复制代码

docsify serve docs

只允许本地访问

cpp 复制代码

cd docs
python3 -m http.server 3000 --bind 127.0.0.1

插件列表

全文搜索 - Search

编辑 index.html

cpp 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="description" content="Description">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css">
</head>
<body>
  <div id="app"></div>
  <script>
    window.$docsify = {
      name: '',
      repo: '',
      search: {
        maxAge: 86400000,           // 过期时间，单位毫秒，默认一天
        paths: 'auto',              // 自动索引所有文档
        placeholder: {
          '/zh-cn/': '搜索',
          '/': 'Type to search'
        },
        noData: {
          '/zh-cn/': '找不到结果',
          '/': 'No Results'
        },
        depth: 6,                   // 搜索标题的最大层级, 1 - 6
        hideOtherSidebarContent: false, // 是否隐藏其他侧边栏内容
        namespace: 'docs-search',    // 避免搜索索引冲突
        pathNamespaces: ['/zh-cn']  // 使用不同的索引作为路径前缀
      }
    }
  </script>
  <!-- Docsify v4 -->
  <script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
  <!-- 搜索插件 -->
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
</body>
</html>

导航栏

修改 index.html 添加导航栏配置和 emoji 插件

cpp 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="description" content="Description">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css">
</head>
<body>
  <nav>
    <a href="#/">EN</a>
    <a href="#/zh-cn/">中文</a>
  </nav>
  <div id="app"></div>
  <script>
    window.$docsify = {
      name: '',
      repo: '',
      loadNavbar: true,  // 启用导航栏
      search: {
        maxAge: 86400000,           // 过期时间，单位毫秒，默认一天
        paths: 'auto',              // 自动索引所有文档
        placeholder: {
          '/zh-cn/': '搜索',
          '/': 'Type to search'
        },
        noData: {
          '/zh-cn/': '找不到结果',
          '/': 'No Results'
        },
        depth: 6,                   // 搜索标题的最大层级, 1 - 6
        hideOtherSidebarContent: false, // 是否隐藏其他侧边栏内容
        namespace: 'docs-search',    // 避免搜索索引冲突
        pathNamespaces: ['/zh-cn']  // 使用不同的索引作为路径前缀
      }
    }
  </script>
  <!-- Docsify v4 -->
  <script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
  <!-- 搜索插件 -->
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
  <!-- emoji 插件 -->
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/emoji.min.js"></script>
</body>
</html>

创建一个 _navbar.md 文件，包含多级导航和 emoji

cpp 复制代码

* [:us: English](/)
* [:cn: 中文](/)

* :book: 文档
  * [项目介绍](/)
  * [快速开始](start-docs.md)

参考

docsify