圖片類型
支持的圖片類型列表。
贊助
成為我們的資助者或贊助商，以支持我們的工作。
本頁內容
贊助商
站點圖片資源
存放於 assets 目錄下的圖片。
你需要於 URL 的路徑前添加一個前置斜槓（/），以使用站點圖片資源。
| Path | Markdown | Matched |
|---|---|---|
assets/images/foo.png |  | N |
assets/images/foo.png |  | Y |
assets/images/bar.png |  | Y |
頁面圖片資源
存放於頁面目錄的圖片資源。
你需要按照頁面 bundles 所示的結構進行組織頁面，比如：
1content/
2 blog/
3 hello/
4 index.md
5 foo.png
6 bar.png
上述結構包含了一個頁面（blog/hello），其包含了兩個圖片資源：foo.png 和 bar.png。
這樣就可以在頁面內容文件（blog/hello/index.md）中呈現圖像。
1
2
公共圖片
存放於 static 目錄的圖片。
| Path | Markdown |
|---|---|
static/images/foo.png |  |
static/images/bar.png |  |
外部圖片
| Path | Markdown |
|---|---|
https://example.org/images/foo.png |  |
https://example.org/images/bar.png |  |
侷限性
除了對齊和調整大小外，大多數處理方法只能處理站點圖像資源和頁面圖像資源。此外，對於公共圖像和外部圖像的大小調整是通過內聯樣式實現的。
掛載公共圖片
好消息是 Hugo 允許掛載 static/* 目錄，以使它們成為站點資源，這樣就可以使用其他處理方法了。
hugo.yaml
1module:
2 mounts:
3 - source: content
4 target: content
5 - source: static
6 target: static
7 - source: layouts
8 target: layouts
9 - source: data
10 target: data
11 - source: assets
12 target: assets
13 - source: i18n
14 target: i18n
15 - source: archetypes
16 target: archetypes
17 - source: static/uploads
18 target: assets/uploads
hugo.toml
1[module]
2 [[module.mounts]]
3 source = 'content'
4 target = 'content'
5 [[module.mounts]]
6 source = 'static'
7 target = 'static'
8 [[module.mounts]]
9 source = 'layouts'
10 target = 'layouts'
11 [[module.mounts]]
12 source = 'data'
13 target = 'data'
14 [[module.mounts]]
15 source = 'assets'
16 target = 'assets'
17 [[module.mounts]]
18 source = 'i18n'
19 target = 'i18n'
20 [[module.mounts]]
21 source = 'archetypes'
22 target = 'archetypes'
23 [[module.mounts]]
24 source = 'static/uploads'
25 target = 'assets/uploads'
hugo.json
1{
2 "module": {
3 "mounts": [
4 {
5 "source": "content",
6 "target": "content"
7 },
8 {
9 "source": "static",
10 "target": "static"
11 },
12 {
13 "source": "layouts",
14 "target": "layouts"
15 },
16 {
17 "source": "data",
18 "target": "data"
19 },
20 {
21 "source": "assets",
22 "target": "assets"
23 },
24 {
25 "source": "i18n",
26 "target": "i18n"
27 },
28 {
29 "source": "archetypes",
30 "target": "archetypes"
31 },
32 {
33 "source": "static/uploads",
34 "target": "assets/uploads"
35 }
36 ]
37 }
38}
上述配置將 static/uploads 掛載到 assets/uploads，然後你就可以像使用站點圖片資源一樣使用這些圖片。
1