Marking Draft Posts in List Page in Hugo

This is a quick one. As I worked with lots of draft posts locally, sometimes it can be hard to differentiate which posts that I’ve published and which one that are still in draft. I like to run Hugo with -D flag when writing a new post, so in my list page, it displays all the posts which can be quite messy. I tend to keep an empty draft post of the topic that I intend to publish.

As it turns out, it is actually pretty easy to identify them in code. The .Draft page variable is already included in Hugo and all I have to do is to add another conditional check when displaying the page title, like this:

{{ range .Pages }}
    <li>
        <a href="{{ .Permalink }}">{{ if .Draft }}DRAFT - {{ end }}{{ .Title }}</a> <time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format .Site.Params.dateFormat.list }}</time>
    </li>
{{ end }}