使用 awescnb 快速構建博客園皮膚

Awescnb

💫 Awescnb, awesome cnblog 使博客園更美好。

簡介

項目使用 webpack4 構建,能夠本地調試 css 和 js, 模塊化開發更高效, 同時集成大量插件(僅導入便可).

你能夠用它作如下三件事

1. 建立: 你可使用它快速建立本身的博客園皮膚,最後打包生成的 js 文件,供你本身使用.

2. 分享: 你可使用它快速建立一個博客園皮膚並將它貢獻給項目,園友就可以切換到你的皮膚了.

3. 安裝: 你能夠安裝這個項目中的皮膚在你的博客園.這不是一個簡單的博客園皮膚,而是一個合集.安裝以後,你能夠快速切換其餘皮膚.

切換效果展現:

文件較大，爲了節省流量，點擊跳轉查看.

安裝現成的皮膚

1.你的博客首頁 -> 管理 -> 設置

2.設置博客默認皮膚爲 Custom

3.使用 loading (不使用請忽略)

複製以下 html 粘貼到 頁首 HTML.

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

複製以下 css 粘貼到 頁面定製 CSS

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

4. 禁用默認 css 樣式

5.複製以下 js 粘貼到 博客側邊欄公告 如沒開通 js 權限請先開通.

<script src="https://guangzan.gitee.io/awescnb2.0/index.js"></script>
<script>$.awesCnb({
              // 默認使用已經集成的皮膚 reacg
              // 在這裏寫入配置
              // 什麼都不寫表明使用默認配置
        });
</script>

6.保存.

若是你想繼續定製化一些功能, 點我 跳轉到寶寶都能看懂的文檔.

建立一個皮膚

首先你須要將本項目 clone 到本地 git clone https://gitee.com/guangzan/awescnb2.0.git.

1. 建立基本文件

例如你要建立一個名字爲 demo 的博客園皮膚.

• 在 themes 文件夾下建立 demo 文件夾.

• 在 demo 文件夾中建立 index.js.

• 在 demo 文件夾中建立 index.css.

• 在 demo/index.js 中粘貼如下代碼.

import './index.css' // 引入你的樣式文件
import AwesCnb from '@/themes/awescnb' // 引入公共的類

class Demo extends AwesCnb {
  constructor() {
    super()
    super.init(this.init)
  }

  init() {
    // import plugins (use commonjs)
    // to do something
  }
}

new Demo()

2. 更新配置以啓動你的皮膚

打開config / options.js：

module.exports = {
  themeName: 'demo',
  template: 'post',
}

• themeName 運行 npm start 啓動的皮膚
• template 本地開發要啓動的頁面 | 首頁 -> 'index' | 隨筆詳情頁 -> 'post' | 標籤頁 -> 'tag' | ...

3. 構建和打包

• npm start 將在本地啓動你的皮膚,進行調試.
• npm run build 打包

項目打包會在 dist 目錄下生成如下 js 文件:

• demo.js 你的皮膚js.
• ...其餘皮膚 js (無需關注)
• index.js 這個文件是用來根據用戶所選的皮膚加載對應的 demo.js. (無需關注)

若是你僅本身使用你構建的皮膚, 你只須要在你的博客園中引入 demo.js 便可.
若是你但願別人也能切換到你構建的皮膚, 歡迎貢獻你構建的皮膚給這個項目.

4. 安裝你建立的皮膚

安裝步驟同上,你只需在安裝過程當中做以下變化:

<script src="https://xxx/demo.js"></script> // 或者直接將打包好的 demo.js中代碼放入標籤內
<script>$.awesCnb({})</script>

項目連接

Todo

項目

• merge.js √
• 在入口引入 merge √
• themejs 從 mergejs 導入用戶選項 x
• 組織目錄 √
• Window.useroptions √
• 調整 plugins 位置 √
• 根據 env 加載 http 文件 x
• eslint √
• prettier √
• stylelint x
• babel √
• autoprefixer √
• postcss-import √
• cssnano √
• bug 打包多出一個 js √
• 可單獨使用 themejs √
• sourcemap √
• config/options.js √
• md 標籤 √
• 測試單個文件 √
• 同步到 github
• footer 版本同步
• 註釋
• rebuild tools/loadfile √

通用備選插件

• 自定義 body 背景圖片\背景色透明度 √
• 圖片燈箱 √
• 彈幕 √
• 點擊特效 √
• 圖片燈箱 √
• live2d √
• 播放器 √
• 加載進度條 √
• charts
• typed
• 代碼行號
• 代碼高亮

class awescnb

• NProgress √
• 組織經常使用 css √
• live2d √
• 點擊特效 √
• 背景包括顏色和圖像 √
• 皮膚顏色 √
• favicon 和網站標題 √
• 音樂播放器 √
• 隱藏 loading √
• 在開發環境中導入 cnblog.common.css √

reacg(示例皮膚)

• 自定義二維碼 √
• 自定義頭像 √
• icons √
• footer √
• 移動端菜單 √
• 圖標 √
• 自定義 body 背景圖片\背景色透明度 √
• 圖片燈箱 √
• 代碼行號 √
• 代碼高亮 √
• 文章目錄 √
• 文章底部簽名 √
• 彈幕 √
• 返回頂部 √
• 簽名 √
• 示例音樂丟失 ... √
• backtotop 定位邏輯 √
• 夜間判斷邏輯 √
• 優化切換暗色/亮色模式效果和邏輯 √
• bug highlight 無效 √
• 顯示評論區頭像 增長輪詢次數 √
• 移動端默認禁用點擊特效 √
• signature 樣式優化 √
• 移動端隱藏頂部訂閱按鈕 √
• 調整移動端字體大小 √
• bug -> themeColor double √
• 彈幕陰影 √
• 評論圖片樣式

gshang(示例皮膚)

• build √

Contact

• QQ：923665892
• QQ 羣：541802647 (活躍)
• 微信：wx923665892