In brief in blog post and TOC

[Parisian]

Hello,
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 brief.md page or do you see anything else?

example :

`

[pointyfar]

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

@Parisian

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.

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.

[Parisian]

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.

[Parisian]

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>
        </ul>
    </div></div>
    </section>
  

• index.md (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?

[funkydan2]

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.)

[Parisian]

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 }}
        </ul>
  

• index.md (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.”]