Skip to main content

ZSL

Hugo Blowfish 的基礎設定

Published:
Updated:

Blowfish 是高度參數化的主題，提供非常多自定義選項，第一次使用時 config 也是多到眼花撩亂，這邊稍微紀錄一下本站的設定。

安裝 Hugo

很多其他主題更新緩慢需要用戶自行降 Hugo 版本，Blowfish 則沒有這個問題主題更新的很勤快，因此直接使用 package manager 安裝 Hugo 即可：

  1. MacOS: brew install hugo
  2. Windows: winget install --id=Hugo.Hugo.Extended -e
程式包管理器

brew / winget 是「程式包管理器」，讓你方便管理各種程式，面向開發者的程式基本上都能被這些管理器管理，面向一般用戶的就不一定。只有一開始就被管理器安裝的程式才能被管理，如果你先安裝程式才安裝管理器，那些程式就需要自行手動管理。

這些管理器非常輕量因此你可以放心的安裝他們。

建立你的 Hugo 專案

打開你的終端機貼上這些：

  1. hugo new site blog
  2. cd blog
  3. git submodule add -b main https://github.com/nunocoracao/blowfish.git themes/blowfish
  4. rm hugo.toml
  5. mkdir -p config/_default
  6. cp -r themes/blowfish/config/_default config/_default
  7. 將 config/_default/hugo.toml 裡面 theme 設定的註解移除（把 # 移除）
  8. hugo server
  9. 到 http://127.0.0.1:1313/ 觀看你的網站

這樣就已經完成主題下載了，是不是很簡單？簡單說明每步驟在做什麼：

  1. 建立 Hugo 專案
  2. 移動到專案目錄
  3. 將主題作為「Git 子模組」存放在 theme/blowfish 目錄
  4. 移除預設的 hugo.toml 設定檔
  5. 建立 config/_default 目錄
  6. 將主題預設的設定檔複製到專案的設定檔中
  7. 移除註解，等同於設定主題是 Blowfish
  8. 啟動本地伺服器

然而 Windows 無法全部在終端機完成，因為 Windows 的終端機真 TM 是天才，不只因為系統不同導致指令不同，但是 Windows 自己有 CMD/PowerShell/Windows PowerShell 三種互不兼容的終端，因此不介紹 Windows 指令，Windows 用戶請按照步驟說明手動執行。

基本知識

現在你應該會對專案目錄一片茫然，因此先介紹 Hugo 專案結構，你的目錄應該會是這樣：

├── assets               # Hugo 可以存取此目錄的檔案
├── archetypes           # hugo new content 的模板
│   └── default.md
├── config               # 設定檔路徑，有些主題會直接放在專案根目錄
│   └── _default
├── content              # Markdown 文件位置
├── data                 # Hugo 渲染時可以讀取的額外數據
│   └── months.toml
├── i18n                 # 國際化設定
│   ├── en-us.yaml
│   └── zh-TW.yaml
├── layouts              # HTML 的結構
│   ├── _default         # _default 目錄中的樣式套用在絕大多數的頁面
│   ├── partials         # partials 目錄的檔案可以被其他 layouts 檔案作為模板引用
│   └── shortcodes       # 短碼，在 markdown 中使用，讓你的文章有各種功能
├── public               # 構建出的 HTML 網站目錄，也就是你的網站
├── static               # 此目錄會被「原封不動」的複製到 public 資料夾
└── themes               # 主題
    └── blowfish

這樣已經介紹的很清楚，這邊再額外釐清很多人常弄錯的地方：

  1. 永遠不該修改 themes 目錄的內容
  2. 如果根目錄的對應路徑有檔案，就會替代主題對應路徑的檔案，因此我們可以用此方式客製化主題
  3. public 目錄是完整的網站，不用動他
  4. hugo server 會自動更新頁面，也就是說新增、修改檔案都會自動更新 public 內容
  5. 要注意的是如果刪除檔案，他不會刪除 public 目錄的對應內容
  6. assets 的檔案可以被 Hugo 處理，static 的檔案會原封不動複製到 public。
  7. 因此 static 放 robots.txt 等靜態文件，圖片/CSS/JS 都放在 assets。
  8. 圖片到底要放在 static 還是 assets？根據你的主題原始碼怎麼寫而定，沒有肯定答案，試過才知道。主題程式碼沒有寫錯的放在 assets 應該就可以，不行的話再放到 static 試試看。
  9. 以 Blowfish 來說，除了 favicon（網站縮圖）等靜態圖片，所有東西都應該放在 assets。

修改預設 frontmatter

前面提到 archetypes 是建立新檔案的模板，建議把 archetypes/default.md 改成

---
title: '{{ replace .File.ContentBaseName "-" " " | title }}'
date: {{ .Date }}
draft: true
summary: 
tags: 
  - 常用標籤1
  - 常用標籤2
categories:
  - 常用分類1
  - 常用分類2 
---

從一開始就做好 URL 管理，詳情請見調整Hugo的permalinks，讓不同目錄下的頁面產生同一個網址。

修改內容預覽

接下來兩篇的修改內容包含：
問題修復

  1. 標籤與分類分別顯示
  2. 文章封面
  3. 改善對比度
  4. 網站 logo
  5. 網頁標籤名稱
  6. 註腳（文章引用）
  7. 美化選集功能
  8. 關閉相關文章簡介
  9. 文章資訊間隔符號
  10. 模糊設定

進階客製化

  1. 超連結
  2. 文章存檔頁面
  3. 閱讀進度
  4. 簡碼 - expand
  5. 自動加上編輯時間
↑