January 18, 2025

标签归类文章终于起作用了

自从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 }}) &nbsp;</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时,页面就会是这样了:

image-20250119110121155

这样,就会显示和hugo相应的博客文章。

2.后续总结

之所以写这篇博文,是因为我折腾Frequent Tags这个博客标签很久了,这要么不显示,要么Frequent Tags就显示错误,总是链接到博客首页,一直失败。不过好在添加了[taxonomies]tag.html文章总算是能够正确显示了,解决了博客一大bug。

本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。

© 阿波尔的博客2019-2025