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

Hugo generated .Summary lacks manual cut-off in .Rmd #21

Closed
ProQuestionAsker opened this Issue Dec 19, 2016 · 11 comments

Comments

Projects
None yet
9 participants
@ProQuestionAsker
Collaborator

ProQuestionAsker commented Dec 19, 2016

While the Hugo-generated .Summary leaves much to be desired in terms of customization, it can be slightly modified in .md documents by adding a <!--more--> tag below content you wish to be included. This tag doesn't seem to work on blogdown-generated .Rmd files, causing the default summary to be the first 70 words of the post (which often includes the table of contents and other materials that aren't appropriate for a summary).

This may be more of a Hugo issue than a blogdown one but it seemed appropriate to at least mention here.

@tovare

This comment has been minimized.

Show comment
Hide comment
@tovare

tovare Dec 25, 2016

It looks like Blogdown knits to html, although the partials are properly processed features like summary and table of contents are not available. The <!--more-> processing command is included as a regular html comment.

I modified my template to use description if available, because the first 70-words was messy.

      {{ if .Description }}
        {{ .Description }}
      {{ else }}
        {{ .Summary | plainify | safeHTML }}
      {{ end }}
    {{ if .Truncated }}

tovare commented Dec 25, 2016

It looks like Blogdown knits to html, although the partials are properly processed features like summary and table of contents are not available. The <!--more-> processing command is included as a regular html comment.

I modified my template to use description if available, because the first 70-words was messy.

      {{ if .Description }}
        {{ .Description }}
      {{ else }}
        {{ .Summary | plainify | safeHTML }}
      {{ end }}
    {{ if .Truncated }}
@ProQuestionAsker

This comment has been minimized.

Show comment
Hide comment
@ProQuestionAsker

ProQuestionAsker Dec 27, 2016

Collaborator

@tovare Brilliant!! I had tried manually adding a .Summary field but hadn't thought to add a .Description!

Works like a charm. Thank you!

Collaborator

ProQuestionAsker commented Dec 27, 2016

@tovare Brilliant!! I had tried manually adding a .Summary field but hadn't thought to add a .Description!

Works like a charm. Thank you!

@yihui

This comment has been minimized.

Show comment
Hide comment
@yihui

yihui Dec 28, 2016

Member

Right. It is up to the specific Hugo theme whether/how you can customize the summary. Some themes support the summary field in YAML, such as https://github.com/gcushen/hugo-academic and https://github.com/digitalcraftsman/hugo-icarus-theme You can write something like

---
title: "My Post"
summary: "A custom summary of my post."
---
Member

yihui commented Dec 28, 2016

Right. It is up to the specific Hugo theme whether/how you can customize the summary. Some themes support the summary field in YAML, such as https://github.com/gcushen/hugo-academic and https://github.com/digitalcraftsman/hugo-icarus-theme You can write something like

---
title: "My Post"
summary: "A custom summary of my post."
---
@trefoil-ml

This comment has been minimized.

Show comment
Hide comment
@trefoil-ml

trefoil-ml Feb 14, 2017

@ProQuestionAsker Hi Amber, I am using the same theme you are using for your website/blog. Could you please tell me where to modify the template as @tovare suggested?

trefoil-ml commented Feb 14, 2017

@ProQuestionAsker Hi Amber, I am using the same theme you are using for your website/blog. Could you please tell me where to modify the template as @tovare suggested?

@lyons7

This comment has been minimized.

Show comment
Hide comment
@lyons7

lyons7 Mar 10, 2017

@trefoil-ml You ever figure out where to modify the template?

lyons7 commented Mar 10, 2017

@trefoil-ml You ever figure out where to modify the template?

@ProQuestionAsker

This comment has been minimized.

Show comment
Hide comment
@ProQuestionAsker

ProQuestionAsker Mar 10, 2017

Collaborator

Sorry for the delay here @trefoil-ml and @lyons7

I had to add the description code as suggested by @tovare to both the "Portfolio" partial file and the "list" partial file. You'll find the updated versions in the repo for my site:

Portfolio: https://github.com/ProQuestionAsker/ProQuestionAsker.github.io/blob/07467d475eed5496138d32cd3bc65cdab84b6c8d/themes/hugo-creative-portfolio-theme/layouts/partials/portfolio.html#L35

List: https://github.com/ProQuestionAsker/ProQuestionAsker.github.io/blob/07467d475eed5496138d32cd3bc65cdab84b6c8d/themes/hugo-creative-portfolio-theme/layouts/_default/list.html#L54

Then you just add a description feature to your YAML header. So the header for my blog post looks like this:

---
date: "2016-12-19"
title: "Making a Website Using Blogdown, Hugo, and GitHub pages."
type: "post"
showonlyimage: true
draft: false
weight: 0
author: "Amber Thomas"
image: "blog/img/SiteTutorial.jpg"
description: "Wonder how I set up this website using just GitHub pages, Hugo, and RStudio package blogdown? This tutorial walks you through every step." 
---

Hope that helps!

Collaborator

ProQuestionAsker commented Mar 10, 2017

Sorry for the delay here @trefoil-ml and @lyons7

I had to add the description code as suggested by @tovare to both the "Portfolio" partial file and the "list" partial file. You'll find the updated versions in the repo for my site:

Portfolio: https://github.com/ProQuestionAsker/ProQuestionAsker.github.io/blob/07467d475eed5496138d32cd3bc65cdab84b6c8d/themes/hugo-creative-portfolio-theme/layouts/partials/portfolio.html#L35

List: https://github.com/ProQuestionAsker/ProQuestionAsker.github.io/blob/07467d475eed5496138d32cd3bc65cdab84b6c8d/themes/hugo-creative-portfolio-theme/layouts/_default/list.html#L54

Then you just add a description feature to your YAML header. So the header for my blog post looks like this:

---
date: "2016-12-19"
title: "Making a Website Using Blogdown, Hugo, and GitHub pages."
type: "post"
showonlyimage: true
draft: false
weight: 0
author: "Amber Thomas"
image: "blog/img/SiteTutorial.jpg"
description: "Wonder how I set up this website using just GitHub pages, Hugo, and RStudio package blogdown? This tutorial walks you through every step." 
---

Hope that helps!

@lyons7

This comment has been minimized.

Show comment
Hide comment
@lyons7

lyons7 Mar 10, 2017

Thank you so much @ProQuestionAsker! Works like a charm 🥇

lyons7 commented Mar 10, 2017

Thank you so much @ProQuestionAsker! Works like a charm 🥇

@andrie

This comment has been minimized.

Show comment
Hide comment
@andrie

andrie Jul 23, 2017

The equivalent solution for the tranquilpeak theme is to modify the file themes\hugo-tranquilpeak-theme\layouts\_default\summary.html as follows:

Replace line 44:

{{ printf "%s" .Summary | markdownify }}

with:

{{if .Description }}
  {{ printf "%s" .Description }}
{{ else }}
  {{ printf "%s" .Summary | markdownify }}
{{ end }}

andrie commented Jul 23, 2017

The equivalent solution for the tranquilpeak theme is to modify the file themes\hugo-tranquilpeak-theme\layouts\_default\summary.html as follows:

Replace line 44:

{{ printf "%s" .Summary | markdownify }}

with:

{{if .Description }}
  {{ printf "%s" .Description }}
{{ else }}
  {{ printf "%s" .Summary | markdownify }}
{{ end }}
@jhchou

This comment has been minimized.

Show comment
Hide comment
@jhchou

jhchou Apr 8, 2018

@andrie -- thank you very much for the simple replacement solution for tranquilpeak to allow use of a description field in the YAML.

In case anyone finds this solution, for the current version 0.4.3-BETA, the replacement in themes\hugo-tranquilpeak-theme\layouts\_default\summary.html has been simplified a bit:

Replace line 43:

{{ .Summary }}

with:

      {{if .Description }}
        {{ .Description }}
      {{ else }}
        {{ .Summary }}
      {{ end }}

Edited to add:

Per @SteveRxD, the following change (using the YAML parameter 'summary' instead of 'description', and I think applying markdown formatting processing) from here might be a better replacement consistent with future versions of tranquilpeak:

{{ if .Params.Summary }} {{ .Params.Summary | markdownify }} {{ else }} {{ .Summary }} {{ end }}

jhchou commented Apr 8, 2018

@andrie -- thank you very much for the simple replacement solution for tranquilpeak to allow use of a description field in the YAML.

In case anyone finds this solution, for the current version 0.4.3-BETA, the replacement in themes\hugo-tranquilpeak-theme\layouts\_default\summary.html has been simplified a bit:

Replace line 43:

{{ .Summary }}

with:

      {{if .Description }}
        {{ .Description }}
      {{ else }}
        {{ .Summary }}
      {{ end }}

Edited to add:

Per @SteveRxD, the following change (using the YAML parameter 'summary' instead of 'description', and I think applying markdown formatting processing) from here might be a better replacement consistent with future versions of tranquilpeak:

{{ if .Params.Summary }} {{ .Params.Summary | markdownify }} {{ else }} {{ .Summary }} {{ end }}

@cmcouto-silva

This comment has been minimized.

Show comment
Hide comment
@cmcouto-silva

cmcouto-silva May 13, 2018

You guys are awesome! I could do the same proposed by @tovare, as explained by @ProQuestionAsker, in both files 'layouts/partials/recent_posts.html' and '/layouts/_default/list.html' for hugo-universal-theme. It works like a charm, thanks!!

cmcouto-silva commented May 13, 2018

You guys are awesome! I could do the same proposed by @tovare, as explained by @ProQuestionAsker, in both files 'layouts/partials/recent_posts.html' and '/layouts/_default/list.html' for hugo-universal-theme. It works like a charm, thanks!!

@mkhezr

This comment has been minimized.

Show comment
Hide comment
@mkhezr

mkhezr Jun 7, 2018

I want to request to reopen this issue because although the workarounds above allow for customizing the summary text, they still leave the following issue unresolved.

One of the things that hugo does with the <!--more--> summary divider is that it keeps the html before the divider intact. This means that the summary that is generated is not just text but could include other elements such as figure. Whereas when the divider is not used, first all html is striped and then the 70 word summary is generated. (See Hugo's documentation)

I am using the Jane theme and I wish the summaries to include header photos which means that we need to signal hugo with a <!--more--> tag to preserve the html. maybe a helper function similar to blogdown::shortcode will do the work.

@yihui I would be happy to provide examples and more details.

mkhezr commented Jun 7, 2018

I want to request to reopen this issue because although the workarounds above allow for customizing the summary text, they still leave the following issue unresolved.

One of the things that hugo does with the <!--more--> summary divider is that it keeps the html before the divider intact. This means that the summary that is generated is not just text but could include other elements such as figure. Whereas when the divider is not used, first all html is striped and then the 70 word summary is generated. (See Hugo's documentation)

I am using the Jane theme and I wish the summaries to include header photos which means that we need to signal hugo with a <!--more--> tag to preserve the html. maybe a helper function similar to blogdown::shortcode will do the work.

@yihui I would be happy to provide examples and more details.

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