标签系统
幻梦主题的标签页面采用响应式网格布局,文章卡片以 4×4 排列(最多每行 4 篇),每页显示 16 篇文章。
网格布局
.term-posts-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--sp-6);
}
@media (min-width: 992px) {
.term-posts-grid {
grid-template-columns: repeat(4, 1fr);
}
}
标签云
标签云页面将所有标签以标签云形式展示,每个标签带有数量标识:
<a href="/tags/css" class="cloud-tag" data-weight="3">
CSS <span class="tag-count">(3)</span>
</a>
分页系统
当文章超过 16 篇时自动启用分页,提供上一页/下一页和页码导航:
.pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-top: 3rem;
}
.page-link.current {
background: var(--grad-primary);
color: white;
}
标签页面让浏览特定主题的文章变得轻松而高效。