docsify 是一个markdown文档预览利器，它不生成html文件，避免了对代码库的“污染”。

特别适合做技术文档的wiki笔记。方便积累和查找。效果如下:

官网 https://docsify.js.org/

为了方便调用，不污染全局环境，包装成了Docker镜像。使用方法如下。

1. Start the environment in Docker

docsify 默认使用的是 3000 端口。
宿主机端口根据自己的机器情况选择和设置。

$ docker pull dawneve/docsify:4.4.4

$ docker run -it -d --name docsify -p 8003:3000 -v /home/wangjl/data/project/learnCpp:/home/docsify/learnCpp dawneve/docsify:4.4.4 bash
$ docker exec -it docsify bash

Init the docs
# cd /home/docsify/learnCpp
# docsify init docs
yes.

Start the server on port 3000:
# docsify serve docs

Browser on host:
http://192.168.2.120:8003/#/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2. add new user in containner

$ id #check your uid on host
uid=1001(wangjl) gid=1001(wangjl) groups=1001(wangjl),1004(docker) 

Change the uid of user tom in containner to your id on the host, shown above.
# usermod -u 1001 tom

if(0){
I added user when making this image:
# useradd -s /bin/bash -d /home/docsify  -m docsify -u 1001
# passwd docsify
# chown -R docsify /home/docsify
}

Change owner of these files in the containner
# chown -R tom *

Then we can edit md files on the host with VIM or other text editer like vsCode through ssh.

Start the server on port 3000/ host 8003
# docsify serve docs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

这时可以在浏览器预览了: http://ip:8003
接着就可以在容器外编辑文件了，边编辑边预览。

3. editing while viewing

(1)侧边栏

$ cd docs/
$ vim index.html
 

$ vim _sidebar.md
* [README](README.md)
* Part O Preface
    * [Make this book](A0/1_readme.md)
    * [Resource](A0/2_resource.md)
* Part I Basics
    * [README](A1/1_readme.md)
* [Part II Class](A2/1_readme.md)
* [Part III template](A3/1_readme.md)
* [Part IV algorithm](A4/1_readme.md)
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Control the sub menu shown level:

1
2
3
4
5
6

Overwrite _sidebar.md in nested folds:

1
2
3
4
5
6
7
8
9

(2)add top menu

When the menu are very few, just edit index.html

  

1
2
3
4
5
6
7

Another better way:

$ vim _navbar.md
* [Basic](A1/1_readme)
* [Class](A2/1_readme)
* Help
	* [README](README)
	* [Editing Guid](A0/1_readme)
1
2
3
4
5
6
7
8
9
10
11
12
13

(3)add cover

Default cover is ./README.md, but we can add one.

$ vim _coverpage.md
![logo](images/logo/icon.svg)
# My C++ docs
## 个人文档网站
> 一个神奇的文档网站生成工具 docsify
* Simple and lightweight (~12kb gzipped)
* Multiple themes
* Not build static html files

[GitHub](https://github.com/DawnEve/learn_C)
[Get Started](/A0/1_readme)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

(4) save source files to local

Save css and js to local, prevant loading…… problem.

$ vim index.html



$ mkdir static
$ mkdir static/css
$ mkdir static/js

Save the css and js files.
$ wget https://cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css -O static/css/vue.css
$ wget https://cdn.jsdelivr.net/npm/docsify@4 -O static/js/docsify.min.js
1
2
3
4
5
6
7
8
9
10
11

更多使用方法，参考官方文档的效果和 github源码:

• 效果: https://docsify.js.org/#/custom-navbar
• 源码: https://github.com/docsifyjs/docsify/blob/develop/docs/custom-navbar.md?plain=1

100.放到github pages上

可以把项目push到github，指定 docs 为 gh-pages 源文件。就可以用二级域名预览了。

You need to create a .nojekyll in ./docs to prevent GitHub Pages from ignoring files that begin with an underscore.

ref:

• https://docsify.js.org/#/?id=docsify
• https://github.com/docsifyjs/docsify/blob/develop/docs/_sidebar.md
• https://jingping-ye.github.io/docsify-docs-zh/#/
• https://baijiahao.baidu.com/s?id=1683928475208184783&wfr=spider&for=pc