Blog archives page

Hello Friend,

I have a site where the homepage (mysitename.com) shows just my name and underneath couple of links like Blog | Projects | About

When I click on blog (mysitename.com/blog), I was showing top 5 posts on that page along with a link at the end saying “View entire archives →”

Now, When I click on “View entire archives →” link (mysitename.com/blog/archive) should open and show a full list of blog posts at one place. Here I am showing all my posts since I start blogging.

However, I tried very hard to achieve, but failed. My archive page was not displaying anything. I read a couple of posts here on the forum, and they said this is not possible using Hugo as we can’t go more than one level deep over the “content” folder.

How can I solve this problem? How can I show my full list of blog posts (entire archive) at archives page (mysite.com/blog/archive)?

Please help.

Thanks a lot.

Cheers…

Hi. Can you explain what you’ve tried so far? The template would help or if you have your site on Github, a link to it.

Thanks
Mike

Thanks Michael for your help.

I am still dabbling on my localhost:1313 as I am not put on the Github yet.

What I tried was, I added a folder called “archive” under “Content” folder, and inside I created “archive.md” file.

In the theme layout folder, I created “archive” folder and put the same logic as I used in blog page but took away the where clause where it filters the first five pages logic.

This is what I am trying to achieve (the second link)

If you see http://cheeaun.com/blog/ in the end he got a link to show all the archives http://cheeaun.com/blog/archives/

Cheers…

When you create a file named content/archive/archive.md, you’re going to end up with a page called public/archive/archive/index.html, something like:

$ find public/archive | xargs ls -ld
drwxr-xr-x  5 mdhender  staff  170 Jan 30 21:50 public/archive
drwxr-xr-x  3 mdhender  staff  102 Jan 30 21:50 public/archive/archive
-rw-r--r--  1 mdhender  staff  645 Jan 30 21:50 public/archive/archive/index.html
-rw-r--r--  1 mdhender  staff    0 Jan 30 21:50 public/archive/index.html
-rw-r--r--  1 mdhender  staff  858 Jan 30 21:50 public/archive/index.xml

Because your archive.md is in the content folder, it is going to be created as a single page, from a single page template. You want to create your archive as a collection of pages. That means that it will be built from a list template.

You haven’t provided much information about your theme, so it’s hard to say how you should proceed. The simplest is to update your _default/list.html to generate the files that you want. To get a better answer, you need to show what you’re using for your front matter on your templates.

Mike

1 Like

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