How to Fix Summaries Stripped of HTML?

Developers
1

I want to hide some longer posts under the “Read More” button, primarily because my blog sometimes has many photos. And I want to do this manually, so they’re cut at the right place (and some just aren’t).

The problem is that if I don’t add <!--more--> to the post (let’s say it’s a shorter one), this post is shown in the post list stripped of all HTML (including images). As a result, I have to add this tag to all of my longer posts at the end. That’s not what I want.

Here’s my ideal outcome:

  1. If there’s no manual ‘more’ tag show everything as is.
  2. Else, show the cut version of the blog post and have a link to its full version.

I’ve taken another read of the Hugo summary help pages but I think I’ve only got more confused about why this doesn’t work.

Here’s the code I use (based on something I found across this forum and my general knowledge of Hugo).

<li>
<article>
  {{ if .Title }}
  <section class="post-body">
  <header>
	<h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
  </header>
  <section class="post-body">
    {{ if .Truncated }}
      {{ .Summary }}
      <p><a class="cta" href="{{ .RelPermalink }}">Далее</a></p>
    {{ else }}
      {{ .Content }}
    {{ end }}
    {{ end }}
  </section>
  </section>
  {{ else }}
	{{ .Content }}
  {{ end }}
  <a href="{{ .Permalink }}" class="u-url">
	<aside class="dates">
	  <time datetime="{{ .Date.Format "2006-01-02 15:04:05 -0700" }}" class="dt-published">→ {{ .Date.Day }} {{ index $.Site.Data.months (printf "%d" .Date.Month) }} {{ .Date.Year }} {{ .Date.Format "15:04" }}</time>
	</aside>
  </a>
</article>
</li>
<span class="separator"><span class="divider"></span></span>

Please disregard the date thing, I’m posting in another language and translate the entire blog.

2

Wanted to kindly up this as I’m still unable to solve this. A bit tired of adding <!--more--> to every post.

3

There is no way in Hugo to determine content is manually truncated. {{ .Summary }} exists for all pages, in the order of:

  1. Manually truncated via <!-- more -->
  2. Manually truncated via summary as a front-matter property (not permitted on Micro.blog)
  3. Text truncated by Hugo to a certain length.

Hugo will report a page as .Truncated if there’s any content after the produced .Summary. In your case, your pages hit case 3 and have content after the Hugo default length truncation, so those pages have a .Summary and have content after that summary so they count as .Truncated.

I have two recommendations.

  1. Use the HTML detail entity for disclosure versus Hugo summaries.
  2. Use a category for your posts that say whether you want them to be shown a summary or full content on your index and use that category as the filter for {{ . Summary }} versus {{ .Content }}.
4

@jsonbecker To clarify, the actual problem here is that even shorter posts that fit the limit and are shown in full (but exceed the limits of a short Micro.blog note) are displayed stripped of HTML (paragraphs aren’t separated, images are missing).

I understand that for anything longer I need to put the cut-off divider manually. In fact, this would be my preferred scenario – only break-up posts manually.

Right now, even if the post does fit the length limit I set in the config, and I want to show it as is – I have to add <!--more--> at the end of the post just to get the formatting back.

Hugo’s docs say:

Content that comes before the summary divider will be used as that content’s summary and stored in the .Summary page variable with all HTML formatting intact.

And this proves to be correct. How to achieve the same without the “divider”?

5

I think you’ll want to set summaryLength to match the Micro.blog length (this is in your site config) and pass .Summary to safeHTML ({{ .Summary | safeHTML }}).

6

Thank you, will try!