InnerDeindent
Syntax
SHORTCODE.InnerDeindent
Returns
template.HTML
与 Inner
方法类似,InnerDeindent
返回在短代码开始和结束标签之间的内容。然而,使用 InnerDeindent
会去除内容前的缩进。
这使我们能够有效地绕过 CommonMark 规范中提供的缩进规则。
考虑下面的 markdown 例子,它是一个无序列表,每个列表项中有一组缩略图图库:
content/about.md
- 图库一
{{< gallery >}}


{{< /gallery >}}
- 图库二
{{< gallery >}}


{{< /gallery >}}
在上面的示例中,注意到短代码开始和结束标签之间的内容缩进了四个空格。根据 CommonMark 规范,这被视为一个缩进的代码块。
使用此短代码时,调用 Inner
而不是 InnerDeindent
:
layouts/shortcodes/gallery.html
<div class="gallery">
{{ trim .Inner "\r\n" | .Page.RenderString }}
</div>
Hugo 将 markdown 渲染为:
<ul>
<li>
<p>图库一</p>
<div class="gallery">
<pre><code>

</code></pre>
</div>
</li>
<li>
<p>图库二</p>
<div class="gallery">
<pre><code>

</code></pre>
</div>
</li>
</ul>
虽然根据 CommonMark 规范来说是正确的,但这并不是我们想要的结果。如果使用 InnerDeindent
方法去除缩进:
layouts/shortcodes/gallery.html
<div class="gallery">
{{ trim .InnerDeindent "\r\n" | .Page.RenderString }}
</div>
Hugo 将 markdown 渲染为:
<ul>
<li>
<p>图库一</p>
<div class="gallery">
<img src="images/a.jpg" alt="小猫 a">
<img src="images/b.jpg" alt="小猫 b">
</div>
</li>
<li>
<p>图库二</p>
<div class="gallery">
<img src="images/c.jpg" alt="小猫 c">
<img src="images/d.jpg" alt="小猫 d">
</div>
</li>
</ul>