听说您的博客园主题很丑,在这里我给你推荐一个工具(awescnb),绝对让您满意!
1、前言
修改:我已经弃用这个了,感觉还是太花哨了,晃眼睛,所以又改回原来的样式了。
我一直都觉得博客园默认的主题都挺丑的,因为那些默认的主题都是很久很久以前的前辈们设置的样式了,但是现在已经是2021年了,大家的审美也越来越高,当然我也不例外。所以今天就想着改改自己的博客园主题,奈何自己太菜了,只能去寻求百度,我百度了很久,终于功夫不负有心人,找到一个非常非常非常好用的网站,而且大佬们也都一直都在维护着,真的太感谢他们的无私奉献了。
2、使用awescnb工具构建博客园主题
我要推荐的这个主题工具为:awescnb。它里面有很多中主题可以选择,而且最重要的是大佬帮我们需要的参数都封装好了,也就是说我们可以根据他们提供了属性来设置主题的功能,我只想说:非常的好用。
博主地址:https://www.cnblogs.com/guangzan/
项目本身地址:https://guangzan.gitee.io/awescnb-docs/
Gitee地址:https://gitee.com/guangzan/awescnb
GitHub地址:https://github.com/guangzan/awescnb
主题地址:https://www.yuque.com/awescnb/user/tmpomo (重点关注这个网站)
然后我们进入上面用红色标记的网站,进入后如下图所示,然后就可以设置我们想要的主题,后面的操作反正非常的简单,如果这都不会操作,我建议您去当地的医院看一看。
下面给出我的设置吧。
①、后台默认主题
后台默认主题需要为: Custom
②、页面定制 CSS 代码
注意:需要勾选禁用模板默认CSS
#loading { bottom: 0; left: 0; position: fixed; right: 0; top: 0; z-index: 9999; background-color: #f4f5f5; pointer-events: none; } .loader-inner { will-change: transform; width: 40px; height: 40px; position: absolute; top: 50%; left: 50%; margin: -20px 0 0 -20px; background-color: #3742fa; border-radius: 50%; animation: scaleout 0.6s infinite ease-in-out forwards; text-indent: -99999px; z-index: 999991; } @keyframes scaleout { 0% { transform: scale(0); opacity: 0; } 40% { opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
③、博客侧边栏公告
注意:这里的前提是你申请了JS的使用权,否则下面的JS代码是不会起作用的。
<script src="https://guangzan.gitee.io/awescnb/index.js"></script> <script> $.awesCnb({ /*基本设置*/ theme: { name: 'reacg', // 默认皮肤 avatar: 'https://pic.cnblogs.com/avatar/1745215/20190717185419.png', favicon: 'https://pic.cnblogs.com/avatar/1745215/20190717185419.png', }, /*个性签名*/ signature: { enable: true, contents: [ "This theme is built with <b style='color:#ff6b81'>awescnb</b>.", "<b>System.out.println(🍺唐浩荣,我不准你停止学习,因为只有光头才能变强!);</b>", ], }, /*背景*/ bodyBackground: { enable: true, value: '#EEE6AA', opacity: 0.85, repeat: false, }, /*图表*/ charts: { enable: true, pie: { title: 'My skills', data: { labels: ['Java','Java Web','JVM','Spring Boot|Cloud','分布式','Vue','算法'], values: ['70', 30, 20, 10, 20,5,5], }, }, }, /*人物模型*/ live2d: { enable: true, page: 'all', agent: 'pc', model: 'chitose', width: 150, height: 200, position: 'left', gap: 'default', }, /*音乐播放器*/ musicPlayer: { enable: true, autoplay: false, lrc: { enable: true, // 启用歌词 type: 1, // 歌词类型 1 -> 字符串 3 -> url color: '#10ac84', // 颜色 }, audio: [ { name: '城南花已开', url: 'http://music.163.com/song/media/outer/url?id=468176711.mp3', cover: 'http://p4.music.126.net/i-7ktILRPImJ0NwiH8DABg==/109951162885959979.jpg?param=300x300', lrc: "纯音乐无歌词", }, ], }, /*github*/ github: { enable: true, color: '#ffb3cc', url: 'https://github.com/tanghaorong', }, /*码云*/ gitee: { enable: true, color: '#C71D23', url: 'https://gitee.com/tanghaorong', }, /*随笔签名*/ postSignature: { enable: true, enableLicense: true, content: ['本文版权归作者和博客园共有,欢迎转载,但是转载需在博客的合适位置给出原文链接,否则保留追究法律责任的权利。'], licenseName: '「署名-非商业性使用-相同方式共享 4.0 国际」', licenseLink: '', }, /*自定义链接*/ links: [ { name: '回到博客首页', link: 'https://www.cnblogs.com/tanghaorong', }, // .... ], }) </script>
④、页首 HTML 代码
<div id="loading"><div class="loader-inner"></div></div>
最后,点击保存就可以看到和我一样的主题样式了(感觉太花哨了,有改回之前的主题了)。
3、其它的主题
额外还有一个,这个叫 atum,我这里就不介绍了,感兴趣可以自己去设置。
地址1:https://www.cnblogs.com/cjunn/#/c/subject/category/default.html
地址2:https://www.cnblogs.com/yjlaugus/#/c/subject/p/13466375.html
其实我还找到一些其它的主题,但是都不是我喜欢的,所以就没有推荐了。