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
相关推荐
Dachui_11229 小时前
MacOS上如何运行内网穿透详细教程
macos
Bruce_Liuxiaowei11 小时前
使用Python脚本在Mac上彻底清除Chrome浏览历史:开发实战与隐私保护指南
chrome·python·macos
iFlyCai13 小时前
对Mac文字双击或三击鼠标左键没有任何反应
macos·计算机外设
請你喝杯Java1 天前
Mac上Cursor无法安装插件解决方法
macos·cursor·vsode
网络之路Blog1 天前
【实战中提升自己】内网安全部署之端口隔离与MAC地址认证
安全·macos·网络之路一天·华为华三数通基础·华为华三企业实战架构·华为中小型企业实战·华为华三计算机网络基础
心随_风动1 天前
主流操作系统对比分析(macOS、Linux、Windows、Unix)
linux·windows·macos
lxw18449125141 天前
macOS 系统设置息屏情况下,PHP等后台脚本继续执行
macos
Brian_Lucky1 天前
在 macOS 上合并 IntelliJ IDEA 的项目窗口
java·macos·intellij-idea
未来之窗软件服务1 天前
声音分离人声和配乐-从头设计数字生命第5课, demucs——仙盟创梦IDE
ide·macos·xcode·仙盟创梦ide·数字生命
我该如何取个名字2 天前
Mac mini 安装mysql数据库以及出现的一些问题的解决方案
数据库·mysql·macos