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

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

前言

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

前置条件：

• 注册一个博客园账号

• 申请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调试工具来完成。这一部分，佛系更新吧，目前样式不需要大部分改动。

 

---

欢迎批评指正！

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