Blog archives page

Thanks, Mike.

By looking at the links provided above, if you were me, how you are going to achieve the desired result?

P.S All other pages were done and dusted. The only page left was the one I was mentioning mysitename.com/blog/archive

Hugo has no concept of subsections, though you can indeed put folders in the content folder. You could make another section for archives, and use another section template for that.

The blog you cite was done in middleman, not Hugo.

This is my default section template, which is used when I try to access /blog on my site (rick.cogley.info). You could make another section called archives, and make another section template for it.

Please put your site up on github so we can look at it.

Cheers Rick. Finally, I put the repo here. Not finished yet. Please help.

https://github.com/scriptstar/1

Ok, read up on sections in the docs, and give what I mention above a try. You can either put the template code in your theme, or, you can put it directly in the project folder.

Namely - https://gohugo.io/templates/list/

It’s a nice looking theme.

The issue is that Hugo creates public/blog/index.html using a list template. That’s really the only place, besides the home page, that you can get a list of all the blog content. The theme is using public/blog/index.htlm to filter the list of blog content to just the most recent five.

The “easiest” solution is to make your home page show the most recent five blog entries and then let public/blog/index.html show all of the blog content.

See https://discuss.gohugo.io/t/an-archive-list-page/1633 for some background on this. It is something that others have requested.

To add to Rick’s suggestion, try putting an “archives” in your Categories:

+++
Categories = ["archives"]

That will cause Hugo to run the themes/1/layouts/taxonomy/archives.html that you have.

Thanks, Michael.

I put this in all of my posts

+++
Categories = ["archives"]

And I have themes/1/layouts/taxonomy/archives.html

But unfortunately, it’s not picking the archive.html template and instead showed the post list template.

Help is much appreciated.

Cheers…

Ok @supremestar, good morning; after some sleep I tried this out.

It turns out that, if you create a section archives and set it up, Hugo’s expectation is that there will exist content under, say, content/archives. So even if you did this:

  1. copy your layouts/_default/section.html to, say, layouts/section/archives.html and edit it to taste.
  2. create content in content/archives

… all Hugo will do is simply list the content .mds on your new section page.

Therefore, what @michael_henderson mentioned is one of the best ways: edit your index.html to show the last few entries, and then let layouts/_default/section.html be the archive list. That is, if you’re storing all your blog entries under content/blog then they will be listed per layouts/_default/section.html when you browse /blog on your site.

N.b.: when I refer to layouts, it can be the one inside your theme, or, in the root of your project folder. Putting stuff in the root of the project folder overrides that in the theme, given the same names and paths.

Also, since your theme does not have a section.html template, you can adapt your list.html for that. Just copy it in situ. The docs page I linked explains which one takes precedence.

Thanking you for your help, Rick. @RickCogley

I got the point. But I don’t want to change my index.html to show the list of posts. I want my list of posts under mysitename.com/blog and archives in archives page.

If I wish to show the post list in the homepage (index.html), I would not have opened this support request in the first place.

I just want to replicate the http://cheeaun.com/ site. I want to see how far I can go even if I use some ugly code.

Is there any function in templates so that I can get full URL from the address bar then I can do some nasty if statement and see whether the URL contains “blog” or “categories” then switch the list template code to show the different code at different times?

Please help.

Cheers…

I am quite sure there is a better way to do this. But this is how I did it.

You can see a demo of it up on http://parsiya.io/archive/. Is this what you are looking for?

Here’s how I did it.
Content types are determined by their directory. For example anything in content/post/ is of type post.

There is another way to assign types and it is in front matter. This will override the directory structure. For example: type: thisisatype in front matter.

Create a markdown file in content. The name of the file is the same as the subdirectory that you want the page to appear on the website. For example in this I have named it archive.markdown so it appears in http://parsiya.io/archive/. I will assign it a type. This can be anything. I have named it mycustomtype.

---
title: "Blog Index"
type: mycustomtype
---
This is the text in the body of the markdown post.

Now create the file layouts/mycustomtype/single.html. Directory name is the same as the type. Obviously the directory also needs to be created. This file will be the template for your archive page.

You can iterate through all posts by using the .Site.Pages variable like this:

{{ range .Site.Pages }}

or iterate through certain content types. In my case, my normal pages are of type post so I only go through posts like this:

{{ range (where .Site.Pages "Type" "post") }}

Here’s the source for my layouts/mycustomname/single.html. You can see that I have also used the {{ .Content }} variable before the range which contains the content of the archive.markdown file. Inside the range you can access different variables for each page such as Title, Date, etc. You can also print tags and categories.

{{ partial "header.html" . }}
<div id="main">
  <div id="content">
    <div>
      <article role="article">
        <header>
          <h1 class="entry-title">
            {{ .Title }}  <!-- title, in this case it will be "blog index" -->
          </h1>
        </header>
        <div id="blog-archives" class="category">
          {{ .Content }} <!-- content of the markdown file. note that inside the range .Content will point to each page's content -->
          {{ range (where .Site.Pages "Type" "post") }}
          <h2>
            {{ .Date | dateFormat "2006"}} <!-- print publish year -->
          </h2>
          <article>
            <h1>
              <a href="{{ .Permalink }}" title="{{ .Title }}">{{ .Title }}</a>
            </h1>
            <time>
              <span class="month">{{ .Date | dateFormat "Jan" }}</span> <!-- print publish month -->
              <span class="day">{{ .Date | dateFormat "2" }}</span> <!-- print publish day -->
            </time>
              <!-- if you want pages summary you can print it here {{ .Summary }} -->
          </article>
          {{ end }}
        </div>
      </article>
    </div>
    {{ partial "sidebar.html" . }}
  </div>
</div>
{{ partial "footer.html" . }}

EDIT: Added some comments to the template.
EDIT 2: You can also paginate similar to index.html template.

7 Likes

Nice technique. :slight_smile:

1 Like

Thanks, Parsiya. I am at office now. As soon as I go home I will try this one report back.

Get excited to go home now.

Cheers.

Hello Parsiya @parsiya

It worked like a charm. Thank you so much. Million thanks.

Also very thankful to @RickCogley @michael_henderson for their help in this regard.

Job well done. This theme is dedicated to all three of you.

All the best.

Cheers

2 Likes

Great. Happy to hear that it helped.

1 Like

This is amazing, I made an account just to thank you. Such a huge help!

Thank you for taking the time, this made my day. This was written ages ago, there might be better ways of doing it now. Hugo has added a lot of functionalities since then.

Yeah perhaps, though I’d been searching for a bit and this was the only thing that finally worked for me. Would love to see alternatives if anyone has them but thanks again!

1 Like