Help debugging/building a custom blog widget

[nipunarora]

I'm trying to add a custom blog widget for my website, so that I can have a blog along the lines of https://github.com/themefisher/liva-hugo within my current academic themed website.

I was hoping for some help in debugging certain issues I was having (I'm no expert at hugo and go templating blocks itself, so please excuse any obvious errors).

What have I done so far?

1. I created a new file at content/blog/index.md

---
title: "Blogs"  # Add a page title.
summary: "My Blog"  # Add a page description.
date: "2019-01-01T00:00:00Z"  # Add today's date.
type: "widget_page"  # Page type is a Widget Page
---

2. I created a blog.md file to add the blog widget to this widget_page - content/blog/blog.md

+++
widget = "blog" 
headless = true 
active = true 
weight = 10 
+++

and a basic widget html at layouts/partials/widgets/blog.html

{{- define "main" -}}
<!-- blog post -->
<section class="section pb-0">
  <div class="container">
    <div class="row">
      <div class="col-lg-8 mb-5 mb-lg-0">
        <div class="row">
          <h1>Hello</h1>
          {{ $paginator := .Paginate (where site.RegularPages "Type" "post") }}
          {{ range $paginator.Pages }}
          <div class="col-md-6 mb-4">
            <article class="card">
              {{ if .Params.Image }}
              <img src="{{ .Params.Image | absURL }}" class="card-img-top" alt="{{ .Title | markdownify }}">
              {{ end }}
              <div class="card-body px-0">
                {{ range .Params.Categories }}
                <a href="{{ `categories/` | relLangURL }}{{ . | urlize | lower }}"
                  class="text-primary">{{ . | title | humanize }}</a>
                {{ end }}
                <a href="{{ .Permalink }}" class="h5 d-block my-3">{{ .Title | markdownify }}</a>
                <div class="mb-3 post-meta">
                  <span>By {{ site.Params.Author }}</span>
                  {{ if not .Params.HideDate }}
                  <span class="border-bottom border-primary px-2 mx-1"></span>
                  <span>{{ .PublishDate.Format "02 January 2006" }}</span>
                  {{ end }}
                </div>
                <p class="card-text">{{ .Summary }}</p>
                <a href="{{ .Permalink }}" class="btn btn-outline-primary">read more</a>
              </div>
            </article>
          </div>
          {{ end }}
        </div>
      </div>
      <!-- sidebar -->
      {{ partial "sidebar.html" . }}
      <!-- /sidebar -->

      <!-- pagination -->
      <div class="col-12 mt-5">
        {{ template "_internal/pagination.html" . }}
      </div>
    </div>
  </div>
</section>
<!-- /blog post -->
{{- end -}}

However nothing in the blog.html in the following block seems to show up on the site? Is this not a valid pattern?

{{- define "main" -}}
{{- end -}}

[chrede88]

A couple of things stand out. Might be more, but this is what I was able to find at first look:

Content created on the path ./content/<folder>/ will be rendered using layouts/<folder>/single.html or ./layouts/<folder>/single.html. If those files doesn't exist then the default is used: layouts/_default/single.html. This is standard Hugo!

If you set the type=<type> in ./content/<folder>/_index.md, Hugo will look for a html file on the path layouts/<type>/single.html or ./layouts/<type>/single.html. Because you have set the type to widget_page, Hugo will look for a html file on the path layouts/widget_page/single.html (which exists, see https://github.com/wowchemy/wowchemy-hugo-modules/blob/master/wowchemy/layouts/widget_page/single.html). This file uses the partial called widget_page.html on the path /layouts/partials/widget_page.html, see https://github.com/wowchemy/wowchemy-hugo-modules/blob/master/wowchemy/layouts/partials/widget_page.html.

So:

1. Your layouts/partials/blog.html shouldn't have {{- define main -}}{{- end -}} as that's already in layouts/widget_page/single.html.
2. The widget_page partial is looking for partials located at layouts/partials/widgets/, so your custom blog.html partial should be on a path that reflects that, i.e. ./layouts/partials/widgets/blog.html.

Give this a go or alternatively don't use the widget page stuff! Just add a your blog.html (as is) to ./layouts/blog/ and remove the type = widget_page, if you want to use your current blog.html to render your new page.
If you go down this path, you're very likely going to need a header and a footer. I haven't really looked into the content of blog.html, so I won't comment on that.

Just making sure my path notation makes sense. When a path begins with ./, I mean your local file tree. Without it, I'm referring to the wowchemy file tree: https://github.com/wowchemy/wowchemy-hugo-modules/tree/master/wowchemy.

[nipunarora]

@chrede88 Thanks for these suggestions, I'll definitely try them out and get back to you...

Content created on the path ./content// will be rendered using layouts//single.html or ./layouts//single.html. If those files doesn't exist then the default is used: layouts/_default/single.html. This is standard Hugo!

Just to be clear all of this content will be rendered at www.yourwebsite.com/<foldername>/... or in my case www.mywebsite.com/blog (since blog is the folder name)

Your layouts/partials/blog.html shouldn't have {{- define main -}}{{- end -}} as that's already in layouts/widget_page/single.html.

I tried this already, if I do remove {{- define main -}}{{- end -}}, the .Paginate function does not seem to work, I get an error as follows :

Rebuild failed:

Failed to render pages: render of "page" failed: execute of template failed: template: widget_page/single.html:2:3: executing "main" at <partial "widget_page.html" .>: error calling partial: execute of template failed: template: partials/widget_page.html:103:9: executing "partials/widget_page.html" at <partial $widget_path $widget_args>: error calling partial: "/Users/abc/website/layouts/partials/widgets/blog.html:7:27": execute of template failed: template: partials/widgets/blog.html:7:27: executing "partials/widgets/blog.html" at <.Paginate>: Paginate is not a method but has arguments

Hugo Static Site Generator v0.77.0/extended darwin/amd64 BuildDate: unknown

The widget_page partial is looking for partials located at layouts/partials/widgets/, so your custom blog.html partial should be on a path that reflects that, i.e. ./layouts/partials/widgets/blog.html

I apologize I did not note this correctly in the question, I have not fixed it. This is correct, this is the location I have for the blog.html file based on wowchemy docs. the problem I guess was having a new define main block, which I understand is wrong, but without it the .Paginate function does not work as I mentioned. How can I make that work ?

[chrede88]

According to the Hugo docs, .Paginate only works on the homepage and list pages. Which means it's not supported on standard pages like yours. See link to docs: https://gohugo.io/templates/pagination/#list-paginator-pages

[chrede88]

I think you're better off not using the widget_page. Looking at your code, it looks like you're trying to create a list page. I think it would be easier to create your own list page template using the code you've already written.
Take a look at the list docs: https://gohugo.io/templates/lists/.
If you rename content/blog/index.md to content/blog/_index.md Hugo will render it as a list page.