In brief in blog post and TOC

For each post I want to add :

  • “in brief” section at the top of the article. (will a list of content written specifically for each post, but number of items in the list will always be different from one post to another)
  • a TOC based on paragraph titles.

For the TOC I got the solution in the documentation and will implement with ` {{ .TableOfContents }}.

But for the " in brief" section I wonder how to do it. The main thing is that I want it to be already styled like a list and not having to create a list every time in the content markdown.

How you would do? I have various ideas but none work fine. The best one would be bundle and use a page or do you see anything else?

example :


What is preventing you from just simply writing whatever you want to write? The least complicated solution is to just write it.

I don’t understand what this means. To get a list, you need to write… a list. Whether that is a markdown list or a html list is up to you.

for me yes. but if someone else edit / create a post I would like there is an area / file where to write the “in brief” list. Was thinking about having it in frontmatter with “” “” “” but sounds like complicated. But you are right, I will let it in the main text with a shortcode or mark-up for styling and add a reminder in archetypes, maybe the more easy way of doing.

so… I have done this way, but not sure it looks vers clean :

  • _default/post.html

      <section class="container px-4 mx-auto">
      <div class="grid grid-cols-12 mb-20 mt-14 gap-x-8">
          <div class="flex flex-col items-end justify-end col-span-3 col-start-1"></div>
      <div class="flex items-end col-span-3 col-start-4 text-4xl font-black"><span class="">AT A GLANCE</span></div>
      <div class="col-span-6">
          <ul class="space-y-3 list-disc list-outside">
              <li>{{ .Params.Ataglance1 }}</li>
              <li>{{ .Params.Ataglance2 }}</li>
              <li>{{ .Params.Ataglance3 }}</li>
  • (in frontmatter)

ataglance1: “list content 1”
ataglance2: “list content 2.”
ataglance3: “list content 3.”

Result looks like that :

If is the right way of doing, how you would improve it? I was thinking to include this “at a glance section” into a partial but it will not dry that much. Is there another logic?

To make it more flexible, you could make the ataglance parameter an array of strings, and loop through the array (that way every article doesn’t require three points.)

Thanks. Took me little time to find a way how to do that (I’m a super beginners in Hugo and everything dev related).
For others in my case If it can help :

  • _default/post.html

    <ul class="space-y-3 list-disc list-outside">
              {{ range .Params.Ataglance }}
              <li>{{ . }}</li>
              {{ end }}
  • (in frontmatter)

ataglance: [“Four economic forecasting tools used in combination can help predict whether Covid-19 trends are permanent.”, “Bain research shows nearly 60% of people using videoconferencing today plan to use it just as much or more after the pandemic is over.”, “More than 60% percent of consumers expect to maintain or increase the use of food delivery platforms post–Covid-19, a Bain study shows.”]

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.