使用Docsify开启个人博客之旅
文章目录 二、快速开始/环境安装 三、页面配置 3、定制导航栏 4、定制封面 四、定制化 五、部署
前言
业精于勤，荒于嬉；行成于思，毁于随。— 韩愈 ·《 进学解 》
以个人从业前端开发好几年的经验来看，很多开发技巧和功能模块都会出现记忆模糊的情况，也就说好记性不如烂笔头，能够把个人遇到的，或者是感兴趣的都记录下来，慢慢沉淀自己，对每个人来说学会记录都是一种进步。况且再此遇到同样的事情时，可以根据记录快速找出所需要的答案来。
咱以前没有大佬指导，并不晓得有所记录。最近也发现很多东西是需要记录下来才行的，不然那天就忘记啦。
所以呢，本文介绍开启个人博客之旅，一起来记录自己遇到的有趣的知识吧～
An for
入门
快速开始/环境安装
页面配置
定制化
部署
一、入门 1、简介
可以快速帮你生成文档网站。不同于 、Hexo 的地方是它不会生成静态的 .html 文件，所有转换工作都是在运行时。如果你想要开始使用它，只需要创建一个 index.html 就可以开始编写文档并直接部署。
官网地址：#/zh-cn/
2、特性 二、快速开始/环境安装 1.安装-cli工具
npm i docsify-cli -g
or
yarn global add docsify-cli
2.初始化项目
docsify init
生成以下文件
类型描述
index.html
入口文件
.md
会做为主页内容渲染
.
用于阻止 Pages 忽略掉下划线开头的文件
3.本地预览
docsify serve
or指定端口
docsify serve -p 80
4. 提示
<div id="app">加载中...div>
<div data-app id="main">加载中...div>
<script>window.$docsify = {el: '#main'}
script>
三、页面配置 1、定制单页面
服务器启动，渲染的就是.md的内容，要改变页面内容，只需要修改它，语法就是语法，保存就会自动渲染刷新，不需要重启服务。
2、定制多页面
如果需要创建多个页面，或者需要多级路由的网站，在 里也能很容易的实现。例如创建一个 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配置文件，配置 选项
<script>window.$docsify = {loadSidebar: true}
</script>
创建文件夹a，里面添加a.md，再创建文件夹b，文件b.md
创建 .md 文件，内容如下
* [a页面](a/a)
* [b页面](b/b)
默认显示主页，点击各页面显示各页面
（2）嵌套的侧边栏
在需要子侧边栏的文件夹里面重复（1）操作，以此类推
（3）页面标题显示设置
一个页面的 title 标签是由侧边栏中选中条目的名称所生成的。你可以修改.md在文件名后面指定页面标题。
* [A页面](a/a "a页面Title")
（4）页面显示目录层级设置
在index.html种配置参数为2
<script>window.$docsify = {subMaxLevel: 2 // 显示md文件#层级 }
</script>
（5）设置不显示目录
设置了 时，默认情况下每个标题都会自动添加到目录中。如果你想忽略特定的标题，可以修改.md给它添加 ，要忽略特定页面上的所有标题，你可以在页面的第一个标题上使用 。
例如
# docsify
## 一、docsify入门
3、定制导航栏 （1）HTML创建导航栏
直接在index.html加上导航标签
<body><nav><a href="vue/">a><a href="react/">a>nav>
body>
（2）通过配置文件来配置
在index.html配置导航栏参数（此配置会覆盖html的
）
<script>window.$docsify = {loadNavbar: true}
</script>
添加配置文件.md来配置导航栏，内容和侧边栏配置文件是一样的，效果同上
（3）导航嵌套
配置文件.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>
在导航文件直接使用，表情可参考网站
* vue* [:cn:vue2](vue/README)* [:us:vue3](vue/README)* react* [:ru:react](react/README)
4、定制封面 （1）基本用法
在index.html中配置参数 开启封面。通常封面和首页是同时出现的，设置了=true之后封面就独立成封面。
<script>window.$docsify = {coverpage: true,onlyCove: true}
</script>
添加配置文件.md 来配置封面，添加logo文件夹media里面放logo图片logo.jpg
# 大佬的个人网站> 分享技术，热爱技术- 指尖有改变世界的力量
- 开源成就美好
- 书山有路勤为径[GitHub](https://)
[Gitee](https://gitee.com/)
[Get Started](vue/README)
（2）自定义背景
目前的背景是随机生成的渐变色，我们自定义背景色或者背景图。在文档末尾用添加图片的 语法设置背景。
# 大佬的个人网站> 分享技术，热爱技术- 指尖有改变世界的力量
- 开源成就美好
- 书山有路勤为径[GitHub](https://)
[Gitee](https://gitee.com/)
[Get Started](vue/README)
四、定制化 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、搜索插件
全文搜索插件会根据当前页面上的超链接获取文档内容，在 内建立文档索引。默认过期时间为一天。
// 在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>
五、部署 1、Gitee配置Gitee Pages
第一次配置需要实名认证，上传身份证正反面，手持身份证照片。
部署选择你要部署的分支，部署的目录就是对应仓库中的目录，我这边是整个仓库作为目录，建议强制使用https勾选，然后就可以启动。
具体位置截图如下
注意，有时候内容不规范可能会出现违禁违规内容
2、页面修改更新
如果页面内容有修改更新到仓库了，可以点击更新个人页面
