文章圖片：Hugo Blowfish主題

figure簡碼寫法 / MD寫法

圖片的資料夾結構

#

在 Hugo 中， Page Bundle 圖片的相對路徑要注意規則。
資料夾裡必須要有一個 index.md (・ω・、)
若只有 index.zh-tw.md 或其他語言的index
Page Bundle會無法辨識，導致無法抓取，圖片破光光 (つд`ﾟ)･ﾟ･

content/文章資料夾/
            ├─ index.md   # 必須存在，可以是空白檔案
            ├─ index.zh-tw.md
            └─ images/ImageExample.png

文章資料夾內同時要有
index.md
index.zh-tw.md
images 資料夾

插入圖片

#

MD 寫法

#

MD寫法是 ![圖片說明](圖片相對位置)

![Alt text](images/ImageExample.png)

也支援 "caption圖片下方小標題"

![Alt text](images/ImageExample.png "Image caption")

MD的寫法會強制滿版、圓角，
若圖片寬度低於 660px，
使用MD寫法會讓圖片被強制拉寬，導致模糊 (如寬度=490 px圖片)
並且圖片點開後，也是被Blowfish主題壓縮後的尺寸，
若有高解析、客製化的圖片需求，建議使用 figure簡碼寫法

figure 簡碼寫法

#

figure 寫法的 default=true 能解除強制滿版、圓角，
以原尺寸、直角顯示圖片。

< figure
  src="images/ImageExample.png"
  alt="Example Image"
  default=true
  caption="↑點開來會比MD寫法更清晰"
>

{{}}

< figure src="images/ImageExample.png" alt="Example Image" >

個人認為 figure簡碼寫法會比 MD寫法
更適合圖片作品展示、截圖多的筆記

相關參數

#

default=true

#

default=true

figure寫法沒有 [V]default=true ，效果就和MD寫法差不多
Blowfish主題會讓圖片套用 Hugo原生參數，如 width等

figure default=true → Hugo原生參數、Blowfish主題參數失效
figure 沒有 default=true = MD寫法 → Hugo原生參數失效、Blowfish主題參數為主

以下用 [ v / x ] default=true
表示能否運用於 default=true Hugo原生參數
用 [ v / x ] Blowfish主題預設
表示能否運用於Blowfish主題預設

width

#

[v] default=true    [x] Blowfish主題預設

用 width="圖片寬度px值" 可以指定圖片寬度

width="330"

< figure
  src="images/ImageExample.png"
  alt="Example Image"
  default=true
  width="330"
  caption="↑width=330"
>

圖片置中

#

[v] default=true    [x] Blowfish主題預設

圖片會預設置左
用 class="flex justify-center" 可以使圖片置中

class="flex justify-center"

< figure
  src="images/ImageExample.png"
  alt="Example Image"
  default=true
  width="330"
  class="flex justify-center"
>

caption="圖片說明" 會跑位

< figure
  src="images/ImageExample.png"
  alt="Example Image"
  default=true
  width="330"
  class="flex justify-center"
  caption="←圖片置中，但caption會跑位"
>}}

沒 default=true ，圖片用 class="flex justify-center" 置中會沒用
並且 width參數 也會失效
需 自定義CSS ，下圖使用 w-custom-330

< figure
  src="images/ImageExample.png"
  alt="Example Image"
  class="flex justify-center w-custom-330"
  caption="↑沒有default=true而失效的圖片置中"
>

自定義CSS

#

到以下路徑新增或修改 custom.css

G:\thWeb\thWeb-cc_0930-25\themes\blowfish\assets\css

需在 params.toml 中 (路徑：G:\thWeb\thWeb-cc_0930-25\config\_default\)
設定能讀取 custom.css 加入以下程式碼：

[params.custom]
  css = ["css/custom.css"]

自訂寬度css

#

default=true 的圖片可以用 width參數 來自訂寬度
而沒有 default=true 圖片寬度會被 Blowfish主題 綁的很死、限寬660px
需自定義CSS突破限制
在 custom.css 中寫下

/* 自訂寬度 */
.w-custom-770 {
  width: 770px !important;
  max-width: none !important;
}

文章內的figure寫法 class參數加上 w-custom-770

class="w-custom-770"

下圖 w-custom-770 示例程式碼：

< figure
  src="images/ImageExample.png"
  alt="Example Image"
  class="mx-auto w-custom-770"
>}}

↓這張 w-custom-770 示例 沒有 default=true

nozoom

#

禁用圖片點開放大檢視
需注意這是 Blowfish主題預設的

[x] default=true    [v] Blowfish主題預設

nozoom=true

< figure
  src="images/ImageExample.png"
  alt="Example Image"
  class="mx-auto w-custom-770"
  nozoom=true
  caption="↑`nozoom=true` 套用給上張 `w-custom-770` 示例，沒有 `default=true`"
>}}

而nozoom=true 套用給有 default=true + width="770" 會失效

< figure
  src="images/ImageExample.png"
  alt="Example Image"
  default=true
  width="770"
  nozoom=true
  caption="↑在 `default=true` 的情況下，`nozoom=true` 會失效"
>}}

class="nozoom" 也會失效，
需自定義CSS給 default=true 圖片以實現 nozoom 的功能

default=true 圖片實現 nozoom

#

參考 自定義CSS的做法，
在 custom.css 中寫下

/* 自訂 nozoom img， */
/* 這邊取名為「th-nozoom」 */
/* class名稱前面要有1個. */
.th-nozoom img {
  /* 防止圖片被點擊放大 */
  pointer-events: none;
  /* 確保圖片顯示正常 */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* 防止拖拽 */
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
}

在文章中使用該自定義CSS class

< figure
  src="images/ImageExample.png"
  alt="Example Image"
  default=true
  class="th-nozoom"
>

default=true 圖片實現 rounded-md

#

直接對 default=true 圖片下 class="rounded-md"沒用， 圖片依然是直角
我用 F12 檢查，發現應該是 rounded-md 是套用在 <figure>標籤上，
需 自定義CSS，
把 <figure>標籤的 rounded-md 傳遞給內部的 <img>標籤

/* 讓 figure 的 rounded-md 傳遞給內部的 img */
figure.rounded-md img {
  border-radius: 0.375rem; /* rounded-md 的值 */
}

在文章內使用

< figure
  src="images/ImageExample.png"
  alt="Example Image"
  default=true
  width="330"
  class="rounded-md"
  caption="↑`default=true` 自定義CSS後使用 `rounded-md` 點開來會是直角、畫質清晰"
>

而無 default=true 則自帶 rounded-md

< figure
  src="images/ImageExample.png"
  alt="Example Image"
  class="w-custom-330"
  caption="↑無 `default=true`自帶 `rounded-md` 點開來會是圓角、畫質模糊"
>