前言

今天介紹當你在選定一個佈景後，可以先從哪幾個地方下手「客製化」成你要的網站，並以筆者自身使用的部落格為例去說明。

Tranquilpeak

Tranquilpeak 是一款在視覺佈局上很適用於個人部落格撰文的 Hugo Themes (個人感覺)，建議在選用佈景時閱讀一下官方文件、並去試著做以下這幾件事：

改 config 配置

佈景提供了 config 設置範例 (有些作者會補充說明，註解在 config 裡面) 給大家參考，放在 exampleSite 中，建議可以先以這份 config 為基礎去改設置參數；

佈景本身也有提供 default 的 config，通常會放在該佈景第一層目錄底下，有個 theme.toml，要用哪一份開始設置就看個人。

順帶一提，筆者一開始也用過 Even 這款佈景，這兩套都還蠻乾淨的，只是相比之下更喜歡 Tranquilpeak 的 config (附上 Even 的 config 給大家參考看看)。

透過 demo 知道佈景可以做到哪些事

是的，佈景也是有他各自不同的工具，能提供你讓你方便做到不同的事情，你可以先逛逛 Tranquilpeak (或其他)佈景 online demo，這能讓你不用本地套用，就可以直接先看看套用後整體呈現的效果、網站的布局會長什麼樣子；

但不論你是使用哪種佈景，在配置上都萬變不離其宗 (若你喜歡的佈景做不到，但有看到別的佈景有，理論上自己也能仿照實作出來，不過門檻會稍微高一點)。

安裝佈景 again

前幾天講 Hugo New Site 時，有提到佈景是透過 git submodule add 方式安裝的，不過筆者是直接 clone 到本地，將 clone 下來的專案放到 hugo site 資料夾 themes 底下，雖然這跟使用 git submodule 安裝方式不同，但結果上是同樣意思(目前覺得都一樣)，就看個人選擇要用哪一種方式去安裝。

clone the theme

執行以下指令 clone theme repo 到你專案底下的 themes 資料夾中：

git clone https://github.com/kakawait/hugo-tranquilpeak-theme.git themes/tranquilpeak

copy the example config.toml

你可以先複製他提供的範例配置，之後依需求改變部分設置參數，這樣就不用重頭到尾自己設定：

cp themes/tranquilpeak/exampleSite/config.toml ./config.toml

配置範例

以下是筆者自己的網站一小部分(基本)設置：

baseURL = "https://blog.genesu.me/" # 部署到線上之後要使用的主要域名 = FQDN
defaultContentLanguage = "zh-tw"    # 預設語系
title = "高級伴讀書僮"                # 網站 title
theme = "tranquilpeak"              # 指定使用的佈景 (與資料夾名稱一樣)
paginate = 7                        # 每頁顯示幾筆文章
canonifyurls = true                 # 設為 true 讓全站資源網址都套用 baseURL

在本地跑起來看看

使用 hugo server 在本地執行觀看結果：

佈景使用文件

Tranquilpeak 作者提供了兩種使用文件，User Document 詳列了佈景提供的各種可調功能、工具，另一種專門提供給開發者使用，如果想要微調佈景的 code 可以 Fork 一份回來，參考文件之後修改看看。

小結

本篇介紹了筆者自己正在用的佈景，並試著從新手不會用的時候，建議各位可以先碰哪幾塊，藉此逐步打造出自己想要的網站呈現方式，try 出自己想像中的風格。

題外話

從本篇開始之後會盡量改用「筆者」替代「我」去撰寫文章，感覺上用詞比較客觀(?)。

參考連結

• kakawait/hugo-tranquilpeak-theme
• olOwOlo/hugo-theme-even