Hugo Blowfish 的問題修復

Published: July 1, 2024
Updated: November 28, 2025

本文進行 Hugo blowfish 主題的客製化，最終校稿時間為 2025/11/08 Blowfish v2.92.0，請注意時效性。

標籤與分類分別顯示

在 partials/article-meta/basic.html 中找到 {{/* Output taxonomies */}}，整段改成

{{ if .Params.showTaxonomies | default (.Site.Params.article.showTaxonomies | default false) }}
  <div class="flex flex-col gap-3">
    {{ with .GetTerms "categories" }}
      <div class="flex flex-row flex-wrap items-center" style="gap: 0.25rem;">
        <span class="text-sm font-semibold">分類 </span>
        {{ range . }}
          <a href="{{ .RelPermalink }}">
            {{ partial "badge.html" .LinkTitle }}
          </a>
        {{ end }}
      </div>
    {{ end }}

    {{ with .GetTerms "tags" }}
      <div class="flex flex-row flex-wrap items-center pt-1" style="gap: 0.25rem;">
        <span class="text-sm font-semibold">標籤 </span>
        {{ range . }}
          <a href="{{ .RelPermalink }}">
            {{ partial "badge.html" .LinkTitle }}
          </a>
        {{ end }}
      </div>
    {{ end }}
  </div>
{{ end }}

文章封面

發現 Blowfish 無法單獨設定文章縮圖，於是把 Cover 關鍵字拿來當文章縮圖。把 layouts/partials/hero 中所有的 *cover*, 刪掉，這樣修改的結果是文章圖片的分為兩種：

cover/thumbnail/featured: 縮圖+進入文章後的圖片
background: 只有進入後的圖片

改善對比度

assets/css/schemes/你使用的顏色主題.css 是主題顏色的基礎設定，所有顏色都引用此檔案中設定的顏色。Blowfish 「設定上」使用 material design 的三種顏色設計，不過實際上所有 scheme 都沒有按照 material design 的思路設計，實際引用也幾乎沒有用到顯眼色 color-secondary。

Blowfish 基本上是這樣引用顏色的：

neutral: 偏向灰階的顏色，在網站背景、文字大量使用
primary: 網站主題色
secondary: 幾乎沒用

後面的數字是深淺的階段，有了這些思路，你可以自行修改顏色到你覺得清晰顯示的數值。

找顏色的技巧

由於一般用戶非開發者沒有前端知識，一個笨但有效的方式就是把顏色移除，找不到變數引用那些變數的內容就會變成預設顏色，這樣你就定位到你要改的顏色是哪個變數。

修改顏色的技巧

丟給 AI 叫他改，或者用 materialpalettes 之類的色彩生成器完成。顏色格式一定要是三個數值，輸出 Hex 編碼的顏色一樣丟給 AI 叫他轉。

網站 Favicon

Blowfish 沒錯，是我以前不懂搞錯了。只要建立這些檔案

static/
├─ android-chrome-192x192.png
├─ android-chrome-512x512.png
├─ apple-touch-icon.png
├─ favicon-16x16.png
├─ favicon-32x32.png
├─ favicon.ico
└─ site.webmanifest

就會使用 Hugo 的覆蓋功能以自己的版本替代。注意路徑要完全相同，Blowfish 的設定是直接放在 static 目錄下無須子目錄。

網頁標籤名稱

把 blowfish 預設的 dot 改為 dash。

找到 layouts/partials/head.html 中以下片段：

<title>{{ .Title | emojify }} &middot; {{ .Site.Title | emojify }}</title>
<meta name="title" content="{{ .Title | emojify }} &middot; {{ .Site.Title | emojify }}" />

把 &middot 改為 -。

註腳（文章引用）

縮小 footnote 字體以及修改標籤樣式，讓他長得比較像論文格式。

在 assets/css/custom.css 中，新增以下：

/* 縮小 footnote 字體 */
.footnotes {
    font-size: 0.7em;
}

/* footnote 引用樣式 */
.footnote-ref::before {
    content: "[";
}

.footnote-ref::after {
    content: "]";
}

/* 調整 sup 標籤樣式 */
sup {
    font-size: xx-small;
    vertical-align: super;
}

/* 移除原本的編號樣式 */
.footnotes ol {
    list-style-type: none; /* 移除原本的編號 */
    padding-left: 0;
}

/* 修改 footnote 列表項的樣式 */
.footnotes ol li {
    counter-increment: footnote; /* 增加計數器 */
    position: relative;
    margin-left: 2em; /* 調整左邊距，使其與文章內容有適當間隔 */
    line-height: 1.8; /* 調整行高，使超連結可以正確顯示 */
    margin-bottom: -1.2em; /* 調整每個 footnote 間的距離 */
}

.footnotes ol li:before {
    content: "[" counter(footnote) "]"; /* 使用計數器顯示編號 */
    font-weight: normal;
    position: absolute;
    left: -1.5em; /* 將編號設置在列表項的左側 */
}

/* 將原始編號隱藏 */
.footnotes ol li a:first-child {
    display: inline-block; /* 保留超連結的顯示 */
}

美化選集功能

把選集功能後面的「- 本文屬於一個選集。」刪掉。
修改選集樣式並把本文也加上超連結。

刪掉「- 本文屬於一個選集。」：找到 layouts/partials/series/series_base.html ，修改為

{{ if .Params.series }}
    <summary
        class="py-1 text-lg font-semibold cursor-pointer bg-primary-200 text-neutral-800 ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 dark:bg-primary-800 dark:text-neutral-100">
        {{ index .Params.series 0 }}
    </summary>
    {{ $seriesName := strings.ToLower (index .Params.series 0) }}
    {{ range $post := sort (index .Site.Taxonomies.series $seriesName) "Params.series_order" }}
    {{ if eq $post.Permalink $.Page.Permalink }}
    <div
        class="py-1 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600">
        <a href="{{$post.Permalink}}">
            {{ i18n "article.part" }}{{ $post.Params.series_order }} {{ i18n "article.this_article" }} {{ $post.Params.title}} 
        </a>
    </div>
    {{ else }}
    <div
        class="py-1 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600">
        <a href="{{$post.Permalink}}">
            {{ i18n "article.part" }}{{ $post.Params.series_order }} {{ $post.Params.title}}
        </a>
    </div>
    {{end}}
    {{end}}
{{end}}

$post.Permalink 裡面就是選集樣式。再去 i18n 中把修改自己語言的檔案，我的改成以下：

part: "#"
this_article: "[本文]"

關閉相關文章簡介

主目錄想要有文章簡介，但是相關文章也出現簡介就太亂。

在 layouts/partials/article-link/card-related.html 註解掉

{{ if .Params.showSummary | default (.Site.Params.list.showSummary | default false) }}
    <div class="py-1 prose dark:prose-invert">
        {{ .Summary }}
    </div>
{{ end }}

文章資訊間隔符號

加上編輯時間就後就顯得凌亂，修改樣式。把 layouts/partials/article-meta/basic.html 中的

{{ delimit . "<span class=\"px-2 text-primary-500\">&middot;</span>" | safeHTML }}

改為

{{ delimit . "<span class=\"px-2 text-neutral-500\">&VerticalLine;</span>" | safeHTML }}

模糊設定

去主題的 github 搜尋 backdrop-blur path:*.html 裡面有所有能調整的頁面，選你想要的調整，內建 .backdrop-blur (8px) .backdrop-blur-sm (4px) .backdrop-blur-2xl (40px)，而 scroll / 300 是漸層距離設定。

頁面目次 ToC

info

此問題官方已於 blowfish v2.71.0 修正，因此此段已無作用。

ToC過長時增加滾輪。

把 layouts/partials/toc.html 中 <details open class> 整段換成以下：

<details open class="toc-right mt-0 overflow-hidden rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 hidden lg:block">
  <summary
    class="block py-1 text-lg font-semibold cursor-pointer bg-neutral-100 text-neutral-800 ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 dark:bg-neutral-700 dark:text-neutral-100 lg:hidden">
    {{ i18n "article.table_of_contents" }}
  </summary>
  <div
    class="min-w-[220px] py-2 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600"
    style="max-height: 450px; overflow-y: auto;">
    {{ .TableOfContents | emojify }}
  </div>
</details>
<details class="toc-inside mt-0 overflow-hidden rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 lg:hidden">
  <summary
    class="py-1 text-lg font-semibold cursor-pointer bg-neutral-100 text-neutral-800 ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 dark:bg-neutral-700 dark:text-neutral-100 lg:hidden">
    {{ i18n "article.table_of_contents" }}
  </summary>
  <div
    class="py-2 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600"
    style="max-height: 450px; overflow-y: auto;">
    {{ .TableOfContents | emojify }}
  </div>
</details>