Customizing Blog List Pages

The list of posts isn’t very appealing since we’re using the default list layout. Let’s make a layout for posts that shows the title, post date, and a summary of each post’s content.

You’ll need to make a main posts list showing the most recent posts, but you’ll want to do the same thing for your “year” and “month” list pages. Since there’s going to be significant duplication, you can make a partial to hold the bulk of the markup for a post and share that across layouts.

Start by adding that partial. Create the file themes/basic/layouts/partials/post_summary.html. In the file, add the following code, which renders the post’s title, publication date, and summary in an <article> element:

Save the file. Now create the file themes/basic/layouts/posts/list.html and add the following code, which iterates over the pages and uses the partial to display them:

Save the file and visit http://localhost:1313/posts to see it in action. Each post displays, with the most recent post first, and its abstract displays as well:

This layout only works for posts. It won’t work for taxonomy pages like your year and month archive pages. To make that work, you’ll need more specific layouts. You defined the year and month pages as new taxonomies, so create the files year.html and month.html in the themes/basic/layouts/_default directory with the same code as the post list layout. To speed up the process, copy the existing list page. You can do that your editor, or with the following commands if you’re using macOS, Linux, or WSL:

The cd - command returns you to the previous directory.

Once those files are in place, start up the server again with hugo server and visit http://localhost:1313/posts/2020. You’ll see the posts for that year displayed:

With your list page complete, add your blog to the site’s navigation bar. Open themes/basic/layouts/partials/nav.html and add a link to your posts page:

Save the file. Your navigation bar now contains a link to your blog.

As you get more content, your list page might become quite long. You can break things up with pagination.