1. 安裝 nodejs
安裝 nodejs<small>( 連帶安裝 npm )</small>闸迷。略腥沽。
2. 安裝 docsify-cli
npm install -g docsify-cli
# 或
npm install -g docsify-cli --registry=https://registry.npm.taobao.org
3. 創(chuàng)建并初始化筆記根目錄
在你的電腦上的某個(gè)位置<small>( 任意 )</small>下創(chuàng)建一個(gè)文件夾今阳,文件夾名任意盾舌。
我這里演示的是在 D:\git_workspace\temp
下創(chuàng)建了一個(gè)名為 java-note-docsify
的文件夾墓臭。
未來(lái),我們的筆記就都會(huì)放在這個(gè)文件夾下<small>( 的某個(gè)子文件夾下 )</small>。邏輯上妙痹,這個(gè)文件夾( D:\git_workspace\temp\java-note-docsify
)就是我們筆記的家目錄鼻疮,也可以認(rèn)為它是我們筆記的根目錄判沟。
進(jìn)入到筆記的根目錄<small>( java-note-docsify )</small>中崭篡,打開(kāi)命令行黑窗口,執(zhí)行命令:
docsify init .
4. 創(chuàng)建一級(jí)子文件夾
在筆記的根文件夾下創(chuàng)建任意多個(gè)迹炼、任意命名的文件夾颠毙,并將根文件夾下的 index.html 文件挨個(gè)復(fù)制粘貼一份蛀蜜。
這些位于根文件夾下的文件夾滴某,我稱它們?yōu)橐患?jí)子文件夾霎奢。
一級(jí)子文件夾會(huì)和頁(yè)面上的頂部導(dǎo)航欄有關(guān)。
5. 創(chuàng)建二級(jí)子文件夾
在一級(jí)子文件夾下創(chuàng)建任意多個(gè)帝美、任意命名的文件夾橙依,并將根文件夾下的 index.html 文件挨個(gè)復(fù)制粘貼一份窗骑。
這些位于一級(jí)子文件夾下的文件夾创译,我稱它們?yōu)槎?jí)子文件夾。
二級(jí)子文件夾會(huì)和頁(yè)面上的左側(cè)側(cè)邊欄有關(guān)刷喜。
6. 在二級(jí)子文件夾下創(chuàng)建 md 筆記
略
7. 在二級(jí)子文件夾下創(chuàng)建 _sidebar.md 文件
在筆記的二級(jí)文件夾下<small>( 也就是和 .md 筆記文件平級(jí) )</small>創(chuàng)建 _sidebar.md 文件。
_sidebar.md 文件及其內(nèi)容決定了左側(cè)側(cè)邊欄的顯示內(nèi)容初茶。
_sidebar.md 文件的內(nèi)容應(yīng)該是 md 的 列表
+ 鏈接
語(yǔ)法組合恼布。例如:
* [為什么要配環(huán)境變量](/part-1/Java/00-環(huán)境變量.md)
* [Java 語(yǔ)法](/part-1/Java/01-Java語(yǔ)法匯總.md)
* [引用](/part-1/Java/03-引用.md)
- 有多少個(gè)列表項(xiàng)搁宾,就決定了左側(cè)的側(cè)邊欄有多少個(gè)條目盖腿。
- 鏈接的
[...]
中的內(nèi)容決定了在側(cè)邊欄中顯示的中文文字翩腐。 - 鏈接指向的 .md 文件決定了在右側(cè)的內(nèi)容區(qū)展現(xiàn)的文檔內(nèi)容鸟款。
注意,文檔的路徑是以 /
開(kāi)頭疙筹,雖然 docsify 稱它為絕對(duì)路徑而咆,實(shí)際上暴备,這是相較于你的筆記的根目錄的一個(gè)相對(duì)路徑地址。
8. 在筆記根文件夾下創(chuàng)建 _navbar.md 文件
在筆記的根文件夾下<small>( 也就是和一級(jí)子文件夾平級(jí) )</small>創(chuàng)建 _navbar.md 文件浅妆。
_navbar.md 文件的內(nèi)容決定了頂部導(dǎo)航欄的內(nèi)容障癌。
_navbar.md 文件的內(nèi)容應(yīng)該是 md 的 列表
+ 鏈接
語(yǔ)法組合涛浙。例如:
* [第一階段](/part-1/index.html)
* [Java](/part-1/Java/index.html)
* [Java多線程](/part-1/Java-thread/index.html)
* [SQL](/part-1/MySQL/index.html)
* [第二階段](/part-2/index.html)
* [JUnit](/part-2/JUnit/index.html)
* [MyBatis](/part-2/mybatis/index.html)
* [第三階段](/part-3/index.html)
* [Spring Boot](/part-3/spring-boot/index.html)
* [第四階段](/part-4/index.html)
* [Spring Cloud](/part-4/spring-cloud/index.html)
- 有多少個(gè)一級(jí)列表項(xiàng),就決定了頂部導(dǎo)航條有多少個(gè)選項(xiàng)胸墙;
- 每個(gè)一級(jí)列表項(xiàng)下面有多少個(gè)二級(jí)列表項(xiàng)按咒,就決定了這個(gè)導(dǎo)航下有多少個(gè)導(dǎo)航項(xiàng)胖齐;
- 鏈接的
[...]
中的內(nèi)容決定了導(dǎo)航欄中顯示的內(nèi)容嗽冒; - 一級(jí)列表項(xiàng)的鏈接指向一級(jí)子文件夾下的 index.html 文件;二級(jí)列表項(xiàng)的鏈接指向二級(jí)文件夾下的 index.html 文件。
9. 從模板開(kāi)始
我給大家提供了一個(gè)模板贬蛙,以避免大家從零開(kāi)始會(huì)遇到一些無(wú)謂阳准、無(wú)意義的小坑氛堕,白白浪費(fèi)寶貴時(shí)間讼稚。
大家在模板的基礎(chǔ)上開(kāi)發(fā)屬于自己的筆記绕沈。
10. 運(yùn)行與發(fā)布
-
運(yùn)行
在筆記的根目錄下打開(kāi)命令行黑窗口赠摇,執(zhí)行如下命令:
docsify serve .
會(huì)看到類(lèi)似如下內(nèi)容:
Serving D:\git_workspace\temp\docker-docsify-note now. Listening at http://localhost:3000
訪問(wèn)本機(jī)的 3000 端口就可看到在線筆記浅蚪。
-
發(fā)布
將筆記的根目錄下的內(nèi)容都扔到 nginx 的 html 下惜傲,啟動(dòng)運(yùn)行 nginx 操漠,訪問(wèn) nginx 的 80 端口即可长捧。