Hugo中定制Taxonomy页面

Taxonomy,即分类,是Hugo中一个很有用的页面管理功能。 本文基于Hyde这个Theme,介绍如何在Hugo中定制、使用Taxonomy。

Hugo中的Taxonomy概念

Hugo includes support for user-defined groupings of content called taxonomies. Taxonomies are classifications of logical relationships between content.

在官方文档中,简单介绍了Taxonomy的相关概念。 这里有三级概念,见下表。

概念 翻译 解释
Taxonomy 分类 用来归类的大类,比如tag
Tern 可以认为是Taxonomy的值,比如hugo
Value 被归类为某个Tern的内容,比如taghugo的页面。
Content 内容 与Value同义。

以下是官方给出的例子,关于演员与电影。

Actor                    <- Taxonomy
    Bruce Willis         <- Term
        The Sixth Sense  <- Content
        Unbreakable      <- Content
        Moonrise Kingdom <- Content
    Samuel L. Jackson    <- Term
        Unbreakable      <- Content
        The Avengers     <- Content
        xXx              <- Content

Taxonomy的设计,最大的优点是,实现了以前需要动态网站的数据库,才能完美体现的分类与关系。 本来孤在评估个人笔记网站时,是倾向于使用动态网站的。 正是因为这个功能,才改为使用静态网站生成器。

默认Taxonomy

默认情况下,Hugo支持两个Taxonomy:tag和category。 如果是电影类网站,Taxonomy可以有导演、演员、编剧等。 但是对于一个个人博客类网站来说,只需要一个tag就够了。

除此之外,Hugo默认还有Section的概念。 所有文章都在content目录下,而Section就是文章所在的content子目录。 Section也是URL上的一部分。

Section与Taxonomy的区别是,一个Single页面只能属于一个Section,而却可以属于多个Taxonomy的不同Tern。 所以,Taxonomy比Section更灵活。

官方的示例配置如下,定义了三个Taxonomy的Tern。

[taxonomies]
  tag = "tags"
  category = "categories"
  series = "series"

这里写几个,就是几个Taxonomy。 如果不写[taxonomies]这一个代码块,就是使用默认的tagcategory两个。

其中,等号前面的tag代表真正的Tern名称,而后面的"tags"则代表使用时的名称。 通常,前面用名词的单数,后面用名词的复数。 在Taxonomy的列表页面中,以tags为URL的一部分; 在Front Matter中,也使用tags = []来指定当前页面所属的tag。

+++
title = "Hugo: A fast and flexible static site generator"
tags = [ "Development", "Go", "fast", "Blogging" ]
categories = [ "Development" ]
series = [ "Go Web Dev" ]
+++

对博客类网站来说,如果每个页面都要写tagscategoriesseries,想想也是很辛苦。 所以本站还是坚持极简的设计,一个tags足以。

Taxonomy的展示页面

Taxonomy有两种展示页面,对应两种模板文件。

在孤使用之初,由于概念不清,被坑很惨。 做了半天,相关页面却纹丝不动。 因此觉得,定制Taxonomy页面,应该在理清概念的基础上,选定正确的模板文件,再开始定制。

Taxonomy List Templates

这是普通的列表页面,URL示例为/tags/hugo/。 由于这是普通的列表页面,所以默认情况下会使用列表模板。

对于本站,这个页面没有定制的必要,和Section一样,使用默认列表模板即可。 而如果有定制需求,则需要按照以下优先级去修改。

  1. /layouts/taxonomy/<SINGULAR>.html
  2. /layouts/_default/taxonomy.html
  3. /layouts/_default/list.html
  4. /themes/<THEME>/layouts/taxonomy/<SINGULAR>.html
  5. /themes/<THEME>/layouts/_default/taxonomy.html
  6. /themes/<THEME>/layouts/_default/list.html

<SINGULAR>是Tern的单数,即上一节等号左边的名词。 比如/tags/hugo/,第1个模板就是/layouts/taxonomy/tag.html。 第2个模板是对所有的Taxonomy列表页面,而第3个就是所有的列表页面。

Taxonomy Terms Template

这是Taxonomy特有的列表页面,URL示例为/tags/。 显然,/tags/hugo/是所有tag为hugo的页面,而/tags/则是需要显示所有tag。 这个页面与普通的列表页面有巨大差异,因为默认是没有任何页面属于这个页面的,所以不使用默认列表模板。

  1. /layouts/taxonomy/<SINGULAR>.terms.html
  2. /layouts/_default/terms.html
  3. /themes/<THEME>/layouts/taxonomy/<SINGULAR>.terms.html
  4. /themes/<THEME>/layouts/_default/terms.html

如果需要展示,就需要按照以上优先级去定制。 如果按/tags/来算,第1个模板是/layouts/taxonomy/tag.terms.html。 由于本站仅仅使用了tag作为Taxonomy,所以就直接定制了第2个页面。

Term模板代码示例

以下即是本站(2017年10月)的/layouts/_default/terms.html模板的部分内容,以供参考。 页面示例,可以访问/tags/。 (当然,鉴于本站经常更新,页面示例可能会有所修改。)

<h1>分类标签有{{ len .Data.Terms }}个</h1>
{{ $data := .Data }}
{{ range .Data.Terms.ByCount }}
{{ $termLink := printf "/%s/%s/" $data.Plural .Term | urlize }}
<h2>
    <a href="{{ $termLink }}">{{ .Term }}</a>
    有{{ .Count }}篇
</h2>
<ul>
    {{ range .Pages | first 5 }}
    <li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
    {{ end }}
    {{ if gt (len .Pages) 5 }}
    <li><a href="{{ $termLink }}">……</a></li>
    {{ end }}
</ul>
{{ end }}

其中用到的函数、变量,需要去相关页面查阅。

参考


相关笔记