为Hugo的文章页创建模板
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
来快速生成这类模板对应的主题。