部署文檔
操作之前請先確保您的博客園賬號已正常登陸並且已經成功申請開通了 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>
標簽將外鏈包裹,生成一個網頁腳本引用,類似如下所示:
<script src="https://blog-static.cnblogs.com/files/esofar/silence.min.js"></script>
注意:
我在配置這個網頁腳本引用的時候,按照上述方法配置,js腳本無法生效,需要將silence.min.js
文件,重新命名為silence.js
上傳,並修改引用js腳本才可以,修改后的js腳本為:
<script src="https://blog-static.cnblogs.com/files/esofar/silence.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 ,是不是有點跟不上隊伍了。