內部

這段內容：

content/services.md
{{< card title="Product Design" >}}
我們設計世界上**最棒**的小工具。
{{< /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">
    我們設計世界上**最棒**的小工具。
  </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">
    我們生產世界上最棒的小工具。
  </div>
</div>

你可以使用 markdownify 函式來替代 RenderString 方法，但後者更具彈性。請參閱詳細資訊。

替代標註法

不使用 {{< >}} 標註來呼叫短碼，而是使用 {{% %}} 標註：

content/services.md
{{% card title="Product Design" %}}
我們設計世界上**最棒**的小工具。
{{% /card %}}

當使用 {{% %}} 標註時，Hugo 會將整個短碼渲染為 Markdown，需要進行以下更動。

首先，配置渲染器以允許在 Markdown 中使用原始 HTML：

hugo.
      
markup:
  goldmark:
    renderer:
      unsafe: true

[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true

{
   "markup": {
      "goldmark": {
         "renderer": {
            "unsafe": true
         }
      }
   }
}

如果是 你 控制的內容，這個配置並不危險。閱讀更多關於 Hugo 安全模型的資料。

接著，因為我們正在將整個短碼渲染為 Markdown，我們必須遵守 縮排 和 原始 HTML 區塊 的規範，這些規範由 CommonMark 規範提供。

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>
內部去縮排 YearDay