在HUGO中,如何从部分视图中获取一个部分的页面列表?

huangapple go评论82阅读模式
英文:

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

问题

我想这是一个相当简单的想法,但我已经苦苦思索了一段时间。这个想法是:我有一堆单独的博客页面。在这些页面的内容右侧,我想要一个包含最新的五篇博客文章的列表作为部分视图。

在我的HUGO项目中,我有一个如下所示的文件结构设置:

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

  

我的layout/posts/single.html页面如下所示:

<!DOCTYPE html>
<html>
    {{partial "head.html"}}
    {{partial "navbar.html"}}
    <body>
        <div class="container-fluid p-5">
            <a href="/posts" class="sub-font text-black-50"> << Back To Posts</a>
            <div class="row">
                <div class="col-lg-9">
                    <h1>{{.Title}}</h1>
                    <p class="text-black-50"><i>{{ dateFormat "Monday, Jan 2, 2006" .Date }}</i></p>
                    <hr>
                    {{ .Content }}
                </div>
                <div class="col-lg-3">
                    {{partial "sidePosts.html"}}
                </div>
            </div>
        </div>
    </body>
    {{partial "footer.html"}}
</html>

我的layout/partial/sidePosts.html如下所示:

<div class="container-fluid d-flex flex-column align-items-center my-5 text-center">
    <div class="row w-100">
        {{ range (where .Site.RegularPages "Section" "in" "posts") }}
            {{ .Title }}
        {{ end }}
    </div>
</div>

然而,当我运行这个代码时,我得到了以下错误:

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

我尝试过调整类型,改变搜索位置以及除了posts之外的不同目录,但都没有成功。我一直得到相同的<nil>错误。我觉得这可能与我搜索的范围有关;也许有一些全局参数我没有获取项目内容的访问权限?我对HUGO还很陌生,所以答案可能很明显,但我会继续寻找解决方案。

编辑(2022年12月27日):

我设法让它工作了,只是不是在部分视图中。我所做的是在单个模板中直接编写我想要做的事情,而不是在部分视图中编写。layout/posts/single.html的代码已更新为:

<!DOCTYPE html>
<html>
    {{partial "head.html"}}
    {{partial "navbar.html"}}
    <body>
        <div class="container-fluid p-5">
            <a href="/posts" class="sub-font text-black-50"> << Back To Posts</a>
            <div class="row">
                <div class="col-lg-9">
                    <h1>{{.Title}}</h1>
                    <p class="text-black-50"><i>{{ dateFormat "Monday, Jan 2, 2006" .Date }}</i></p>
                    <hr>
                    {{ .Content }}
                </div>

                {{/*  START OF UPDATE: Dec 27th, 2022  */}
                <div class="col-lg-3">
                    <h3 class="text-center text-black-50">Latest Posts</h3>
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-lg-12 d-flex flex-column align-items-center justify-content-center">
                                {{ range first 5 (where .Site.RegularPages "Section" "in" "posts") }}
                                    <a href="{{ .Permalink }}" class="text-center main-font main-color-font" 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>

这对于我的layout/posts/single.html页面工作得很好,但是如果我想在另一个目录中(比如layout/contacts/single.html)也有类似的效果怎么办?我是否需要将相同的代码复制粘贴到该单个模板中?这就是我想要将其作为部分视图的原因。我希望在部分视图中有这段代码,以实现更模块化和DRY(Don't Repeat Yourself)的效果。但是每当我尝试这样做时,我都会得到一个error calling where: can’t iterate over <nil> failed to render pages的错误。

英文:

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:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
    {{partial &quot;head.html&quot;}}
    {{partial &quot;navbar.html&quot;}}
    &lt;body&gt;
        &lt;div class=&quot;container-fluid p-5&quot;&gt;
            &lt;a href=&quot;/posts&quot; class=&quot;sub-font text-black-50&quot;&gt; &lt;&lt; Back To Posts&lt;/a&gt;
            &lt;div class=&quot;row&quot;&gt;
                &lt;div class=&quot;col-lg-9&quot;&gt;
                    &lt;h1&gt;{{.Title}}&lt;/h1&gt;
                    &lt;p class=&quot;text-black-50&quot;&gt;&lt;i&gt;{{ dateFormat &quot;Monday, Jan 2, 2006&quot; .Date }}&lt;/i&gt;&lt;/p&gt;
                    &lt;hr&gt;
                    {{ .Content }}
                &lt;/div&gt;
                &lt;div class=&quot;col-lg-3&quot;&gt;
                    {{partial &quot;sidePosts.html&quot;}}
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/body&gt;
    {{partial &quot;footer.html&quot;}}
&lt;/html&gt;

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

&lt;div class=&quot;container-fluid d-flex flex-column align-items-center my-5 text-center&quot;&gt;
    &lt;div class=&quot;row w-100&quot;&gt;
        {{ range (where .Site.RegularPages &quot;Section&quot; &quot;in&quot; &quot;posts&quot;) }}
            {{ .Title }}
        {{ end }}
    &lt;/div&gt;
&lt;/div&gt;

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


error calling where: can’t iterate over &lt;nil&gt; 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 &lt;nil&gt; 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:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
    {{partial &quot;head.html&quot;}}
    {{partial &quot;navbar.html&quot;}}
    &lt;body&gt;
        &lt;div class=&quot;container-fluid p-5&quot;&gt;
            &lt;a href=&quot;/posts&quot; class=&quot;sub-font text-black-50&quot;&gt; &lt;&lt; Back To Posts&lt;/a&gt;
            &lt;div class=&quot;row&quot;&gt;
                &lt;div class=&quot;col-lg-9&quot;&gt;
                    &lt;h1&gt;{{.Title}}&lt;/h1&gt;
                    &lt;p class=&quot;text-black-50&quot;&gt;&lt;i&gt;{{ dateFormat &quot;Monday, Jan 2, 2006&quot; .Date }}&lt;/i&gt;&lt;/p&gt;
                    &lt;hr&gt;
                    {{ .Content }}
                &lt;/div&gt;

                {{/*  START OF UPDATE: Dec 27th, 2022  */}}
                &lt;div class=&quot;col-lg-3&quot;&gt;
                    &lt;h3 class=&quot;text-center text-black-50&quot;&gt;Latest Posts&lt;/h3&gt;
                    &lt;div class=&quot;container-fluid&quot;&gt;
                        &lt;div class=&quot;row&quot;&gt;
                            &lt;div class=&quot;col-lg-12 d-flex flex-column align-items-center justify-content-center&quot;&gt;
                                {{ range first 5 (where .Site.RegularPages &quot;Section&quot; &quot;in&quot; &quot;posts&quot;) }}
                                    &lt;a href=&quot;{{ .Permalink }}&quot; class=&quot;text-center main-font main-color-font&quot; style=&quot;cursor: pointer;&quot;&gt;{{ .Title }}&lt;/a&gt;
                                    &lt;p&gt;{{ .Summary }}&lt;/p&gt;
                                    &lt;hr&gt;
                                {{ end }}
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                {{/*  END OF UPDATE: Dec 27th, 2022  */}}

            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/body&gt;
    {{partial &quot;footer.html&quot;}}
&lt;/html&gt;

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 &lt;nil&gt; failed to render pages error.

答案1

得分: 2

你需要将上下文传递给你的部分,以使你的脚本正常工作。这就是为什么你在模板中可以工作,但在部分中不能工作的原因。

{{ partial "sidePosts.html" }}

应该改为:

{{ partial "sidePosts.html" . }}

这里的“.”(“点”)代表Hugo中的上下文。如果你添加它,你的部分应该能够遍历.Site.RegularPages

在这里查看部分文档:https://gohugo.io/templates/partials/

以及关于“点”的这一部分:
https://gohugo.io/templates/introduction/#the-dot

英文:

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 &quot;sidePosts.html&quot; }}

should be:

{{ partial &quot;sidePosts.html&quot; . }}

The "." ("the dot") represents the context in Hugo. If you add it, your partial should be able to iterate over .Site.RegularPages

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

And this section about "the dot":
https://gohugo.io/templates/introduction/#the-dot

huangapple
  • 本文由 发表于 2022年12月27日 10:36:20
  • 转载请务必保留本文链接:https://go.coder-hub.com/74925319.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定