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

如何配置.toml文件在Hugo首页展示博客文章列表

Hugo Mediumish主题首页替换为全量博客列表操作步骤

Mediumish主题默认读取config.toml的静态配置渲染首页,要替换为博客列表,按照以下步骤操作即可,全程不需要修改主题原文件,不会影响后续主题更新:

  • 新建覆盖用的首页模板:在你站点根目录的layouts文件夹下,新建名为index.html的文件,Hugo会优先加载这个自定义模板,自动覆盖主题自带的默认首页模板。
  • 写入列表渲染代码:将下面的代码粘贴到刚创建的layouts/index.html文件中,代码会自动拉取所有正式发布的博客内容,沿用主题原生的卡片样式和分页组件渲染:
{{ define "main" }}
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            {{/* 读取post目录下的所有正式文章,生成分页 */}}
            {{ $paginator := .Paginate (where .Site.RegularPages "Section" "post") }}
            {{/* 遍历渲染每篇文章的卡片 */}}
            {{ range $paginator.Pages }}
                {{ partial "post-card.html" . }}
            {{ end }}
            {{/* 加载分页组件 */}}
            {{ partial "pagination.html" . }}
        </div>
    </div>
</div>
{{ end }}
  • 配置适配:如果你的博客文件不是存放在content/post目录下,把代码里"post"替换为你实际存放博客的目录名即可;如果不需要保留首页原来的默认欢迎文本,可以把config.toml中[params.intro]相关的配置块注释掉。
  • 验证效果:在项目根目录执行hugo server启动本地预览服务,访问本地地址即可看到首页已经展示全量博客列表,设置为草稿、发布时间晚于当前时间的文章不会出现在列表中,确认效果正常后重新构建部署即可。

注意:如果操作后列表为空,检查你的博客文章头部配置中是否设置了draft: true,以及date字段是否为已过去的时间。

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

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.08.27 00:15:38