Silence - 專注於閱讀的博客園主題


本文於2019年08月13日重新編輯。

介紹

一款專注閱讀的博客園主題,主要面向於經常混跡 博客園 的朋友。其追求大道至簡的終極真理,界面追求簡潔、運行追求高效、部署追求簡單。

特性

  • 💙 簡潔優雅、精致漂亮的 UI 設計。
  • 💜 提供多種風格主題以便適應各類用戶的偏好。
  • ❤️ 響應式設計,兼容手機端瀏覽器。
  • 💚 提供事無巨細的部署文檔。
  • 💛 源碼結構清晰並且注釋完整,方便擴展。

開發

請先確保您正在使用的機器已經安裝 Node.jsGit 客戶端。

git clone https://github.com/esofar/cnblogs-theme-silence.git   # 克隆源碼
cd cnblogs-theme-silence                                        # 進入項目
npm install                                                     # 安裝依賴
npm run build                                                   # 重新構建

自定義功能

如果您想要新增一些個性化的交互功能模塊,那么您應該先修改項目./src/silence.js腳本文件。您需要在該文件中為將要新增的功能模塊添加一些新的方法,然后在入口方法init()中的適當位置去調用它們。該文件代碼結構清晰、注釋完整,若您具備一定的 Javascript 開發經驗,應該可以很容易看明白,這里就不再過多贅述。

如果您想要自定義某些元素的樣式或者是新增交互功能模塊需要添加新的樣式,那么您應該修改項目./src/themes/*.less樣式文件,*.less取決於您選擇應用的主題風格,您需要在該文件中編寫自定義的樣式。在修改之前,建議您先了解 Less 的基礎用法。若您想要將自定義的樣式應用到所有主題風格,建議您直接修改項目./src/silence.less公共樣式文件,不過在編寫樣式代碼的時候需要考慮各個主題風格的兼容性。

完成您想做的一切后,在終端中執行npm run build命令重新構建項目,該命令會編譯、壓縮所有風格的樣式文件./src/themes/*.less和腳本文件./src/silence.js,並將結果輸出至項目./dist發布目錄。

最后,參考「部署文檔」重新安裝主題即可。

新增主題風格

如果您不滿意官方提供主題風格,那么您可以參考本節內容新增一個自己的主題風格。

首先進入項目./src/themes目錄,新建一個新的主題風格樣式文件,例如:example.less,然后在該文件中編寫樣式代碼即可。其代碼結構、編寫規則請參考 goddess.less 文件。

樣式代碼編寫完成后,需要在項目工程中配置該文件的編譯命令,具體做法如下。

打開項目package.json文件,找到scripts節點,新增一個命令theme-example,用來編譯樣式文件example.less

"theme-example": "lessc ./src/themes/example.less ./dist/themes/example.min.css -clean-css",

然后,在build構建命令中追加上述樣式文件編譯命令theme-example

... & npm run theme-example

最后,在終端中執行npm run build命令重新構建項目,新增的主題風格example便會被輸出至項目./dist發布目錄。

風格

簡約 · 藍

暗黑 · 綠

女神 · 粉


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM