分页列表和标签云

Wed, 10 Sep 2025 22:39:53 +0800

1. 创建分类列表页模板

首先创建 layouts/categories/terms.html 文件，这个模板将专门用于渲染分类列表页面 (/categories/):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32


{{ define "main" }}
<div class="categories-page">
 <header class="page-header">
 <h1 class="page-title">所有分类</h1>
 <p class="page-description">本站点共有 {{ len .Data.Terms }} 个分类</p>
 </header>

 <div class="categories-cloud">
 {{ $categories := .Data.Terms }}
 {{ if $categories }}
 {{ $max := len (index $categories.ByCount 0).Pages }}
 {{ $min := len (index $categories.ByCount.Reverse 0).Pages }}

 {{ range $name, $taxonomy := $categories }}
 {{ $count := len $taxonomy.Pages }}
 <!-- 计算权重和字体大小，可以根据需要调整公式 -->
 {{ $weight := div (sub (math.Log $count) (math.Log $min)) (sub (math.Log $max) (math.Log $min)) }}
 {{ $fontSize := add 0.8 (mul $weight 2.5) }}

 <a href="{{ .Page.Permalink }}"
 class="category-cloud-item"
 style="font-size: {{ $fontSize }}em;"
 title="{{ $count }} 篇文章">
 {{ .Page.Title }} <sup>{{ $count }}</sup>
 </a>
 {{ end }}
 {{ else }}
 <p class="no-content">暂无分类</p>
 {{ end }}
 </div>
</div>
{{ end }}

2. 创建标签云页面模板

接下来创建 layouts/tags/terms.html 文件，这个模板将专门用于渲染标签云页面 (/tags/):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


{{ define "main" }}
<div class="tags-page">
 <header class="page-header">
 <h1 class="page-title">标签云</h1>
 <p class="page-description">本站点共有 {{ len .Data.Terms }} 个标签</p>
 </header>

 <div class="tag-cloud-container">
 {{ $tags := .Data.Terms }}
 {{ if $tags }}
 {{ $max := len (index $tags.ByCount 0).Pages }}
 {{ $min := len (index $tags.ByCount.Reverse 0).Pages }}

 {{ range $name, $taxonomy := $tags }}
 {{ $count := len $taxonomy.Pages }}
 {{ $weight := div (sub (math.Log $count) (math.Log $min)) (sub (math.Log $max) (math.Log $min)) }}
 {{ $fontSize := add 0.8 (mul $weight 2.5) }}

 <a href="{{ "/tags/" | relLangURL }}{{ $name | urlize }}"
 class="tag-cloud-item"
 style="font-size: {{ $fontSize }}em;"
 title="{{ $count }} 篇文章">
 {{ $name }} <sup>{{ $count }}</sup>
 </a>
 {{ end }}
 {{ else }}
 <p class="no-content">暂无标签</p>
 {{ end }}
 </div>
</div>
{{ end }}

3. 添加样式

为了使这两个页面看起来更美观，你需要在自定义 CSS 文件中添加以下样式。可以在 assets/css/custom.css 中添加：

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146


/* 分类云样式 */
.categories-cloud {
 text-align: center;
 line-height: 2.5;
 margin: 2rem 0;
}

.category-cloud-item {
 display: inline-block;
 margin: 0.5rem;
 padding: 0.6rem 1.2rem;
 background-color: #f8f9fa;
 border: 1px solid #e9ecef;
 border-radius: 9999px;
 text-decoration: none;
 color: #495057;
 transition: all 0.3s ease;
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.category-cloud-item:hover {
 background-color: #3b82f6;
 color: white;
 transform: translateY(-2px);
 box-shadow: 0 6px 12px rgba(59, 130, 246, 0.3);
 border-color: #3b82f6;
}

/* 响应式设计 */
@media (max-width: 768px) {
 .categories-cloud {
 line-height: 2;
 }

 .category-cloud-item {
 margin: 0.3rem;
 padding: 0.5rem 1rem;
 font-size: 0.9em !important; /* 移动端适当减小字体 */
 }
}


/* 分类列表页样式 */
.categories-page .page-header {
 text-align: center;
 margin-bottom: 2rem;
}

.categories-page .page-title {
 font-size: 2.5rem;
 margin-bottom: 0.5rem;
}

.categories-page .page-description {
 color: #6b7280;
 font-size: 1.1rem;
}

.categories-list {
 list-style: none;
 padding: 0;
 max-width: 700px;
 margin: 0 auto;
}

.category-item {
 margin-bottom: 1rem;
 border-bottom: 1px solid #e5e7eb;
 padding-bottom: 1rem;
}

.category-link {
 display: flex;
 justify-content: space-between;
 align-items: center;
 text-decoration: none;
 color: #374151;
 padding: 0.75rem 1rem;
 border-radius: 8px;
 transition: all 0.3s ease;
}

.category-link:hover {
 background-color: #f3f4f6;
 transform: translateX(5px);
}

.category-name {
 font-size: 1.2rem;
 font-weight: 500;
}

.category-count {
 background-color: #3b82f6;
 color: white;
 padding: 0.25rem 0.75rem;
 border-radius: 9999px;
 font-size: 0.875rem;
}

/* 标签云页面样式 */
.tags-page .page-header {
 text-align: center;
 margin-bottom: 2rem;
}

.tags-page .page-title {
 font-size: 2.5rem;
 margin-bottom: 0.5rem;
}

.tags-page .page-description {
 color: #6b7280;
 font-size: 1.1rem;
}

.tag-cloud-container {
 text-align: center;
 line-height: 2.5;
 margin: 2rem 0;
}

.tag-cloud-item {
 margin: 0.5rem;
 padding: 0.5rem 1rem;
 display: inline-block;
 border-radius: 8px;
 background-color: #f3f4f6;
 color: #4b5563;
 text-decoration: none;
 transition: all 0.3s ease;
 border: 1px solid #e5e7eb;
}

.tag-cloud-item:hover {
 background-color: #e5e7eb;
 transform: translateY(-2px);
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.no-content {
 text-align: center;
 color: #6b7280;
 font-style: italic;
 margin: 2rem 0;
}

4. 配置菜单项

确保你的菜单配置正确指向这些页面：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


menu:
 main:
 - identifier: categories
 name: 分类
 url: /categories/
 weight: 2
 params:
 icon: folder
 - identifier: tags
 name: 标签
 url: /tags/
 weight: 3
 params:
 icon: tag

5. 验证和测试

完成以上步骤后：

运行 hugo server 启动本地服务器
访问 http://localhost:1313/categories/ 查看分类列表页
访问 http://localhost:1313/tags/ 查看标签云页面
检查导航菜单中的链接是否正确工作

注意事项

模板优先级：Hugo 会优先使用这些专用模板（layouts/categories/terms.html 和 layouts/tags/terms.html），而不是通用的 layouts/_default/terms.html。
分类法配置：确保你的配置文件中正确定义了分类法：
1 2 3

taxonomies: category: categories tag: tags
内容文件：如果你的 content 目录下有 categories.md 或 tags.md，它们可能会覆盖这些自动生成的页面。如果遇到问题，可以考虑删除或重命名这些内容文件。
样式调整：你可以根据自己网站的主题风格，调整 CSS 中的颜色、间距、字体大小等属性。