Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Manual content summaries insert with <p> tag #8910

Open
jstamant opened this issue Aug 20, 2021 · 6 comments
Open

Manual content summaries insert with <p> tag #8910

jstamant opened this issue Aug 20, 2021 · 6 comments

Comments

@jstamant
Copy link

While designing my own theme, I came across a curious issue:

When using the {{ .Summary }} page variable to manually generate a summary in combination with the <!--more--> tag in a post, Hugo inserts the summary wrapped with a <p> tag.

Here's what I'm expecting:

When using the {{ .Summary }} page variable to automatically generate summaries, Hugo simply inserts the summary text in the template - not wrapped with any HTML tags.

$ hugo version
hugo v0.87.0+extended linux/amd64 BuildDate=unknown

I am using the latest release. So, yes, this issue is reproducible in the latest release.

summary.html template file

<p class="excerpt">
  {{ .Summary }}
</p>
{{- if .Truncated }}
<p>
  <a href="{{ .RelPermalink }}">Read more...</a>
</p>
{{- end }}

Reproducible erroneous behavior

See this example with manual summary generation:

test.md

---
title: "Test"
date: 2021-08-08T13:33:29-05:00
draft: false
---

Lorem ipsum dolor sit amet.<!--more-->

Result

<p class="excerpt">
  <p>Lorem ipsum dolor sit amet.</p>
</p>
<p>
  <a href="/posts/test/">Read more...</a>
</p>

Expected behavior

Now compare this to what I'm expecting:

test.md

---
title: "Test"
date: 2021-08-08T13:33:29-05:00
draft: false
---

Lorem ipsum dolor sit amet.

Result

<p class="excerpt">
  <p>Lorem ipsum dolor sit amet.</p>
</p>
<p>
  <a href="/posts/test/">Read more...</a>
</p>
@jmooring
Copy link
Member

jmooring commented Aug 21, 2021

When you render .Summary in a template, the result depends on how the summary was defined for the given page.


Method Description Renders markdown to HTML Renders shortcodes Strips HTML tags Wraps single lines with <p>
A Automatic summary ✔️ ✔️ ✔️
B Manual summary1 ✔️ ✔️ ✔️
C Front matter summary2 ✔️

As a template author, you have no way of knowing if .Summary:

  • Contains raw (not rendered) shortcodes
  • Has been stripped of its HTML tags
  • Has been wrapped within a <p> element

You can determine if the summary was defined in front matter, and access its raw value, with .Params.Summary, but the ability to do that may be affected in the future by #11055. Notes that .Params.Summary returns nil with automatic and manual summaries.

Related:

Somewhat related, applicable to HTML content pages:

Somewhat related (embedded templates):

Example site with an example of each summary method:

git clone --single-branch -b hugo-github-issue-8910 https://github.com/jmooring/hugo-testing hugo-github-issue-8910
cd hugo-github-issue-8910
hugo server

Footnotes

  1. Manual summary takes precedence over front matter summary

  2. Front matter summary takes precedence over automatic summary.

@github-actions
Copy link

github-actions bot commented Jan 5, 2022

This issue has been automatically marked as stale because it has not had recent activity. The resources of the Hugo team are limited, and so we are asking for your help.
If this is a bug and you can still reproduce this error on the master branch, please reply with all of the information you have about it in order to keep the issue open.
If this is a feature request, and you feel that it is still relevant and valuable, please tell us why.
This issue will automatically be closed in the near future if no further activity occurs. Thank you for all your contributions.

@github-actions github-actions bot added the Stale label Jan 5, 2022
@jmooring jmooring added Keep and removed Stale labels Jan 5, 2022
@ptgott
Copy link
Contributor

ptgott commented Jan 8, 2022

@bep @jmooring What would you think the solution should be? Looks like some choices are:

  • Returning raw Markdown for all three summary mechanisms with no <p> tags: That way, a template author could call, say, .RenderString if they wanted HTML. At the same time, I'm not sure why you'd want an unprocessed summary unless you were creating one manually via frontmatter.
  • Returning processed HTML for all three summary mechanisms: The downside is that an author might want control over how they render a summary, e.g., in a <span> rather than a <p>.
  • Changing the Page API to include .Summary and .RawSummary properties. The first returns processed HTML and the second returns raw Markdown.
  • Leaving this functionality as-is and documenting it: This won't break any existing templates, at least.

@okaestne
Copy link

I think we all can agree that this is unexpected behavior. I would have never guessed that the <p> tags are missing when using the manual summary method just be defining the point using <!--more-->. I also stumbled upon this while designing my template because I tried add CSS styles to the p elements.

I can also understand that there are use-cases for a summary in form of raw text. Therefore I would prefer @ptgott 3rd suggestion most.

@rodrigo-brito
Copy link

I'm using this combination of filters to retrieve the RAW Summary:

{{ .Summary | plainify | htmlUnescape | chomp }}}

@cskartikey
Copy link

The unexpected behavior still exists as of now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

7 participants