下面是代码，可供抄袭，但注意信息改成自己的：
博客侧边栏公告
页面定制 CSS 代码（禁用模板默认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;width: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 代码
<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>
页脚 HTML 代码
<!-- @format -->
<script src="https://guangzan.gitee.io/awescnb/index.js"></script>
<script>
const opts = {
// 基本配置
theme: {
name: 'geek',
color: '#000000',
title: 'blog by STarsTwinkle',
avatar: 'https://pic.cnblogs.com/avatar/3381416/20240121203043.png',
favicon: 'https://pic.cnblogs.com/avatar/3381416/20240121203043.png',
headerBackground: 'https://cdn.luogu.com.cn/upload/image_hosting/fpp4f1o3.png',
},
// 代码高亮
highLight: {
enable: true,
},
// 代码行号
lineNumbers: {
enable: true,
},
// github图标
github: {
enable: true,
color: '#ffb3cc',
url: 'https://github.com/stars-twinkle',
},
// 码云图标
gitee: {
enable: false,
url: '',
},
// 图片灯箱
imagebox: {
enable: true,
},
// 文章目录
catalog: {
enable: true,
},
// 右下角按钮组
tools: {
enable: true,
initialOpen: true,
},
// 点击特效
click: {
enable: true,
},
// 评论输入框表情
emoji: {
enable: true,
buttonIcon: "
标签：00,enable,代码,value,label,blog,------,true,搭建
From： https://www.cnblogs.com/StarsTwinkle/p/18074095