產生

    部落格園第三方主題數不勝數，或者你肯定也為你的部落格園作了一些優化。接下來無論如何你都可以將你已經存在的程式碼稍作修改（無非就是建一個資料夾，修改一下檔名）加入這個倉庫，安裝過的人都可以互相共享主題樣式。ok，先放個效果GIF，如果有興趣請往下看吧，筆芯。

當然還可以切換更多全域性主題，它在不斷擴充！

介紹

    awesCnb 是多套主題的合集，可以快速切換多套主題，安裝（所謂安裝就是幾次複製貼上）後，只需要在部落格園設定頁面更改 name 的值就能直接切換整套主題。

• 風格變化莫測（因為你可以快速切換多套主題）
• 根據配置載入 （沒有使用的外掛不會載入）
• 安裝後靜靜享受更新
• 相容性強（通過 gulp 自動處理 js css）
• 訪問快速 （程式碼部署在 碼雲 而不是 GitHub，你看我的部落格導航欄有個大大的 GitHub 連結，其實點選去是 Gitee碼雲 ）
• 易於安裝
• 大量的可選配置
• 都是廢話我不囉嗦了

安裝

這個過程看起來很長，其實只是簡單的複製貼上，我寫的足夠詳細每個人都能夠安裝它，哪怕你剛剛註冊部落格園！

• 你的部落格首頁 -> 管理 -> 設定
• 設定部落格預設面板為 Custom
• 複製如下 css 貼上到 頁面定製 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://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>$.awesCnb({
                    theme: {
                      name: 'reacg',  // 在這裡配置全域性主題
                    }
                  });
</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>

• 儲存

切換全域性主題

安裝完之後，過了很久，難免喜新厭舊。這一套主題玩夠了，ok，接下來開啟設定，將 theme 物件下的 name 的值修改一下( 你可以看上面 安裝中的 js )，點選儲存，重新進入你的部落格。Oh my God！你換了一整套新的面板！

大量的可選配置

如果你迫不及待想要加入進來那麼請你直接跳過這部分，通過 文章目錄 轉到下方 專案目錄 吧！

theme（全域性主題）

live2d（模型）

model

• chitose
• epsilon2_1
• haru-01
• haru-02
• hijiki
• izumi
• shizuku
• tororo
• 小埋
• ....

太多了，我歇（寫）不過來了，我把她們統統施了魔法，放進 CDN 了，乾脆像我一樣設為隨機顯示吧，它不會阻塞載入你的部落格。如果你非要知道還有哪些指定的 model 可供你使用，日後再說，這不是重點。

musicPlayer（音樂播放器）

click（點選特效）

topProgress（頭部進度條）

github（github圖示）

postSignature（隨筆簽名）

imagebox（圖片燈箱）

highLight （程式碼高亮）

lineNumbers（程式碼行號）

catalog（文章目錄）

back2top（返回頂部）

links（底部連結）

各主題當前支援的配置項

當然不是所有主題都支援所有配置的，目前我一個人精力有限，不過大多數配置都覆蓋了。

reacg

• theme
• live2d
• click
• topProgress
• musicPlayer
• github
• catalog

acg

• catalog > position x
• 其他支援

gshang

• theme
• live2d
• click
• topProgress
• musicPlayer

light

• live2d
• click
• topProgress
• musicPlayer
• theme > avatar x headerBackground x

1. 儲存

目錄

• docs 文件
• assets 所有外掛、依賴
• index.js 入口
• theme 存放不同主題
  • acg 一套主題
    • acg.css 主題樣式檔案
    • acg.js 構建主題的 js
  • light 一套主題
    • light.css
    • light.js
  • ...
• package 打包生成

如何執行

• index.js
  將使用者配置和預設配置合併然後將它放到 window 下，根據使用者所選主題呼叫方法載入主題入口檔案 theme.js (例如 light.js)。

• theme.js
  使用 window 物件下的使用者配置物件，構建主題。

所有主題都放在 theme 資料夾下，至少包含一個 js 檔案和 一個 css 檔案, 下面以主題 acg 為例:

const userMassage = {
    // 儲存使用者基本資訊
    // 通過DOM獲取
};
const urls = {
    // 儲存該主題依賴的檔案（js css）名稱 按需載入
    // 倉庫地址 ...
    // 為了訪問更快這個主題的依賴都放在了 gitee
};
const icons = {
    // 儲存iconfont圖示名稱
    // symbol引用
};
const headerElements = {
    // 儲存部落格header  DOM元素
    // 因為我需要給他們批量新增事件 包含移動端和 pc 端的事件
};

class ACG{
    constructor() {
      this.defaultOptions = window.userOptions;   // 拿到window下的使用者配置
      this.v = 'v1.0.0';  // version
    }

    // ------- 初始化 ----
    init() {
        // 呼叫loadFiles載入必須依賴如iconfont檔案
        // 根據客戶端和當前頁面名稱呼叫對應方法構建頁面
    }

    // ---------- tools --------
    get pageName() {
       // 儲存函式  返回當前頁面名稱
       // 包含主頁 隨筆頁 標籤頁 ...
       // 在 init 函式中判斷，當進入這些頁面時執行對應的方法
    }

    get userAgent() {
       // 儲存函式  返回當前使用者的客戶端
       // 包含  PC  手機  ...
       // 在 init 函式中判斷並執行對應的方法
    }

    loadFiles() {
        // 載入依賴檔案
    }

    iconInSvg(icon) {
        // 根據傳入的 icons.xxx 返回對應的 <svg>
    }

    // Other instrumental functions.

    // ------構建部落格的函式-------
    setHeader() {
        // do something for setting header.
    }

    // Other functions that build blog.
}

// 例項化類並呼叫初始化方法
new ACG().init();

如果你不知道如何開始你的 theme.js，那麼你直接到專案倉庫看看 gshang.js 是如何寫的吧! 它只有幾行，複製過來修改一下即可！

加入

• 歡迎任何人加入進來， 哪怕你只會寫一點點 css 就足夠，大家一起交流，共享彼此的主題 ！

• 您需要先聯絡我，我會無條件邀請您加入這個倉庫。因為我同時還將程式碼同步到了 GitHub，你完全不用擔心搞亂了程式碼。（不要問我為什麼不新建一個分支）。

• 程式碼地址點我-Gitee

如何開始

1. 你需要在 theme 資料夾下新建主題資料夾如 demo

2. 新建 demo.js demo.css， 注意 js 檔名稱與資料夾名稱一致

3. 接下來你可以盡情修改你的 js 和 css

4. assets 下的依賴供你使用，你可以自行新增

5. 其他面板已經有的功能可以參考

6. 假設你寫完了，執行 gulp 開始打包，當然要事先 npm i

7. 推送到碼雲上去

8. Good work !

另外加入進來的所有主題都直接附帶來幾個常用外掛，哪怕你不寫一句程式碼，都可以使用，因為我在index.js 中將它們配置好了！節省你的時間！

• 頂部進度條

• 看板娘 （live2d）

• 音樂播放器

• 滑鼠點選特效

聯絡我

qq：923665892
wx：wx923665892
qq群：541802647
qq郵箱：[email protected]

感謝

GShang 提供了一套主題。