这些可选的内容视图在list templates中特别有用.

下面是一些内容视图的常见用例:

  • 在首页显示所有类型的内容,但是仅仅显示受限的summary views
  • 在taxonomy list page中显示内容符号列表. 这里使用视图直截了当, 每个内容类型的呈现工作由内容本身代理完成.

创建视图

为创建视图，在每个不同的内容类型目录中创建一个以视图为名的模板。下面的例子中 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中的视图

下面例子展示了如何在list templates中使用视图.

list.html

本例中的模板中使用了 .Render 来调用render function. .Render是一个特殊函数, 指示内容使用函数第一个参数提供的视图模板来显示自己. 此处, 模板会呈现如下的内容的summary.html:

layouts/_default/list.html
1
2
3
4
5
6
7
8
9


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

summary.html

Hugo会传递整个page对象给下面的 summary.html视图模板(参考Page Variables中全部变量列表)

layouts/_default/summary.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


<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
5


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