为Hugo的文章页创建模板

2015-10-20

single 是最主要的视图，Hugo会为每个Markdown文件提供一个single模板来渲染。

会用哪个模板来渲染呢？

Hugo 用一系列的规则来推测应该用哪个模板类渲染一个页面。

Hugo 选择模板的优先级如下表。如果一个文件不存在，那么下一个会被使用。这使得你可以为更多的页面设计模板。但多数情况下,列表最后的_default 文件就够啦。

用户可以在front-matter部分定义type 和layout指定用哪个模板渲染。Section是由md文件所在的位置来确定的。当然，如果你指定了type，那么还是以type为准。

Single

/layouts/TYPE-or-SECTION/LAYOUT.html
/layouts/TYPE-or-SECTION/single.html
/layouts/_default/single.html
/themes/THEME/layouts/TYPE-or-SECTION/LAYOUT.html
/themes/THEME/layouts/TYPE-or-SECTION/single.html
/themes/THEME/layouts/_default/single.html

模板示例

md页面是’page’类型的，在他的模板中可以使用所有page variables和site variable。

下面我们将造着默认的模板，创建两个不同的类型的模板。

默认模板会在没有指定type是使用，他的工作原理和其他模板是一样的，但是他必须在"_default"目录下。

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

post/single.html

这个模板是spf13.com在使用的模板。他用到了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(也就是模板引用)

{{ 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中使用了只对这个模板起作用的附加参数。他不需要提前定义，如果这个参数在fornt-matter中定义了的话就能在模板中使用他。

当然，你可以用content archetypes来快速生成这类模板对应的主题。