hugo博客增加tags分类

2023年12月7日 · 676 字 · 2 分钟 · Hugo

hugo博客增加tags分类

config中配置分类

需要在 config.toml 中增加分类。则需要增加如下内容(例子)：

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

在每个post博文的头部也相应增加对应的分类，例如这篇的头部就相应为：

date: "2018-01-09T16:22:25+08:00"
draft: false
title: "hugo博客增加tags分类"
tags: ["hugo"]
series: ["Blog养成记"]
categories: ["编程"]

当然实际上，Hugo默认会产生 tags 和 categories 的分类，如果只需要这两个，可以不用在 config.toml 中声明就在post头部使用。

分类集合查看

使用分类taxonomy之后，Hugo会使用分类的模板 (taxonomy templates) 来自动生成一个显示所有分类的term术语的网页以及一个显示该术语的所有value内容列表网页。

以tag为例：

example.com/tags/ 会列出tags中的所有术语；

example.com/tags/docker 会列出tags标为docker的所有网页列表。

显示分类

在显示文章的元信息块 (

) 中，在阅读时间下面 ({{ if not .Site.Params.noshowreadtime }}...{{ end }})， 增加显示tags、topics和categories的代码：

{{ with .Params.tags }}
<ul id="tags">
  {{ range . }}
    <li> <a href="{{ "tags" | absURL }}/{{ . | urlize }}">{{ . }}</a> </li>
  {{ end }}
</ul>
{{ end }}

{{ with .Params.topics }}
<ul id="topics">
  {{ range . }}
    <li> <a href="{{ "topics" | absURL }}/{{ . | urlize }}">{{ . }}</a> </li>
  {{ end }}
</ul>
{{ end }}

{{ with .Params.categories }}
<ul id="categories">
  {{ range . }}
    <li><a href="{{ "categories" | absURL}}/{{ . | urlize }}">{{ . }}</a> </li>
  {{ end }}
</ul>
{{ end }}

修改tag标签样式，增加page-tag CSS类

上面我们虽然把tag显示出来了，但是显示样式需要通过css定义。 在 static/css 文件夹中的 override.css中增加 page-tag的css类：

.page-tag {
font-size: 14px;
font-family: 'Raleway', 'Helvetica Neue', 'Arial', sans-serif;
letter-spacing: -0.005rem;
font-weight: 400;
color: #666 !important;
font-style: normal;
margin-right: 5px;
margin-left: 0px;
display: flex;
}

将每一个显示分类的代码都放入一个div块，并使用page-tag作为css类。

参考资料