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。