Read More Link in Summary

Generally in the Summay page of blogs or articles, we just show an abstract or the few lines at the top with a linking text Read More.. or Read More... with a hyperlink to the article that is shown in entirety when the link is clicked.

How to enable it in Hugo

The theme I currently use for my Hugo site is fuji-theme which does NOT have the Read More... text and link by default in the listing of posts. I had to enable this as follows.

The list seems to be defined by layouts/_default/list.html. We can overwrite template files as follows:

mkdir -p layouts/_default
cp themes/hugo-theme-fuji/layouts/_default/list.html layouts/_default/list.html

Then, edit layouts/_default/list.html file, and then add a new link “Read more” as follows after the line where it displays the Summary as {{ .Summary }}.

    {{ if .Truncated }}
      <a href="{{ .RelPermalink }}">Read More ...</a>
    {{ end }}

Additional factor contributes to the conditional rendering of `Read More...` text

In addition to the template text in the list.hml inside layouts\default directory, each post has a specific keyword that supplements the conditional rendering of the Read More... text in Hugo.

It is the  clause that gives a hint that the post has some more text to be displayed further.

Note: As part of the markdown when it gets broken, we can use the HTML escaped characters as .

Finished up code - in the relevant section

The content of the <YOUR_SITE>\layouts\default\list.html file looks like below.

  <div class="post-item post-summary markdown-body">
    {{ .Summary }}    
    {{ if .Truncated }}
      <a href="{{ .RelPermalink }}">Read More ...</a>
    {{ end }}
  </div>

Result - Screenshot

The result - as on date - is given below.

Update

The broken link is rectified via escaping. The reference URL for the fix is added in the References section below.

References

My own post in GoHugo Support Forum
How to avoid the Read More... in Hugo Summary → Avoid the Read More link in Summary
My own post in GoHugo Support Forum

Have a look at this layout - especially line 15.

In your list.html inside the loop of the pages, you’ll can use {{ .RelPermalink }} or {{ .Permalink }} to link to the page (probably around line 13 of your layout).

Cheers,
RM…
Raghavan alias Saravanan Muthu
15 Jun 2021 | Tue | 09 59 02 AM IST