博客园 美化主题
参考资料
常用十六进制颜色对照表代码
https://www.cnblogs.com/stalla/p/11593566.html
https://tool.ip138.com/cmyk/
主题1
https://www.cnblogs.com/dream-007/p/17089229.html
https://www.cnblogs.com/leebri/p/my-blog-config.html
https://www.yuque.com/awescnb/user/rycpvv
主题2
https://www.cnblogs.com/xiaoyangyang123/p/18818715
https://www.cnblogs.com/WeiyiGeek/p/16290522.html
https://cloud.tencent.com/developer/article/2005902
https://www.cnblogs.com/lgziyan/p/17939014
主题1
调整完的页面是这样了
博客皮肤：Custom
JS权限：已开通
博客侧边栏公告：空，无代码
页面定制CSS代码
√ 禁用模板CSS
点击查看代码
/* 定义 3D 旋转动画 */
@keyframes spin3D {
from {
transform: rotate3d(0.5, 0.5, 0.5, 360deg); /* 起始旋转参数 */
}
to {
transform: rotate3d(0, 0, 0, 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 0.2s infinite; /* 动画：3秒周期，延迟0.2秒，无限循环 */
}
/* 绿色轨道（中层） */
.green-orbit {
width: 120px; /* 宽度 */
height: 120px; /* 高度 */
border: 1px solid #91ffbfa5; /* 边框：淡绿色 */
animation: spin3D 2s linear 0s infinite; /* 动画：2秒周期，无延迟 */
}
/* 红色轨道（内层） */
.red-orbit {
width: 90px; /* 宽度 */
height: 90px; /* 高度 */
border: 1px solid #ffca91a5; /* 边框：淡红色（透明度0.65） */
animation: spin3D 1s linear 0s infinite; /* 动画：1秒周期，无延迟 */
}
/* 白色中心轨道 */
.white-orbit {
width: 60px; /* 宽度 */
height: 60px; /* 高度 */
border: 2px solid #fff; /* 边框：白色，加粗 */
animation: spin3D 10s linear 0s infinite; /* 动画：10秒周期，无延迟 */
}
/* 不同旋转轴的偏移量（调整轨道角度） */
.w1 { transform: rotate3d(1, 1, 1, 90deg); } /* 沿 XYZ 轴旋转90度 */
.w2 { transform: rotate3d(1, 2, 0.5, 90deg); } /* 自定义旋转轴 */
.w3 { transform: rotate3d(0.5, 1, 2, 90deg); } /* 自定义旋转轴 */
页首HTML代码
点击查看代码
<!-- 全屏加载层容器 -->
<div id="loading">
<!-- 旋转动画容器（300x300px，居中显示） -->
<div class="spinner-box">
<!-- 蓝色旋转轨道（外层） -->
<!-- 尺寸：165x165px，淡蓝色边框，3秒旋转周期，延迟0.2秒 -->
<div class="blue-orbit leo"></div>
<!-- 绿色旋转轨道（中层） -->
<!-- 尺寸：120x120px，淡绿色边框，2秒旋转周期，无延迟 -->
<div class="green-orbit leo"></div>
<!-- 红色旋转轨道（内层） -->
<!-- 尺寸：90x90px，淡红色边框，1秒旋转周期，无延迟 -->
<div class="red-orbit leo"></div>
<!-- 白色中心轨道（带三维旋转偏移） -->
<!-- w1类：沿X=1,Y=1,Z=1轴旋转90度，调整轨道倾斜角度 -->
<div class="white-orbit w1 leo"></div>
<!-- 白色中心轨道（带不同三维旋转偏移） -->
<!-- w2类：沿X=1,Y=2,Z=0.5轴旋转90度，改变轨道倾斜方向 -->
<div class="white-orbit w2 leo"></div>
<!-- 白色中心轨道（带不同三维旋转偏移） -->
<!-- w3类：沿X=0.5,Y=1,Z=2轴旋转90度，形成多角度立体效果 -->
<div class="white-orbit w1 leo"></div> <!-- 注：此处可能为笔误，类名应与w3对应 -->
</div>
</div>
页脚HTML代码
点击查看代码
<script src="https://blog-static.cnblogs.com/files/guangzan/loader.min.js"></script>
<script>
const config = {
// 主题配置
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' // 头部背景图（随机图API）
},
// 评论区表情配置
emoji: {
enable: true, // 启用表情功能
buttonIcon: "🥳", // 表情按钮图标
emojiList: [ // 表情列表（支持emoji字符和图片URL）
{
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链接配置
github: {
enable: false, // 启用GitHub链接
color: '#7775c4', // GitHub图标颜色（紫色）
url: 'https://github.com/legical', // GitHub个人主页
},
// 签名配置
signature: {
enable: true, // 启用签名
contents: [ // 签名内容（支持HTML）
"色相事一刹那，<b style='color:#ff6b81'>光阴里无尽藏。</b>",
// "<b>console.log(🍺);</b>", // 被注释的签名内容
],
},
// 图片查看器配置
imagebox: {
enable: true, // 启用图片查看器
},
// 暗黑模式配置
darkMode: {
enable: true, // 启用暗黑模式
autoDark: true, // 夜间自动切换深色模式
autoLight: true // 日间自动切换浅色模式
},
// 背景图片或颜色
bodyBackground: {
enable: true, // 启用背景功能（设为true表示开启背景显示）
// 只保留一行value，选择 背景颜色 或 背景图片 其中一种
//value: 'https://images.cnblogs.com/cnblogs_com/fhxzh/2457994/o_250516083710_222.png',
//value: 'https://api.mtyqx.cn/api/random.php',
value: 'https://api.mtyqx.cn/tapi/random.php',
//value: '#FFCCCC', // 背景颜色值（十六进制颜色码，#1d2630 深灰蓝色，#FFCCCC 浅粉 ）
opacity: 0.95, // 背景透明度（取值范围0-1，0.85表示透明度15%，即保留85%的颜色不透明度）
repeat: false // 背景重复方式（false表示不重复平铺，适用于纯色背景或单张图片背景）
},
// 通知配置
notice:{
enable: true, // 启用通知
text: [ // 通知内容轮播
'🔯双击导航条锁屏',
'😙你最最最重要',
'😊戒骄戒躁，久久为功'
],
},
// 锁屏配置
lock: {
enable: true, // 启用锁屏功能
background: '', // 锁屏背景图（留空使用默认）
strings: [ // 锁屏提示语随机显示
'😾到点啦，不能再学了！',
'🛌乖宝，休息一会儿吧~',
'🥰离开一会，马上回来~',
'🧋喂！三点几啦！饮茶先啦！',
],
},
// Live2D模型配置
live2d: {
enable: true, // 启用Live2D模型
page: 'all', // 显示页面（all表示所有页面）
agent: 'pc', // 显示设备（pc表示仅PC端显示）
model: 'haru-01', // 模型名称,'haru-01','小埋',
width: 150, // 模型宽度
height: 200, // 模型高度
position: 'left', // 模型位置（left表示左侧）
gap: 'default', // 边距（default表示默认值）
},
// 音乐播放器配置
musicPlayer: {
enable: false, // 禁用音乐播放器
},
// Gitee链接配置
gitee: {
enable: false, // 禁用Gitee链接
color: '#C71D23', // Gitee图标颜色（红色）
url: '', // Gitee个人主页
},
// 打赏配置
donation: {
enable: false, // 禁用打赏功能
qrcodes: [], // 打赏二维码
},
// 标注配置
notation: {
enable: true, // 启用标注功能
},
// 文章顶部图片配置
postTopimage: {
enable: true, // 启用文章顶部图片
imgs: ['https://s1.328888.xyz/2022/07/25/DuW9k.png'], // 顶部图片列表
position: 'top', // 图片位置（top表示顶部）
},
// 首页列表图片配置
indexListImg: {
enable: true, // 启用首页列表图片
imgs: [], // 列表图片列表（留空使用默认）
},
// 顶部进度条配置
topProgress: {
enable: false, // 禁用顶部进度条
page: 'all', // 显示页面（all表示所有页面）
agent: 'pc', // 显示设备（pc表示仅PC端显示）
background: '#29898d', // 进度条背景色（与主题色一致）
height: '5px', // 进度条高度
},
}
// 初始化插件
$.awesCnb(config)
</script>
主题3
忘了是用的啥主题了。。。
先贴上代码吧
点击查看代码
#home {
margin: 0 auto;
width: 80%;/*原始65*/
min-width: 980px;/*页面顶部的宽度*/
background-color: rgba(245, 245, 245, 0.7);
padding: 30px;
margin-top: 50px;
margin-bottom: 50px;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
body {
background: rgba(12, 100, 129, 1) url('http://images.cnblogs.com/cnblogs_com/Penn000/1013849/o_123.jpg') fixed no-repeat;
background-position: 50% 5%;
background-size: cover;
}
#blogTitle {
height: 100px; /*高度*/
clear: both;
background-color: rgba(245, 245, 245, 0);
}
#blogTitle h1 {
font-size: 36px;
font-weight: bold;
line-height: 1.8em;/*原始 1.6em*/
margin-top: 10px;/*原始 15px */
color: #548B54;
}
#blogTitle h2 {
font-weight: normal;
font-size: 17px;/*原始 16px ；font-size: 1.0rem;*/
line-height: 1.8;
color: #111;
font-weight: bold;
text-align: right;
float: right;
}
#navigator{
background-color: rgba(33, 160, 139, 0.9);
}
#navList a:link, #navList a:visited, #navList a:active{
color: #eee;
font-size: 18px;
font-weight: bold;
}
.blogStats{
color: #eee;
}
.postTitle {
border-left: 8px solid rgba(33, 160, 139, 0.68);
margin-left: 10px;
margin-bottom: 10px;
font-size: 20px;
float: right;
width: 100%;
clear: both;
}
.postTitle a:link, .postTitle a:visited, .postTitle a:active {
color: #21759b;
transition: all 0.4s linear 0s;
}
.postTitle a:hover {
margin-left: 30px;
color: #0f3647;
text-decoration: none;
}
.postCon {
float: right;
line-height: 1.5em;
width: 100%;
clear: both;
padding: 10px 0;
}
.day .postTitle a {
padding-left: 10px;
}
.day {
background: rgba(255, 255, 255, 0.5);
}
/*文章附加信息*/
.postDesc {
background: url(images/posted_time.png) no-repeat 0 1px;
color: #757575;
float: left;
width: 100%;
clear: both;
text-align: left;
font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
font-size: 13px;
padding-right: 20px;/*5px padding-left: 90px;posted 发表时间左边距离*/
margin-top: 20px;
line-height: 1.8;
padding-bottom: 35px;
}
.newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory,
.catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView,
.catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory ,#blog-calendar
{
background: rgba(255, 255, 255, 0.5);
margin-bottom: 35px;
word-wrap: break-word;
}
.CalTitle{
background: rgba(255, 255, 255, 0);
}
.catListTitle{
background-color: rgba(33, 160, 139, 0.9);
}
#topics{
background: rgba(255, 255, 255, 0.5);
}
.c_ad_block{
display: none;
}
#tbCommentBody{
width: 100%;
height: 200px;
background: rgba(255, 255, 255, 0.5);
}
#q{background: rgba(255, 255, 255, 0);}
.CalNextPrev{background: rgba(255, 255, 255, 0);}
.cnblogs_code{
background: rgba(255, 255, 255, 0);
}
.cnblogs_code div{
background: rgba(255, 255, 255, 0);
}
.cnblogs_code_toolbar{
background: rgba(255, 255, 255, 0);
}
.entrylist{
background: rgba(255, 255, 255, 0.5);
}
浙公网安备 33010602011771号