分享幾套不同的博客園皮膚 ？

時間  2020-02-04
標籤 分享 幾套 不同 博客 皮膚 简体版
原文   原文鏈接

產生

    博客園第三方主題數不勝數，或者你確定也爲你的博客園做了一些優化。接下來不管如何你均可以將你已經存在的代碼稍做修改（無非就是建一個文件夾，修改一下文件名）加入這個倉庫，安裝過的人均可以互相共享主題樣式。ok，先放個效果GIF，若是有興趣請往下看吧，筆芯。css

主題切換

固然還能夠切換更多全局主題，它在不斷擴充！html

介紹

    awesCnb 是多套主題的合集，能夠快速切換多套主題，安裝（所謂安裝就是幾回複製粘貼）後，只須要在博客園設置頁面更改 name 的值就能直接切換整套主題。git

  • 風格變化莫測（由於你能夠快速切換多套主題）
  • 根據配置加載 （沒有使用的插件不會加載）
  • 安裝後靜靜享受更新
  • 兼容性強（經過 gulp 自動處理 js css）
  • 訪問快速 （代碼部署在 碼雲 而不是 GitHub，你看個人博客導航欄有個大大的 GitHub 連接，其實點擊去是 Gitee碼雲 ）
  • 易於安裝
  • 大量的可選配置
  • 都是廢話我不囉嗦了

安裝

這個過程看起來很長，其實只是簡單的複製粘貼，我寫的足夠詳細每一個人都可以安裝它，哪怕你剛剛註冊博客園！github

  • 你的博客首頁 -> 管理 -> 設置
  • 設置博客默認皮膚爲 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！你換了一整套新的皮膚！npm

大量的可選配置

若是你火燒眉毛想要加入進來那麼請你直接跳過這部分，經過 文章目錄 轉到下方 項目目錄 吧！gulp

theme（全局主題）dom

名稱 類型 可選值 默認值 描述
name String 'acg' 'gshang' 'light' 'reacg' 'acg' 全局主題
color String 全部色值 '#FFB3CC' 全局主題色
avatar String 圖片連接 '' 頭像
headerBackground String 圖片連接 '' 頭部背景圖

live2d（模型）ide

名稱 類型 可選值 默認值 描述
enable Boolean true false true 是否啓用
page String 'index' 'post' 'all' 'all' 生效頁面
agent String 'pc' 'mobile' 'all' 'all' 生效用戶端
model String 見下方 'random' 模型
width Number 圖片連接 150 頭像
height Number 圖片連接 200 頭像
position String 'left' 'right' 'right' 頭像

modelsvg

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

太多了，我歇（寫）不過來了，我把她們通通施了魔法，放進 CDN 了，乾脆像我同樣設爲隨機顯示吧，它不會阻塞加載你的博客。若是你非要知道還有哪些指定的 model 可供你使用，往後再說，這不是重點。函數

musicPlayer（音樂播放器）

名稱 類型 可選值 默認值 描述
enable Boolean true false true 是否啓用
page String 'index' 'post' 'all' 'all' 生效頁面
agent String 'pc' 'mobile' 'all' 'all' 生效用戶端
autoplay Boolean true false false 自動播放
audio Array [{}] [{}] 音樂

click（點擊特效）

名稱 類型 可選值 默認值 描述
enable Boolean true false true 是否啓用
page String 'index' 'post' 'all' 'all' 生效頁面
agent String 'pc' 'mobile' 'all' 'all' 生效用戶端
auto Boolean true false false 進入頁面自動產生特效
colors Array [] [] 顏色列表

topProgress（頭部進度條）

名稱 類型 可選值 默認值 描述
enable Boolean true false true 是否啓用
page String 'index' 'post' 'all' 'all' 生效頁面
agent String 'pc' 'mobile' 'all' 'all' 生效用戶端
background String 全部色值 '#FFB3CC' 背景色
height String [] '5px' 高度

github（github圖標）

名稱 類型 可選值 默認值 描述
enable Boolean true false true 是否啓用
background String 全部色值 '#000' 顏色
url Number 圖片連接 200 連接

postSignature（隨筆簽名）

名稱 類型 可選值 默認值 描述
enable Boolean true false true 是否啓用
content Array [''] [''] 顏色

imagebox（圖片燈箱）

名稱 類型 可選值 默認值 描述
enable Boolean true false true 是否啓用

highLight （代碼高亮）

名稱 類型 可選值 默認值 描述
type String 'atomOneDark' 'atomOneLight' 'github' 'atomOneDark' 類型

lineNumbers（代碼行號）

名稱 類型 可選值 默認值 描述
enable Boolean true false true 是否啓用

catalog（文章目錄）

名稱 類型 可選值 默認值 描述
enable Boolean true false true 是否啓用
position String 'sidebar' 'left' 'right' left 位置

back2top（返回頂部）

名稱 類型 可選值 默認值 描述
enable Boolean true false true 是否啓用

links（底部連接）

名稱 類型 可選值 默認值 描述
links Array [{name: '', link: ''}] 本倉庫連接 是否啓用

各主題當前支持的配置項

固然不是全部主題都支持全部配置的，目前我一我的精力有限，不過大多數配置都覆蓋了。

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郵箱：923665892@qq.com

感謝

GShang 提供了一套主題。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程