docsify

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 端口即可长捧。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市把敞,隨后出現(xiàn)的幾起案子赠橙,更是在濱河造成了極大的恐慌凤薛,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,214評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異掸宛,居然都是意外死亡饰序,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,307評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)箫章,“玉大人戳表,你說(shuō)我怎么就攤上這事价涝。” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 152,543評(píng)論 0 341
  • 文/不壞的土叔 我叫張陵簇宽,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我魏割,道長(zhǎng)见妒,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 55,221評(píng)論 1 279
  • 正文 為了忘掉前任盐股,我火速辦了婚禮疯汁,結(jié)果婚禮上卵酪,老公的妹妹穿的比我還像新娘溃卡。我一直安慰自己,他們只是感情好漩仙,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,224評(píng)論 5 371
  • 文/花漫 我一把揭開(kāi)白布队他。 她就那樣靜靜地躺著峻村,像睡著了一般粘昨。 火紅的嫁衣襯著肌膚如雪雾棺。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 49,007評(píng)論 1 284
  • 那天放刨,我揣著相機(jī)與錄音尸饺,去河邊找鬼。 笑死螟碎,一個(gè)胖子當(dāng)著我的面吹牛掉分,可吹牛的內(nèi)容都是我干的酥郭。 我是一名探鬼主播华坦,決...
    沈念sama閱讀 38,313評(píng)論 3 399
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼椿息!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起条舔,我...
    開(kāi)封第一講書(shū)人閱讀 36,956評(píng)論 0 259
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤逞刷,失蹤者是張志新(化名)和其女友劉穎妻熊,沒(méi)想到半個(gè)月后仑最,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體警医,經(jīng)...
    沈念sama閱讀 43,441評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡预皇,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,925評(píng)論 2 323
  • 正文 我和宋清朗相戀三年吟温,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片潘悼。...
    茶點(diǎn)故事閱讀 38,018評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡治唤,死狀恐怖棒动,靈堂內(nèi)的尸體忽然破棺而出船惨,到底是詐尸還是另有隱情缕陕,我是刑警寧澤榄檬,帶...
    沈念sama閱讀 33,685評(píng)論 4 322
  • 正文 年R本政府宣布鹿榜,位于F島的核電站,受9級(jí)特大地震影響奥裸,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜湾宙,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,234評(píng)論 3 307
  • 文/蒙蒙 一侠鳄、第九天 我趴在偏房一處隱蔽的房頂上張望死宣。 院中可真熱鬧,春花似錦博秫、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,240評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至蒿叠,卻和暖如春市咽,著一層夾襖步出監(jiān)牢的瞬間痊银,已是汗流浹背溯革。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,464評(píng)論 1 261
  • 我被黑心中介騙來(lái)泰國(guó)打工致稀, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留俱尼,地道東北人遇八。 一個(gè)月前我還...
    沈念sama閱讀 45,467評(píng)論 2 352
  • 正文 我出身青樓矛绘,卻偏偏與公主長(zhǎng)得像货矮,于是被迫代替她去往敵國(guó)和親囚玫。 傳聞我的和親對(duì)象是個(gè)殘疾皇子读规,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,762評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容