'Draft' markers in listings for Hugo

Hugo is a fantasitic static site generator. You write posts in Markdown syntax and Hugo generates the static site. While working on a post you can set it as a draft, while still being able to have live previews. You start Hugo with a flag to generate draft pages, so you can write your article and have Hugo live preview it to you.

If you are like me in that you are demanding of your own work, then it might take several weeks for some of the larger post to be done. Therefore, you might be working on a number of posts simultaneously. At some point you look at the post listing and wonder which posts are published and which aren’t. The code snippet below adds a marker [Draft] to each of the draft posts in the listing.

It looks like this:

The code {{ if .Draft }}[Draft]{{ end }} should be added to conditionally add [Draft]. In this case the text is added directly in front of the page title. The condition is obvious, it verifies whether the post is a draft or not.

If you have not modified a listing before, check out Hugo’s documentation on ‘List of content’ template for details on which files will be checked and in what order. In my particular case, I created a new file <site>/layouts/section/post.html. The Draft-marker is now added only to pages in the post directory. You can find the default template at <site>/themes/<theme>/layouts/_default/list.html, which you can copy. Modifying the theme files directly is not recommended and is not necessary as Hugo gives you a number of options for overriding parts or full templates.

The code below shows a larger sample of how such a template file might look after your modification.

<div class="content container">
<h1>{{ .Title }}</h1>
<ul class="posts">
  {{ range .Data.Pages }}
  <li><span><a href="{{ .Permalink }}">{{ if .Draft }}[Draft]{{ end }} {{ .Title }}</a> <time class="pull-right post-list">{{ .Date.Format "Mon, Jan 2, 2006" }}</h4></time></span></span></li>
  {{ end }}
</ul>
</div>