theme(fix): rework of the way the main sections for index.html are calculated

Patrick Kollitsch

09.52.2025 40fea59c8b5474ccc60750bed159032b2a55ca28

theme(fix): rework of the way the main sections for index.html are calculated

the following is a draft for the release page that should explain most of it:

* Index page: the way main sections were evaluated was unclear and probably changed much from the original design in GoHugo. This has been fixed and the main sections are now evaluated in a more consistent way. This might affect what is shown on your website, so open a discussion if you see something wrong and try to explain exactly what you expected to see in sense of included posts and order of those posts.

  The old way did this: check all configured main sections (or post, if nothing is set) > range through the section and display the first n+m posts (n = number of full previews, m = number of title previews only).

  The new way does this: load all posts in the main sections > range through the collection and display the first n+m posts (n = number of full previews, m = number of title previews only).

  Basically, the old way took every single section you configured and displayed them separate, the new way takes all posts from all sections and displays them in one list. This is more consistent and should be more predictable for you as a user. It's also the way it was intended to work from the beginning according to the documentation.

closes #686

Signed-off-by: Patrick Kollitsch <patrick@davids-neighbour.com>

 exampleSite/config.toml

@@ -7,6 +7,7 @@
sectionPagesMenu = "main"
enableRobotsTXT = true


[services.googleAnalytics]
id = ''

@@ -32,6 +33,7 @@
filename = "sitemap.xml"

[params]
mainSections = ["post"]
text_color = ""
author = "Victor Hugo" # default author, override via `author` in a posts front matter
favicon = ""

 layouts/index.html

@@ -1,39 +1,28 @@
{{ define "main" }}
  <article class="cf ph3 ph5-l pv3 pv4-l f4 tc-l center measure-wide lh-copy {{ $.Param "text_color" | default "mid-gray" }}">
      {{ .Content }}
    </article>
    {{/* Define a section to pull recent posts from. For Hugo 0.20 this will default to the section with the most number of pages. */}}
    {{ $mainSections := .Site.Params.mainSections | default (slice "post") }}
    {{ $show_recent_posts := site.Params.ananke.show_recent_posts }}
    
    {{/* Check to see if the section is defined for ranging through it */}}
    {{range ($mainSections)}}
    {{/* Derive the section name  */}}
    {{ $section_name := . }}
    {{/* Create a variable with that section to use in multiple places. */}}
    {{ $section := where $.Site.RegularPages "Section" "in" $section_name }}
    {{ $section_count := len $section }}
    {{ if and ($show_recent_posts) (ge $section_count 1) }}
      <div class="pa3 pa4-ns w-100 w-70-ns center">
        {{/* Use $section_name to get the section title. Use "with" to only show it if it exists */}}
        {{ with $.Site.GetPage "section" $section_name }}
            <h1 class="flex-none">
              {{ $.Param "recent_copy" | default (i18n "recentTitle" .) }}
            </h1>
          {{ end }}
    {{ .Content }}
  </article>

        {{ $n_posts := $.Param "recent_posts_number" | default 3 }}
  {{/* Define a section to pull recent posts from. For Hugo 0.20 this will default to the section with the most number of pages. */}}
  {{ $mainSections := site.Params.mainSections | default (slice "post") }}
  {{ $show_recent_posts := site.Params.ananke.show_recent_posts }}
  {{ $section := where $.Site.RegularPages "Section" "in" $mainSections }}
  {{ $section_count := len $section }}

        <section class="w-100 mw8">
          {{/* Range through the first $n_posts items of the section */}}
          {{ range (first $n_posts $section) }}
            <div class="relative w-100 mb4">
              {{ .Render "summary-with-image" }}
            </div>
          {{ end }}
        </section>
  {{ if and ($show_recent_posts) (ge $section_count 1) }}
    <div class="pa3 pa4-ns w-100 w-70-ns center">
      {{ $n_posts := $.Param "recent_posts_number" | default 3 }}

        {{ if ge $section_count (add $n_posts 1) }}
      <section class="w-100 mw8">
        {{/* Range through the first $n_posts items of the section */}}
        {{ range (first $n_posts $section) }}
          <div class="relative w-100 mb4">
            {{ .Render "summary-with-image" }}
          </div>
        {{ end }}
      </section>

      {{ if ge $section_count (add $n_posts 1) }}
        <section class="w-100">
          <h1 class="f3">{{ i18n "more" }}</h1>
          {{/* Now, range through the next four after the initial $n_posts items. Nest the requirements, "after" then "first" on the outside */}}
@@ -44,16 +33,10 @@
              </a>
            </h2>
          {{ end }}
        </section>
      {{ end }}

          {{/* As above, Use $section_name to get the section title, and URL. Use "with" to only show it if it exists */}}
          {{ with $.Site.GetPage "section" $section_name }}
            <a href="{{ .RelPermalink }}" class="link db f6 pa2 br3 bg-mid-gray white dim w4 tc">{{ i18n "allTitle" . }}</a>
          {{ end }}
          </section>
        {{ end }}

        </div>
    {{ end }}
    </div>
  {{ end }}
{{end}}
    
{{ end }}