Clarification: nested ranges

support
1

In the following layout list page, each top-level-section ‘list’ should paginate, range, and display a <section> for each sublist page beneath it. Within the <section> for each sublist, there should be a preview of the post_pages. So at the top level you can click and go a sublist page or a post_page. Not complicated.

Here is the structure:

list
--sublist
 ----post_page
 ----post_page
--sublist
 ----post_page
 ----post_page

I tried this, and so far it’s not showing what I want.

{{- if in .Parent "page-above-top-level-list" -}}

{{- $paginator := .Paginate (where .Data.Pages .Kind "section") 20 -}}
{{- .Title -}}
{{- range $paginator.Pages -}}

{{- if .IsSection -}}
<section>
{{- range first 6 .Pages -}}

<div>
{{- partial "preview_processing" . -}}
</div>

{{- end -}}
</section>
{{- end -}}
{{- end -}}
{{- end -}}

This post advises:

You need to build a collection of pages, then instantiate a paginator for the collection.

You are currently building a collection of pages, instantiating a paginator, then building another collection of pages.

https://discourse.gohugo.io/t/pagination-for-nested-sections/27938

Then, in layouts/defaults/list.html


 {{- .Scratch.Set "pageCollection" slice -}}
  {{- partial "foo.html" (dict "ctx" . "ctxGlobal" $) -}}
  {{- range (.Paginate (.Scratch.Get "pageCollection")).Pages -}}
    <a href="{{ .RelPermalink }}">{{ .Title }}</a><br>
  {{- end -}}

and following that, in layouts/partials/foo.html


{{- $ctx := .ctx -}}
{{- $ctxGlobal := .ctxGlobal -}}
{{- with $ctx.Sections -}}
  {{- range .ByTitle -}}
    {{- $ctxGlobal.Scratch.Add "pageCollection" (slice .)  -}}
    {{- partial "foo.html" (dict "ctx" . "ctxGlobal" $ctxGlobal) -}}
  {{- end -}}
{{- end -}}

What I gather (correct me if I’m wrong, thanks), is that default/list.html is importing the subcontext of what in my structure are sublists, via the context variables .ctxGlobal and .ctx passed to it from foo.html. So in foo.html the sublist context is instantiated with as .ctx and the global context as .ctxGlobal $ctxGlobal, only foo.html calling itself, foo.html, hasn’t sunk in yet.

Can you clarify that, as it applies to the context I’ve written above, or post a link to clarification if this is covered clearly somewhere else?

2
structure 
content/
├── section-1/
│   ├── section-1.1/
│   │   ├── _index.md
│   │   ├── page-a.md
│   │   └── page-b.md
│   ├── section-1.2/
│   │   ├── _index.md
│   │   ├── page-c.md
│   │   └── page-d.md
│   ├── section-1.3/
│   │   ├── _index.md
│   │   ├── page-e.md
│   │   └── page-f.md
│   ├── section-1.4/
│   │   ├── _index.md
│   │   ├── page-g.md
│   │   └── page-h.md
│   ├── section-1.5/
│   │   ├── _index.md
│   │   ├── page-i.md
│   │   └── page-j.md
│   └── _index.md
├── section-2/
│   ├── section-2.1/
│   │   ├── _index.md
│   │   ├── page-k.md
│   │   └── page-l.md
│   ├── section-2.2/
│   │   ├── _index.md
│   │   ├── page-m.md
│   │   └── page-n.md
│   ├── section-2.3/
│   │   ├── _index.md
│   │   ├── page-o.md
│   │   └── page-p.md
│   ├── section-2.4/
│   │   ├── _index.md
│   │   ├── page-q.md
│   │   └── page-r.md
│   ├── section-2.5/
│   │   ├── _index.md
│   │   ├── page-s.md
│   │   └── page-t.md
│   └── _index.md
└── _index.md

layouts/_default/list.html 
{{ range (.Paginate .Pages.ByTitle).Pages }}
  <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
  {{ range (site.GetPage .Path).Pages.ByTitle }}
    <h3><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
  {{ end }}
{{ end }}
{{ template "_internal/pagination.html" . }}

Try it 
git clone --single-branch -b hugo-forum-topic-34487 https://github.com/jmooring/hugo-testing hugo-forum-topic-34487
cd hugo-forum-topic-34487
hugo server

3

g886
g8861359×969 56.7 KB

That’s very close to what I’m looking for.

In image attached ( a little blurry, but it’s likely compressed more than once):

Green is div containing previews of section-1-section-1-1 pages, with front matter variable access from those pages.

Just as in your example, clicking on a link brings you the single.html template. The links would come from a loop previewing first 6 or however many posts for that section, arranged with date, weight or ordinal parameter. The button links the list page for section1 , section-1-1, which previews all the posts from that section with pagination.

The red and blue boxes would follow the same pattern with the other sections and subsections.

4

The example I provided should give you everything you need. You need to tailor the HTML and CSS yourself.

I made a minor change to the example.

git clone --single-branch -b hugo-forum-topic-34487 https://github.com/jmooring/hugo-testing hugo-forum-topic-34487
cd hugo-forum-topic-34487
hugo server

Then visit http://localhost:1313/section-1/

5

That’s it exactly - even better with the change.

For anyone else that comes along, this works also grouping by weight or parameter, just add .PageGroups and range .Pages.ByTitle


{{- range (.Paginate (.Pages.GroupBy "Weight" "desc")).PageGroups -}}
{{- range .Pages.ByTitle }}
{{- range first 6 (site.GetPage .Path).Pages.ByTitle -}}

"Nested page parameters here"

{{- end -}}
{{- end -}}
{{- end -}}

Thanks again Jmooring

6

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.