HUGO
Menu
GitHub 87548 stars Mastodon

Inner

返回 shortcode 開始和結束標簽之間的內容,適用於 shortcode 調用包含結束標簽的情況。

Syntax

SHORTCODE.Inner

Returns

template.HTML

此內容:

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

使用此 shortcode:

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>

shortcode 開始和結束標簽之間的內容可能包含前導和/或尾隨換行符,具體取決於 Markdown 中的位置。使用 strings.TrimSpace 函數如上所示來刪除回車符和換行符。

在上面的示例中,Inner 返回的值是 Markdown,但它被渲染為純文本。使用以下任一方法將 Markdown 渲染為 HTML。

使用 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 方法,但後者更靈活。請參閱 詳情

替代表示法

調用 shortcode 時不使用 {{< >}} 表示法,而使用 {{% %}} 表示法:

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

當您使用 {{% %}} 表示法時,Hugo 將整個 shortcode 渲染為 Markdown,需要進行以下更改。

首先,配置渲染器以允許 Markdown 中的原始 HTML:

markup:
  goldmark:
    renderer:
      unsafe: true
[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true
{
   "markup": {
      "goldmark": {
         "renderer": {
            "unsafe": true
         }
      }
   }
}

如果_您_控制內容,此配置不是不安全的。閱讀更多關於 Hugo 的 安全模型

其次,因為我們將整個 shortcode 渲染為 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>

使用 Markdown 表示法 調用 shortcode 時,不要使用 RenderStringmarkdownify 處理 Inner 值。


Last updated: January 1, 0001
Improve this page