docsify搭建高逼格博客

作為一個(gè)有逼格的前端開(kāi)發(fā)，當(dāng)然要寫出一手有逼格的項(xiàng)目文檔，讓大家看的舒心，用的放心。自從用上docsify，媽媽再也不用擔(dān)心別人不用我的項(xiàng)目了~

等等等等，那就有請(qǐng)我們今天的主角docsify[https://docsify.js.org/#/zh-cn/]上場(chǎng)。docsify 是一個(gè)動(dòng)態(tài)生成文檔網(wǎng)站的工具，當(dāng)然你也可以用它來(lái)寫博客，外帶設(shè)置一張高逼格的封面圖，我高冷技術(shù)范(sha diao qian duan gou)人設(shè)就此誕生。使用Markdown格式寫文檔，對(duì)開(kāi)發(fā)來(lái)說(shuō)簡(jiǎn)單易上手，一旦入坑無(wú)法自拔~

接下來(lái)我就一步一步的帶大家用docsify建一個(gè)blog，廢話不多說(shuō)，直接開(kāi)干！??

前期準(zhǔn)備

作為一個(gè)前端開(kāi)發(fā)，默認(rèn)你已經(jīng)會(huì)掌握了node npm 等基礎(chǔ)技能，以及使用github新建一個(gè)項(xiàng)目并且clone到本地。如果以上的基礎(chǔ)技能你還不會(huì)，就不建議往下看了。建議你直接找花花姐姐手把手教前端入門~

快速開(kāi)始

推薦全局安裝?docsify-cli?工具，可以方便地創(chuàng)建及在本地預(yù)覽生成的文檔。

npm?i?docsify-cli?-g

github新建項(xiàng)目

使用github新建一個(gè)項(xiàng)目，并且clone到本地，進(jìn)入項(xiàng)目根目錄，直接通過(guò)?init?初始化項(xiàng)目。

docsify?init?./docs

使用編輯器打開(kāi)項(xiàng)目會(huì)看到

本地預(yù)覽

docsify?serve?docs

執(zhí)行完命令打開(kāi)，在瀏覽器打開(kāi) http://localhost:3000/#/ 就可以看到一個(gè)非常簡(jiǎn)單的頁(yè)面，到這里我們基礎(chǔ)已經(jīng)做好，接下來(lái)就是美化她，讓她美美噠~

美化項(xiàng)目

接下來(lái)就是美化我們的項(xiàng)目，封面，側(cè)邊欄，主題色。打開(kāi)docs目錄下的index.html找到window.$docsify接下來(lái)很多進(jìn)行配置，接下來(lái)很多都是在這里面配置的

1.設(shè)置名字和倉(cāng)庫(kù)地址

設(shè)置文檔名稱和倉(cāng)庫(kù)地址

復(fù)制代碼

2.設(shè)置封面

首先配置?coverpage，默認(rèn)加載的文件為?_coverpage.md。具體配置規(guī)則見(jiàn)

配置項(xiàng)#coverpage

??window.$docsify?=?{??coverpage:true }

新建一個(gè)_coverpage.md文件，寫一些基礎(chǔ)的配置，具體的配置說(shuō)明就直接官網(wǎng)查看吧cover[https://docsify.js.org/#/zh-cn/cover]

還是有點(diǎn)丑呢，快來(lái)改改樣式吧

新建_media文件夾新建custom.css自定義樣式，并且在index.html里引入，并引入了一個(gè)新字體。

?"stylesheet"?href="./_media/custom.css">
?"https://fonts.googleapis.com/css?family=Lobster"rel="stylesheet">

修改下主題色

?window.$docsify?=?{?themeColor:?'#25798A'?}

改了下主題色和字體上一個(gè)好看的封面，一下子就有感覺(jué)了

3.配置側(cè)邊欄

顯示側(cè)邊欄，新建_sidebar.md，配置?loadSidebar?選項(xiàng)，具體配置規(guī)則見(jiàn)配置項(xiàng)#loadSidebar。

??window.$docsify?=?{?loadSidebar:true?}

然后我們就可以看到側(cè)邊欄了~

4.寫內(nèi)容

接下來(lái)就是寫內(nèi)容了。每一篇文章都是一個(gè)md文件，直接編輯?docs/README.md?就能更新文檔內(nèi)容，然后我們將側(cè)邊欄的鏈接指向該文件即可。為了管理方便新建的其他md文件我放到了blog文件夾下面。

到此博客的基本內(nèi)容就結(jié)束了。接下來(lái)就是如何讓別人看到我們的博客。

部署

把本地的代碼提交到github上(這一步就省略了)。然后我們?cè)O(shè)置一下，在我們的項(xiàng)目下點(diǎn)擊setting 找到GitHub Pages按照下面紅框設(shè)置，保存好，就可以看到箭頭的地址了。

通過(guò)這個(gè)鏈接就可以訪問(wèn)到你的文檔、博客了。

最后為了方便訪問(wèn)，我們拿到鏈接之后再回到code界面，點(diǎn)擊設(shè)置，將鏈接填寫在描述或者網(wǎng)站一欄，方便大家訪問(wèn)。

總結(jié)

docsify[https://docsify.js.org/#/zh-cn/quickstart]還有很多功能需有待我們探索，今天只是帶大家簡(jiǎn)單的入門，更多內(nèi)容可以去官網(wǎng)學(xué)習(xí)。又是努力奮斗的一天，打工人，加油！

總結(jié)