使用Docsify开启个人博客之旅

文章目录二、快速开始/环境安装三、页面配置 3、定制导航栏 4、定制封面四、定制化五、部署
前言
业精于勤，荒于嬉；行成于思，毁于随。— 韩愈 ·《进学解》
以个人从业前端开发好几年的经验来看，很多开发技巧和功能模块都会出现记忆模糊的情况，也就说好记性不如烂笔头，能够把个人遇到的，或者是感兴趣的都记录下来，慢慢沉淀自己，对每个人来说学会记录都是一种进步。况且再此遇到同样的事情时，可以根据记录快速找出所需要的答案来。
咱以前没有大佬指导，并不晓得有所记录。最近也发现很多东西是需要记录下来才行的，不然那天就忘记啦。
所以呢，本文介绍开启个人博客之旅，一起来记录自己遇到的有趣的知识吧～
Anfor
入门
快速开始/环境安装
页面配置
定制化
部署
一、入门 1、简介
可以快速帮你生成文档网站。不同于、Hexo 的地方是它不会生成静态的 .html 文件，所有转换工作都是在运行时。如果你想要开始使用它，只需要创建一个 index.html 就可以开始编写文档并直接部署。
官网地址：#/zh-cn/
2、特性二、快速开始/环境安装 1.安装-cli工具
npm i docsify-cli -goryarn global add docsify-cli
2.初始化项目
docsify init
生成以下文件
类型描述
index.html
入口文件
.md
会做为主页内容渲染
.
用于阻止Pages 忽略掉下划线开头的文件
3.本地预览
docsify serveor指定端口docsify serve -p 80
4. 提示

加载中...

>window.$docsify = {el: '#main'}
三、页面配置 1、定制单页面
服务器启动，渲染的就是.md的内容，要改变页面内容，只需要修改它，语法就是语法，保存就会自动渲染刷新，不需要重启服务。
2、定制多页面

文章插图

在导航文件直接使用，表情可参考网站
* vue* [:cn:vue2](vue/README)* [:us:vue3](vue/README)* react* [:ru:react](react/README)
4、定制封面（1）基本用法
在index.html中配置参数开启封面。通常封面和首页是同时出现的，设置了=true之后封面就独立成封面。
>window.$docsify = {coverpage: true,onlyCove: true}
添加配置文件.md 来配置封面，添加logo文件夹media里面放logo图片logo.jpg

![logo](media/logo.jpg)# 大佬的个人网站> 分享技术，热爱技术- 指尖有改变世界的力量- 开源成就美好- 书山有路勤为径[GitHub](https://)[Gitee](https://gitee.com/)[Get Started](vue/README)

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

![logo](media/logo.jpg)# 大佬的个人网站> 分享技术，热爱技术- 指尖有改变世界的力量- 开源成就美好- 书山有路勤为径[GitHub](https://)[Gitee](https://gitee.com/)[Get Started](vue/README)![](img/img.png)![color](#dferfg)

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