Content view templates

以下是內容視圖的常見使用情境：

• 您希望每種內容類型都顯示在首頁，但只顯示有限的 [摘要視圖][summaries]。
• 您只希望在 分類範本 中顯示內容的項目符號列表。視圖使這變得非常簡單，通過將每種不同類型的內容渲染委派給內容本身。

建立內容視圖

要建立新的視圖，請在不同內容類型目錄中為視圖名稱創建範本。以下範例包含 posts 和 project 內容類型的 “li” 視圖和 “summary” 視圖。如您所見，這些範本位於 單一範本 single.html 旁邊。您甚至可以為某個特定類型提供一個視圖，並繼續使用 _default/single.html 作為主要視圖。

  ▾ layouts/
    ▾ posts/
        li.html
        single.html
        summary.html
    ▾ project/
        li.html
        single.html
      summary.html

哪個範本會被渲染？

以下是按特定順序排列的內容視圖查找順序：

1. /layouts/<TYPE>/<VIEW>.html
2. /layouts/<SECTION>/<VIEW>.html
3. /layouts/_default/<VIEW>.html
4. /themes/<THEME>/layouts/<TYPE>/<VIEW>.html
5. /themes/<THEME>/layouts/<SECTION>/<VIEW>.html
6. /themes/<THEME>/layouts/_default/<VIEW>.html

範例：在列表中顯示內容視圖

list.html

在此範例中，.Render 被傳遞到範本中以呼叫 渲染函數。.Render 是一個特殊的函數，指示內容使用提供的視圖範本作為第一個參數來渲染自己。在這個範例中，範本將渲染 summary.html 視圖，如下所示：

<main id="main">
  <div>
    <h1 id="title">{{ .Title }}</h1>
    {{ range .Pages }}
      {{ .Render "summary" }}
    {{ end }}
  </div>
</main>

summary.html

Hugo 將 Page 物件傳遞給以下的 summary.html 視圖範本。

<article class="post">
  <header>
    <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
    <div class="post-meta">{{ .Date.Format "Mon, Jan 2, 2006" }} - {{ .FuzzyWordCount }} 字 </div>
  </header>
  {{ .Summary }}
  <footer>
  <a href='{{ .RelPermalink }}'>閱讀更多&nbsp;&raquo;</a>
  </footer>
</article>

li.html

繼續前面的範例，我們可以將渲染函數更改為使用更小的 li.html 視圖，方法是更改對 .Render 函數的呼叫參數（即 {{ .Render "li" }}）。

<li>
  <a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
  <div class="meta">{{ .Date.Format "Mon, Jan 2, 2006" }}</div>
</li>