Version: Next

快速安装

文档迁移通知

📑 感谢大家的支持，当前文档已经不再保持更新。原因是，为了不影响访问速度，我将该文档托管在码云上。每次更新文档我都需要重新构建文档项目并手动更新码云 Pages 服务。这样效率是不够的，现在已经将将所有文档相关的内容托管到在线文档-语雀了。请务必访问新的文档，感谢理解！ 点击查看

你好，新朋友！

🎉 仅需几步就能在您的博客园快速安装皮肤，下方提供了三种方式，推荐您使用 方式一 进行安装，您也可以查看下文所有安装方式。

看视频

🎞 如果您感到力不从心，我还精心制作了视频教程供您 参考。

发现无法进入博客了

👾 当您编辑 JavaScript 出现语法错误时，可能无法进入博客了。不用担心，随时都可以点击此处进入博客后台页面，重新配置。

方式一

特点

  • 推荐的方式
  • 支持自动升级
  • 支持切换项目中已经集成的所有皮肤

步骤

1.您的博客首页 -> 管理 -> 设置

2.设置博客默认皮肤为 Custom

3.使用 loading

复制如下 html 粘贴到 页首 HTML.

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

复制如下 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;
}
}

4. 禁用默认 css 样式

5.复制如下 js 粘贴到 博客侧边栏公告 （如没开通 js 权限请先开通，理由填适度美化博客）。

<script src="https://guangzan.gitee.io/awescnb/index.js"></script>
<script>
$.awesCnb({
// 默认启用皮肤 'reacg',
// 在这里写入配置
// 什么都不写代表全部使用默认配置
})
</script>

6.保存.

7.进入您的博客查看效果

方式二

查看

特点

  • 速度相比第一种方式稍快
  • 支持在线升级
  • 不支持全局皮肤切换

步骤

1.您的博客首页 -> 管理 -> 设置

2.设置博客默认皮肤为 Custom

3.使用 loading

复制如下 html 粘贴到 页首 HTML.

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

复制如下 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;
}
}

4. 禁用默认 css 样式

5.复制如下 js 粘贴到 博客侧边栏公告 如没开通 js 权限请先开通.

请先选择一个您喜欢的皮肤，比如 reacg。

<script src="https://guangzan.gitee.io/awescnb/reacg.js"></script>
<script>
$.awesCnb({
// 此时 theme.name 无效（全局皮肤切换）
// 在这里写入配置
// 什么都不写代表使用默认配置
// 仅仅写入需要更改的配置即可
});
</script>

6.保存.

7.进入您的博客查看效果

方式三

查看

特点

  • 速度最快
  • 不需要使用 loading
  • 不支持在线升级
  • 不支持全局皮肤切换

步骤

请先选择一个您喜欢的皮肤，比如 reacg。

1.您的博客首页 -> 管理 -> 设置

2.设置博客默认皮肤为 Custom

3.复制项目awescnb /dist/ext/reacg.css 粘贴到 页面定制 CSS

4. 禁用默认 css 样式

5.复制项目awescnb /dist/ext/reacg.js, 如没开通 js 权限请先开通.

<script>复制 https://gitee.com/guangzan/awescnb/tree/master/dist/ext/reacg.js 粘贴到这里.</script>
<script>
$.awesCnb({
// 此时 theme.name 无效（全局皮肤切换）
// 在这里写入配置
// 什么都不写代表使用默认配置
// 仅仅写入需要更改的配置即可
});
</script>

或者直接使用链接：

<script src="https://guangzan.gitee.io/awescnb/ext/reacg.js"></script>
<script>
$.awesCnb({
// 此时 theme.name 无效（全局皮肤切换）
// 在这里写入配置
// 什么都不写代表使用默认配置
// 仅仅写入需要更改的配置即可
});
</script>

6.保存

7.进入您的博客查看效果

备选 loading

tip

您可以使用任何 loading，只需要保证 loading 的最外层盒子的选择器为 id="loading"。下面提供了一些优秀的 loading 供您选择。

每个 loading 都包含一段 CSS 和一段 HTML：

  1. 复制 html 替换 页首 HTML 中的内容
  2. 复制 css 替换 页面定制 CSS 中的内容

绚丽的彩虹

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>
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="boxLoading"></div></div>
CSS
#loading {
position: fixed;
width: 100%;
height: 100%;
background-color: #fff;
z-index: 999;
}
.boxLoading {
width: 50px;
height: 50px;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.boxLoading:before {
content: '';
width: 50px;
height: 5px;
background: #000;
opacity: 0.1;
position: absolute;
top: 59px;
left: 0;
border-radius: 50%;
animation: shadow 0.5s linear infinite;
}
.boxLoading:after {
content: '';
width: 50px;
height: 50px;
background: #ffb3cc;
animation: animate 0.5s linear infinite;
position: absolute;
top: 0;
left: 0;
border-radius: 3px;
}
@keyframes animate {
17% {
border-bottom-right-radius: 3px;
}
25% {
transform: translateY(9px) rotate(22.5deg);
}
50% {
transform: translateY(18px) scale(1, 0.9) rotate(45deg);
border-bottom-right-radius: 40px;
}
75% {
transform: translateY(9px) rotate(67.5deg);
}
100% {
transform: translateY(0) rotate(90deg);
}
}
@keyframes shadow {
0%,
100% {
transform: scale(1, 1);
}
50% {
transform: scale(1.2, 1);
}
}

动态星系

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>
CSS
@keyframes spin3D {
from {
transform: rotate3d(0.5, 0.5, 0.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%;
}
.blue-orbit {
width: 165px;
height: 165px;
border: 1px solid #91daffa5;
animation: spin3D 3s linear 0.2s infinite;
}
.green-orbit {
width: 120px;
height: 120px;
border: 1px solid #91ffbfa5;
animation: spin3D 2s linear 0s infinite;
}
.red-orbit {
width: 90px;
height: 90px;
border: 1px solid #ffca91a5;
animation: spin3D 1s linear 0s infinite;
}
.white-orbit {
width: 60px;
height: 60px;
border: 2px solid #fff;
animation: spin3D 10s linear 0s infinite;
}
.w1 {
transform: rotate3D(1, 1, 1, 90deg);
}
.w2 {
transform: rotate3D(1, 2, 0.5, 90deg);
}
.w3 {
transform: rotate3D(0.5, 1, 2, 90deg);
}
Edit this page