Tweaking Hugo Summary

One of the things I find quite annoying with hugo is it auto summary feature. While it is quite handy to limit content on main page as it is- but it’s default limit of 70 characters adds more to improvement.

To top that it messes up all the formatting:

/images/post-render-before-tweaks.png

One of the work arounds I have found is to use <!-- more -->, content summaries, to control what sort of summary will be generated, but it still the same that you have in page.

Often I would like to have a short note for the content, which is not part of the content itself. Something like this:

/images/post-render-after-tweaks.png

Now peaking around, I found that hugo allows you to configure what lenght of text would be considered summary (or captured by .Summary of page) through summaryLength YAML variable, here, but it did not work at all.

However, what I found quite useful is this issue, where there is a discussion about how to get around 70 word length default for summary:

     {{ if .Description }}
        {{ .Description }}
      {{ else }}
        {{ .Summary | plainify | safeHTML }}
      {{ end }}
    {{ if .Truncated }}

I took this same to my theme bh and changed the index.html in layouts directory to the same effect.

Now the only thing I have to do is to add a variable Description to the post:

---
title: "Gcc Headers Dir"
date: "2018-02-14T17:15:00-08:00"
summary: "Commands to figure where gcc is looking for system headers"
---

It does look a bit better now, however I had to be specific to put linebreaks.

    <div class="post-entry">
    {{ if .Description }}
        {{ .Description }}
    {{ else }}
        {{ .Summary }}
    {{ end }}
    
    <br/>
    <br/>
    <a href="{{ .Permalink }}" class="post-read-more">[Read&nbsp;More]</a>
    </div>

Overall, this wasn’t too bad and I must say I am quite impressed with how extensible hugo and templating is. good job!