Stunning Framer templates—fully customizable, built to impress, ready for you or your clients • Ad
Let’s say that you have a blog and want excerpts of your latest posts to be displayed on your homepage, as I do.
Hugo lets you do this automatically with the .Summary page variable, which, by default, takes the first 70 words from your content and creates the excerpt.
Now, if you’re like me and want your excerpts to end with an ellipsis (...), not a period, then you’ll have to perform a simple workaround.
Add Ellipsis to a Summary (Excerpt) in Hugo
What you need to do is to make use of the “truncate” function.
Go to where you have your .Summary page variable and add | truncate SIZE, where SIZE is the number of characters you want to show—for example, 220.
So, it should look like this:
<p>{{ .Summary | truncate 220 }}</p>
How to remove the space before the ellipsis
By default, the Hugo truncate function adds a space before those three dots, like this:
Your excerpt ...
If you want to remove that space, you can add a string to the truncate function, which allows you to change Hugo’s default ellipsis.
You can do it like this:
<p>{{ .Summary | truncate 220 "..." }}</p>
As you can see, I simply added an ellipsis between quotation marks, after the size.
You can add something else intstead of the three dots if you want—for example:
<p>{{ .Summary | truncate 220 ">>>" }}</p>
That’s a Wrap
I hope this post has helped you out.
If you're interested in my web design services or templates, want to collaborate, or just have something to say, feel free to shoot me a message.