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

插件列表

  • 编辑 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)

参考

  1. docsify
相关推荐
watersink4 小时前
基于大模型的pc版语音对话问答
ide·macos·xcode
Alger_Hamlet4 小时前
OmniGraffle Pro for Mac思维导图
macos
Alger_Hamlet4 小时前
Ae After Effects2024 for Mac 视频处理
macos
Python之栈4 小时前
Python 3.13 正式支持 iOS:移动开发的新篇章
python·macos·objective-c·cocoa
白熊1885 小时前
Mac 本地化部署 dify
macos·dify
Alger_Hamlet17 小时前
Mac电脑 鼠标右键助手 像windows的右键菜单
windows·macos·计算机外设
风吹草地现牛羊的马1 天前
mac m1/m2/m3 pyaudio的安装
深度学习·macos·自然语言处理·#pyaudio
文公子WGZ1 天前
Razer macOS v0.4.10快速安装
macos
Macle_Chen1 天前
XCode中使用MonkeyDev开发iOS版的Comand-line Tool的daemon程序
macos·ios·xcode·逆向·comand-line
Unlimitedz2 天前
iOS GCD
macos·ios·cocoa