一款專注於閱讀的部落格園主題-silence
部署指南
部署之前請先確認您的部落格園賬號已正常登陸，並且已聯絡管理員成功申請開通了 JS 許可權。然後進入部落格後臺「設定」Tab頁中完成下列配置。
獲取庫檔案
因為該主題在 Github 上開源，故可以直接使用 jsDelivr 提供的免費 CDN 服務。
https://cdn.jsdelivr.net/gh/esofar/[email protected]/dist/silence.min.css
https://cdn.jsdelivr.net/gh/esofar/[email protected]/dist/silence.min.js
注意
@3.0.0-beta4是需要使用的版本號，目前發行版本請參見 releases，建議使用最新版本。
配置 CSS
在「頁面定製 CSS 程式碼」處，將上述獲取的 CSS 樣式檔案外鏈通過瀏覽器開啟，然後將程式碼全部貼上到這裡。
配置 JS
在「部落格側邊欄公告」處，配置使用者選項並載入 JS 指令碼檔案。window.$silence取值請參見 配置選項。
配置 Loading
在「頁首 HTML 程式碼」處，從下面選擇一種風格的 HTML 程式碼貼上到這裡。
- 亮色風格
<div class="light-loading"> <div class="box"> <h2>Loading</h2> <span></span><span></span><span></span><span></span><span></span><span></span><span></span> </div> </div>
- 暗色風格
<div class="dark-loading">
<div class="box">
<h2>Loading</h2>
<span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>
</div>
為了避免因網路不好等情況導致頁面載入卡頓，造成不好的使用者體驗，給頁面新增 Loading 效果還是非常有必要的。
其他配置
- 「標題」處設定部落格標題，注意不支援顯示「子標題」。
- 「部落格面板」處選擇標準模板
Custom。
- 「禁用模板預設CSS」需要打對勾。
配置選項
下列所有選項均需要配置在「部落格側邊欄公告」處的window.$silence裡。
<script>
window.$silence = {
// ...
};
</script>
avatar
- 型別：
String - 預設值：
null
該配置項用來設定左側欄中博主頭像圖片，未配置則不會渲染。
注意圖片需自行上傳至支援外鏈的儲存空間，建議使用圖片畫素大小為230px*230px，圖片過大可能會影響頁面載入速度。
window.$silence = {
avatar: 'https://images.cnblogs.com/cnblogs_com/esofar/972540/o_avatar.jpg'
};
favicon
- 型別：
String - 預設值：
null
該配置項用來設定網頁標題前面的小圖示，未設定則繼續使用部落格園官方預設的圖示。
注意圖示型別是ico格式，其他型別可以通過 Aconvert 線上轉換後上傳和使用。
window.$silence = {
favicon: 'https://blog-static.cnblogs.com/files/esofar/favicon.ico'
};
github
- 型別：
String - 預設值：
null
該配置項用來設定個人 Github 主頁地址，會在頁面左上角渲染一個 GitHub Corner 掛件，未設定則不會渲染，瀏覽器視窗寬度小於1366px時也不會渲染。
window.$silence = {
github: 'https://github.com/esofar'
};
defaultMode
- 型別：
String - 預設值：
'auto'
該配置項用來設定預設載入的主題模式。可選值如下：
'light'：日間模式'dark'：夜間模式'auto'：自動模式
自動模式會根據當前時間自行選擇日間或夜間模式：早上 6 點至晚上 6 點前載入日間模式，晚上 6 點至次日早上 6 點前載入夜間模式。
window.$silence = {
defaultMode: 'auto'
};
defaultTheme
- 型別：
String - 預設值：
'a'
該配置項用來設定預設載入的主題色彩。
window.$silence = {
defaultTheme: 'a'
};
navbars
- 型別：
Arrary - 預設值：
[]
該配置項用來在導航欄中追加自定義選單項。
注意目前僅支援到二級選單，一級選單項通過chilren屬性配置縱向懸浮二級選單。若希望連結頁面總是在一個新開啟的視窗中載入，則需要在選單項中多配置一個值為'_blank'的target屬性。
window.$silence = {
navbars: [{
title: '標籤',
url: 'https://www.cnblogs.com/esofar/tag/'
}, {
title: '朋友',
chilren: [{
title: '百度',
target: '_blank',
url: 'https://www.baidu.com',
}, {
title: '谷歌',
target: '_blank',
url: 'https://www.google.com',
}]
}]
};
showNavAdmin
- 型別：
Boolean - 預設值：
true
該配置項用來控制是否顯示導航欄中的「管理」選單項。
部落格園官方的原生導航欄選單項中除「管理」以外，其餘均可在後臺控制顯示或者隱藏。對於希望完全自主設定導航欄選單項的園友來說，可能會有隱藏「管理」選單項的需求。
window.$silence = {
showNavAdmin: false
};
hljsln
- 型別：
Boolean - 預設值：
false
該配置項用來控制是否顯示程式碼塊行號。
window.$silence = {
hljsln: true
};
catalog
- 型別：
Object - 預設值：
{}
該配置項用來生成在右側懸浮的博文標題目錄。
標題目錄懸浮可有效幫助讀者實時分析文體結構、加深閱讀印象，對一些長文來講，效果尤佳。另外，該模組不會破壞 markdown 格式博文中使用[TOC]標記生成的目錄標題錨點，兩類標題目錄可同時使用。
window.$silence = {
catalog: {
enable: true,
index: true,
active: false,
levels: ['h2', 'h3', 'h4']
},
};
其屬性詳細介紹參考如下：
enable
- 型別：
Boolean - 預設值：
false
是否啟用目錄生成功能。
若在博文中未使用標題h1~h6，即使啟用也不會生成懸浮目錄。
index
- 型別：
Boolean - 預設值：
true
是否在生成的標題連結前面新增索引。
部分園友習慣在寫文時直接在標題前面加上索引，這種情況可能需要將該屬性值設為false，不然生成的標題連結會出現索引重複的情況。
active
- 型別：
Boolean - 預設值：
false
頁面載入時是否直接顯示目錄。
不直接顯示情況下會在頁面右下角的工具欄中生成一個按鈕用來控制懸浮目錄的顯示和隱藏。
levels
- 型別：
Arrary - 預設值：
['h2', 'h3', 'h4']
設定需要生成目錄的標題等級。
請根據自己平時的標題等級使用規則自行修改預設值，注意僅支援採集三級博文標題。
signature
- 型別：
Object - 預設值：
{}
該配置項用來在每篇博文結尾處生成版權簽名。
window.$silence = {
signature: {
enable: true,
author: null,
license: ['署名-非商業性使用-相同方式共享 4.0 國際', 'https://creativecommons.org/licenses/by-nc-sa/4.0/'],
remark: '你可以在這裡自定義其他內容',
}
};
其屬性詳細介紹參考如下：
enable
- 型別：
Boolean - 預設值：
false
是否啟用簽名生成功能。
author
- 型別：
String - 預設值：
null
自定義作者名稱，未設定則預設使用部落格園顯示名稱。
license
- 型別：
Arrary - 預設值：
['署名-非商業性使用-相同方式共享 4.0 國際', 'https://creativecommons.org/licenses/by-nc-sa/4.0/']
設定您分享的作品需要採用的 知識共享許可協議。
remark
- 型別：
String - 預設值：
null
設定其他備註，未設定則不會渲染，支援 HTML 內容。
sponsor
- 型別：
Object - 預設值：
{}
該配置項用來在每篇博文結尾處生成讚賞按鈕。
window.$silence = {
sponsor: {
enable: true,
text: '',
paypal: 'https://images.cnblogs.com/cnblogs_com/esofar/972540/o_wechat.png',
wechat: 'https://images.cnblogs.com/cnblogs_com/esofar/972540/o_wechat.png',
alipay: 'https://images.cnblogs.com/cnblogs_com/esofar/972540/o_alipay.png'
}
};
其屬性詳細介紹參考如下：
enable
- 型別：
Boolean - 預設值：
false
是否啟用讚賞按鈕生成功能。
text
- 型別：
String - 預設值：
'Buy me a cup of coffee ☕.'
設定讚賞友好提示。
paypal
- 型別：
String - 預設值：
null
設定 PayPal 收款二維碼。
- 型別：
String - 預設值：
null
設定微信收款二維碼。
alipay
- 型別：
String - 預設值：
null
設定支付寶收款二維碼。