图像渲染钩子
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) 图像目标。
IsBlock
(bool) 如果独立图像未包裹在段落元素中，则返回 true。
序号
(int) 页面上图像的从零开始的序号。
Page
(page) 对当前页面的引用。
PageInner
v0.125.0 中的新功能(page) 通过 RenderShortcodes 方法嵌套的页面的引用。 查看详细信息。
PlainText
(string) 图像描述为纯文本。
Text
(template.HTML) 图像描述。
标题
(string) 图像标题。
示例
在其默认配置中，Hugo 根据 CommonMark 规范渲染 Markdown 图像。要创建一个执行相同操作的渲染钩子
<img src="{{ .Destination | safeURL }}"
{{- with .PlainText }} alt="{{ . }}"{{ end -}}
{{- with .Title }} title="{{ . }}"{{ end -}}
>
{{- /* chomp trailing newline */ -}}要在 figure 元素中渲染独立图像
{{- if .IsBlock -}}
<figure>
<img src="{{ .Destination | safeURL }}"
{{- with .PlainText }} alt="{{ . }}"{{ end -}}
>
{{- with .Title }}<figcaption>{{ . }}</figcaption>{{ end -}}
</figure>
{{- else -}}
<img src="{{ .Destination | safeURL }}"
{{- with .PlainText }} 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
}
}
}
}
默认
v0.123.0 中的新功能Hugo 包含一个嵌入式图像渲染钩子，用于解析 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 详细信息
v0.125.0 中的新功能PageInner 的主要用例是解析相对于包含的 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 不相关，则回退到 Page 的值，并且始终返回一个值。
作为一个实际示例，Hugo 的嵌入式链接和图像渲染钩子使用 PageInner 方法来解析 markdown 链接和图像目标。请参阅每个的源代码