前言

這陣子剛開始經營 Blog，玩 Hexo 跟 Butterfly 主題玩得很開心，也一直在找各種主題美化的資料。

不過我找了很久，都沒有找到「依照深色 / 淺色模式，自動切換頂部與底部背景圖」的做法。最後就用自己的方式把它實作出來了。

這篇會記錄我的做法。原則上，我會盡量避開 Hexo 與 Butterfly 主題的原始檔，改用自訂設定與樣式來完成，之後維護起來也比較方便。

Hikari 也是剛接觸 Hexo 不久，所以這不一定是唯一或最完美的解法，但可以當作一個實作方向參考看看。

步驟流程

第一步：在 .yml 檔新增參數

首先，到 _config.butterfly.yml 裡定義一個新的圖片路徑參數。

1
2
3
4
5
6
# 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 ;
}

我另外也針對淺色模式調整了部分文字顏色與陰影。下面這段可以作為參考，再依自己的版面需求調整。

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 與 .css

最後，打開 \themes\butterfly\layout\includes\layout.pug ，在底部引入剛才新增的 custom.pug。

可以放在最後一行，也就是 ./additional-js.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">

這樣所有步驟就完成啦！

同樣的做法其實可以延伸到很多地方，例如切換滑鼠樣式、文字顏色或其他版面元素。只要把設定值抽出來，再透過 CSS 變數控制，就可以做出不少變化。

至於要怎麼玩，就交給各位自由發揮囉～

實際範例展示