【工具集】使用Docsify搭建个人博客

Docisify部署

部署环境

环境默认已安装Node.js

全局安装docsify-cli

html 复制代码

npm i docsify-cli -g

初始化

java 复制代码

1. 想新建一个文件夹：docsify init ./docs
2. 不想新建一个文件夹：docsify init

java 复制代码

|-- docs
	|-- index.html 	入口
	|-- README.md 	主页

预览网站

java 复制代码

默认3000端口：docsify serve 
指定3001端口：docsify serve -p 3001

配置

一、添加Loading

修改index.html

复制代码

<div id="app">全力加载中...</div>

二、定制侧边栏

新建_sidebar.md用以配置侧边栏
修改index.html，配置loadSidebar属性为true

js 复制代码

<script>
    window.$docsify = {
      name: '',
      repo: '',
      loadSidebar: true
    }
</script>

编写侧边栏文件_sidebar.md。示例：

ma 复制代码

- [首页](/) 
- [快速入门](快速入门.md)

三、多级文档嵌套

例如：在Docsify文件夹下新建子级文件夹mongoDB

_sidebar.md文件内容

复制代码

- [首页](/) 
- [快速入门](快速入门.md)
- [MongoDB](mongoDB/mongoDB.md)
  - 二级A
  - 二级B

设置菜单展示级数，最多支持四级

html 复制代码

<script>
    window.$docsify = {
      subMaxLevel: 4
    }
</script>

效果

四、定制导航栏

直接在index.html加上导航标签（内部文档链接必须以#开头）

html 复制代码

<nav>
    <a href="#/mongoDB/mongoDB">MongoDB</a>
    <a href="#/guide/guide">指南</a>
</nav>

五、引入标签

修改index.html

js 复制代码

 <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/emoji.min.js"></script>

表情网站：https://www.emojiall.com/zh-hans

_sidebar.md内容：

复制代码

- [首页](/) 
- [😀快速入门](快速入门.md)
- [MongoDB](mongoDB/mongoDB.md)
  - 二级A
  - 二级B

效果

六、搜索插件

修改index.html

html 复制代码

<script>
    window.$docsify = {
      name: 'WangG的文档',
      repo: '',
      loadSidebar: true,
      subMaxLevel: 4,
      search: 'auto',
      search: {
        maxAge: 86400000,// 过期时间，单位毫秒，默认一天
        paths: [],
        placeholder: '请输入搜索关键字',
        noData: '没有搜到呦',
        depth: 4
      }
    }
</script>

修改index.html

html 复制代码

<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>

七、剪贴板插件

修改index.html

html 复制代码

<script src="//cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js"></script>

八、分页导航

修改index.html

html 复制代码

<script src="//cdn.jsdelivr.net/npm/docsify-pagination/dist/docsify-pagination.min.js"></script>

九、字数统计插件

html 复制代码

window.$docsify = {
  count:{
    countable:true,
    fontsize:'0.9em',
    color:'rgb(90,90,90)',
    language:'chinese'
  }
}

修改index.html

html 复制代码

<script src="//unpkg.com/docsify-count/dist/countable.js"></script>

完整示例

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>我的文档</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="#/mongoDB/mongoDB">MongoDB</a>
    <a href="#/guide/guide">指南</a>
  </nav>
  <div id="app">全力加载中...</div>
  <script>
    window.$docsify = {
      name: 'WangG的文档',
      repo: '',
      loadSidebar: true,
      // 展示标题层级
      subMaxLevel: 1,
      // 搜索
      search: 'auto',
      search: {
        maxAge: 86400000,// 过期时间，单位毫秒，默认一天
        paths: [],
        placeholder: '请输入搜索关键字',
        noData: '没有搜到呦',
        depth: 4
      },
      // 字数统计
      count:{
        countable:true,
        fontsize:'0.9em',
        color:'rgb(90,90,90)',
        language:'chinese'
      }
    }
  </script>
  <!-- Docsify v4 -->
  <script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
  <!-- 表情插件 -->
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/emoji.min.js"></script>
  <!-- 搜索插件 -->
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
  <!-- 剪贴板 -->
  <script src="//cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js"></script>
  <!-- 分页导航 -->
  <script src="//cdn.jsdelivr.net/npm/docsify-pagination/dist/docsify-pagination.min.js"></script>
  <!-- 字数统计 -->
  <script src="//unpkg.com/docsify-count/dist/countable.js"></script>
</body>
</html>