Nicer Post Summaries

I promise not all my blog posts will be about formatting my blog posts, but Hugo’s default {{ .Summary }} is real ugly:

This collapses the first 70 words of the post into one unformatted paragraph, with headers and text and even fenced code blocks all mashed together. I’m also not a fan of how it omits images without any indication—note the lack of a “Read more” on the first post. I assumed at first that I must be doing something wrong, but apparently it’s been this way for years.

I usually prefer longer summaries before clicking through anyway, so I overrode my theme’s layouts/_default/summary.html to render the entire first two paragraphs, including images:

<article>
<h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
{{ partial "post_meta.html" . }}

{{ $paras := split .Content "</p>" }} {{ range (first 2$paras) }}
{{ . | safeHTML }}</p>
{{ end }}

{{ if not (findRE "^[[:space:]]*$" (index$paras 2))
/* empty string = whole post fits in summary = don't show footer */ }}
<footer>

Note that technically we’re showing “everything up to the second </p>”, not “the first two chunks of text”; specifically, it will render an unlimited number of headers and code blocks (Hugo wraps code in <pre> not <p>) until it has found two paragraph elements. I’m sure this will become annoying for some cases, but for now I like it a lot better than the default.