Docs | 使用 Docker版的 docsify 预览 markdown (基于Vue.js 不能转为静态html)

biomooc

已于 2023-12-03 10:47:35 修改

阅读量1.4k

点赞数 2

分类专栏：可视化 node docker 文章标签： docker vue.js node.js

于 2022-07-27 10:23:30 首次发布

本文链接：https://blog.csdn.net/wangjunliang/article/details/126008444

版权

可视化同时被 3 个专栏收录

21 篇文章 0 订阅

订阅专栏

node

3 篇文章 0 订阅

订阅专栏

docker

3 篇文章 0 订阅

订阅专栏

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/#/

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

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

3. editing while viewing

(1)侧边栏

$ cd docs/
$ vim index.html
<script> window.$docsify = { loadSidebar: true } </script> 

$ 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)

Control the sub menu shown level:

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

Overwrite _sidebar.md in nested folds:

<script>
  window.$docsify = {
    loadSidebar: true,
    alias: {
      '/.*/_sidebar.md': '/_sidebar.md',
      '/.*/_navbar.md': '/_navbar.md',
    }
  }
</script>

(2)add top menu

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

<body>
  <nav>
    <a href="#/">项目</a>
    <a href="#/home1">home1</a>
    <a href="#/bar/a">bar/a</a>
  </nav>
</body>

Another better way:

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


$ vim _navbar.md
* [Basic](A1/1_readme)
* [Class](A2/1_readme)
* Help
	* [README](README)
	* [Editing Guid](A0/1_readme)

(3)add cover

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

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

$ 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)

(4) save source files to local

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

$ vim index.html
<link rel="stylesheet" href="static/css/vue.css">
<script src="static/js/docsify.min.js"></script>

$ 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