内容视图模板

Content View Templates - 内容视图模板

https://gohugo.io/templates/views/

​ Hugo可以渲染内容的替代视图，这在列表和摘要视图中特别有用。

​ 这些替代的内容视图在列表模板中特别有用。

​ 以下是内容视图的常见用例：

• 您希望在主页上显示每种类型的内容，但仅以有限的摘要视图显示。
• 您只想在分类列表页面上显示您的内容的项目列表。视图通过将每种不同类型的内容的渲染委托给内容本身来使此过程变得非常简单。

创建内容视图

​ 要创建新视图，请在每个不同的内容类型目录中创建具有视图名称的模板。以下示例包含用于posts和project内容类型的"li"视图和"summary"视图。正如您所看到的，这些视图与单个内容视图模板single.html并排。您甚至可以为给定类型提供特定的视图，并继续使用_default/single.html作为主视图。

1
2
3
4
5
6
7
8
9

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

​ Hugo还支持使用默认内容模板，以在没有为该类型提供特定内容视图模板的情况下使用。内容视图也可以在_default目录中定义，并且将像列表和单个模板一样工作，最终作为查找顺序的一部分向下传递到_default目录中。

1
2
3
4
5

▾ layouts/
  ▾ _default/
      li.html
      single.html
      summary.html

哪个模板将被渲染？

​ 以下是内容视图的查找顺序：

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

示例：列表中的内容视图

​ 以下示例演示了如何在列表模板中使用内容视图。

list.html

​ 在此示例中，将.Render被传递到模板中以调用render函数。 .Render是一种特殊的函数，它指示内容使用第一个参数提供的视图模板渲染自身。在本例中，该模板将渲染以下summary.html视图：

layouts/_default/list.html

1
2
3
4
5
6
7
8

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

summary.html

​ Hugo将整个页面对象传递给以下summary.html视图模板。（有关完整列表，请参见页面变量。）

layouts/_default/summary.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<article class="post">
  <header>
    <h2><a href='{{ .Permalink }}'> {{ .Title }}</a> </h2>
    <div class="post-meta">{{ .Date.Format "Mon, Jan 2, 2006" }} - {{ .FuzzyWordCount }} Words </div>
  </header>
  {{ .Summary }}
  <footer>
  <a href='{{ .Permalink }}'><nobr>Read more →</nobr></a>
  </footer>
</article>

li.html

​ 继续上一个示例，我们可以通过更改调用 .Render 函数中的参数来使用较小的 li.html 视图（即 {{ .Render "li" }}）。

layouts/_default/li.html

1
2
3
4

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

另请参阅

• .Render