docsify搭建与使用

官方文档

https://docsify.js.org/#/quickstart

快速开始

首先需要安装nodejs环境,可参考:https://www.cnblogs.com/sillage/p/14628671.html
全局安装:

npm i docsify-cli -g

(注:如果提示找不到docsify命令,在nodejs的bin目录找到docsify,将之变为全局命令,我的运行一下ln -s /root/node-v14.16.1-linux-x64/bin/docsify /usr/local/bin就好了)
初始化:

docsify init ./docs

(注:也可直接运行docsify init docs,会在当前目录自动创建docs目录并初始化,docs中会生成两个文件index.htmlREADME.md.nojekyll
预览网站,访问3000端口:

docsify serve docs

也可以手动预览网站(学渗透测试的同学可能对这一手很熟悉):

cd docs && python -m SimpleHTTPServer 3000
cd docs && python -m http.server 3000

效果如下:
image

进阶使用

添加侧边栏

新建_sidebar文件,里面添加:

- [CentOS](centos.md)
- [Docker](docker.md)
- [Mac](mac.md)
- [NPM](npm.md)
- [推荐](recommend.md)

index.html添加:

<script>
  window.$docsify = {
    loadSidebar: true
  }
</script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>

侧边栏二级目录

index.html中添加:

<script>
  window.$docsify = {
    loadSidebar: true,
    subMaxLevel: 2
  }
</script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>

侧边栏会根据md文件中的标题自动生成二级目录,如果需要展示3级或者4级目录,修改subMaxLevel: 2中的数字到对应级别即可。

主题风格

官方提供了四款:

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

(注:个人觉得dark.css还不错)
更多自定义请参考官网。

全局搜索

直接添加js,更多自定义请查看官方文档,直接添加js是属于开袋即食的做法:

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

Copy to Clipboard

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

效果如下:
image

Pagination

文章底部展示上一篇和下一篇文章的链接,直接使用js即可,如果想自定义可以参考官网的配置方法

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

我这里偷懒了,直接引用的js,效果如下:
image

配合typora使用

写md时肯定会遇到图片文件放哪的问题,以下给出一种方案:
typora设置如下:
image
在md文件中写好后,将整个images目录和md文件放到docs目录。

参考&&致谢

部分参考:https://www.cnblogs.com/juemuren4449/p/12904699.html

posted @ 2021-12-05 21:14  nihinumbra  阅读(714)  评论(0编辑  收藏  举报