使用awescnb项目美化博客园皮肤
本文描述使用awescnb项目美化博客园的具体步骤，包括我自己的定制化内容代码
0. 致谢
首先感谢，awescnb项目及其成员，提供的一系列成果，使得博客园的皮肤美化，变得非常简单且美好。
这里是该项目的使用手册等公告文档，你需要的一切都可以从这上面得到。
这里是该项目最初的作者写的博客园汇总贴。
1. 开始设置博客园皮肤
awescnb的公告文档，已经详细说明了该如何使用和设置博客园的皮肤。
这里只是按照顺序记录一下我的操作步骤，和一些改动的定制化地方。
1.1 设置基本皮肤
如下图所示，设置基本皮肤为官方的Custom，并且申请了JS权限，以及勾选禁用模板默认CSS
1.2 添加Loading动画
Loading动画就是在打开博客界面时的载入动画，awescnb官方提供了一些Loading动画，在其基础上定制化了一个，具体如下：
在页首HTML代码添加以下代码：
<!-- rainbow rotate -->
<div id="loading">
<div class="spinner-box">
<div class="red w1 leo"></div>
<div class="orange w2 leo"></div>
<div class="yellow w3 leo"></div>
<div class="green w4 leo"></div>
<div class="cyan w5 leo"></div>
<div class="blue w6 leo"></div>
<div class="purple w7 leo"></div>
</div>
</div>
在页面定制 CSS代码添加以下代码：
/* rainbow rotate */
@keyframes spin3D {
from {
transform: rotate3d(01.5, 01.5, 01.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%
}
.red {
width: 1px;
height: 1px;
border: 100px solid #FF0000;
animation: spin3D 0.5s linear 0s infinite
}
.orange {
width: 1px;
height: 1px;
border: 90px solid #FF7F00;
animation: spin3D 0.5s linear 0s infinite
}
.yellow {
width: 1px;
height: 1px;
border: 80px solid #FFFF00;
animation: spin3D 0.5s linear 0s infinite
}
.green {
width: 1px;
height: 1px;
border: 70px solid #00FF00;
animation: spin3D 0.5s linear 0s infinite
}
.cyan {
width: 1px;
height: 1px;
border: 60px solid #00FFFF;
animation: spin3D 0.5s linear 0s infinite
}
.blue {
width: 1px;
height: 1px;
border: 50px solid #0000FF;
animation: spin3D 0.5s linear 0s infinite
}
.purple {
width: 1px;
height: 1px;
border: 40px solid #8B00FF;
animation: spin3D 0.5s linear 0s infinite
}
.w1 {
transform: rotate3D(1, 1, 1, 90deg)
}
.w2 {
transform: rotate3D(1, 1, 1, 120deg)
}
.w3 {
transform: rotate3D(1, 1, 1, 150deg)
}
.w4 {
transform: rotate3D(1, 1, 1, 180deg)
}
.w5 {
transform: rotate3D(1, 1, 1, 210deg)
}
.w6 {
transform: rotate3D(1, 1, 1, 240deg)
}
.w7 {
transform: rotate3D(1, 1, 1, 270deg)
}
1.3 我定制化的页面布局
awescnb官方提供的一个主题geek的有些页面布局，我选择定制化一下，在刚刚1.2中添加的CSS代码后面追加以下代码：
/* -------------------------------自定义css----------------------------- */
/* 日历 */
#custom-calendar {
display: none;
}
/* 提交评论按钮 */
#btn_comment_submit {
color: #FFFFFF !important;
background-color: #1976D2 !important;
}
/* 头像下方的收藏、闪存、小组、博问导航栏 */
.profile-menu {
display: none !important;
}
/* 右上角的邮箱、写信导航栏 */
.email {
display: none;
}
.message {
display: none;
}
/* 背景图整体框 */
.profile-banner {
border-radius: 10px !important;
}
/* 头像框 */
.profile-avatar {
left: 1px !important;
bottom: 1px !important;
}
/* 头像右侧的信息栏 */
.profile-msg {
bottom: 5px !important;
}
/* 首页博文卡片的阅读等按钮 */
.custom-card-actions button {
background-color: #1976D2 !important;
}
/* 首页博文卡片 */
.custom-card {
border-radius: 10px !important;
}
/* 博文卡片标题 */
.custom-card-title {
font-size: 25px !important;
}
/* 首页博文卡片流布局 */
.cards-list {
grid-template-columns: repeat(1, 1fr) !important;
}
/* 博客中间布局 */
#mainContent {
grid-template-rows: 18vh 1fr !important;
}
/* 博客整体布局 */
#home {
grid-template-columns: auto !important;
}
1.4 引入awescnb的js脚本，并定制化
在页脚HTML代码中添加以下代码，基本上包含了当前awescnb项目能配置的所有选项，虽然其中很多选项都是geek主题使用不了的，不过已经足够用了。想开启这些选项，就enable: true,；其中有些图片的url需要自己去手动添加了：
<!-- @format -->
<script src="https://guangzan.gitee.io/awescnb/index.js"></script>
<script>
const opts = {
// 基本配置
theme: {
name: 'geek', // 要使用的皮肤
color: '', // 全局主题色，默认跟随皮肤
title: '', // 网站标题
avatar: '', // 头像url
favicon: '', // 网站图标
headerBackground: '', //背景图url
},
// 代码高亮
highLight: {
enable: true,
},
// 代码行号
lineNumbers: {
enable: true,
},
// github图标
github: {
enable: false,
color: '#FFB3CC',
url: '',
},
// 码云图标
gitee: {
enable: false,
url: '',
},
// 图片灯箱，点击图片单独显示
imagebox: {
enable: true,
},
// 文章目录
catalog: {
enable: true,
position: 'left',
},
// 右下角按钮组
tools: {
enable: true,
initialOpen: true,
},
// live2d模型
live2d: {
enable: false,
page: 'all',
agent: 'pc',
model: 'random',
width: 150,
height: 200,
position: 'left',
gap: 'default',
},
// 点击特效
click: {
enable: false,
auto: false,
colors: ['#FF1461', '#18FF92', '#5A87FF', '#FBF38C'],
size: 30,
maxCount: 50,
},
// 评论输入框表情
emoji: {
enable: true,
buttonIcon: "emoji",
emojiList: [
{
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: '',
},
]
},
// 暗色模式
darkMode: {
enable: true,
darkDefault: false, // 是否默认设置暗色模式
autoDark: true,
autoLight: true,
},
// 音乐播放器
musicPlayer: {
enable: false,
page: 'all',
agent: 'pc',
autoplay: false,
volume: 0.4,
lrc: {
enable: false, // 启用歌词
type: 1, // 1 -> 字符串歌词 3 -> url 歌词
color: '', // 颜色
},
audio: [
{
name: '404 not found',
artist: 'REOL',
url: 'https://guangzan.gitee.io/imagehost/awescnb/music/demo4.mp3',
cover: 'https://guangzan.gitee.io/imagehost/awescnb/music/demo.jpg',
lrc: ``,
},
],
},
// 随笔头图
postTopimage: {
enable: true,
fixed: true, // 视差滚动
imgs: [], // 图片url列表
},
// 随笔尾图
postBottomimage: {
enable: false,
img: '',
height: '200px',
},
// 打赏二维码
donation: {
enable: false,
img: '',
qrcodes: [],
desc: '', // 描述
},
// 个性签名，在背景图上的打字效果
signature: {
enable: false,
contents: [],
},
// 侧边栏二维码
qrcode: {
enable: false,
img: '',
desc: '',
},
// 弹出公告
notice: {
enable: false,
text: ['来了老弟', '老弟记得三连啊'],
},
// 首页列表图
indexListImg: {
enable: false,
imgs: [], // 图片url列表
},
// 顶部加载进度条
topProgress: {
enable: false,
page: 'all',
agent: 'pc',
background: '#FFB3CC',
height: '5px',
},
// 随笔页尾部签名
postSignature: {
enable: true,
enableLicense: true,
link: '',
licenseName: '',
licenseLink: '',
content: [],
},
// 背景图片或颜色
bodyBackground: {
enable: false,
value: '',
opacity: 0.9,
repeat: false,
},
// 弹幕
barrage: {
enable: false,
opacity: 0.6,
colors: [],
fontSize: '16px',
barrages: [], // 全局弹幕
indexBarrages: [], // 首页弹幕
postPageBarrages: [], // 博文页弹幕
},
// 图表，不如使用eCharts
charts: {
enable: false,
},
// 锁屏
lock: {
enable: false,
background: '', // 背景图片，默认随机
strings: ['test'],
},
// 自定义链接链接
links: [
{
name: '',
link: '',
},
// ......
],
// 画笔，将Markdown的一些线条使用拟人画笔代替
notation: {
enable: true,
},
}
$.awesCnb(opts)
</script>
1.5 保存享受焕然一新的博客
做完上述操作以后，点击保存即可。
接下来就是刷新博客首页，享受焕然一新的博客了。
如果刷新以后博客首页白屏（应该不会，以防万一），点击这里进入博客园后台撤销上述操作。
