前言

這陣子剛開立這個blog玩得很瘋，一直在找主題美化的相關資料

但怎麼找都找不到可以根據主題深淺模式做到調整頂部/底部首頁圖的方式

最後就用自己的方法把它處理掉啦。

我的做法是盡量以不修改到Hexo跟主題的原始檔下去做調整

因為Hikari 也才剛剛接觸Hexo，所以做法上應該會有更好的方式。

這邊就提供我自己的做法給大家參考看看囉。

步驟流程

第一步：設定.yml檔

首先，我們先到 _config.butterfly.yml 裡面，定義一個參數。

1
2
3
4
5
# The banner image of home page
index_img: /pic/index_img.png

# 在切換深淺模式時，第二張首頁圖的路徑，index_img_w名稱是自己定義的，可以自行調整；後面則是圖片路徑。
index_img_w: /pic/white.gif

這樣一來日後維護圖片就很方便啦～改路徑就好了。

第二步：新增.pug檔

再來，在 \themes\butterfly\layout\includes\ 路徑下新增一個custom.pug檔(可以自己取名)

1
2
3
4
5
6
7
- var index_img_w = theme.index_img_w
- var index_img = theme.index_img
    style.
      :root {
        --bg-image-w: url('#{ index_img_w }');
        --bg-image: url('#{ index_img }');
      }
theme.index_img_w 這邊是你先前在_config.butterfly.yml上自己定義的參數名稱

--bg-image-w 則是你要在css設定的變數值

假如名稱都有自行改過，那記得這邊跟後面的css樣式內容都要做修改。

第三步：新增.css檔

我們接下來到 \source\css\ 路徑下新增一個mod.css檔(可以自己取名)

沒有 \css\ 資料夾的話，請自行建立。

css語法部分我就不多作介紹了。

加入以下內容：

1
2
3
4
5
6
7
/* 背景 */
[data-theme='dark'] #footer {
    background-image: var(--bg-image) !important ;
}
[data-theme='light'] #page-header,#footer {
    background-image: var(--bg-image-w) !important ;
}

深淺模式我也有針對亮色時對文字顏色的調整…等等有的沒的，下面幾項內容可以作為參考

可以依自己喜好去加入css的設定。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 其他*/
[data-theme='light'] .copyright {
    color: #4c4948;
}
[data-theme='light'] #site-title {
    color: #4c4948  !important ;
}
[data-theme='light'] #subtitle {
    color: #4c4948  !important ;
}
[data-theme='light'] #post-info  * {
    text-shadow: 0.1em  0.1em  0.2em  white;
    color: #4c4948  !important;
}

完成後，緊接著最後一步，我們就可以完成背景切換的功能了。

最後一步：引入.pug檔，以及.yml上的inject

我們最後在 \themes\butterfly\layout\includes\layout.pug 檔案中

下面最後一行 (./additional-js.pug 後面)，引入 custom.pug

1
2
include  ./additional-js.pug
include  ./custom.pug

在_config.butterfly.yml的inject，head加上mod.css**

1
2
3
inject:
head:
 - <link rel="stylesheet" href="/css/mod.css">

這樣所有步驟就完成啦！

這種切換應用的作法可以很多變，例如滑鼠樣式的切換、文字的顏色都可以。

至於如何變化就由各位自行去想像創作囉～

實際範例展示