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非必須上傳到博客園，也可上傳到七牛雲等對象存儲空間，但必須開啟 HTTPS 訪問。
使用腳本
為了提高園友的閱讀體驗，主題在博客園原有功能基礎上追加了一些輔助閱讀、以及人性化的功能模塊。其中部分模塊做了參數配置，用戶可根據自己意願選擇是否啟用。若啟用，再根據自己的信息或寫作習慣設置相關參數。
進入『設置』界面，將如下腳本代碼引用 追加 到「博客側邊欄公告」文本域中，其中配置參數根據下表自行修改。
<script type="text/javascript">
$.silence({
avatar: 'http://images.cnblogs.com/cnblogs_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/cnblogs_com/esofar/972540/o_wechat.png',
alipay: 'https://images.cnblogs.com/cnblogs_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 ，是不是有點跟不上隊伍了。
如果您在部署遇到任何問題請給我發郵件 esofar@qq.com。