探索【博客园主题美化】之“史上最简洁美化方案”
基于码云Gitee资源托管的博客园主题美化方案
前言
题要： 尝试过很多种主题优化方案，现在整理出一套最简洁的优化方案，也算没有白踩那么多的坑，现如今最简洁、最完美的方案，没有之一。
前置条件：
-
注册一个博客园账号
-
申请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调试工具来完成。这一部分，佛系更新吧，目前样式不需要大部分改动。
欢迎批评指正！
特别鸣谢主题设计者，以及整理者，给我们一种极度舒适的阅读体验。禁止以此主题用于商业用途，从而给原作带来不便。资源共享，技术交流，快乐你我他！
