博客园主题美化-silence简约风格

目录

• silence 主题特点
• 主题配置步骤

silence 主题特点

• 界面简洁优雅，专注阅读
• 响应式网页设计，轻量级，响应快
• 代码简单且可高度定制
• 支持多种色彩主题
• 支持日间/夜间模式
• 支持自定义导航栏菜单项
• 支持悬浮标题目录
• 支持生成文章版权签名
• 提供赞赏功能

相对于其它一些酷炫的主题，silence 主题简约的样式更适合技术类文章，但是它的原部署文档过于简单，对于亲手不太友好。

开源地址：https://github.com/esofar/cnblogs-theme-silence

效果预览地址：https://www.cnblogs.com/esofar

主题配置步骤

配置的前提是已开通博客账号，并已申请开通 JS 权限。

1. 下载源码包到本地

可通过 git clone 命令下载源码到本地，也可手动下载 zip 源码包到本地

git clone https://github.com/esofar/cnblogs-theme-silence.git // 克隆代码
# cd cnblogs-theme-silence // 进入目录
# npm install // 安装依赖
# npm start // 本地调试
# npm run build // 编译生成

# 若执行 npm install 报错，可能有两种情况：未安装 npm；已安装 npm 但外网网络不通
# 使用 taobao 镜像安装
# npm install --registry=https://registry.npm.taobao.org

2. 配置 js 和 css 到博客园

• 将下载的源码包解压，进入 dist 目录，找到 silence.min.css 和 silence.min.js 文件
• 进入博客园『管理』-『文件』，上传 silence.min.js 文件，并获取上传后的 URL 地址，如 https://blog-static.cnblogs.com/files/blogs/715217/silence.min.js

• 进入『博客园』-『管理』-『设置』：（记得每设置一项内容，就保存一次）
  • 使用记事本打开 silence.min.css 文件，复制其中所有代码到「页面定制CSS代码」文本域中
  • 在「博客侧边栏公告」文本域中添加如下 script 脚本：(其中 src 的值就是上面👆得到的 URL 地址)

<script src="https://blog-static.cnblogs.com/files/blogs/715217/silence.min.js"></script>

<script type="text/javascript">
    $.silence();
</script>

3. 开启博客目录/签名/赞赏

博客目录、博客签名、支持赞赏，这三个模块在主题中默认不启用，但其实这几个功能还是挺实用的，所以可通过修改代码来开启。

修改方法：同样是进入『博客园』-『管理』-『设置』页面，在「博客侧边栏公告」文本域中添加如下脚本（记得替换其中的签名信息和赞赏信息哦）：

<script type="text/javascript">
    $.silence({
        catalog: {
            enable: true,
            move: true,
            index: true,
            level1: 'h2',
            level2: 'h3',
            level3: 'h4'
        },
        signature: {
            enable: true,
            author: 'Yuance',
            home: 'https://www.cnblogs.com/yuance-tester/',
            license: '署名 4.0 国际',
            link: 'https://creativecommons.org/licenses/by/4.0'
        },
        reward: {
            enable: true,
            title: '感谢您的支持，我会继续努力',
            wechat: 'https://images.cnblogs.com/cnblogs_com/blogs/715217/galleries/2054077/o_211031063115_271635661677_.pic.jpg',
            alipay: 'https://images.cnblogs.com/cnblogs_com/blogs/715217/galleries/2054077/o_211031063130_281635661687_.pic.jpg'
        }
    });
</script>

配置项说明详见下表：

4. 其它配置

要正常使用该主题，还需要再修改一些其他的配置项：

• 进入『博客园』-『管理』-『设置』：
  • 在「标题」文本域中设置博客标题，不支持子标题
  • 在「博客皮肤」处选择博客园官方标准模板 Custom，并且保持「禁用模板默认CSS」未勾选状态
• 进入『博客园』-『管理』-『选项』：
  • 在「控件显示设置」选择需要展示的模块，通常有：随笔分类、公告、博客园链接、阅读排行榜、我的标签、首页链接、RSS订阅、推荐排行榜、联系，其他不需要的模块取消勾选

至此，Silence 主题就已经配置完成，可以打开自己的博客主页看效果啦！