部落格園美化
Silence - 專注于閱讀的部落格園主題
最近花了點心思整理了下我的部落格園主題代碼，今天正式和大家分享一下，感興趣的園友可以了解一下。
主題介紹
Silence 追求大道至簡的終極真理，旨在打造一個幹淨、專注閱讀的部落客題，沒有二維空間元素、不存在花裡胡哨。
簡單概括其幾個主要特點：
- 專注閱讀、精緻漂亮的 UI；
- 事無巨細的部署文檔；
- 相容移動端浏覽器；
- 源碼結構清晰、易擴充。
預覽位址：https://www.cnblogs.com/esofar
開源位址：https://github.com/esofar/cnblogs-theme-silence
image
image
功能簡述
該主題除了增加頁面渲染效果以外，還對部落格園原有一些功能子產品做了修改，主要展現在以下幾個方面：
- 側邊欄僅保留了部落格公告、我的标簽、随筆分類、閱讀排行榜、推薦排行榜5個主要子產品，其他全部隐藏。
- 進入文章詳情頁面會自動隐藏側邊欄，進入閱讀模式，讓您專注閱讀目前文章，沒有雜心翻看其他東西。
- 文章詳情頁面新增了部落格目錄子產品，支援三級标題，提供參數配置，以便迎合不同園友的标題使用習慣。
- 文章詳情頁面新增了部落格簽名子產品，自動生成文章連結，提供參數配置作者名稱等。
- 文章詳情頁面新增了支援贊賞子產品，同樣提供參數配置，支付寶或者微信二維碼請至少配置一個。
至于其他細節請感興趣的園友自行體驗吧。
安裝說明
開始之前請確定你有一個正常的部落格園賬号并已經成功申請開通JS權限。
Step1：主題下載下傳
通過下面git指令克隆到本地，或者直接下載下傳zip到本地并解壓。
git clone https://github.com/esofar/cnblogs-theme-silence.git
部署文檔
操作之前請先確定您的部落格園賬号已正常登陸并且已經成功申請開通了 JS 權限。
主題下載下傳
點選 下載下傳 本主題最新版本源碼包，下載下傳完畢後，使用解壓工具解壓并進入解壓後目錄，其結構大緻如下所示：
│ .babelrc
│ .gitignore
│ LICENSE
│ package-lock.json
│ package.json
│ README.md
│
├─dist // 編譯釋出目錄
│ │ silence.min.js
│ │
│ └─themes
│ dark.min.css
│ default.min.css
│ goddess.min.css
│
├─docs // 文檔相關目錄
│ change.md
│ logo.png
│ theme_dark.png
│ theme_default.png
│ theme_goddess.png
└─src // 源碼存放目錄
│ silence.js
│ silence.less
│
├─images
│ contents.png
│ follow.png
│ gotop.png
│
└─themes
dark.less
default.less
goddess.less
然後打開部落格園背景 管理 頁面，進行後續操作。
使用樣式
打開
./dist/themes
檔案夾，選擇一款自己心儀的主題風格代碼檔案。
default.min.css // 簡約 · 藍
dark.min.css // 暗黑 · 綠
goddess.min.css // 女神 · 粉
使用 Notepad++ 等文本編輯工具打開您選擇的主題樣式檔案，全選所有代碼，然後複制。
進入『設定』界面，将複制的代碼粘貼到「頁面定制CSS代碼」文本域中。
點選「儲存」按鈕，儲存上述操作。
上傳腳本
打開
./dist
檔案夾，擷取主題的 JS 腳本檔案
silence.min.js
。
進入『檔案』界面，将該檔案上傳到自己的部落格中。上傳完成後，點選檔案名便可在浏覽器位址欄中擷取上傳檔案的外鍊，類似如下所示：
https://blog-static.cnblogs.com/files/esofar/silence.min.js
然後使用``标簽将外鍊包裹，生成一個網頁腳本引用，類似如下所示：
<script src="https://blog-static.cnblogs.com/files/esofar/silence.min.js"></script>
進入『設定』界面，将上面生成的網頁腳本引用複制到「部落格側邊欄公告」文本域中。
說明：主題腳本檔案 silence.min.js
使用腳本
為了提高園友的閱讀體驗，主題在部落格園原有功能基礎上追加了一些輔助閱讀、以及人性化的功能子產品。其中部分子產品做了參數配置，使用者可根據自己意願選擇是否啟用。若啟用，再根據自己的資訊或寫作習慣設定相關參數。
進入『設定』界面，将如下腳本代碼引用 追加 到「部落格側邊欄公告」文本域中，其中配置參數根據下表自行修改。
<script type="text/javascript">
$.silence({
avatar: 'http://images.cnblogs.com/likecs_com/esofar/972540/o_avatar.jpg',
favicon: 'https://files.cnblogs.com/files/esofar/favicon.ico',
navigation: [
{
title: '标簽',
url: 'https://www.cnblogs.com/esofar/tag/'
},
{
title: '歸檔',
url: 'https://www.cnblogs.com/esofar/p/'
},
{
title: '導航',
chilren: [
{
title: '谷歌',
url: 'https://www.google.com/',
},
{
title: '百度',
url: 'https://www.baidu.com/',
},
]
},
],
catalog: {
enable: true,
move: true,
index: true,
level1: 'h2',
level2: 'h3',
level3: 'h4',
},
signature: {
enable: true,
license: '署名-非商業性使用-相同方式共享 4.0 國際',
link: 'https://creativecommons.org/licenses/by-nc-sa/4.0/',
remark: null
},
sponsor: {
enable: true,
paypal: null,
wechat: 'https://images.cnblogs.com/likecs_com/esofar/972540/o_wechat.png',
alipay: 'https://images.cnblogs.com/likecs_com/esofar/972540/o_alipay.png'
},
github: {
enable: true,
link: 'https://github.com/esofar',
target: '_self'
}
});
</script>
配置參數說明表：
| 子產品 | 屬性 | 說明 | 類型 | 預設值 |
|---|---|---|---|---|
| 公共子產品 | avatar | 部落客頭像 | String | null |
| favicon | 網頁标題圖示 | String | null | |
| navigation | 自定義導航 | Array | null | |
| catalog（博文目錄） | enable | 是否啟用 | Boolean | false |
| move | 是否允許拖拽 | Boolean | true | |
| index | 是否顯示索引 | Boolean | true | |
| level1 | 一級标題 | String | h2 | |
| level2 | 二級标題 | String | h3 | |
| level3 | 三級标題 | String | h4 | |
| signature（博文簽名） | enable | 是否啟用 | Boolean | true |
| auther | 作者名字 | String | [Cnblogs Nickname] | |
| license | 共享許可協定名稱 | String | 署名-非商業性使用-相同方式共享 4.0 國際 | |
| link | 共享許可協定連結 | String | https://creativecommons.org/licenses/by-nc-sa/4.0/ | |
| remark | 其他備注 | String | null | |
| sponsor（博文贊賞） | enable | 是否啟用 | Boolean | false |
| text | 标題 | String | Sponsor | |
| paypal | PayPal 收款位址 | String | null | |
| alipay | 支付寶收款二維碼 | String | null | |
| 微信收款二維碼 | String | null | ||
| github（GitHub Corners） | enable | 是否啟用 | Boolean | false |
| fill | 背景填充色 | String | [Silence Theme Color] | |
| color | 章魚貓顔色 | String | #fff | |
| link | Github 連結 | String | null | |
| target | Github 打開方式 | String | _self |
配置完成後，記得點選「儲存」按鈕，儲存上述操作。
其他配置
進入『設定』界面，在「标題」文本框中設定部落格标題，注意不支援顯示「子标題」；在「部落格皮膚」處選擇部落格園官方标準模闆 Custom；把「禁用模闆預設CSS」複選框取消勾選。最後，點選「儲存」按鈕儲存上述 3 步操作。
進入『選項』界面，在「控件顯示設定」中需要勾選的部落格園官方功能子產品如下幾個：
- 必須要勾選：公告、我的标簽、随筆分類、閱讀排行榜、推薦排行榜
- 自定義勾選：部落格園連結、首頁連結、RSS訂閱、聯系
其他子產品取消勾選(可選操作)。最後，點選「SAVE」按鈕儲存操作。
至此，主題部署完成。
寫在最後
熟悉部落格園的朋友都清楚，部落格園提供了多種編輯器供我們選擇，不同編輯器模式下發表的博文樣式可能有所差别，本主題可能無法全面測試覆寫重寫，是以本主題肯定會存在一些不足之處，如果您在使用遇到問題歡迎送出 Issues，我會及時響應。
不過本主題對 Markdown 編輯模式下的博文樣式支援相對較好，是以鬥膽推薦您使用 Markdown 編輯器編輯發表新的博文，具體設定如下：
進入『選項』界面，在「預設編輯器」中選擇 Markdown 選項，然後點選「SAVE」按鈕儲存操作。
如果您還不知道什麼是 Markdown ，是不是有點跟不上隊伍了。
如果您在部署遇到任何問題請給我發郵件 [email protected]。
![臘月二十九回老家陪久病的父親過年，正月初十踏上了回家的路，這11天時間感慨萬千，頗感人生不易。父親生病兩年有餘，四處輾轉[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)