Home > Software design >  In HUGO, how do I get a the list of pages in a section from a partial view?
In HUGO, how do I get a the list of pages in a section from a partial view?

Time:12-28

I'd like to think that this is a fairly simple idea, however I have been struggling with it for a while now. The idea is this: I have a bunch of single blog pages. On the right of the content in these pages, I want to have a list of the five latest blog posts as a partial view.

In my HUGO project, I have a file structure setup like the following:

content
|  |_ posts
|      |_ _index.md
|      |_ firstPost.md
|      |_ secondPost.md
|      |_ thirdPost.md
|      |_ fourthPost.md
|
layout
  |_ partials
        |_ footer.html
        |_ head.html
        |_ navbar.html
        |_ sidePosts.html
    posts
        |_ list.html
        |_ single.html
    index.html

  

My layout/posts/single.html page looks like the following:

<!DOCTYPE html>
<html>
    {{partial "head.html"}}
    {{partial "navbar.html"}}
    <body>
        <div >
            <a href="/posts" > << Back To Posts</a>
            <div >
                <div >
                    <h1>{{.Title}}</h1>
                    <p ><i>{{ dateFormat "Monday, Jan 2, 2006" .Date }}</i></p>
                    <hr>
                    {{ .Content }}
                </div>
                <div >
                    {{partial "sidePosts.html"}}
                </div>
            </div>
        </div>
    </body>
    {{partial "footer.html"}}
</html>

And my layout/partial/sidePosts.html looks like this:

<div >
    <div >
        {{ range (where .Site.RegularPages "Section" "in" "posts") }}
            {{ .Title }}
        {{ end }}
    </div>
</div>

However, when I run this, I get this error:

error calling where: can’t iterate over <nil> failed to render pages

I've tried switching the types around, which where I'm looking, and different directories besides posts, but to no avail. I keep getting the same <nil> issue. I have a feeling it has something to do with the scope in which I'm searching; maybe theirs some global parameter I'm missing to gain access to the content of the project? I'm still new to HUGO so perhaps the answer is obvious, but I'm going to continue looking for a solution.

EDIT (Dec 27th, 2022):

I managed to get it working, just not in a partial view. What I did was just write what I wanted to do in the single template itself, instead of in a partial view. The code for layout/posts/single.html has been updated to:

<!DOCTYPE html>
<html>
    {{partial "head.html"}}
    {{partial "navbar.html"}}
    <body>
        <div >
            <a href="/posts" > << Back To Posts</a>
            <div >
                <div >
                    <h1>{{.Title}}</h1>
                    <p ><i>{{ dateFormat "Monday, Jan 2, 2006" .Date }}</i></p>
                    <hr>
                    {{ .Content }}
                </div>

                {{/*  START OF UPDATE: Dec 27th, 2022  */}}
                <div >
                    <h3 >Latest Posts</h3>
                    <div >
                        <div >
                            <div >
                                {{ range first 5 (where .Site.RegularPages "Section" "in" "posts") }}
                                    <a href="{{ .Permalink }}"  style="cursor: pointer;">{{ .Title }}</a>
                                    <p>{{ .Summary }}</p>
                                    <hr>
                                {{ end }}
                            </div>
                        </div>
                    </div>
                </div>
                {{/*  END OF UPDATE: Dec 27th, 2022  */}}

            </div>
        </div>
    </body>
    {{partial "footer.html"}}
</html>

This works fine for my layout/posts/single.html pages, but what if I wanted to have something like this in a different directory: say the layout/contacts/single.html pages? Would I have to copy and paste the same code into that singles template? That's where my idea of having it as a partial view comes in. I would like to have this code, but in a partial view for more modularization and to keep it dry. And whenever I try and do that, I get a error calling where: can’t iterate over <nil> failed to render pages error.

CodePudding user response:

You need to pass the context to your partial for your script to work. This is why you got it to work in the template, but not in the partial.

{{ partial "sidePosts.html" }}

should be:

{{ partial "sidePosts.html" . }}

If you add the ".", your partial should be able to iterate over .Site.RegularPages

See Partials Documentation here: https://gohugo.io/templates/partials/

  • Related