「博客」silence - 一款专注于阅读的博客园主题
部署指南
部署之前请先确认您的博客园账号已正常登陆，并且已联系管理员成功申请开通了 JS 权限。然后进入博客后台「设置」Tab页中完成下列配置。
获取库文件
因为该主题在 Github 上开源，故可以直接使用 jsDelivr 提供的免费 CDN 服务。
https://cdn.jsdelivr.net/gh/esofar/cnblogs-theme-silence@3.0.0-beta4/dist/silence.min.css
https://cdn.jsdelivr.net/gh/esofar/cnblogs-theme-silence@3.0.0-beta4/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
设置支付宝收款二维码。
