样式
二、选择模板
JS权限审核通过后，在设置>博客皮肤选择Custom。（必须选择这个皮肤，因为后面代码是基于这个皮肤）
三、设置自定义代码
博客侧边栏公告
<script src="https://guangzan.gitee.io/awescnb/index.js"></script>
<script>
$.awesCnb({
// 基本配置
theme: {
name: 'geek',
color: '#FFB3CC',
title: 'Muliminty',
avatar: 'https://img.imgdb.cn/item/603e23bb360785be54461905.jpg',
},
// 代码高亮
highLight: {
type: '',
dark: 'atomOneDark',
light: 'atomOneLight',
},
// 代码行号
lineNumbers: {
enable: true,
},
// github图标
github: {
enable: true,
color: '#ffb3cc',
url: 'https://github.com/Muliminty',
},
// 码云图标
gitee: {
enable: false,
color: '#C71D23',
url: '',
},
// 图片灯箱
imagebox: {
enable: true,
},
// 文章目录
catalog: {
enable: true,
position: 'left',
},
// 右下角按钮组
tools: {
enable: true,
initialOpen: true,
draggable: true,
},
//live2d模型
live2d: {
enable: false,
page: 'all',
agent: 'pc',
model: 'haru-01',
width: 150,
height: 200,
position: 'left',
gap: 'default',
},
// 点击特效
click: {
enable: true,
auto: true,
colors: [],
size: 30,
maxCount: 15,
},
// 评论输入框表情
emoji: {
enable: true,
showRecents: true,
showSearch: true,
showPreview: false,
recentsCount: 20,
theme: 'auto',
},
// 暗色模式
darkMode: {
enable: true,
autoDark: false,
autoLight: false,
},
// 音乐播放器
// musicPlayer: {
// enable: true,
// 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: false,
imgs: [],
},
// 随笔尾图
postBottomimage: {
enable: true,
img: '',
height: '',
},
// 打赏二维码
donation: {
enable: false,
qrcodes: [],
},
// 个性签名
signature: {
enable: true,
contents: ['Muliminty-Home','希望我们都能保持清醒和有意义的生活'],
},
// 侧边栏二维码
qrcode: {
enable: false,
img: '',
desc: '',
},
// 弹出公告
notice: {
enable: false,
text: [],
},
// 首页列表图
indexListImg: {
enable: true,
imgs: [],
},
// 顶部加载进度条
topProgress: {
enable: true,
page: 'all',
agent: 'pc',
background: '#FFB3CC',
height: '5px',
},
// 随笔页尾部签名
postSignature: {
enable: true,
content: [],
licenseName: '',
licenseLink: '',
},
// 背景图片或颜色
bodyBackground: {
enable: false,
value: '',
opacity: 0.9,
repeat: false,
},
// 弹幕
barrage: {
enable: true,
opacity: 0.6,
fontSize: '',
colors: [],
barrages: [],
indexBarrages: [],
postPageBarrages: [],
},
// 图表
charts: {
enable: true,
pie: {
title: '技术栈',
data: {
labels: ['JavaScript', 'css', 'Vue', 'React', 'wechat'],
values: [40, 30, 20, 10, 20],
},
},
},
// 锁屏
lock: {
enable: true,
background: '',
strings: [],
},
// 自定义链接链接
links: [
{
name: '掘金',
link: 'https://juejin.cn/user/2911162522939582',
},
{
name: '语雀',
link: 'https://www.yuque.com/muliminty',
},
],
})
</script>页面定制CSS代码
#loading {
background: #000;
background: radial-gradient(#222, #000);
bottom: 0;
left: 0;
overflow: hidden;
position: fixed;
right: 0;
top: 0;
z-index: 99999;
}
.loader-inner {
bottom: 0;
height: 60px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 100px;
}
.loader-line-wrap {
animation: spin 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite;
box-sizing: border-box;
height: 50px;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
transform-origin: 50% 100%;
width: 100px;
}
.loader-line {
border: 4px solid transparent;
border-radius: 100%;
box-sizing: border-box;
height: 100px;
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
top: 0;
width: 100px;
}
.loader-line-wrap:nth-child(1) {
animation-delay: -50ms;
}
.loader-line-wrap:nth-child(2) {
animation-delay: -0.1s;
}
.loader-line-wrap:nth-child(3) {
animation-delay: -150ms;
}
.loader-line-wrap:nth-child(4) {
animation-delay: -0.2s;
}
.loader-line-wrap:nth-child(5) {
animation-delay: -250ms;
}
.loader-line-wrap:nth-child(1) .loader-line {
border-color: #ea4747;
height: 90px;
width: 90px;
top: 7px;
}
.loader-line-wrap:nth-child(2) .loader-line {
border-color: #eaea47;
height: 76px;
width: 76px;
top: 14px;
}
.loader-line-wrap:nth-child(3) .loader-line {
border-color: #47ea47;
height: 62px;
width: 62px;
top: 21px;
}
.loader-line-wrap:nth-child(4) .loader-line {
border-color: #47eaea;
height: 48px;
width: 48px;
top: 28px;
}
.loader-line-wrap:nth-child(5) .loader-line {
border-color: #4747ea;
height: 34px;
width: 34px;
top: 35px;
}
@keyframes spin {
0%,
15% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}首页HTML代码
<div id="loading">
<div class="loader-inner">
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
</div>
</div>
