Name	Name	Last commit message	Last commit date
Latest commit History 5 Commits
images.assets	images.assets
interesting	interesting
.gitignore	.gitignore
LICENSE	LICENSE
README.md	README.md

介绍

本主题改版自 https://github.com/YJLAugus/cnblogs-theme-simple-color

1功能简介

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

2主题预览

image-20210919181316173

案例预览

主题部署

1.基本设置

image-20210919151817327

2.页面定制CSS

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

3. 博客侧边栏公告

<!-- 头像 -->
<!-- <div class="av"> -->
<!-- <img class="but" itemprop="image" src="https://images.cnblogs.com/cnblogs_com/xu-ux/1864779/o_2010160949432020.jpg" style="cursor:pointer;" width= "100%" alt="小浣熊" />
</div> -->
<!-- 头像start -->
<script>
$(document).ready(function(){
 document.getElementById("favicon").setAttribute("href","https://blog-static.cnblogs.com/files/xu-ux/favicon.ico");
});
</script>
<!-- 头像end -->
<!--内容区start-->
<script type="text/javascript">
 $.silence({
 profile: {
 enable: true,
 avatar: 'https://images.cnblogs.com/cnblogs_com/xu-ux/1864779/o_2010160949432020.jpg',
 favicon: 'https://blog-static.cnblogs.com/files/xu-ux/favicon.ico',
 },
 catalog: {
 enable: true,
 move: true,
 index: true,
 level1: 'h2',
 level2: 'h3',
 level3: 'h4',
 },
 signature: {
 enable: true,
 home: 'https://xu-ux.cnblogs.com/',
 license: 'CC BY 4.0',
 link: 'https://creativecommons.org/licenses/by/4.0'
 },
 reward: {
 enable: false,
 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/xu_uxo/'
 }
 });
</script>
<!--内容区end-->
<!--主题切换 放在侧边栏start-->
<script>
	$('.fa.fa-cog.fa-spin.fa-lg').click(function () {
	 $(this).closest('.float-btn-group').toggleClass('open');
	});
</script>
<!--主题切换 放在侧边栏end-->
<!--主题切换放在侧边栏start-->
<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>
<!--主题切换放在侧边栏end-->
<!-- 头像 -->
<!-- 头像搞怪音乐 -->
<script>
 $(document).ready(function() {
 var voice = document.getElementById('voice'); //获取到audio元素
 $('.but').click(function() { //点击文字事件
 if (voice.paused) { //判断音乐是否在播放中,暂停状态
 voice.play(); //音乐播放
 $('.but').text('暂停'); //切换文字
 
 } else { //播放状态
 voice.pause(); //音乐停止
 $('.but').text('播放'); //切换文字
 }
 });
 });
</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>
<!-- 鼠标点击特效 -->
<script src="https://blog-static.cnblogs.com/files/xu-ux/cursor-effects.js"></script>
<!-- 鼠标点击特效end -->
<!-- 随机打字机js-->
<script src="https://blog-static.cnblogs.com/files/xu-ux/roll.js"></script>
<!-- 随机打字机js end-->

配置参数说明表:

模块	属性	说明	类型	默认值
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
wechat	微信收款二维码	String	null
github(GitHub Corners)	enable	是否启用	Boolean	false
fill	背景填充色	String	[Silence Theme Color]
color	章鱼猫颜色	String	#fff
link	Github 链接	String	null

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

4.页首html

<!-- 主题切换按钮样式 放在页首 -->
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/xu-ux/themebtn.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"/>
<!-- 音乐播放器 放在页首 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css">
<link rel="stylesheet" href="https://blog-static.cnblogs.com/files/xu-ux/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 -->
<!-- 图片灯箱 放在页首-->
<link rel="stylesheet" href="https://blog-static.cnblogs.com/files/xu-ux/zoom.css">
<!-- 图片灯箱 end-->
<!-- 自定义css-->
<link rel="stylesheet" href="https://blog-static.cnblogs.com/files/xu-ux/xuux-custom.css">

4.页脚html

<!-- 核心引入 -->
<script src="https://blog-static.cnblogs.com/files/xu-ux/interesting.js"></script>
<!--主题切换放在页脚start-->
<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 >
<!--主题切换放在页脚end-->
<!-- 音乐播放器js 放在页脚 -->
<script src="https://blog-static.cnblogs.com/files/xu-ux/APlayer.min.js"></script>
<script src="https://blog-static.cnblogs.com/files/xu-ux/Meting.min.js"></script>
<!-- 音乐播放器js end -->
<!-- 图片灯箱js 放在页脚-->
<script src="https://blog-static.cnblogs.com/files/xu-ux/zoom.js"></script>
<!-- 图片灯箱js end-->

图片灯箱

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

<img src="https:example.png" data-action="zoom">

主题文章预览图设置

img

头部菜单设置

把下面链接中的地址换成你自己的文章或者随笔的地址就好。下面函数在interesting.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)
 })
 }

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

License

Uh oh!

xu-ux/cnblogs-theme-interesting

Folders and files

Latest commit

History

Repository files navigation

介绍

1功能简介

2主题预览

主题部署

1.基本设置

2.页面定制CSS

3. 博客侧边栏公告

4.页首html

4.页脚html

图片灯箱

主题文章预览图设置

头部菜单设置

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages

Languages

License

xu-ux/cnblogs-theme-interesting

Folders and files

Latest commit

History

Repository files navigation

介绍

1功能简介

2主题预览

主题部署

1.基本设置

2.页面定制CSS

3. 博客侧边栏公告

4.页首html

4.页脚html

图片灯箱

主题文章预览图设置

头部菜单设置

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages