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

发布于：2025-07-12 ⋅ 阅读:(16) ⋅ 点赞:(0)

Docisify部署

部署环境

环境默认已安装Node.js

  1. 全局安装docsify-cli
npm i docsify-cli -g

在这里插入图片描述

  1. 初始化
1. 想新建一个文件夹：docsify init ./docs
2. 不想新建一个文件夹：docsify init
  1. 目录结构
|-- docs
	|-- index.html 	入口
	|-- README.md 	主页
  1. 预览网站
默认3000端口：docsify serve 
指定3001端口：docsify serve -p 3001

配置

一、添加Loading

修改index.html

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

二、定制侧边栏

  1. 新建_sidebar.md用以配置侧边栏

  2. 修改index.html，配置loadSidebar属性为true

<script>
    window.$docsify = {
      name: '',
      repo: '',
      loadSidebar: true
    }
</script>
  1. 编写侧边栏文件_sidebar.md。示例：
- [首页](/) 
- [快速入门](快速入门.md)

在这里插入图片描述

三、多级文档嵌套

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

在这里插入图片描述

_sidebar.md文件内容

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

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

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

效果

在这里插入图片描述

四、定制导航栏

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

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

五、引入标签

修改index.html

 <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

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

修改index.html

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

七、剪贴板插件

修改index.html

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

八、分页导航

修改index.html

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

九、字数统计插件

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

修改index.html

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

完整示例

<!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>

在这里插入图片描述

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布