Single Content Template

The primary view of content in Hugo is the single view. Hugo, for every Markdown file provided, will render it with a single template.

將顯示哪個模板？ Which Template will be rendered?

Hugo uses a set of rules to figure out which template to use when rendering a specific page.

Hugo will use the following prioritized list. If a file isn’t present, then the next one in the list will be used. This enables you to craft specific layouts when you want to without creating more templates than necessary. For most sites, only the _default file at the end of the list will be needed.

用戶能在 front-matter 指定 type 和 layout。 Section 基於 content file 的位置所確定。 如果 type 有值，其將取代 section。

Users can specify the type and layout in the front-matter. Section is determined based on the content file’s location. If type is provided, it will be used instead of section.

Single Page

• /layouts/TYPE/LAYOUT.html
• /layouts/SECTION/LAYOUT.html
• /layouts/TYPE/single.html
• /layouts/SECTION/single.html
• /layouts/_default/single.html
• /themes/THEME/layouts/TYPE/LAYOUT.html
• /themes/THEME/layouts/SECTION/LAYOUT.html
• /themes/THEME/layouts/TYPE/single.html
• /themes/THEME/layouts/SECTION/single.html
• /themes/THEME/layouts/_default/single.html

Example Single Template File

Content pages are of the type “page” and have all the page variables and site variables available to use in the templates.

在以下的範例中我們創建兩種不同的內容類型以及預設內容類型。

In the following examples we have created two different content types as well as a default content type.

預設內容模板在該類型並沒提供特定模板的情況下被使用。 預設類型與其他類型的運作相同，唯獨其目錄被命名為 “_default”。

The default content template to be used in the event that a specific template has not been provided for that type. The default type works the same as the other types, but the directory must be called “_default”.

▾ layouts/
  ▾ _default/
      single.html
  ▾ post/
      single.html
  ▾ project/
      single.html

post/single.html

這內容模板在 spf13.com 中被使用。 這文件使用了 partial templates 。

This content template is used for spf13.com. It makes use of partial templates

{{ partial "header.html" . }}
{{ partial "subheader.html" . }}
{{ $baseURL := .Site.BaseURL }}

<section id="main">
  <h1 id="title">{{ .Title }}</h1>
  <div>
        <article id="content">
           {{ .Content }}
        </article>
  </div>
</section>

<aside id="meta">
    <div>
    <section>
      <h4 id="date"> {{ .Date.Format "Mon Jan 2, 2006" }} </h4>
      <h5 id="wc"> {{ .FuzzyWordCount }} Words </h5>
    </section>
    <ul id="categories">
      {{ range .Params.topics }}
        <li><a href="{{ $baseURL }}/topics/{{ . | urlize }}">{{ . }}</a> </li>
      {{ end }}
    </ul>
    <ul id="tags">
      {{ range .Params.tags }}
        <li> <a href="{{ $baseURL }}/tags/{{ . | urlize }}">{{ . }}</a> </li>
      {{ end }}
    </ul>
    </div>
    <div>
        {{ if .Prev }}
          <a class="previous" href="{{.Prev.Permalink}}"> {{.Prev.Title}}</a>
        {{ end }}
        {{ if .Next }}
          <a class="next" href="{{.Next.Permalink}}"> {{.Next.Title}}</a>
        {{ end }}
    </div>
</aside>

{{ partial "disqus.html" . }}
{{ partial "footer.html" . }}

project/single.html

這內容模板在 spf13.com 中被使用。 這文件使用了 partial templates 。

This content template is used for spf13.com. It makes use of partial templates

{{ partial "header.html" . }}
{{ partial "subheader.html" . }}
{{ $baseURL := .Site.BaseURL }}

<section id="main">
  <h1 id="title">{{ .Title }}</h1>
  <div>
        <article id="content">
           {{ .Content }}
        </article>
  </div>
</section>

<aside id="meta">
    <div>
    <section>
      <h4 id="date"> {{ .Date.Format "Mon Jan 2, 2006" }} </h4>
      <h5 id="wc"> {{ .FuzzyWordCount }} Words </h5>
    </section>
    <ul id="categories">
      {{ range .Params.topics }}
      <li><a href="{{ $baseURL }}/topics/{{ . | urlize }}">{{ . }}</a> </li>
      {{ end }}
    </ul>
    <ul id="tags">
      {{ range .Params.tags }}
        <li> <a href="{{ $baseURL }}/tags/{{ . | urlize }}">{{ . }}</a> </li>
      {{ end }}
    </ul>
    </div>
</aside>

{{if isset .Params "project_url" }}
<div id="ribbon">
    <a href="{{ index .Params "project_url" }}" rel="me">Fork me on GitHub</a>
</div>
{{ end }}

{{ partial "footer.html" . }}

注意 project/single.html 模板如何使用此模板特有的附加參數。 這不需要提前定義。

Notice how the project/single.html template uses an additional parameter unique to this template. This doesn’t need to be defined ahead of time. If the key is present in the front matter than it can be used in the template. To easily generate new content of this type with these keys ready use content archetypes.