Show multiple content categories on front page

support
1

So, I got a basic site set up that iterates over all .md files in the post category.
http://hugo.bitballoon.com/

It does this with the following code:

{{ partial "header.html" . }}

  <main>
    {{ range first 5 (where .Data.Pages "Section" "post") }}
    <div class="post">
      <h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
      <small>{{ .Date.Format "Mon, Jan 2, 2006" }}</small>
      <p>{{ .Summary }}</p>

      {{ if .Truncated }}
      <div class="read-more-link">
        <a href="{{ .RelPermalink }}">[ Read More ]</a>
      </div>
      {{ end }}
    </div>
    {{ end }}
  </main>

{{ partial "footer.html" . }}

Now, I also have another category that will be for link posts. Link posts will only be a header that is a link to another site, so it doesn’t follow the normal post layout.

So here’s my question, how can loop through and display the latest posts from several different categories on the front page?

2

It seems like I solved it by typing:

{{ range first 5 .Site.Pages }}

instead of:

{{ range first 5 (where .Data.Pages "Section" "post") }}

Follow up question:
I still need to know how I can treat all posts as separate things. For example, when I post a blog post it will have a blue title, and when I post a link post it will have a red title. How would I go about doing that?

3

Never mind, I solved it all by myself. I don’t know if it’s the best solution, but here it is:

{{ partial "header.html" . }}

  <main>
    {{ range first 5 .Site.Pages }}
    {{ if eq .Type "post" }}
    <div class="post">
      <h2><a href="{{ .RelPermalink }}"><img src="/img/post.png" class="post-img"/>{{ .Title }}</a></h2>
      <small>{{ .Date.Format "Mon, Jan 2, 2006" }}</small>
      <p>{{ .Summary }}</p>
      {{ if .Truncated }}
      <div class="read-more-link">
        <a href="{{ .RelPermalink }}">[ Read More ]</a>
      </div>
      {{ end }}
    </div>
    {{ end }}

    {{ if eq .Type "link" }}
    <div class="post">
      <h2><a href="{{ .Params.tags }}" target="_blank"><img src="/img/link.png" class="post-img"/>{{ .Title }}</a></h2>
      <small>{{ .Date.Format "Mon, Jan 2, 2006" }}</small>
      <p>{{ .Description }}</p>
    </div>
    {{ end }}

    {{ end }}
  </main>

{{ partial "footer.html" . }}

This is how my page for the link looks:

+++
date = "2015-12-28T23:36:33+01:00"
description = "A link that takes you to Twitter"
tags = "http://twitter.com/"
title = "Twitter"
+++
1 Like
4

What you’re doing is a very common pattern for the home page.