How do I get an spf13 style archive page?

support
1

I’ve moved our blog from WordPress to Hugo and Github pages and I’m still in the process of cleaning things up. I’ve been going through the Googlebot errors and I’m missing http://blog.sensr.net/archives

I can’t seem to figure out how to create this. I see that on http://spf13.com/post/ there is a nice page with all the blog posts. I’ve cloned the git repo but can’t figure out what is generating this page.

layouts/post/summary.html seems to generate the homepage…

content/post/ doesn’t seem to have an index.html so that’s not where this is created.

Any tips for how to figure this out?

Any help on this would be greatly appreciated!

Regards,
Adam

Sensr.net Watch your stuff!

2

the data from /post/ comes from list.html file in your theme.

for /archives , create content/archives.md with layout=‘archive’ and create a file layout/archive.html . Copy the content from your theme/_default/list.html to copy the same content and use .Site.Posts to loop through your archives

I feel that there should be a cleaner way to do this as well. I don’t know if aliases work on index.md or index.html files.

3

A couple different ways, but first, I want to make sure you aren’t asking about how spf breaks up the blog posts by year. This assumes you are trying to group by publish date rather than date, but here is the basic idea:

{{ range .Data.Pages.GroupByPublishDate "2006"}}
<h2 class="archive-year" id="{{.Key | urlize}}">{{.Key}}</h2>
    <ul class="year-of-posts">
        {{ range sort .Pages "PublishDate" "desc" }}
        <li>
        <a href="{{.Permalink}}">
        <h3>{{.Title}}</h3>
        <time datetime={{.PublishDate}}>{{.PublishDate.Format "January 2, 2006"}}</time>
        </a>
        </li>
        {{end}}
    </ul>
{{end}}

Now, if you want to create a specific page (ie, www.yoursite.com/archives/), you’re going to have to create a separate layout for that and a separate file.

For example, for all my single pages (eg, /about, /colophon,/contact), I created a content directory called: content/singles. Then create “layouts/singles” and create a new layout at “layouts/singles/archives.html”. Now when you create a document at “content/singles/archives.md”, just put the following in your front matter:

---
title: Archives
type: singles
layout: archives
slug: /archive/
---

Or if you don’t want to use the slug, you can do what I do, which is in my config.toml, I set the following:

[permalinks]
  singles = "/:title/"

…since I know that each individual markdown file in singles is going to be available at the root, but this depends entirely on the source organization and site architecture for your site.

HTH.

1 Like
4
5

Thanks for the reply. I don’t see a list file in https://github.com/spf13/spf13.com at all.

I’m trying to learn from spf13.com by example.

My brain is having trouble connecting what shows up at http://spf13.com/post/ and what is in the repo. What’s the rule for what generates content for a url from a file in Hugo?

Regards,
Adam
6
1 Like
7

You want this: https://github.com/spf13/spf13.com/blob/master/layouts/_default/section.html

Derek Perkins made a handy diagram for some of this as well (although it’s unfinished). See https://github.com/spf13/hugo/issues/1843.

2 Likes
8

Did you mean for the slug to be singular? /archive/ and not /archives/ ? Neither seems to work for me.

I’m trying your approach. I created content/singles/archives.md as you described.

When I go to http://localhost:1313/archives/ I get a 404 error.

If I go to http://localhost:1313/singles/archives/ I see the html that is in the file
themes/hugo-phlat-theme/layouts/singles/archives.html

Does layouts/singles/archives.html go in the theme directory?

I must be misunderstanding something basic. Sorry to be so dense about this…

Regards,
Adam

PS My repo is here: https://github.com/sensrnet/sblog/

9

@adamb I tried a pull request but I guess you’re not accepting them :smile: Keep in mind there is more than one way to do what I’m about to show you.

The following changes will you get almost to where you want to be, but you’re probably going to want to fiddle with the presentation (ie, css).

  1. Change your config.toml. Note the addition of singles. With this, you can remove the slug from archives.md altogether. Keep in mind that the “singles” directory is just my preference. I think you might more commonly see “pages” or “page”.
[permalinks]
    post = "/:year/:month/:slug/"
    page = "/:slug/"
    singles = "/:title/"
  1. New layouts/singles/archives.html. This assumes you want to group by month. If you want to group by something else, look at the docs for grouping content.
<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode }}">
    {{ partial "head.html" . }}
    <body>
        {{ partial "navigation/navigation.html" . }}
        <div id="top" class="container">
            <div class="row" id="content-main">
                <div class="col-md-8">
                    {{ range (where .Site.Pages "Section" "post").GroupByDate "January 2006"}}
                    <h2>{{.Key}}</h2>
                    {{ range .Pages }}
                        <div class="row">
                            <div class="col-md-12 content-card">
                                <h1><a href="{{ .Permalink }}">{{ .Title }}</a></h1>
                                <ul class="list-inline">
                                    <li><i class="fa fa-calendar"></i>{{ .Date.Format "January 2, 2006" }}</li>
                                    <li><i class="fa fa-user"></i>{{ .Params.author }}</li>
                                </ul>
                                {{ .Summary }}
                                <a class="btn btn-custom" href="{{ .Permalink }}" role="button">Read More</a>
                            </div>
                        </div>
                    {{ end }}
                    {{ end }}
                </div>
                <div class="col-md-4">
                    {{- partial "widgets/sidebar/search.html" . -}}
                    {{- partial "widgets/sidebar/recent.html" . -}}
                    {{- partial "widgets/sidebar/adsense.html" . -}}
                    {{- partial "widgets/sidebar/categories.html" . -}}
                </div>
            </div>
        </div>
        {{- partial "footer.html" . -}}
        {{- partial "foot.html" . -}}
    </body>
</html>
  1. I added front matter to your archives.md. You might not need this, but there is no harm in it. I’m assuming that you’re going to want to add metadata and other parameters to this page.
---
title: Archives
date: 2011-11-16
description: The blog archive for sensrnet.
type: singles
layout: archives
---

From this point, your best bet is to do the following:

  1. Read the docs. It will take some time, but you’ll find just about everything you need.
  2. Reach out to the theme’s creator for additional feedback. You’re already veering a bit from the original theme, so it’s up to you to work with the creator of the theme to make future fixes.

Cheers.

1 Like
10

Muchas gracias @rdwatters!

I finally got it working.

I did notice that if I change the permalink from archive to archives2 and don’t restart the server (hugo version 0.17) that both http://localhost:1313/archives/ and http://localhost:1313/archives2/ will work. This seems like a (minor) bug. But it’s confusing if you’re trying to understand things.

Thanks everyone for all the help!

1 Like