博客园简约主题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权限，没开通的可以向博客园官方申请开通。 -
引入文件
可以放在页脚。
<script src="https://example.com/simple-color.js"></script>
-
引入样式
把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('<li><a id="blog_nav_tags" class="menu" href="https://www.cnblogs.com/' + currentBlogApp + '/tag">标签</a></li>'),
n.find("li").eq(2).after('<li><a id="blog_nav_tags" class="menu" href="https://www.cnblogs.com/yjlaugus/p/7705340.html ">关于</a></li>'),
n.find("li").eq(3).after('<li><a id="blog_nav_tags" class="menu" href="https://www.cnblogs.com/yjlaugus/articles/weibo.html">微语</a></li>'),
n.find("li").eq(4).after('<li><a id="blog_nav_tags" class="menu" href="https://www.cnblogs.com/yjlaugus/p/7857317.html ">投喂</a></li>'),
n.find("li").eq(5).after('<li><a id="blog_nav_tags" class="menu" href="https://www.cnblogs.com/yjlaugus/p/8724650.html">友链</a></li>'),
p.each(n.find("li"),
function(e, t) {
p(t).append("<i></i>")
}),
p("body").prepend('<div class="esa-mobile-menu"></div>'),
p(".esa-mobile-menu").on("click",
function() {
p(e.cnblogs.navigator).fadeToggle(200)
})
}
这样一个主题基本完成，如果想加其余的功能，接着往下看。
-
脚本设置
为了提高园友的阅读体验，主题在博客园原有功能基础上追加了一些辅助阅读、以及人性化的功能模块。其中部分模块做了参数配置，用户可根据自己意愿选择是否启用。若启用，再根据自己的信息或写作习惯设置相关参数。进入『设置』界面，将如下脚本代码引用 追加 到
「博客侧边栏公告」文本域中，其中配置参数根据下表自行修改。这个配置是来自silence部署文档。
<!-- 放在侧边栏-->
<script type="text/javascript">
$.silence({
profile: {
enable: true,
avatar: '',
favicon: 'https://files-cdn.cnblogs.com/files/yjlaugus/favicon.ico',
},
catalog: {
enable: true,
move: true,
index: true,
level1: 'h2',
level2: 'h3',
level3: 'h4',
},
signature: {
enable: true,
home: 'https://yjlaugus.cnblogs.com/',
license: 'CC BY 4.0',
link: 'https://creativecommons.org/licenses/by/4.0'
},
reward: {
enable: true,
title: '『一键投喂 软糖/蛋糕/布丁/牛奶/冰阔乐！』',
wechat: 'https://www.cnblogs.com/images/cnblogs_com/yjlblog/1280680/o_wx_zfx.png',
alipay: 'https://www.cnblogs.com/images/cnblogs_com/yjlblog/1280680/o_zfb_zfx.png',
},
github: {
enable: false,
color: '#fff',
fill: null,
link: 'https://github.com/YJLAugus/'
}
});
</script>
<!--随笔发布信息 放在侧边栏-->
<script>
if ($("#topics")!=null){
$("#cnblogs_post_body").before("<p class='publishinfo'><img src='https://img.shields.io/badge/Post-"+$("#post-date").text().replace(/\-/g,"--").replace(/\ /g,"%20").replace(/\:/g,"%3A")+"-blue'/>"+
"<img src='https://img.shields.io/badge/Read-" + $("#post_view_count").text() + "-red'/>" +
"<img src='https://img.shields.io/badge/Comment-" + $("#post_comment_count").text() + "-green'/><br/>" +
$("#BlogPostCategory").html() + $("#EntryTag").html() +"</p>")
}
</script>
<!--首页排版调整 放在侧边栏-->
<script>
for(i=0;i<=$(".desc_img").length;i++){
$(".desc_img").eq(i).insertBefore($(".postTitle").eq(i));
$(".postDesc").eq(i).insertAfter($(".day .postTitle").eq(i));
}
for(i=0;i<=$(".entrylistPostSummary").length;i++){
$(".desc_img").eq(i).insertBefore($(".entrylistPosttitle").eq(i));
$(".entrylistItemPostDesc").eq(i).insertAfter($(".entrylistPosttitle").eq(i));
}
</script>
配置参数说明表：
| 模块 | 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|---|
| base（基础信息） | avatar | 博主头像 | String | null |
| favicon | 网页标题图标 | String | null | |
| catalog（博文目录） | enable | 是否启用 | Boolean | false |
| move | 是否允许拖拽 | Boolean | true | |
| index | 是否显示索引 | Boolean | true | |
| level1 | 一级标题 | String | h2 | |
| level2 | 二级标题 | String | h3 | |
| level3 | 三级标题 | String | h4 | |
| signature（博文签名） | enable | 是否启用 | Boolean | false |
| auther | 作者名字 | String | [Blog Nickname] | |
| home | 作者主页 | String | https://www.cnblogs.com | |
| license | 许可证名称 | String | CC BY 4.0 | |
| link | 许可证链接 | String | https://creativecommons.org/licenses/by/4.0 | |
| 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 |
配置完成后，记得点击「保存」按钮，保存上述操作。
-
补充说明
进入『设置』界面，在「标题」文本框中设置博客标题，注意不支持显示「子标题」；在「博客皮肤」处选择博客园官方标准模板 Custom；把「禁用模板默认CSS」复选框取消勾选。最后，点击「保存」按钮保存上述 3 步操作。
进入『选项』界面，在「控件显示设置」中需要勾选的博客园官方功能模块如下几个：
- 必须要勾选：公告、我的标签、随笔分类、阅读排行榜、推荐排行榜
- 自定义勾选：博客园链接、首页链接、RSS订阅、联系
其他模块取消勾选(可选操作)。最后，点击「SAVE」按钮保存操作。
个性定制
博客自动更换主题
实现四种主题样式自定义切换。点击博客左上角的 试试看！当然，如果你还不满足于现在的主题样式，可以自己定制自己的主题样式，详细请转看文章还在美化博客吗？试试一键更换博客主题吧！
<!--主题切换 放在侧边栏-->
<script>
$('.fa.fa-cog.fa-spin.fa-lg').click(function () {
$(this).closest('.float-btn-group').toggleClass('open');
});
</script>
<!--主题切换放在侧边栏-->
<script>
function switchNightMode(){
var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
if(night == '0'){
document.body.classList.add('night');
document.cookie = "night=1;path=/"
console.log('夜间模式开启');
}else{
document.body.classList.remove('night');
document.cookie = "night=0;path=/"
console.log('夜间模式关闭');
}
}
(function(){
if(document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") === ''){
if(new Date().getHours() > 22 || new Date().getHours() < 6){
document.body.classList.add('night');
document.cookie = "night=1;path=/";
console.log('夜间模式开启');
}else{
document.body.classList.remove('night');
document.cookie = "night=0;path=/";
console.log('夜间模式关闭');
}
}else{
var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
if(night == '0'){
document.body.classList.remove('night');
}else if(night == '1'){
document.body.classList.add('night');
}
}
})();
</script>
<script>
function switchModelMode(){
var model = document.cookie.replace(/(?:(?:^|.*;\s*)model\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
if(model == '0'){
document.body.classList.add('model');
document.cookie = "model=1;path=/"
console.log('皮肤模式开启');
}else{
document.body.classList.remove('model');
document.cookie = "model=0;path=/"
console.log('皮肤模式关闭');
}
}
function switchModelErcyMode(){
var modelercy = document.cookie.replace(/(?:(?:^|.*;\s*)modelercy\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
if(modelercy == '0'){
document.body.classList.add('modelercy');
document.cookie = "modelercy=1;path=/"
console.log('皮肤模式开启');
}else{
document.body.classList.remove('modelercy');
document.cookie = "modelercy=0;path=/"
console.log('皮肤模式关闭');
}
}
(function(){
var modelercy = document.cookie.replace(/(?:(?:^|.*;\s*)modelercy\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
if(modelercy == '0'){
document.body.classList.remove('modelercy');
}else if(modelercy == '1'){
document.body.classList.add('modelercy');
}
})();
(function(){
var model = document.cookie.replace(/(?:(?:^|.*;\s*)model\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
if(model == '0'){
document.body.classList.remove('model');
}else if(model == '1'){
document.body.classList.add('model');
}
})();
</script>
<!--主题切换放在页脚-->
<section class="model-3">
<div class="float-btn-group">
<i class="fa fa-cog fa-spin fa-lg "></i>
<div class="btn-list">
<a href="javascript:void(0);" onclick="switchNightMode()" class="btn-float yellow"><i class="fa fa-moon-o"></i></a>
<a href="javascript:void(0);" onclick="switchModelMode()" class="btn-float blue"><i class="fa fa-heart-o"> </i></a>
<a href="javascript:void(0);" onclick="switchModelErcyMode()"class="btn-float green"><i class="fa fa-heart"></i></a>
<a href="https://i.cnblogs.com/" class="btn-float pink"><i class="fa fa-user"></i></a>
</div>
</div>
</section >
<!-- 主题切换按钮样式 放在页首 -->
<link rel="stylesheet" type="text/css" href="https://example.com/themebtn.css">
<!-- 主题切换按钮样式 -->
底部加载音乐播放器
<!-- 音乐播放器 放在页首-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css">
<link rel="stylesheet" href="https://example.com/DPlayer.min.css">
<div id="aplayer" class="aplayer" data-id="865331941" data-server="netease" data-type="playlist" data-fixed="true" data-listfolded="true" data-order="random" data-theme="#2D8CF0"></div>
<!-- 音乐播放器end -->
<!-- 音乐播放器 放在页尾-->
<script src="https://example.com/APlayer.min.js"></script>
<script src="https://unpkg.com/meting@1.2/dist/Meting.min.js"></script>
图片灯箱
- 部署
<!-- 图片灯箱 放在页首 -->
<link rel="stylesheet" href="https://example.com/zoom.css">
<!-- 图片灯箱 -->
<!-- 图片灯箱 放在页脚-->
<script src="https://example.com/zoom.js"></script>
- 使用
只需要在img标签中 写入 data-action="zoom"属性即可。
<img src="https:example.png" data-action="zoom">
加载鼠标动态粒子
<!-- 鼠标点击特效 -->
<script src="https://example.com/cursor-effects.js"></script>
<!-- 鼠标点击特效end -->
主题文章预览图设置
需要把文章的预览图写在这里。
下载地址
-
求个小星星!
写在最后
如有什么问题可评论在下方，及时更正，再次感谢。
