Post types & summary

I’m continuing to try and grok Hugo, and have two questions I’m hoping to get some help with:

  1. Is there a way to set up post types such that different styling can be applied in paginated list or category page views? For example, having a different separator graphic or background colour for a specified post element.

  2. For my long-form posts, how do I code in a description or summary that I can not only apply an alternate style to, but would also allow me to only show that — instead of the entire post — along with the title in the archive or paginated list views?

Thanks in advance! :slight_smile:

I have a quick answer for #2. You can put this tag after the intro:


Then it will be used as the summary. You can mess around with a custom template if the default is not displaying the summary on the list page. Mine has this for layouts/_default/list.html.

{{ define "main" }}
<div class="posts h-feed">

{{ $paginator := .Paginate (where .Data.Pages.ByDate.Reverse "Type" "post") (index .Site.Params "archive-paginate" | default 20) }}
{{ range $paginator.Pages  }}

  <article class="post">
    <a href="{{ .Permalink }}" class="post-date u-url"><time class="dt-published" datetime="{{ .Date.Format "2006-01-02 15:04:05 -0700" }}">{{ .Date.Format "2 Jan 2006" }}</time></a>
	{{ if .Title }}
		<h1 class="page-title"><a href="{{ .Permalink }}">{{ .Title }}</a></h1>
		<div class="p-summary">
			<p>{{ .Summary }}</p>
			{{ if .Truncated }}
				<p><a href="{{ .Permalink }}">Continue reading →</a></p>
			{{ end }}
	{{ else }}
		<div class="e-content">
    	{{ .Content }}
	{{ end }}

{{ end }}

<div class="extra-pagination">
	    {{ partial "pagination.html" .}}
{{ end }}

Hope that helps!

Hi Ben, thanks very much for your help, I’ve added your code into my layouts/partials/li.html file but can’t seem to get only the summary to display. I’m trying to create summaries with a shortcode as follows:

<p class="p-summary">{{ .Inner | Markdownify }}</p>

When I use the shortcode the text includes truncated content, but when I manually insert the <!—more—> tag myself it works and displays only the post summary. Any idea what I’m doing wrong?

saw 6 Colors use “grok”. Curious: what does it mean?

Just another word for understanding something. I believe there’s also a UNIX and Linux command line tool called the same, though I can’t say what it’s for as I’ve never used it. :slight_smile:

It’s origin is Stranger in a Strange Land. Grok is a Martian concept about truly understanding something, not just “knowing it”.