我沒有前端經驗，但1天就搞定了開源項目主頁

前言

前段時間打算爲本身的開源項目作一個主頁，一方面有個好的門面能提高項目的關注度，一方面也能對項目所涉及的資源作一個整合。

其實原先項目已經有一個文檔主頁，比較簡潔，大體長這樣：

其實看起來也還能夠是不？

這是用docsify作的，docsify是一款優秀的文檔生成工具，使用起來比較簡單，只須要寫內容的markdown文件就能夠了，支持markdown的大部分語法，而且本身也擴展了部分語法顯示效果。

可是我以爲docsify雖然建文檔還不錯，但用來建項目主頁就有點寒酸了。首先它的定位就是文檔工具，其次主題樣式不夠豐富，頁面的定製性也比較差，就這麼一個套路。我對於靜態建站工具備這麼幾點要求

• 主題豐富，美觀簡潔。畢竟項目首頁是一個項目的門面，好看是很重要的。
• 搭建簡單，儘量的只讓我關注內容部分，由於畢竟我對前端並不精通，不想爲了建主頁而去學一大堆前端知識。
• 首頁須要井井有條，有那種大項目首頁的既視感。
• 頁面定製化強，不能千篇一概。
• 可以最大化整合資源，多級目錄。

靜態網站生成工具

我帶着這些要求去比較了當下常見的靜態站點生成工具。最終決定在Hexo，VuePress，Docusaurus這3個當中選。

仔細比較了功能點以後，最終我選擇了Docusaurus，緣由是....顏值好看。

固然，顏值是重要的一部分，其次的緣由是，Hexo爛大街了，並且我的以爲不太適合作開源項目主頁。VuePress的話雖然也很是優秀，中文支持的也很是好，可是深耕後端的我並太精通Vue，因此選擇性放棄。

Docusaurus是Facebook開源的一個靜態站點生成框架，比較新，國內極可能許多人還不必定知道。可是Facebook的許多新的開源項目網站如今都在使用Docusaurus了。

這是Docusaurus官網主頁：

Docusaurus是基於React構建的。基本上我對項目首頁的要求它都能知足，可定製化程度也比較高。缺點是文檔中文支持不是很好，雖然Docusaurus1建了一箇中文站點，可是文檔只翻譯了部分，並未徹底翻譯。Docusaurus2則全是英文文檔。不過耐心點閱讀，應該會很容易知道該怎麼作。

建主頁過程

先不廢話，先放上我用Docusaurus搭建以後主頁最後的效果和連接供你們觀摩下：

項目主頁連接爲：

http://bryan31.gitee.io/tlog-...

是否是還挺像那麼回事的吧？你們既然點擊了，那就歡迎幫我這個開源項目在gitee&github上star下哦。

下面我會把建主頁的過程說下。

Docusaurus須要預先裝好node.js和yarn，而且要求node.js的版本在10.15.1及以上，yarn的版本在1.5及以上

你能夠經過腳手架來建立初始化的項目站點：

npx @docusaurus/init@next init my-website classic

建立好以後，你就能夠進入你的工程，運行

yarn run start

瀏覽器中輸入127.0.0.1:3000，你就能看到如下初始化站點：

固然我沒有在腳手架建立的站點上改，我是在官網上的展現站點中選了一個站點，而後下載他們的源碼，進行編譯啓動。而後再在基礎上進行修改。

整體來講Docusaurus配置還算簡單，首頁可定製化程度仍是很高的。若是你精通react，能夠玩出很炫的花樣。若是你不精通react，也能夠根據別人的源碼來修改，能夠得到相似的效果。具體配置文檔，能夠參考Docusaurus的中文站點：

https://www.docusaurus.cn/

這裏的文檔部分有中文翻譯。

剩下的工做就是編輯markdown，Docusaurus對於markdown的特性做了不少擴展，這是我比較喜歡的部分。有了這些擴展，就能夠編輯出很漂亮的文檔。

我比較喜歡的markdown擴展特性有：

Tab：

Docusaurus支持在文檔中嵌入tab標籤，具體效果：

Hignlight塊：

Docusaurus擴展了markdown的語法，使得在文檔中能根據重要程度顯示不一樣顏色的Highlight塊，具體效果：

代碼的高亮行：

對於在markdown的代碼塊相信不少人都用過，非常方便，還能根據代碼進行着色。可是若是要高亮某幾行代碼，怎麼辦，markdown的默認語法是辦不到的，Docusaurus擴展了這個特性，效果以下：

要是多行，也能夠這樣定義：{1,4-6,11}，這樣第1行，4到6行，11行，都會被高亮。

除了以上這3個我比較喜歡的特性外，Docusaurus還提供了很細緻的擴展，相信這些都是你用得着的。

關於項目主頁

個人開源項目主頁，主要配色是黑金，因此我對css的配色進行一些修改，儘可能在總體上保持統一，包括圖標顏色，logo顏色，文檔裏面的圖片配色，都是統一的。因此建議在建設主頁的前期，先選好配色。顏色越多不必定看着舒服。簡約統一纔是比較好的選擇。

有小夥伴問：你的Logo是哪裏來的，是本身設計的嗎？

我不作平面設計，這種應該交給專業的人來作。這個Logo花了幾百塊請人設計的。我以爲一個開源項目也應該傳遞自身的品牌信息。因此這是值得的。

關於開源項目

TLog是一個新的開源項目，是目前我開源項目中近期主打維護迭代的一個項目，主要致力於在分佈式環境中日誌的追蹤。它小巧且使用簡單，社區也很活躍，開源1個月來，我收到了不少人的使用反饋，聽取這些反饋進行迭代和新特性開發。

TLog的將來藍圖是作成日誌領域集收集，追蹤，統計，分析，展示於一體日誌中間件。

Gitee官方曾對TLog進行過社區宣傳，官方曾發文進行過推廣：

https://mp.weixin.qq.com/s/Ls...

如今TLog擁有了本身的官網主頁，我以後會繼續對這個開源框架進行迭代。但願你們關注，若是喜歡的話，請幫忙請給項目一個star哦。

https://gitee.com/bryan31/TLog

關注做者

「元人部落」是一個堅持作原創的技術科技分享號，但願你能關注我，我每週會出一篇實用的原創技術文章，陪着你一塊兒走，陪你一塊兒成長。關注公衆號回覆tlog能加入羣聊，我會耐心回答你的每個使用中的問題，也會長期對這個項目進行長期維護和迭代。