用了 Fluid 主題一小段時間，也漸漸開始熟悉一些基本功能和樣式可以如何調整。
剛開始真的是混亂中立，什麼都想改但什麼都改不到！

不得不說，筆者身為設計師，
在打文章的同時能挑選一張美美的 banner 來搭配主題，真的好幸福啊！（部落格版本）

by Engin_Akyurt on Pixabay

Fluid 主題介紹

Fluid 是一款基於 Hexo 框架上開發的 Material Design 風格主題，由 Fluid-dev 負責開發與維護。
主題 GitHub：https://github.com/fluid-dev/hexo-theme-fluid
相關文檔：用戶手冊、最新版本、文章配置
範例網站：
Hexo Theme Fluid
zkqiang’s blog
吃白饭的休伯利安号

使用指南

關於主題配置，官方有提供一個詳細的 Hexo Fluid 使用指南 。
裡面介紹的很詳細，網址也放在主題包的 _config.yml 檔案內。
有興趣的朋友可以研究看看，本篇僅介紹筆者至今為止調整過的一些基本項目，與修改的方法。

主頁 Banner 大圖

所有的頁面（含首頁、關於頁、文章頁…等），都有個 banner_img 的屬性，在 Fluid 的 _config.yml 配置檔案內設定。
以首頁為例，請到 _config.yml 檔案內，找到以下程式碼：

#---------------------------
# 首页
# Index Page
#---------------------------
index:
  banner_img: /img/banner.jpg  # 首页 Banner 头图，以下相同
  banner_img_height: 100  # 头图高度，屏幕百分比，available: 0 - 100

banner 的路徑（banner_img）和高度（banner_img_height）就在這邊設置。

圖片來源

建議將圖片放置在 /fluid/source/img/ 目錄底下，對應的路徑填寫為：/img/你的圖片名稱。

例如

首頁的圖片是 banner.jpg，圖片應存放在：/fluid/source/img/banner.jpg，
banner_img 的指定路徑為：/img/banner.jpg。

同理，其他的頁面也是如此設置，如：文章頁、關於我、分類頁、標籤頁等。

#---------------------------
# 文章頁
# Archive Page
#---------------------------
archive:
  banner_img: /img/articles.jpg
  banner_img_height: 80  # available: 0 - 100
#---------------------------
# 分類頁
# Categories Page
#---------------------------
category:
  banner_img: /img/categories.jpg
  banner_img_height: 80  # available: 0 - 100

一開始筆者會把 public/img 和 Fluid 主題包內的 source/img 混淆，不知道圖片正確應該放置到哪邊？
官方說建議放到 source/img，但筆者直接把圖片存到 public/img 卻也能正常顯示。
且放到 source/img 內的圖片，上傳到部落格後，便會發現 public/img 內也同步產生了那張圖片。

於是筆者查了一下官方的主題配置文檔，官方對 source 的解釋如下：

原始檔案資料夾，除了模板以外的 Asset，例如 CSS、JavaScript 檔案等，應該放在這個資料夾。檔案或資料夾開頭名稱為 _（底線）或隱藏檔案會被忽略。
如果檔案可以被渲染的話，會經過處理再儲存到 public 資料夾，否則會直接拷貝到 public 資料夾。

以上說明筆者理解為：「你存在 source/img 內的圖片，會被直接拷貝到 public/img。」

於是後來寫文章時，筆者都直接把圖片存在 public/img 內了。雖然不確定這樣存圖片會不會有問題，不過到目前為止都沒有什麼問題產生。（自以為這樣檔案會比較小的設計師…(´・ω・`)

於是就發生了悲劇

沒錯，就在剛剛，筆者才剛寫完上面的介紹，發現電腦好當啊！網站怎麼跑得這麼慢！
就想起了 Hexo 有一個清除快取的功能，很開心的按下去之後，發現整個網站的圖片都消失了！！
筆者整個 public 資料夾都不見了啊啊啊啊！！！！（崩潰

不知道是不是因為筆者在開啟 server 的狀態下按了 Hexo clean 的關係，整個 public 都被刪除了。
嚇得平常不動腦的小女子光速的動起了腦袋，趕快先到 Github 把線上還沒壞掉的檔案下載下來，再自己創建一個 public 資料夾，把載下來的檔案都丟進去，網站圖片才回來了…真是嚇死了(´; ω ;`)

於是驚魂未定的筆者再查了一些資料，得出了以下結論：

1. 千萬別在開啟 server 的狀態下按 Hexo clean，Hexo 會把整個 public 資料夾當作已產生的靜態檔案給清除。
2. 網站的大圖 banner、和主題有關的原始檔案(例如：favicon.png、loading.gif…等），皆須存在 fluid/source/img/ 內。
3. 文章的 banner、文章內的說明圖等，皆須存在 fluid/source/img/ 內，但也可以存在 blog/source 內，再自己新增一個 img 資料夾，將圖片都歸類進去。文章的 .md 檔案也會在 source/_posts 內。
4. public 資料夾僅是上傳到線上後會產生的靜態檔案。

原來之前筆者都把官方說的 source/img 和主題的 fluid/source/img/ 混淆了！
直到發生悲劇才知道原來官方指的是最外層的 source 資料夾，該說是因禍得福嗎…？（淚

明天會繼續分享，部落格標題與 header 選單、關於我、文章頁...等等功能介紹！