You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在Hugo SSG中使用数字而非日期对文章进行排序?

在Hugo中使用层级数字编号替代日期排序构建大纲结构

完全可以实现,核心是通过自定义Front Matter字段+修改模板排序逻辑完成,具体步骤如下:

  • 第一步:给文章添加自定义排序字段
    在每篇文章的Front Matter里新增一个字段(比如outline_order),填入你需要的层级编号,示例:
---
title: "基础入门指南"
outline_order: 1.0
---
---
title: "核心模块解析"
outline_order: 1.1
---
---
title: "模块子功能细节"
outline_order: 1.11
---
  • 第二步:修改列表模板的排序逻辑
    找到你的列表模板文件(通常是layouts/_default/list.html),把默认按日期排序的查询替换为按自定义字段升序排列。示例代码:
{{ range sort site.RegularPages "Params.outline_order" "asc" }}
  <div class="article-item">
    <h2>{{ .Params.outline_order }} {{ .Title }}</h2>
    <p>{{ .Summary }}</p>
  </div>
{{ end }}

这里sort函数指定按Params.outline_order升序排列,完全替代Hugo默认的日期降序规则。

  • 可选:优化大纲层级显示
    如果需要更直观的大纲结构(比如不同层级的文章缩进显示),可以通过字符串处理提取编号的层级深度,添加样式缩进:
{{ range sort site.RegularPages "Params.outline_order" "asc" }}
  {{ $orderStr := string .Params.outline_order }}
  {{ $level := len (split $orderStr ".") }}
  <div class="article-item" style="padding-left: {{ mul (sub $level 1) 24 }}px;">
    <h2>{{ $orderStr }} {{ .Title }}</h2>
    <p>{{ .Summary }}</p>
  </div>
{{ end }}

这样1.0层级的文章无缩进,1.1层级缩进24px,1.11层级缩进48px,完美模拟大纲结构。

注意事项:确保所有需要参与排序的文章都添加了outline_order字段,未添加的文章会被默认排在最后(也可以通过模板设置默认值调整位置)。

内容的提问来源于stack exchange,提问作者mccinthenyc

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.17 02:01:11