一.前言

docsify是一款文档生成静态页面的轻量级软件,与gitbook相比轻量且更易扩展。
作为一款实时渲染文档为静态网页，其不需要编译静态网页，所以更专注与文档创作。
常见的组合拳 typora + docsify/gitbook + github.pages/gitee.pages 快速搭建私人云文档。
本文先介绍如何快速搭建/使用docsify

二. 安装docsify

step1.安装node环境

a.使用brew安装node(推荐) mac安装brew

# 安装node环境
brew install node

# 查看node状态
node -v

b.下载包安装node(忽略)

step2.配置npm

配置源淘宝源加速（推荐）

# 永久
npm config set registry https://registry.npm.taobao.org
# 临时
npm install -g cnpm --registry=https://registry.npm.taobao.org

安装淘宝cnpm（推荐）

npm install -g cnpm --registry=https://registry.npm.taobao.org

step3.安装docsify

# 使用cnpm安装docsify-cli脚手架
cnpm install i docsify-cli -g
# 查看
docsify -v

三.使用docsify

step0. 常用命令

# 初始化docsify的index.html主页
docsify init <path> [--local false] [--theme vue]
# path 默认是当前目录,可以指定相对目录和绝对目录,将目录下的文件作为文档文件
# --local 默认是false 即使用unpkg.com作为baseurl
# --theme 默认是vue 即使用vue风格 还有buble, dark 和 pure可选

# 启动docsify本地静态网页服务
docsify serve <path> [--open false] [--port 3000]
# path 默认是当前目录,可以指定相对目录和绝对目录,将目录下的文件作为文档文件
# --open 默认是false 即启动不打开网页
# --port 默认是3000 即端口默认3000

# 生成稳定的侧边栏目录（v4.4.3后才支持）
docsify generate <path> [--sidebar _sidebar.md]
# path 默认是当前目录,可以指定相对目录和绝对目录,将目录下的文件作为文档文件
# --sidebar 默认_sidebar.md 将目录下的文档结构生产侧边栏目录

step1. 快速开始

# 1.便携markdown文件到/Users/zyj/a/base

# 2.初始化静态网页到目录/Users/zyj/a
docsify init /Users/zyj/a
# zyj@yujingzhengdeMacBook-Pro  ~/a  ls
# README.md  index.html  base

# 3.生成_sidebar.md
docsify generate /Users/zyj/a
# zyj@yujingzhengdeMacBook-Pro  ~/a  ls
# README.md  index.html  base _sidebar.md

# 4.启动
docsify serve /Users/zyj/a --open

在这里插入图片描述
_sidebar.md 将读取当前目录下的所有md文件

- [README](README.md)
- base
  - [1.go简介](base/1.go简介.md)
  - [2.1腾讯go手册](base/2.1腾讯go手册.md)
  - [2.go规范](base/2.go规范.md)
  - [3.go环境](base/3.go环境.md)
  - [4.1go变量](base/4.1go变量.md)
  - [4.2运算符](base/4.2运算符.md)
  - [4.3流程控制](base/4.3流程控制.md)
  - [4.4函数](base/4.4函数.md)
  - [4.go语法](base/4.go语法.md)

step2. 自定义组件

docsify插件集合和配置项
修改index.html 添加插件

<!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>
  <body>
    <div id="app"></div>
    <script>
      window.$docsify = {
    
    
        name: 'mydoc',       //
        repo: '/',           //渲染github挂件 配置本地或线上地址
        search: 'auto',      //默认的全局搜索 详细参数请看插件文档
        loadSidebar: true,   //开启侧边栏 使用_sidebar.md 
        subMaxLevel: 2,      //侧边栏层级最大层级2
        loadNavbar: true,    //加载导航栏 需要编写_navbar.md
        autoHeader: true    //配合loadSidebar 自动添加标题
      }
    </script>
  <!-- 全文搜索插件 -->
  <script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>
  <!-- 图片缩放插件 -->
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script>
  <!-- 代码拷贝插件 -->
  <script src="//cdn.jsdelivr.net/npm/docsify-copy-code"></script>
  <!-- Docsify v4 -->
  <script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
</body>
</html>