博客园主题美化
前提
博客园自带的主题实在是太丑了，在申请到js权限后，我便计划装上新主题。
前期参考的主题有：
优点：好看，多图，确实好看😍。
缺点：需要自己配置main.js，如live2d等功能已不可用，没有文章目录。
我的主题配置在这里。其他博主的bug修复教程。
优点：好看，有图片，有目录。
缺点：没时间研究啦😜
优点：布置方便，文档写得好。
1、主题选择
这里选择awescnb默认的reacg，安装教程
我的后台配置：
2、详细配置
2.1 页面定制 CSS
复制如下代码粘贴到【页面定制 CSS】
@keyframes spin3D{from{transform:rotate3d(0.5,0.5,0.5,360deg)}to{transform:rotate3d(0deg)}}#loading{height:100%;background-color:#1d2630;display:flex;justify-content:center;align-items:center;position:fixed;top:0;left:0;right:0;overflow:hidden;z-index:99999999}.spinner-box{width:300px;height:300px;display:flex;justify-content:center;align-items:center;background-color:transparent}.leo{position:absolute;display:flex;justify-content:center;align-items:center;border-radius:50%}.blue-orbit{width:165px;height:165px;border:1px solid #91daffa5;animation:spin3D 3s linear .2s infinite}.green-orbit{width:120px;height:120px;border:1px solid #91ffbfa5;animation:spin3D 2s linear 0s infinite}.red-orbit{width:90px;height:90px;border:1px solid #ffca91a5;animation:spin3D 1s linear 0s infinite}.white-orbit{width:60px;height:60px;border:2px solid #fff;animation:spin3D 10s linear 0s infinite}.w1{transform:rotate3D(1,1,1,90deg)}.w2{transform:rotate3D(1,2,0.5,90deg)}.w3{transform:rotate3D(0.5,1,2,90deg)}
2.2 博客侧边栏公告
为空，什么都不填。
2.3 页首HTML代码
复制如下代码粘贴到【页首 HTML 代码】，采用动态星系加载动画。
<div id="loading">
<div class="spinner-box">
<div class="blue-orbit leo"></div>
<div class="green-orbit leo"></div>
<div class="red-orbit leo"></div>
<div class="white-orbit w1 leo"></div>
<div class="white-orbit w2 leo"></div>
<div class="white-orbit w3 leo"></div>
</div>
</div>
2.3 页脚HTML代码
复制如下代码粘贴到【页脚 HTML 代码】，（如没开通 js 权限请先开通，理由填“适度美化博客”）。
自定义主要在这块。
<script src="https://guangzan.gitee.io/awescnb/index.js"></script>
<script>
const config = {
// 默认启用皮肤 'reacg'
// 在这里添加自定义配置
// 当前为全部使用默认配置
theme: {
name: 'reacg',
color: '#29898d',
title: 'Leebri’s Blog！',
favicon: 'https://s1.328888.xyz/2022/08/01/FqqGP.png',
avatar: 'https://pic.cnblogs.com/avatar/2937389/20220723235216.png',
headerBackground: 'https://api.mtyqx.cn/api/random.php'
},
emoji: {
enable: true,
buttonIcon: "🥳",
emojiList: [
{
value: 'https://images.cnblogs.com/cnblogs_com/gshang/1626876/o_2001050555139.png',
label: '',
},
{
value: '🤣',
label: '笑哭',
},
{
value: '😃',
label: '大笑',
},
{
value: '😅',
label: '苦笑',
},
{
value: '😆',
label: '斜眼笑',
},
{
value: '😏',
label: '得意',
},
{
value: '😊',
label: '微笑',
},
{
value: '😎',
label: '酷！',
},
{
value: '😍',
label: '花痴',
},
{
value: '🙂',
label: '呵呵',
},
{
value: '🤩',
label: '好崇拜哦',
},
{
value: '🤔',
label: '思考',
},
{
value: '🙄',
label: '白眼',
},
{
value: '😜',
label: '略略略',
},
{
value: '😲',
label: '呆住',
},
{
value: '😭',
label: '大哭',
},
{
value: '🤯',
label: '头炸了',
},
{
value: '😰',
label: '冷汗',
},
{
value: '😱',
label: '吓死了',
},
{
value: '🤪',
label: '略略略',
},
{
value: '😵',
label: '晕',
},
{
value: '😡',
label: '愤怒',
},
{
value: '🥳',
label: '祝贺',
},
{
value: '🤡',
label: '小丑竟是我',
},
{
value: '🤫',
label: '嘘~',
},
{
value: '🐒',
label: '猴',
},
{
value: '🤭',
label: '笑笑不说话',
},
{
value: '🐂',
label: '牛',
},
{
value: '🍺',
label: '啤酒',
},
{
value: '(=・ω・=)',
label: '乖巧',
},
{
value: '(｀・ω・´)',
label: '啊这',
},
{
value: '(°∀°)ﾉ',
label: '震惊',
},
{
value: '←_←',
label: '鄙视',
},
{
value: '→_→',
label: '就这',
},
{
value: 'Σ(ﾟдﾟ;)',
label: '不会吧',
},
{
value: '(｡･ω･｡)',
label: '不敢动',
},
{
value: '(-_-#)',
label: '无语',
},
]
},
// 代码高亮
highLight: {
enable: true,
},
// 代码行号
lineNumbers: {
enable: true,
},
github: {
enable: true,
color: '#7775c4',
url: 'https://github.com/legical',
},
signature: {
enable: true,
contents: [
"色相事一刹那，<b style='color:#ff6b81'>光阴里无尽藏。</b>",
// "<b>console.log(🍺);</b>",
],
},
imagebox: {
enable: true,
},
darkMode: {
enable: true,
// 夜间自动切换深色模式
autoDark: true,
// 日间自动切换浅色模式
autoLight: true
},
// 背景图片或颜色
bodyBackground: {
enable: true,
value:'#1d2630',
// 'https://api.mtyqx.cn/tapi/random.php',
opacity: 0.85,
repeat: false,
},
notice:{
enable:true,
text:['🔯双击导航条锁屏','😙你最最最重要','😊戒骄戒躁，久久为功'],
},
lock: {
enable: true,
background: '',
strings: [
'😾到点啦，不能再学了！',