"Read More" cut off function

There is a function that shows the first few lines of a blog article in the blog list and cuts off the rest of the text that can be accessed after pressing Read More button. Where is that function and how is it configured? There is a bug.

After loading a few articles into my blog directory I found they are shown in a peculiar way:

1st blog 2nd blog
empty 3rd blog
------------ ------------
4th blog 5th blog

I thought there were encoding errors, wrong unprinted chars, etc. But finally it turned out the 3-rd sentence in my text was a little long. The split function was to split it after the predefined amount of words - and put Read More button there - but it did not.

It left the sentence intact - which took more space and pushed the next page in the column down. After I cut the sentence shorter all pages did fit into their places.

Definitely I can put the <!--more--> sign manually - but Hugo is about automation, isnā€™t it?

Hi!

Donā€™t know your context, but you can probably use {{ .Summary }} in your list file for that.

In config.yml you can set the summary length:

summaryLength: 30
2 Likes

@Grob is right. A related tip is this:

Implemented by the Netlify CEOā€¦

Hello @Grob, thank you for the hint - it worked! May I ask you another - related - question: why the function that creates text in the {{ .Summary }} rips it of all formatting? Like all newlines are eliminated and headings converted into body text? The result is an unreadable monolithic block of text.

I also want to thank @bep for the truncate function reference. Bep, I know you do enormous amount of work here, but I want to tell you that current state of documentation is far from reaching its goal - to explain and clarify.

This is kind of initial documentation - it may be explanatory to those who rote it, but it is insufficient to newcomers, who it is targeted at. Thus, I read about the trancate function - but I donā€™t know how to use it - it is not shown. My suggestion is to complement each explanation with a brief working demo.

Yes, I know you will tell me to read documentation - and I will set aside couple months and read it all through as soon as I can! But people still need an answer to their question today!

@vistad the truncate function has an example usage in its doc.

1 Like

Hi @vistad!

Yes, the .Summary function removes or ā€˜truncatesā€™ all HTML.

You can start with this piece of code:

{{ .Content | safeHTML | truncate 200 }}

This will keep your HTML and limit your content to 200 glyphs. If necessary you can combine truncate it with other functions like htmlUnescape or plainify.

Thank you! Iā€™ve solved the issue with the length - but thereā€™s another problem - the {{ .Summary }} rips off all newlines and formatting and turns the text from human-readable into human-unreadable!

How to preserve paragraphs, newlines, headers etc.?

Please tell me how to find that doc! I have no idea!

https://gohugo.io/functions/truncate

If you use my minimal example from above (instead of .Summary) HTML is not stripped and paragraphs will be preserved.

Thank you. It works a little different. Perhaps it requires adopting some rules of the paragraph length and placement of breaks and pictures to work nicely.

So I have this partially working, what I am trying to do is show shortened versions of pages for mobile devices, as client wants it that way. Displaying the summaries with read more links using Summary no problem.

My question is, how do I then show the full text as the read more link just reloads the current page, which is showing a summary, having replaced the .Content with .Summary? What is the accepted way of doing this for pages that are not lists?

Thank you!

There are a few ways to approach it. One way is with plain old CSS. When the user clicks the ā€œread moreā€ button, just unhide the page content