iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 9
1
Modern Web

從平面轉型成網頁設計的 UI/UX 設計師系列 第 9

【Day 9】Hexo Fluid 主題使用指南 - Part I

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

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

coffee-2425254_960_720
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 選單、關於我、文章頁...等等功能介紹!


上一篇
【Day 8】如何安裝 Disqus 留言板
下一篇
【Day 10】Hexo Fluid 主題使用指南 - Part II
系列文
從平面轉型成網頁設計的 UI/UX 設計師30

尚未有邦友留言

立即登入留言