模塊支持 Bootstrap v5 開箱即用,若你並不使用 Bootstrap,則需要對配置進行調整。
成為我們的資助者或贊助商,以支持我們的工作。
hugo.yaml
1params:
2  hugomods:
3    images:
4      modern_format: webp
hugo.toml
1[params]
2  [params.hugomods]
3    [params.hugomods.images]
4      modern_format = 'webp'
hugo.json
1{
2   "params": {
3      "hugomods": {
4         "images": {
5            "modern_format": "webp"
6         }
7      }
8   }
9}
v0.8.3 開始,params.images 重命名為 params.hugomods.images,以避免於 Hugo 內置目錄衝突,詳情請參閱 https://github.com/hugomods/images/issues/26。alignment_center_class_name| 名稱 | 上下文 | 類型 | 必填 | 默認值 | 版本 | 示例 | 
|---|---|---|---|---|---|---|
| alignment_center_class_name | - | string | - | d-block text-center | - | - | 
居中時 <picture> 和 <figure> 的類名。
alignment_end_class_name| 名稱 | 上下文 | 類型 | 必填 | 默認值 | 版本 | 示例 | 
|---|---|---|---|---|---|---|
| alignment_end_class_name | - | string | - | float-end ms-2 | - | - | 
右側浮動時 <picture> 和 <figure> 的類名。
alignment_start_class_name| 名稱 | 上下文 | 類型 | 必填 | 默認值 | 版本 | 示例 | 
|---|---|---|---|---|---|---|
| alignment_start_class_name | - | string | - | float-start me-2 | - | - | 
左側浮動時 <picture> 和 <figure> 的類名。
class_name| 名稱 | 上下文 | 類型 | 必填 | 默認值 | 版本 | 示例 | 
|---|---|---|---|---|---|---|
| class_name | - | string | - | img-fluid | - | - | 
<img> 的類名。
figure_class_name| 名稱 | 上下文 | 類型 | 必填 | 默認值 | 版本 | 示例 | 
|---|---|---|---|---|---|---|
| figure_class_name | - | string | - | figure | - | - | 
<figure> 的類名。
figure_caption_class_name| 名稱 | 上下文 | 類型 | 必填 | 默認值 | 版本 | 示例 | 
|---|---|---|---|---|---|---|
| figure_caption_class_name | - | string | - | figure-caption | - | - | 
<figcaption> 的類名。
figure_image_class_name| 名稱 | 上下文 | 類型 | 必填 | 默認值 | 版本 | 示例 | 
|---|---|---|---|---|---|---|
| figure_image_class_name | - | string | - | figure-img | - | - | 
當設置了說明文本,該類名將會追加到 <img>。
modern_format| 名稱 | 上下文 | 類型 | 必填 | 默認值 | 版本 | 示例 | 
|---|---|---|---|---|---|---|
| modern_format | - | string | - | webp | - | - | 
生成現代圖片格式,為空則禁用。