一款专注阅读的博客园主题，主要面向于经常混迹 博客园 的朋友。其追求大道至简的终极真理，界面追求简洁、运行追求高效、部署追求简单。
- 💙 简洁优雅、精致漂亮的 UI 设计。
- 💜 提供多种风格主题以便适应各类用户的偏好。
- ❤️ 响应式设计，兼容手机端浏览器。
- 💚 提供事无巨细的部署文档。
- 💛 源码结构清晰并且注释完整，方便扩展。
简约 · 蓝
暗黑 · 绿
女神 · 粉
主题的样式通过 Less 将一些颜色值作为变量抽取出来，然后通过不同颜色搭配形成了三种不同的主题风格。当然，您也可以搭配自己喜欢的色系，编译一套属于自己的主题风格，也非常欢迎有兴趣的园友参与进来，贡献更多的风格方案。
克隆源码，进入项目目录：
git clone https://github.com/esofar/cnblogs-theme-silence.git
cd cnblogs-theme-silence
全局安装用到的一些工具：
npm install less less-plugin-clean-css babel-cli uglify-js -g
如上操作需要依赖 Node.js 环境和 Git 客户端。
本地打开./src/themes目录，新建主题样式文件example.less，其至少具备类似如下内容结构：
@blog-bg-color: #fff; // 博客背景颜色
@blog-theme-color: #FF85B8; // 博客主题色
@blog-border-color: #ffebf2; // 博客边框颜色
@blog-font-color: #61687C; // 博客字体颜色
@blog-title-color: #61687C; // 博客标题颜色
@blog-github-fill-color: #FFC6DE; // GitHub 角标背景色
@post-catalog-bg-color: #fffafa; // 博文目录背景色
@post-catalog-font-color: #a2a2a2; // 博文目录字体色
@post-table-thead-bg-color: #f9f9f9; // 博文表格标题背景色
@post-table-border-color: #fbdfeb; // 博文表格标题边框颜色
@post-inline-code-bg-color: #fbfbfb; // 博文行内代码背景色
@post-inline-code-border-color: #eee; // 博文行内代码边框颜色
@post-cnblogs-code-bg-color: #f2f4f5; // 博文默认代码块背景色
@post-cnblogs-code-font-color: #656c73; // 博文默认代码块字体色
@post-signature-bg-color: #f8f8f8; // 博文签名背景色
@post-blockquote-border-color:#FFC6DE; // 博文引用边框颜色
@comment-font-color: #858ca5; // 评论字体色
@comment-bg-color: #ffecf4; // 评论背景色
.cnblogs-markdown .hljs { // Markdown 编辑器模式代码块样式
display: block;
color: #333;
overflow-x: auto;
background: #F2F4F5 !important;
border: none !important;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace !important;
padding: 1em !important;
font-size: 14px !important;
}
.hljs-comment,
.hljs-meta {
color: #969896;
}
.hljs-string,
.hljs-variable,
.hljs-template-variable,
.hljs-strong,
.hljs-emphasis,
.hljs-quote {
color: #df5000;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-type {
color: #a71d5d;
}
.hljs-literal,
.hljs-symbol,
.hljs-bullet,
.hljs-attribute {
color: #0086b3;
}
.hljs-section,
.hljs-name {
color: #63a35c;
}
.hljs-tag {
color: #333333;
}
.hljs-title,
.hljs-attr,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
color: #795da3;
}
.hljs-addition {
color: #55a532;
background-color: #eaffea;
}
.hljs-deletion {
color: #bd2c00;
background-color: #ffecec;
}
.hljs-link {
text-decoration: underline;
}
// 以上是一些主题必须设置颜色值和样式，可以根据自己的喜好调整。
// 以下可以参考博客园的 DOM 结构自由发挥写一些自己定制的样式。
...
文件保存后，需要在公共样式文件silence.less头部引入主题example.less，并注释其他主题的引用。
// @import "./themes/default.less";
// @import "./themes/goddess.less";
// @import "./themes/dark.less";
@import "./themes/example.less";
...
然后通过如下命令将动态样式文件silence.less转义为普通样式文件并压缩，输出至dist/themes/example.min.css：
lessc src/silence.less dist/themes/example.min.css -clean-css
OK，这样一套属于自己的主题样式就搞定了。
如果您需要新增一些交互功能模块，就需要更改./src/silence.js脚本文件了，该脚本文件结构非常简单并且有注释，只要略懂一点 JavaScript 的 ES6 语法就可以很轻松地读懂代码，快速实现自己的定制功能。
定制功能完成后，需要通过如下两个命令将脚本文件转义为 ES5 语法，并压缩混淆，输出至./dist/silence.min.js：
babel src/silence.js -o src/silence.es5.js
uglifyjs src/silence.es5.js -o dist/silence.min.js -c -m
最后，再按照「部署文档」中的步骤重新安装即可。