Hugo Blowfish 文章图片设定

图片的资料夹结构

#

在 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

D:\[project_folder]\themes\blowfish\assets\css

需在 params.toml 中 (路径：D:\[project_folder]\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` 点开来会是圆角、画质模糊"
>