如何配置.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
相关产品推荐
相关产品推荐

