文章目录

前言
docsify

前言

业精于勤，荒于嬉；行成于思，毁于随。— 韩愈 ·《进学解》

以个人从业前端开发好几年的经验来看，很多开发技巧和功能模块都会出现记忆模糊的情况，也就说好记性不如烂笔头，能够把个人遇到的，或者是感兴趣的都记录下来，慢慢沉淀自己，对每个人来说学会记录都是一种进步。况且再此遇到同样的事情时，可以根据记录快速找出所需要的答案来。

咱以前没有大佬指导，并不晓得有所记录。最近也发现很多东西是需要记录下来才行的，不然那天就忘记啦。
所以呢，本文介绍开启个人博客之旅，一起来记录自己遇到的有趣的知识吧～

An awesome content for Docsify

docsify

docsify入门

 快速开始/环境安装

 页面配置

 定制化

 GiteePages部署

一、docsify入门

1、简介

docsify 可以快速帮你生成文档网站。不同于 GitBook、Hexo 的地方是它不会生成静态的 .html 文件，所有转换工作都是在运行时。如果你想要开始使用它，只需要创建一个 index.html 就可以开始编写文档并直接部署。

官网地址：https://docsify.js.org/#/zh-cn/

2、特性

无需构建，写完文档直接发布
容易使用并且轻量 (压缩后 ~21kB)
智能的全文搜索
提供多套主题
丰富的 API
支持 Emoji
兼容 IE11
支持服务端渲染

二、快速开始/环境安装

1.安装docsify-cli工具

npm i docsify-cli -g
or
yarn global add docsify-cli

2.初始化项目

docsify init

生成以下文件

类型	描述
index.html	入口文件
README.md	会做为主页内容渲染
.nojekyll	用于阻止 GitHub Pages 忽略掉下划线开头的文件

3.本地预览

docsify serve
or指定端口
docsify serve -p 80

4.Loading 提示

<!-- 初始化时会显示 Loading... 内容，你可以自定义提示信息。直接修改index.html文件。 -->
<div id="app">加载中...</div>

<!-- 如果更改了 el 的配置，需要将该元素加上 data-app 属性 -->
<div data-app id="main">加载中...</div>
<script>
    window.$docsify = {
      
      
        el: '#main'
    }
</script>

三、页面配置

1、定制单页面

服务器启动，渲染的就是README.md的内容，要改变页面内容，只需要修改它，语法就是MarkDown语法，保存就会自动渲染刷新，不需要重启服务。

2、定制多页面

如果需要创建多个页面，或者需要多级路由的网站，在 docsify 里也能很容易的实现。例如创建一个 a.md 文件，那么对应的路由就是 /#/a
假设你的目录结构如下：

.
└── docs
    ├── README.md
    ├── a.md
    └── b
        ├── README.md
        └── d.md

那么对应的访问页面将是：

docs/README.md        => http://domain.com
docs/a.md         => http://domain.com/a
docs/b/README.md  => http://domain.com/b/
docs/b/c.md   => http://domain.com/b/c

（1）定制侧边栏

首先修改index.html配置文件，配置loadSidebar 选项

<script>
    window.$docsify = {
    
    
        loadSidebar: true
    }
</script>

创建文件夹a，里面添加a.md，再创建文件夹b，文件b.md
创建 _sidebar.md 文件，内容如下

* [a页面](a/a)
* [b页面](b/b)

默认显示主页，点击各页面显示各页面

（2）嵌套的侧边栏

在需要子侧边栏的文件夹里面重复（1）操作，以此类推

（3）页面标题显示设置

一个页面的 title 标签是由侧边栏中选中条目的名称所生成的。你可以修改_sidebar.md在文件名后面指定页面标题。

* [A页面](a/a "a页面Title")

（4）页面显示目录层级设置

在index.html种配置参数subMaxLevel为2

<script>
    window.$docsify = {
    
    
        subMaxLevel: 2 // 显示md文件#层级 
    }
</script>

（5）设置不显示目录

设置了 subMaxLevel 时，默认情况下每个标题都会自动添加到目录中。如果你想忽略特定的标题，可以修改_sidebar.md给它添加，要忽略特定页面上的所有标题，你可以在页面的第一个标题上使用。

例如

# docsify<!-- {docsify-ignore-all} -->
## 一、docsify入门 <!-- {docsify-ignore} -->

3、定制导航栏

（1）HTML创建导航栏

直接在index.html加上导航标签

<body>
    <nav>
        <a href="vue/"></a>
        <a href="react/"></a>
    </nav>
</body>

（2）通过配置文件来配置

在index.html配置导航栏参数loadNavbar（此配置会覆盖html的

<script>
    window.$docsify = {
    
    
        loadNavbar: true
    }
</script>

添加配置文件_navbar.md来配置导航栏，内容和侧边栏配置文件是一样的，效果同上

（3）导航嵌套

配置文件_navbar.md如下

* vue

  * [vue2](vue/README)
  * [vue3](vue/README)

* react
  * [react](react/README)

（4）导航中用emoji表情

在index.html引入emoji包

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

在导航文件直接使用，表情可参考网站https://www.emojiall.com/zh-hans

* vue

  * [:cn:vue2](vue/README)
  * [:us:vue3](vue/README)

* react
  * [:ru:react](react/README)

4、定制封面

（1）基本用法

在index.html中配置参数 coverpage开启封面。通常封面和首页是同时出现的，设置了onlyCover=true之后封面就独立成封面。

<script>
    window.$docsify = {
    
    
        coverpage: true,
        onlyCove: true
    }
</script>

添加配置文件_coverpage.md 来配置封面，添加logo文件夹media里面放logo图片logo.jpg

![logo](media/logo.jpg)

# 大佬的个人网站

> 分享技术，热爱技术

- 指尖有改变世界的力量
- 开源成就美好
- 书山有路勤为径

[GitHub](https://)
[Gitee](https://gitee.com/)
[Get Started](vue/README)

（2）自定义背景

目前的背景是随机生成的渐变色，我们自定义背景色或者背景图。在文档末尾用添加图片的 Markdown 语法设置背景。

![logo](media/logo.jpg)

# 大佬的个人网站

> 分享技术，热爱技术

- 指尖有改变世界的力量
- 开源成就美好
- 书山有路勤为径

[GitHub](https://)
[Gitee](https://gitee.com/)
[Get Started](vue/README)

<!-- 背景图片 -->
![](img/img.png)
<!-- 背景图片 -->
![color](#dferfg)

四、定制化

1、更换主题

如果我们要更换主题，只需要替换index.html中 css 样式文件即可。

  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css">
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/buble.css">
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/dark.css">
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/pure.css">
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/dolphin.css">

2、搜索插件

全文搜索插件会根据当前页面上的超链接获取文档内容，在 localStorage 内建立文档索引。默认过期时间为一天。

// 在index.html配置搜索插件

window.$docsify = {
    
    
    search: 'auto', // 默认值
    // 完整配置参数
    search: {
    
    
        maxAge: 86400000,//过期时间,单位毫秒,默认一天
        paths: [], // or 'auto'
        placeholder: '请输入搜索关键字',
        noData: '没有搜到呦!',
        depth:2
    }
}
// 在index.html添加js
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>

3、剪贴板插件

在所有的代码块上添加一个简单的Click to copy按钮来允许用户从你的文档中轻易地复制代码。

// 只需要在index.html中添加js
<script src="//cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js"></script>

4、分页导航插件

// 只需要在index.html中添加js
<script src="//cdn.jsdelivr.net/npm/docsify-pagination/dist/docsify-pagination.min.js"></script>

5、字数统计插件

// 在index.html添加配置
window.$docsify = {
    
    
  count:{
    
    
    countable:true,
    fontsize:'0.9em',
    color:'rgb(90,90,90)',
    language:'chinese'
  }
}
<script src="//unpkg.com/docsify-count/dist/countable.js"></script>

五、GiteePages部署

1、Gitee配置Gitee Pages

第一次配置需要实名认证，上传身份证正反面，手持身份证照片。

部署选择你要部署的分支，部署的目录就是docsify对应仓库中的目录，我这边是整个仓库作为docsify目录，建议强制使用https勾选，然后就可以启动。

具体位置截图如下

在这里插入图片描述

注意，有时候内容不规范可能会出现违禁违规内容