探索【博客园主题美化】之“史上最简洁美化方案”

前言

题要： 尝试过很多种主题优化方案，现在整理出一套最简洁的优化方案，也算没有白踩那么多的坑，现如今最简洁、最完美的方案，没有之一。

前置条件：

注册一个博客园账号
申请js权限

初级教程

如果一点儿也不懂HTML,CSS,JS,那你可以看这一部分教程，五分钟内瞬间刷新你的博客园主题，你没听错，就是这么快！

小白学步

如果不想折腾，这一部分的教程，就足以用于华丽的博客主题了。

定制页面CSS代码

1.博客园为“园主们”提供了Custom基础主题样式，用于个性化的开发，记住一定要更换为此主题哦！
2.拷贝用于页面定制的CSS样式代码

:root{--sk-size:60px;--sk-color:#ffb3cc}
#home{display:none}
#loading{position:fixed;top:0;left:0;right:0;height:100vh;display:flex;justify-content:center;align-items:center;background-image:url(https://kris-kk.gitee.io/awescnb/assetshttps://kris-kk.gitee.io/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}}

3.禁用原模板默认CSS

定制博客侧边栏

共有四款皮肤可以选择，具体效果可自食哦！
- 动漫二次元：acg
- 扁平化图标：gshang
- 粉系少女风：reacg
- 简约派: light
粘贴侧边栏代码块

<script src="https://kris-kk.gitee.io/awescnb/index.js"></script>
<script>$.awesCnb({
           theme: {
               name: 'gshang',  // 在这里配置全局主题acg/gshang/light/reacg
          }
      });
</script>

定制页首

粘贴页首代码块

<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>

以上皆参考自此文章，点击查看

小白的疑问

细心的你一定会发现以下几个问题：

主题的头像竟然不是自己的？
背景图该怎么改？
有些布局不喜欢，比如，主题颜色，侧边栏宽度等等！

要解决这些问题，参见中级教程。

中级教程

如果会一点儿HTML、CSS、JS，还要会一部分Git的知识，那么就可以继续以下步骤啦。

解决方案

创建个人Git仓库

小白教程中看着没有几行代码，实际上要完成一系列的资源的拉取以及渲染，因此，要建立一个自己的Git仓库，建议使用码云Gitee，个人感觉访问速度要比Github快，然后fork或者Git一份awescnb到自己的托管仓库，再或者git到本机，进行个人信息修正后再上传至个人仓库。

编辑JS脚本

主要修改index.js文件中的url 有以下集中编辑方式可供选择：

在线编辑
- 可以打开JS文件，在线搜索，编辑替换个人仓库路径，完成后提交即可；
- 启用码云Gitee提供给我们的Web IDE工具。
离线编辑
- 本地Git一下仓库的地址，下载到相应的位置，使用Notepad++编辑，拖拽上传，或者使用Git命令上传均可；
- 使用IntelliJ IDEA IDE工具编辑，注意，需要添加码云Gitee的插件，才能进行remote自己的仓库，以及Commit与Push等操作。

开启Gitee Pages服务

无论是Github，还是Gitee，一定要开启Pages服务，否则外链引用仓库文件会报错。不开启Pages服务，引用JS、CSS文本格式文件，以及图片格式文件等，url要添加raw/master，诸多不便。

如何开启Gitee Pages服务? 点击“服务” > Gitee Pages > 开启服务
是否需要开启强制使用HTTPS? 点击这里，为你解答

主题测试

至此，已经将博客主题样式所需要的资源部署到个人仓库上了，那么CNBlogs如何拉去仓库资源呢？

其实在初级教程中，已经在拉取资源了，相信你一定能发现这两行代码：

#loading{position:fixed;top:0;left:0;right:0;height:100vh;display:flex;justify-content:center;align-items:center;background-image:url(https://kris-kk.gitee.io/awescnb/assetshttps://kris-kk.gitee.io/images/background/cell.gif);z-index:99999}

此处的https://kris-kk.gitee.io/awescnb/assetshttps://kris-kk.gitee.io/images/background/cell.gif 为背景渲染的元胞，就像天花板上的一块板子一样。

<script src="https://kris-kk.gitee.io/awescnb/index.js"></script>

此处的https://kris-kk.gitee.io/awescnb/index.js 调用我们仓库下的index.js，这个JS文件，就像我们做开发时候的主程序，或者手机上一个软件的图标，或者计算机的CPU，他调动了所有仓库资源。

测试不同样式的主题

<script>$.awesCnb({
           theme: {
               name: 'gshang',  // 在这里配置全局主题acg/gshang/light/reacg
          }
      });
</script>

至此，已经解决了头像avatar问题（复制自己博客园avatar地址，修改index.js文件），更改背景图等（只需替换掉images目录下的图片即可），至于CSS样式调整布局以及主题颜色，如果要进行调整，就需要下很大功夫了，需要借助Web调试工具来完成。这一部分，佛系更新吧，目前样式不需要大部分改动。

欢迎批评指正！

特别鸣谢主题设计者，以及整理者，给我们一种极度舒适的阅读体验。禁止以此主题用于商业用途，从而给原作带来不便。资源共享，技术交流，快乐你我他！