建站
咨詢
售后
建站咨詢
新聞中心
前言
前段時(shí)間打算為自己的開源項(xiàng)目做一個(gè)主頁，一方面有個(gè)好的門面能提升項(xiàng)目的關(guān)注度，一方面也能對(duì)項(xiàng)目所涉及的資源做一個(gè)整合。
創(chuàng)新互聯(lián)建站總部坐落于成都市區(qū)，致力網(wǎng)站建設(shè)服務(wù)有成都做網(wǎng)站、成都網(wǎng)站制作、網(wǎng)絡(luò)營(yíng)銷策劃、網(wǎng)頁設(shè)計(jì)、網(wǎng)站維護(hù)、公眾號(hào)搭建、微信小程序定制開發(fā)、軟件開發(fā)等為企業(yè)提供一整套的信息化建設(shè)解決方案。創(chuàng)造真正意義上的網(wǎng)站建設(shè)，為互聯(lián)網(wǎng)品牌在互動(dòng)行銷領(lǐng)域創(chuàng)造價(jià)值而不懈努力！
其實(shí)原先項(xiàng)目已經(jīng)有一個(gè)文檔主頁，比較簡(jiǎn)潔，大致長(zhǎng)這樣：
其實(shí)看起來也還可以是不？
這是用docsify做的，docsify是一款優(yōu)秀的文檔生成工具，使用起來比較簡(jiǎn)單，只需要寫內(nèi)容的markdown文件就可以了，支持markdown的大部分語法，并且自己也擴(kuò)展了部分語法顯示效果。
但是我覺得docsify雖然建文檔還不錯(cuò)，但用來建項(xiàng)目主頁就有點(diǎn)寒酸了。首先它的定位就是文檔工具，其次主題樣式不夠豐富，頁面的定制性也比較差，就這么一個(gè)套路。我對(duì)于靜態(tài)建站工具有這么幾點(diǎn)要求
- 主題豐富，美觀簡(jiǎn)潔。畢竟項(xiàng)目首頁是一個(gè)項(xiàng)目的門面，好看是很重要的。
- 搭建簡(jiǎn)單，盡可能的只讓我關(guān)注內(nèi)容部分，因?yàn)楫吘刮覍?duì)前端并不精通，不想為了建主頁而去學(xué)一大堆前端知識(shí)。
- 首頁需要層次分明，有那種大項(xiàng)目首頁的既視感。
- 頁面定制化強(qiáng)，不能千篇一律。
- 能夠最大化整合資源，多級(jí)目錄。
靜態(tài)網(wǎng)站生成工具
我?guī)е@些要求去比較了當(dāng)下常見的靜態(tài)站點(diǎn)生成工具。最終決定在Hexo，VuePress，Docusaurus這3個(gè)當(dāng)中選。
仔細(xì)比較了功能點(diǎn)之后，最終我選擇了Docusaurus，原因是....顏值好看。
當(dāng)然，顏值是重要的一部分，其次的原因是，Hexo爛大街了，而且個(gè)人覺得不太適合做開源項(xiàng)目主頁。VuePress的話雖然也非常優(yōu)秀，中文支持的也非常好，但是深耕后端的我并太精通Vue，所以選擇性放棄。
Docusaurus是Facebook開源的一個(gè)靜態(tài)站點(diǎn)生成框架，比較新，國(guó)內(nèi)很可能許多人還不一定知道。但是Facebook的許多新的開源項(xiàng)目網(wǎng)站現(xiàn)在都在使用Docusaurus了。
這是Docusaurus官網(wǎng)主頁：
Docusaurus是基于React構(gòu)建的。基本上我對(duì)項(xiàng)目首頁的要求它都能滿足，可定制化程度也比較高。缺點(diǎn)是文檔中文支持不是很好，雖然Docusaurus1建了一個(gè)中文站點(diǎn)，但是文檔只翻譯了部分，并未完全翻譯。Docusaurus2則全是英文文檔。不過耐心點(diǎn)閱讀，應(yīng)該會(huì)很容易知道該怎么做。
建主頁過程
先不廢話，先放上我用Docusaurus搭建之后主頁最后的效果和鏈接供大家觀摩下：
項(xiàng)目主頁鏈接為：
http://bryan31.gitee.io/tlog-...
是不是還挺像那么回事的吧？大家既然點(diǎn)擊了，那就歡迎幫我這個(gè)開源項(xiàng)目在gitee&github上star下哦。
下面我會(huì)把建主頁的過程說下。
Docusaurus需要預(yù)先裝好node.js和yarn，并且要求node.js的版本在10.15.1及以上，yarn的版本在1.5及以上
你可以通過腳手架來創(chuàng)建初始化的項(xiàng)目站點(diǎn)：
- npx @docusaurus/init@next init my-website classic
創(chuàng)建好之后，你就可以進(jìn)入你的工程，運(yùn)行
- yarn run start
瀏覽器中輸入127.0.0.1:3000，你就能看到以下初始化站點(diǎn)：
當(dāng)然我沒有在腳手架創(chuàng)建的站點(diǎn)上改，我是在官網(wǎng)上的展示站點(diǎn)中選了一個(gè)站點(diǎn)，然后下載他們的源碼，進(jìn)行編譯啟動(dòng)。然后再在基礎(chǔ)上進(jìn)行修改。
總體來說Docusaurus配置還算簡(jiǎn)單，首頁可定制化程度還是很高的。如果你精通react，可以玩出很炫的花樣。如果你不精通react，也可以根據(jù)別人的源碼來修改，可以獲得類似的效果。具體配置文檔，可以參考Docusaurus的中文站點(diǎn)：
這里的文檔部分有中文翻譯。
剩下的工作就是編輯markdown，Docusaurus對(duì)于markdown的特性作了很多擴(kuò)展，這是我比較喜歡的部分。有了這些擴(kuò)展，就可以編輯出很漂亮的文檔。
我比較喜歡的markdown擴(kuò)展特性有：
Tab：
Docusaurus支持在文檔中嵌入tab標(biāo)簽，具體效果：
Hignlight塊：
Docusaurus擴(kuò)展了markdown的語法，使得在文檔中能根據(jù)重要程度顯示不同顏色的Highlight塊，具體效果：
代碼的高亮行：
對(duì)于在markdown的代碼塊相信很多人都用過，很是方便，還能根據(jù)代碼進(jìn)行著色。但是如果要高亮某幾行代碼，怎么辦，markdown的默認(rèn)語法是辦不到的，Docusaurus擴(kuò)展了這個(gè)特性，效果如下：
要是多行，也可以這樣定義： {1,4-6,11} ，這樣第1行，4到6行，11行，都會(huì)被高亮。
除了以上這3個(gè)我比較喜歡的特性外，Docusaurus還提供了很細(xì)致的擴(kuò)展，相信這些都是你用得著的。
關(guān)于項(xiàng)目主頁
我的開源項(xiàng)目主頁，主要配色是黑金，所以我對(duì)css的配色進(jìn)行一些修改，盡量在整體上保持統(tǒng)一，包括圖標(biāo)顏色，logo顏色，文檔里面的圖片配色，都是統(tǒng)一的。所以建議在建設(shè)主頁的前期，先選好配色。顏色越多不一定看著舒服。簡(jiǎn)約統(tǒng)一才是比較好的選擇。
有小伙伴問：你的Logo是哪里來的，是自己設(shè)計(jì)的嗎？
我不做平面設(shè)計(jì)，這種應(yīng)該交給專業(yè)的人來做。這個(gè)Logo花了幾百塊請(qǐng)人設(shè)計(jì)的。我覺得一個(gè)開源項(xiàng)目也應(yīng)該傳遞自身的品牌信息。所以這是值得的。
關(guān)于開源項(xiàng)目
TLog是一個(gè)新的開源項(xiàng)目，是目前我開源項(xiàng)目中近期主打維護(hù)迭代的一個(gè)項(xiàng)目，主要致力于在分布式環(huán)境中日志的追蹤。它小巧且使用簡(jiǎn)單，社區(qū)也很活躍，開源1個(gè)月來，我收到了很多人的使用反饋，聽取這些反饋進(jìn)行迭代和新特性開發(fā)。
TLog的未來藍(lán)圖是做成日志領(lǐng)域集收集，追蹤，統(tǒng)計(jì)，分析，展現(xiàn)于一體日志中間件。
分享文章：我沒有前端經(jīng)驗(yàn)，但1天就搞定了開源項(xiàng)目主頁
文章出自：http://www.5511xx.com/article/djoccpg.html
