How to display the content of a page without the summary?

support
1

I use <!--more--> to separate a page into a summary and it’s content. The summary is also displayed on another page, where I link to this page.

Now I would like to have a different style for the summary on the actual page. How can I display the content of a page without it’s summary? So I can do something like:

<div class="summary">{{ .Summary }}</div>
<div class="content">{{ .Content }}</div>

Now I have everywhere quirks with shortcodes, which create tags that I actually don’t want to have in many places.

Is there a better solution for this?

2

One, clunky, way would be to use a regex to remove the summary from the content.

3

The summary feature is for generating the snippet to show in a summary view, so isn’t what you are looking for. You might consider using .Description instead, or another arbitrary front matter parameter.

1 Like
4

Indeed, that’s what I use in my blog. I adjust the list views so that the description is shown if present otherwise the summary is shown.

On each page, the description is shown, if present, in a blockquote box at the top of the page.

Examples here: https://it.knightnet.org.uk

Code here: GitHub - TotallyInformation/hugo-theme-twenty-sixteen: A blog and information management theme for Hugo roughly based on the Wordpress Twenty Sixteen theme

5

Thank you for your answer.

I’ve found this variable in the documentation here: https://gohugo.io/variables/page/

It seems like a normal front matter variable. The problem it can’t contain new lines or paragraphs. So I don’t se a solution with that :frowning:

6

It can… if using toml, do:

description = """
Something **bold**

A new paragraph with _italics_.
"""

YAML has another syntax for multiline strings, but it’s possible with that too.

In your layout, pass that string through markdownify.

Examples: TOML | YAML

2 Likes
7

In YAML, you do:

description: >
  This is a multi-line
  description
date: ....

Not all markdown is supported though I’m afraid, it would be nice if it were.

I should have mentioned that I also use the description in the meta/micro-data for the resulting page.

8

Which markdown elements remain unsupported?

9

I’d need to check but I don’t think everything worked when I tried it.

10

This is untested. But you could use split on .RawContent to single out your two chunks.
Then you may or may not have to use mardownify when displaying them (not sure). Should look somehting like this:

{{ $both = split .RawContent "<!--more-->" }}
<div class="summary">{{ index $both 0 | markdownify }}</div>
<div class="content">{{ index $both 1 | markdownify }}</div>
3 Likes
11

Thank you for your replay. Your answer is most helpful!

1 Like
12

If you want to display content of the page without the summary consider hiding the summary using a CSS display property such as display:none to remove it from the document flow. Note it’s best to keep the content in the page and surround it with an article tag for semantic purposes and spiders.

Note not all individuals will be navigating your site the way you expect and if they drop directly into the page without the summary they may not understand the content they way you intended.

Another thing to keep in consideration is the presentation for aural user agents such as screen readers. If you use display:none to hide the summary this will also tell the screen reader not to read it.

If your intent is only to hide it for display purposes but to keep it readable to aural user agents you can use one of the many glorious hacks I’m intended to solve with the visibility:aural CSS property.

Finally, if you haven’t seen it yet, you may want to check out the following feature of Hugo:

13

I’ve got something similar on my blog. Check out this example: https://jiridj.be/posts/working-remote/

The first paragraph is the summary (above the more tag), formatted as an introduction. Everything that follows has the regular formatting.

I’ve done that with text substitution. This is a snippet from my post layout template:

<p class="intro">
  {{ .Summary | plainify }}
</p>

{{ $body := replace .Content .Summary "" }}
{{ $body | emojify | safeHTML }}

I use emoji’s in my posts, hence the last line. If you don’t, they wont be substituted.

2 Likes
14

Thank you for your replay. Unfortunately removes plainify all paragraphs as well, which I need for my use case :frowning:

15

You don’t get what you need without plainify?

16

No, all paragraphs are removed as expected, but I only want to remove some elements.

17

Well, if a regex - as suggested by @TotallyInformation - doesn’t work for you and this does not either, you’ve got little options left.

You could try and extract the content you need in multiple steps with various string functions. But honestly, if there’s no easy way to do it, you’re going against the framework. That is never a good idea IMO. My recommendation would be to rethink your template design.

18

I’ve already found a solution with @regis answer. :slight_smile:

19

Ah ok! :slight_smile:

From your response to him I had deducted it was “close, but no cigar” :smiley: