页面定制 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;
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;
}
}
博客侧边栏公告(支持HTML代码) (支持 JS 代码)
<script src="https://guangzan.gitee.io/awescnb/index.js"></script>
<script>$.awesCnb({
// 基本配置
theme: {
name: 'simple',
color: '#FFB3CC',
title: '力拔山兮气盖世',
contentSize: 'mid',
headerBackground: 'https://i0.hdslb.com/bfs/article/d2745ce0f999eb26209c81338ea9473015e16b46.png@1320w_742h.webp',
avatar: '//i1.hdslb.com/bfs/face/37114ab1a7374711f2a8af257f2bc81fb2fe2365.jpg',
favicon: '',
},
// 代码高亮
highLight: {
type: 'atomOneDark',
inDarkMode: 'atomOneDark',
},
// 代码行号
lineNumbers: {
enable: true,
},
// github图标
github: {
enable: true,
color: '#ffb3cc',
url: 'https://github.com/SanForfive',
},
// 图片灯箱
imagebox: {
enable: true,
},
// 文章目录
catalog: {
enable: true,
position: 'left',
},
// 返回顶部按钮
back2top: {
enable: true,
type: 'complex',
},
// 右下角按钮列表
tools: {
enable: true,
initialOpen: true,
draggable: false,
},
// 点击特效
click: {
enable: true,
auto: false,
colors: ['#FF1461', '#18FF92', '#5A87FF', '#FBF38C'],
size: 30,
maxCount: 15,
},
// 评论输入框表情
emoji: {
enable: true,
showRecents: false,
recentsCount: 20,
showPreview: false,
showSearch: false,
},
// 暗色模式
darkMode: {
enable: true,
autoDark: true,
autoLight: true,
},
// 弹出公告
notice: {
enable: false,
text: [],
},
// 首页列表图
indexListImg: {
enable: false,
imgs: [],
},
// 顶部加载进度条
topProgress: {
enable: true,
page: 'all',
agent: 'pc',
background: '#FFB3CC',
height: '5px',
},
indexTimeline: {
enable: false,
},
signature: {
enable: true,
contents: [
"Hi!我现在呢还是学生,想想初中的同学都结婚生子了,自己,嗯。(啊!!!)本科以及硕士读的都是应用统计 在这里请广大网友多多指教了!如果有机会的话,大家可以一起造轮子 <b style='color:#ff6b81'>HuangB2ydjm</b>.",
"<b>console.log(new);</b>",
],
},
// 随笔页尾部签名
postSignature: {
enable: true,
content: ['我分享的越多,收获的也就越多'],
licenseLink: '',
},
// 背景图片或颜色
bodyBackground: {
enable: false,
value: '',
opacity: 1,
repeat: false,
},
// 图表
charts: {
enable: true,
pie: {
title: 'My skills',
data: {
labels: ['JavaScript', 'css', 'Vue', 'React', 'wechat'],
values: [40, 30, 20, 10, 20],
},
},
},
// 锁屏
lock: {
enable: true,
background: '',
strings: ['明日复明日'],
},
// footer链接
links: [
{
name: 'HuangB2ydjm',
link: 'https://www.cnblogs.com/xiaofeisnote/',
},
{
name: 'google',
link: 'https://www.google.com/',
},
{
name: 'b-站',
link: 'https://www.bilibili.com/',
},
{
name: 'awescnb-docs',
link: 'https://guangzan.gitee.io/awescnb-docs/',
},
],
})
</script>
<!-- 第一款自主放置的鼠标点击特效 -->
<script src="https://files.cnblogs.com/files/sanforfive/sketch.js"></script>
页首 HTML 代码
<div id="loading"><div class="loader-inner"></div></div>
<div id="clickCanvas" style=" position:fixed;left:0;top:0;z-index:999999999;pointer-events:none;"></div>
<script type="text/javascript" src="https://files.cnblogs.com/files/sanforfive/firework.js"></script>
页脚 HTML 代码
<!-- 标签页图标最上面的图标 -->
<script type="text/javascript" language="javascript">
//Setting ico for cnblogs
var linkObject = document.createElement('link');
linkObject.rel = "shortcut icon";
linkObject.href = "https://files.cnblogs.com/files/sanforfive/230160135.ico";
document.getElementsByTagName("head")[0].appendChild(linkObject);
</script>
用法:直接复制到相应位置就好了