自从About的Frequent Tags一直不怎么起作用,一直准确显示不了tags的博客文章,为此折腾了很长时间。以前标签链接总是定位到博客首页,现在总算是能够根据标签词搜索到相应文章。
1.开始准备
1.1在config 配置TAGS的URL逻辑映射
config.toml 配置的问题,在 config.toml 中,[taxonomies] 是用来定义逻辑名称到 URL 路径的映射:
[taxonomies]
tag = "tags"
给定 tag = "tags" 后,Hugo 会在生成的网站中以 /tags/标签名/ 的形式来访问这些标签的文章。
1.2创建一个 layouts/taxonomy/tag.html 文件模板
在layouts/taxonomy/tag.html中添加一个自定义tag.html模板,具体是:
<div class="container">
<h1>{{ .Title }}</h1>
<ul>
{{ range .Pages }}
<li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
{{ end }}
</ul>
</div>
在layouts/section/about.html中,Frequent Tags总是跳到首页的问题解决,具体代码是:
<div class="container">
<h2 class="subtitle is-size-4-mobile is-size-3-desktop">{{ .Title }}</h1>
<div class="content">
{{ .Content }}
</div>
<h2 class="subtitle is-size-5-mobile is-size-4-desktop">Frequent Tags</h2>
{{ range .Site.Taxonomies.tags.ByCount }}
<a href="/tags/{{ .Name | urlize }}"> {{ .Name }} ({{ .Count }}) </a>
{{end}}
</div>
当然,为了tag.html美观化,可以通过添加类似{{ partial "template" . }}的模板,来美化单调的tag.html页面,我具体是引入{{ partial "header" . }}和{{ partial "nav" . }}来让页面适配博客主题页,然后tag.html就成了这样:
{{ partial "header" . }}
{{ partial "nav" . }}
<div class="container">
<h1>{{ .Title }}</h1>
<ul>
{{ range .Pages }}
<li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
{{ end }}
</ul>
</div>
当点击Frequent Tags的标签词时,例如hugo tags时,页面就会是这样了:
这样,就会显示和hugo相应的博客文章。
2.后续总结
之所以写这篇博文,是因为我折腾Frequent Tags这个博客标签很久了,这要么不显示,要么Frequent Tags就显示错误,总是链接到博客首页,一直失败。不过好在添加了[taxonomies]和tag.html文章总算是能够正确显示了,解决了博客一大bug。