test

发布时间 2023-08-29 15:11:50作者: PengShiQiang

☕ 在博客园中安装皮肤

⚡ 仅需几步就能在你的博客园快速安装皮肤;
? 如果感到力不从心,我还精心制作了「视频教程」供你参考;
? 当你的配置出现语法错误时,可能无法进入博客了。不用担心,随时都可以点击
博客后台 - 博客园

进入博客园后台页面,重新配置。

1打开你的博客首页 -> 管理 -> 设置

日记
相册
评论
选项
设置
随笔
链接
文章
文件
标签
image.png


2设置博客皮肤为“Custom”

博客皮肤(117)最新皮肤
Custom
image.png


3勾选禁用默认 CSS 样式

页面定制CSS代码
禁用模板默认CSS
image.png


4添加 loading
a复制如下代码粘贴到【页首 HTML】

 
HTML
 
 

复制代码

 
 
1
 
<div id="loading"><div class="loader-inner"></div></div>
 
 

b复制如下代码粘贴到【页面定制 CSS】

 
CSS
 
 

复制代码

 
 
1
 
#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;}}
 
 

5复制如下代码粘贴到【页脚 HTML 代码】(如没开通 js 权限请先开通,理由填“适度美化博客”)。

 
HTML
 
 

复制代码

 
 
1
2
3
4
5
6
7
8
9
 
<script src="https://blog-static.cnblogs.com/files/guangzan/loader.min.js"></script>
<script>
const config = {
// 默认启用皮肤 'reacg'
// 在这里添加自定义配置
// 当前为全部使用默认配置
}
$.awesCnb(config)
</script>
 
 

6点击

保存
image.png

按钮,进入你的博客查看效果