博客园简约主题simple-color

写在前面

本款主题是基于@esofar的silence主题，稍加更改完成。喜欢主题的极简风，同时也适配了许多个性化的东西，所以，主题总体基本没有任何的优化，代码凌乱，本不想放出，毕竟代码混乱，毫无逻辑可言，近期有许多小伙伴想要这一套主题，特此放出。不当之处定会有许多，请多担待。同时也部分参考了GShang学长的博客，特表感谢。

功能简介

• 移动端适配
• 极简白，夜间黑，清新透明，玻璃磨砂 四种主题模式自动切换
• 音乐播放器
• 图片灯箱
• 文章自动目录生成

主题预览

动态预览

会思考的鱼儿
兮雨祈苏
东北小蟹蟹

萝卜小兔子头

极简白

个人比较喜欢的一个样式，极简风。

夜间黑

不能算是博客的一种主题，你可以理解为夜间模式。

清新透明

喜欢极致色彩的朋友。

玻璃磨砂

毛玻璃磨砂质感。

主题部署

一键部署

如果你想快速搭建出和本博客一样的主题样式，请查看下面这句说明。当然，前提是你得有 js权限
如果想部署和当前博客一样的样式。直接下载整个主题，下载地址 见文章末尾。把页脚，页首，侧边栏的代码粘贴到你的博客后台，然后** 更改一下其中的文件链接地址 **即可。

重要：源代码中的文件地址均是举例使用，并非文件真实地址，比如这个地址：https://example.com/simple-color.js 这个地址只是为了举例用法，这样并未真正的将simple-color.js 引入博客。若想真正引入，需要先把simple-color.js 在博客后台上传，然后右键复制文件的真实地址才行，比如：https://files.cnblogs.com/files/yjlaugus/simple-color.js 。其余的css 文件也是同样的用法，这里不再举例。因为看到很多人部署的博客这个地址是都有更换的，所以特此说明。所有的css,js文件都已经上传，地址在文章末尾。

下面的部署文档只为了个性化定制而写，如果你想个性化的定制博客主题，请接着往下看，

基本部署

• 前提：已经开通js权限，没开通的可以向博客园官方申请开通。

• 引入文件

可以放在页脚。

• 引入样式

  把simple-color.css中的代码粘贴在自定义css样式中。

• 选择模板

  具体的设置如下图。

• 头部菜单设置

把下面链接中的地址换成你自己的文章或者随笔的地址就好。下面函数在simple-color.js文件中。

  function() {
                  var e = this,
                  t = p(this.cnblogs.blogTitle).find("h1 a").html(),
                  a = p(this.cnblogs.publicProfile).find("a:eq(0)").html(),
                  o = p("head").find("title");
                  //o.html(o.html().replace(a + " - 博客园", "" + t));
                  var n = p(this.cnblogs.navList);
  				n.find("li").eq(1).after('
标签
'),
  				n.find("li").eq(2).after('
关于
'),
  				n.find("li").eq(3).after('
微语
'),
  				n.find("li").eq(4).after('
投喂
'),
  				n.find("li").eq(5).after('
友链
'),
                  p.each(n.find("li"),
                  function(e, t) {
                      p(t).append("")
                  }),
                  p("body").prepend('
'),
                  p(".esa-mobile-menu").on("click",
                  function() {
                      p(e.cnblogs.navigator).fadeToggle(200)
                  })
              }

这样一个主题基本完成，如果想加其余的功能，接着往下看。

• 脚本设置

  为了提高园友的阅读体验，主题在博客园原有功能基础上追加了一些辅助阅读、以及人性化的功能模块。其中部分模块做了参数配置，用户可根据自己意愿选择是否启用。若启用，再根据自己的信息或写作习惯设置相关参数。进入『设置』界面，将如下脚本代码引用 追加 到「博客侧边栏公告」文本域中，其中配置参数根据下表自行修改。这个配置是来自silence部署文档。

配置参数说明表：

配置完成后，记得点击「保存」按钮，保存上述操作。

• 补充说明

  进入『设置』界面，在「标题」文本框中设置博客标题，注意不支持显示「子标题」；在「博客皮肤」处选择博客园官方标准模板 Custom；把「禁用模板默认CSS」复选框取消勾选。最后，点击「保存」按钮保存上述 3 步操作。

  进入『选项』界面，在「控件显示设置」中需要勾选的博客园官方功能模块如下几个：

  • 必须要勾选：公告、我的标签、随笔分类、阅读排行榜、推荐排行榜
  • 自定义勾选：博客园链接、首页链接、RSS订阅、联系

  其他模块取消勾选(可选操作)。最后，点击「SAVE」按钮保存操作。

个性定制

博客自动更换主题

实现四种主题样式自定义切换。点击博客左上角的 试试看！当然，如果你还不满足于现在的主题样式，可以自己定制自己的主题样式，详细请转看文章

底部加载音乐播放器

图片灯箱

• 部署

• 使用

只需要在img标签中 写入 data-action="zoom"属性即可。

加载鼠标动态粒子

主题文章预览图设置

需要把文章的预览图写在这里。

下载地址

• cnblogs-theme-simple-color

• 求个小星星!

写在最后

如有什么问题可评论在下方，及时更正，再次感谢。