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
相关推荐
穆雄雄2 小时前
备份一下我的 mac mini 的环境变量配置情况
macos
秃然想通14 小时前
mac电脑搭载c、c++环境(基于vs code)
macos
归辞...14 小时前
「iOS」——GCD其他方法详解
macos·ios·cocoa
啊啊啊~~21 小时前
新mac电脑软件安装指南(前端开发用)
macos·node·n·oh my zsh·solarized
lm down21 小时前
ComfyUI中运行Wan 2.1工作流,电影级视频,兼容Mac, Windows
人工智能·macos·ai作画·视频
天安彩21 小时前
mac下 vscode 运行 c++无法弹出窗口
c++·vscode·macos·clang
太阳伞下的阿呆21 小时前
配置Mac/Linux终端启动执行脚本
linux·运维·macos
芦苇Z1 天前
macOS 安装应用软件的三种方式
macos
Digitally1 天前
如何将荣耀手机的照片传输到 Mac
macos·智能手机
Digitally1 天前
如何将 iPhone 备份到 Mac/MacBook
macos·ios·iphone