图片渲染钩子
Markdown
Markdown 图片包含三个组成部分：图片描述、图片目标位置和可选的图片标题。
------------ ------------------ ---------
description destination title
这些组件将作为渲染钩子 上下文 传递，如下所示。
上下文
图片渲染钩子模板接收以下上下文：
属性
(map) Markdown 属性 ，如果您按如下方式配置您的站点，则可用：
markup:
goldmark:
parser:
attribute:
block: true
wrapStandAloneImageWithinParagraph: false
[markup]
[markup.goldmark]
[markup.goldmark.parser]
wrapStandAloneImageWithinParagraph = false
[markup.goldmark.parser.attribute]
block = true
{
"markup": {
"goldmark": {
"parser": {
"attribute": {
"block": true
},
"wrapStandAloneImageWithinParagraph": false
}
}
}
}
目标位置
(string) 图片目标位置。
是否为块级元素
(bool) 如果独立图片未包含在段落元素内，则返回 true。
序号
(int) 页面上图片的基于零的序号。
页面
(page) 对当前页面的引用。
页面内部
New in v0.125.0(page) 对通过 RenderShortcodes 方法嵌套的页面的引用。 参见详情 。
纯文本
(string) 图片描述的纯文本。
文本
(template.HTML) 图片描述。
标题
(string) 图片标题。
示例
在其默认配置下，Hugo 根据 CommonMark 规范 渲染 Markdown 图片。要创建一个执行相同操作的渲染钩子：
<img src="{{ .Destination | safeURL }}"
{{- with .Text }} alt="{{ . }}"{{ end -}}
{{- with .Title }} title="{{ . }}"{{ end -}}
>
{{- /* chomp trailing newline */ -}}要将独立图片渲染到 figure 元素中：
{{- if .IsBlock -}}
<figure>
<img src="{{ .Destination | safeURL }}"
{{- with .Text }} alt="{{ . }}"{{ end -}}
>
{{- with .Title }}<figcaption>{{ . }}</figcaption>{{ end -}}
</figure>
{{- else -}}
<img src="{{ .Destination | safeURL }}"
{{- with .Text }} alt="{{ . }}"{{ end -}}
{{- with .Title }} title="{{ . }}"{{ end -}}
>
{{- end -}}请注意，上述操作需要以下站点配置：
markup:
goldmark:
parser:
wrapStandAloneImageWithinParagraph: false
[markup]
[markup.goldmark]
[markup.goldmark.parser]
wrapStandAloneImageWithinParagraph = false
{
"markup": {
"goldmark": {
"parser": {
"wrapStandAloneImageWithinParagraph": false
}
}
}
}
默认值
New in v0.123.0Hugo 包含一个 嵌入式图片渲染钩子 来解析 Markdown 图片目标位置。默认情况下禁用，您可以在站点配置中启用它：
markup:
goldmark:
renderHooks:
image:
enableDefault: true
[markup]
[markup.goldmark]
[markup.goldmark.renderHooks]
[markup.goldmark.renderHooks.image]
enableDefault = true
{
"markup": {
"goldmark": {
"renderHooks": {
"image": {
"enableDefault": true
}
}
}
}
}
自定义渲染钩子，即使由主题或模块提供，也将覆盖嵌入式渲染钩子，而不管上述配置设置如何。
嵌入式图片渲染钩子通过查找匹配的 页面资源 来解析内部 Markdown 目标位置，然后回退到匹配的 全局资源 。远程目标位置将直接传递，如果无法解析目标位置，渲染钩子不会抛出错误或警告。
您必须将全局资源放在 assets 目录中。如果您已将资源放在 static 目录中，并且您无法或不愿意移动它们，则必须通过在站点配置中包含以下两个条目将 static 目录挂载到 assets 目录：
module:
mounts:
- source: assets
target: assets
- source: static
target: assets
[module]
[[module.mounts]]
source = 'assets'
target = 'assets'
[[module.mounts]]
source = 'static'
target = 'assets'
{
"module": {
"mounts": [
{
"source": "assets",
"target": "assets"
},
{
"source": "static",
"target": "assets"
}
]
}
}
请注意，嵌入式图片渲染钩子不执行图片处理。其唯一目的是解析 Markdown 图片目标位置。
PageInner 详情
New in v0.125.0PageInner 的主要用例是解析相对于已包含的 Page 的链接和 页面资源 。例如，创建一个“include”短代码，从多个内容文件组合一个页面，同时保留脚注和目录的全局上下文：
{{ with .Get 0 }}
{{ with $.Page.GetPage . }}
{{- .RenderShortcodes }}
{{ else }}
{{ errorf "The %q shortcode was unable to find %q. See %s" $.Name . $.Position }}
{{ end }}
{{ else }}
{{ errorf "The %q shortcode requires a positional parameter indicating the logical path of the file to include. See %s" .Name .Position }}
{{ end }}然后在你的Markdown中调用短代码：
{{% include "/posts/p2" %}}在渲染 /posts/p2 期间触发的任何渲染钩子将获得：
- 调用
Page时为/posts/p1 - 调用
PageInner时为/posts/p2
如果与 PageInner 不相关，则 PageInner 回退到 Page 的值，并始终返回值。
作为一个实际示例，Hugo的嵌入式链接和图像渲染钩子使用 PageInner 方法来解析Markdown链接和图像目标。查看每个源代码：