Post types, tumblr style

support
1

I’d like to create a blog / posts section of my hugo site that has more of a tumblr style feed. Different content types for different kinds of posts all in one stream. I’m not really sure if that’s wise from an SEO standpoint but I dont’ want the have the same displayed format for an article as a simple link post.

Photograph, Link(s), Video, Quote, Article would cover the bases of content.

But I’m a little baffled how to best accomplish it from a template perspective in hugo. Returning different post styles/formatting on the list page specifically.

Based on what I’ve managed to figure out from the docs, the most straightforward solution is to have content types, like content/posts/articles and content/posts/photos and content/posts/links which would allow me to set different archetypes for each post type.

Any tips or ideas are appreciated. Thanks.

2

1) The URL structure of your site does not have to mirror the structure of your content/ directory. You can override the URL structure in the permalinks section of config.toml. I mention this because it sounds as if you want everything to appear under posts/, but it would be advantageous to organize your content/ directory differently.

2) Organize your content like this:

content
├── article
│   ├── article-1.md
│   └── article-2.md
├── link
│   ├── link-1.md
│   └── link-2.md
├── photo
│   ├── photo-1.md
│   └── photo-2.md
├── quote
│   ├── quote-1.md
│   └── quote-2.md
└── video
    ├── video-1.md
    └── video-2.md

This has several benefits:

  1. Hugo will infer content type from the first level directory under content/. You will not have to set type in front matter.

  2. You can easily create archetypes:

     archetypes/
 ├── article.md
 ├── default.md
 ├── link.md
 ├── photo.md
 ├── quote.md
 └── video.md

  3. It will be easy to override single and list templates:

    layouts/
├── article
│   ├── list.html
│   └── single.html
└── _default
    ├── baseof.html
    ├── list.html
    └── single.htm

3) If I understand correctly, when listing a mix of content types on a single list page, you want to format each item’s display based on its type.

layouts/_default/list.html:

{{ define "main" }}
  {{ .Content }}
  {{ range .Site.RegularPages }}
    {{ partial (printf "list-page-item/%s.html" .Type) . }}
  {{ end }}
{{ end }}

Then create a directory structure for the partials:

layouts/
└── partials
    └── list-page-item
        ├── article.html
        ├── link.html
        ├── photo.html
        ├── quote.html
        └── video.html

For example, the partial for an article might look like this:

<div class="list-page-item list-page-item-article">
  <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
  <p>{{ .Summary }}</p>
  {{- if .Truncated }}
    <p><a href="{{ .RelPermalink }}">Continue reading...</a></p>
  {{- end }}
</div>

while the partial for a quote might look like this:

<div class="list-page-item list-page-item-quote">
  {{ .Content }}
</div>
6 Likes
3

That’s quite helpful, and close to what I had in my head. I’ll tinker a little more tonight with what you posted and see where I land.

Thanks so much.

4

Want to hear something embarrassing?

I’m just now getting around to working on this.

1 Like
5

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.