Shortcode

Inner

返回短代码开始标签与结束标签之间的内容,适用于短代码调用包含结束标签的情况。

签名
SHORTCODE.Inner
返回类型
template.HTML

这段内容:

content/services.md
{{< card title="Product Design" >}}
We design the **best** widgets in the world.
{{< /card >}}

配上这个短代码:

layouts/_shortcodes/card.html
<div class="card">
  {{ with .Get "title" }}
    <div class="card-title">{{ . }}</div>
  {{ end }}
  <div class="card-content">
    {{ .Inner | strings.TrimSpace }}
  </div>
</div>

渲染结果为:

<div class="card">
  <div class="card-title">Product Design</div>
  <div class="card-content">
    We design the **best** widgets in the world.
  </div>
</div>

使用 RenderString

让我们修改上面的示例,把 Inner 返回的值传给 Page 对象上的 RenderString 方法:

layouts/_shortcodes/card.html
<div class="card">
  {{ with .Get "title" }}
    <div class="card-title">{{ . }}</div>
  {{ end }}
  <div class="card-content">
    {{ .Inner | strings.TrimSpace | .Page.RenderString }}
  </div>
</div>

Hugo 渲染结果为:

<div class="card">
  <div class="card-title">Product design</div>
  <div class="card-content">
    We produce the <strong>best</strong> widgets in the world.
  </div>
</div>

你也可以用 markdownify 函数代替 RenderString 方法,但后者的灵活性更好。详见说明。

另一种记法

除了用 {{< >}} 记法调用短代码,还可以使用 {{% %}} 记法:

content/services.md
{{% card title="Product Design" %}}
We design the **best** widgets in the world.
{{% /card %}}

使用 {{% %}} 记法时,Hugo 会把整个短代码当作 Markdown 渲染,因此需要做如下修改。

首先,配置渲染器,允许在 Markdown 中使用原始 HTML:

[markup.goldmark.renderer]
unsafe = true

如果内容是_你_自己控制的,这个配置并不危险。更多内容请阅读 Hugo 的安全模型。

其次,由于我们把整个短代码当作 Markdown 渲染,就必须遵守 CommonMark 规范中关于缩进和原始 HTML 块的规则。

layouts/_shortcodes/card.html
<div class="card">
  {{ with .Get "title" }}
  <div class="card-title">{{ . }}</div>
  {{ end }}
  <div class="card-content">

  {{ .Inner | strings.TrimSpace }}
  </div>
</div>

它与前面示例的差别很细微,但却是必需的。注意缩进的变化、空行的增加,以及 RenderString 方法的移除。

--- layouts/_shortcodes/a.html
+++ layouts/_shortcodes/b.html
@@ -1,8 +1,9 @@
 <div class="card">
   {{ with .Get "title" }}
-    <div class="card-title">{{ . }}</div>
+  <div class="card-title">{{ . }}</div>
   {{ end }}
   <div class="card-content">
-    {{ .Inner | strings.TrimSpace | .Page.RenderString }}
+
+  {{ .Inner | strings.TrimSpace }}
   </div>
 </div>