找了好多博客园美化的教程，终于自己学着做出来了！

本文章向大家介绍记一次博客园美化，主要包括记一次博客园美化使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值

 

 

 

 

 

 

• 你的博客首页 -> 管理 -> 设置

• 设置博客默认皮肤为 Custom
• 复制如下 css 粘贴到 页面定制 css

:root{--sk-size:60px;--sk-color:#ffb3cc}
#loading{position:fixed;top:0;left:0;right:0;height:100vh;display:flex;justify-content:center;align-items:center;background-image:url(https://guangzan.gitee.io/awescnb/assets/images/background/cell.gif);z-index:99999}
.sk-fold{width:var(--sk-size);height:var(--sk-size);position:relative;transform:rotateZ(45deg)}
.sk-fold-cube{float:left;width:50%;height:50%;position:relative;transform:scale(1.1)}
.sk-fold-cube:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sk-color);animation:sk-fold 2.4s infinite linear both;transform-origin:100% 100%}
.sk-fold-cube:nth-child(2){transform:scale(1.1) rotateZ(90deg)}
.sk-fold-cube:nth-child(4){transform:scale(1.1) rotateZ(180deg)}
.sk-fold-cube:nth-child(3){transform:scale(1.1) rotateZ(270deg)}
.sk-fold-cube:nth-child(2):before{animation-delay:.3s}
.sk-fold-cube:nth-child(4):before{animation-delay:.6s}
.sk-fold-cube:nth-child(3):before{animation-delay:.9s}
@keyframes sk-fold{
0%,10%{transform:perspective(140px) rotateX(-180deg);opacity:0}
25%,75%{transform:perspective(140px) rotateX(0);opacity:1}
100%,90%{transform:perspective(140px) rotateY(180deg);opacity:0}}

 

•  禁用默认 css 样式
• 复制如下 js 粘贴到 博客侧边栏公告（支持 HTML 代码） （支持 JS 代码） 没开通 js 权限请先开通.

• <script src="https://guangzan.gitee.io/awescnb/index.js"></script>
  <script>
    const opts = {
      theme: {
        name: 'reacg',
         avatar: '',
      },
    }
  
  
    $.awesCnb(opts)
  </script>

   

 

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

• <section id="loading">
    <div class="sk-fold">
      <div class="sk-fold-cube"></div>
      <div class="sk-fold-cube"></div>
      <div class="sk-fold-cube"></div>
      <div class="sk-fold-cube"></div>
    </div>
  </section>

  • 保存之后就已经可以了！

 

 本文章来源：https://www.cnblogs.com/guangzan/p/12256583.html

 

这个是合集，可以看到很多不同的模板！

博客园美化大集合2020最新！不用担心失效问题！ - 老官童鞋gogoの小号 - 博客园 (cnblogs.com)

 

 

目前自己用的博客园皮肤，感觉还不错！

分享几套不一样的博客园皮肤 ？ - guangzan - 博客园 (cnblogs.com)

 

如何配置该皮肤？点击下面

🔨 配置选项 · 语雀 (yuque.com)

 

这个也还不错，手把手的教程，非常棒！之后考虑换这个皮肤！

博客园主题美化 - 泡面爱吃冰淇淋 - 博客园 (cnblogs.com)