內部去縮排

Inner 方法類似,InnerDeindent 會回傳開啟和關閉短碼標籤之間的內容。不過,使用 InnerDeindent 時,內容前的縮排會被移除。

這讓我們可以有效繞過 CommonMark 規範中關於 縮排 的規定。

請參見此 Markdown,它是一個無序列表,每個列表項目內有一個小型縮圖畫廊:

content/about.md
- Gallery one

    {{< gallery >}}
    ![kitten a](thumbnails/a.jpg)
    ![kitten b](thumbnails/b.jpg)
    {{< /gallery >}}

- Gallery two

    {{< gallery >}}
    ![kitten c](thumbnails/c.jpg)
    ![kitten d](thumbnails/d.jpg)
    {{< /gallery >}}

在上述範例中,請注意開啟和關閉短碼標籤之間的內容被縮排了四個空格。根據 CommonMark 規範,這會被視為一個縮排的程式碼區塊。

若使用此短碼,呼叫 Inner 而不是 InnerDeindent

layouts/shortcodes/gallery.html
<div class="gallery">
  {{ .Inner | strings.TrimSpace | .Page.RenderString }}
</div>

Hugo 渲染後會產生:

<ul>
  <li>
    <p>Gallery one</p>
    <div class="gallery">
      <pre><code>![kitten a](images/a.jpg)
      ![kitten b](images/b.jpg)
      </code></pre>
    </div>
  </li>
  <li>
    <p>Gallery two</p>
    <div class="gallery">
      <pre><code>![kitten c](images/c.jpg)
      ![kitten d](images/d.jpg)
      </code></pre>
    </div>
  </li>
</ul>

雖然這在技術上符合 CommonMark 規範,但這不是我們想要的結果。如果我們使用 InnerDeindent 方法移除縮排:

layouts/shortcodes/gallery.html
<div class="gallery">
  {{ .InnerDeindent | strings.TrimSpace | .Page.RenderString }}
</div>

Hugo 渲染後會產生:

<ul>
  <li>
    <p>Gallery one</p>
    <div class="gallery">
      <img src="images/a.jpg" alt="kitten a">
      <img src="images/b.jpg" alt="kitten b">
    </div>
  </li>
  <li>
    <p>Gallery two</p>
    <div class="gallery">
      <img src="images/c.jpg" alt="kitten c">
      <img src="images/d.jpg" alt="kitten d">
    </div>
  </li>
</ul>