我沒有前端經驗,但1天就搞定了開源專案主頁

2021-10-24 17:40:31 字數 2954 閱讀 3316

前段時間打算為自己的開源專案做乙個主頁,一方面有個好的門面能提公升專案的關注度,一方面也能對專案所涉及的資源做乙個整合。

其實原先專案已經有乙個文件主頁,比較簡潔,大致長這樣:

其實看起來也還可以是不?

這是用docsify做的,docsify是一款優秀的文件生成工具,使用起來比較簡單,只需要寫內容的markdown檔案就可以了,支援markdown的大部分語法,並且自己也擴充套件了部分語法顯示效果。

但是我覺得docsify雖然建文件還不錯,但用來建專案主頁就有點寒酸了。首先它的定位就是文件工具,其次主題樣式不夠豐富,頁面的定製性也比較差,就這麼乙個套路。我對於靜態建站工具有這麼幾點要求

我帶著這些要求去比較了當下常見的靜態站點生成工具。最終決定在hexo,vuepress,docusaurus這3個當中選。

仔細比較了功能點之後,最終我選擇了docusaurus,原因是…顏值好看。

當然,顏值是重要的一部分,其次的原因是,hexo爛大街了,而且個人覺得不太適合做開源專案主頁。vuepress的話雖然也非常優秀,中文支援的也非常好,但是深耕後端的我並太精通vue,所以選擇性放棄。

docusaurus是facebook開源的乙個靜態站點生成框架,比較新,國內很可能許多人還不一定知道。但是facebook的許多新的開源專案**現在都在使用docusaurus了。

這是docusaurus官網主頁:

docusaurus是基於react構建的。基本上我對專案首頁的要求它都能滿足,可定製化程度也比較高。缺點是文件中文支援不是很好,雖然docusaurus1建了乙個中文站點,但是文件只翻譯了部分,並未完全翻譯。docusaurus2則全是英文文件。不過耐心點閱讀,應該會很容易知道該怎麼做。

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

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的中文站點:

這裡的文件部分有中文翻譯。

我比較喜歡的markdown擴充套件特性有:

tab:

docusaurus支援在文件中嵌入tab標籤,具體效果:

hignlight塊:

docusaurus擴充套件了markdown的語法,使得在文件中能根據重要程度顯示不同顏色的highlight塊,具體效果:

**的高亮行:

對於在markdown的**塊相信很多人都用過,很是方便,還能根據**進行著色。但是如果要高亮某幾行**,怎麼辦,markdown的預設語法是辦不到的,docusaurus擴充套件了這個特性,效果如下:

要是多行,也可以這樣定義:,這樣第1行,4到6行,11行,都會被高亮。

除了以上這3個我比較喜歡的特性外,docusaurus還提供了很細緻的擴充套件,相信這些都是你用得著的。

我的開源專案主頁,主要配色是黑金,所以我對css的配色進行一些修改,盡量在整體上保持統一,包括圖示顏色,logo顏色,文件裡面的配色,都是統一的。所以建議在建設主頁的前期,先選好配色。顏色越多不一定看著舒服。簡約統一才是比較好的選擇。

有小夥伴問:你的logo是**來的,是自己設計的嗎?

我不做平面設計,這種應該交給專業的人來做。這個logo花了幾百塊請人設計的。我覺得乙個開源專案也應該傳遞自身的品牌資訊。所以這是值得的。

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

tlog的未來藍圖是做成日誌領域集收集,追蹤,統計,分析,展現於一體日誌中介軟體。

gitee官方曾對tlog進行過社群宣傳,官方曾發文進行過推廣:

現在tlog擁有了自己的官網主頁,我之後會繼續對這個開源框架進行迭代。希望大家關注,如果喜歡的話,請幫忙請給專案乙個star哦。

我沒有前端經驗,但1天就搞定了開源專案主頁

前段時間打算為自己的開源專案做乙個主頁,一方面有個好的門面能提公升專案的關注度,一方面也能對專案所涉及的資源做乙個整合。其實原先專案已經有乙個文件主頁,比較簡潔,大致長這樣 其實看起來也還可以是不?這是用docsify做的,docsify是一款優秀的文件生成工具,使用起來比較簡單,只需要寫內容的ma...

前端經驗分享

前端無非就是物件導向程式設計 經驗累積 熟能生巧 到了一定的地步一看這個bug就知道那裡出問題,編寫的時候能夠預判 可能會出問題,經驗的累積則是解決問題,寫的多了,想的多了自然就胸有成竹了。以下是我的個人經驗 1 乙個好的使用者體驗沒乙個好的前端是弄不出來的,前端要注重使用者體驗。2 css js一...

前端經驗分享

前端無非就是物件導向程式設計 經驗累積 熟能生巧 到了一定的地步一看這個bug就知道那裡出問題,編寫的時候能夠預判 可能會出問題,經驗的累積則是解決問題,寫的多了,想的多了自然就胸有成竹了。以下是我的個人經驗 1 乙個好的使用者體驗沒乙個好的前端是弄不出來的,前端要注重使用者體驗。2 css js一...