前言
題要： 嘗試過很多種主題優化方案，現在整理出一套最簡潔的優化方案，也算沒有白踩那么多的坑，現如今最簡潔、最完美的方案，沒有之一。
前置條件：
-
注冊一個博客園賬號
-
申請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調試工具來完成。這一部分，佛系更新吧，目前樣式不需要大部分改動。
歡迎批評指正！
特別鳴謝主題設計者，以及整理者，給我們一種極度舒適的閱讀體驗。禁止以此主題用於商業用途，從而給原作帶來不便。資源共享，技術交流，快樂你我他！