听说您的博客园主题很丑，在这里我给你推荐一个工具(awescnb)，绝对让您满意！

目录

• 1、前言
• 2、使用awescnb工具构建博客园主题
  • ①、后台默认主题
  • ②、页面定制 CSS 代码
  • ③、博客侧边栏公告
  • ④、页首 HTML 代码
• 3、其它的主题

 

---

回到顶部

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

其实我还找到一些其它的主题，但是都不是我喜欢的，所以就没有推荐了。