How to specify in markdown where in template the content should go?

support
1

I have attempted to find out the answer on my own over here and via google but had no luck or maybe just my lack of proper technical knowhow to understand things. or i find examples and “tutorials” which are overly simplified.

question:

lets say i have 3 pills, each button showing two rows where each row has three columns

also on the same page there is an accordion

in markdown file, how do i specify what part of the content is to go into what column, currently i am using a html file with default front matter and the output is as desired, but that might be against the whole purpose of using hugo. is there a place i can read about this exact thing?

2

That’s something that would have to be at least partially configured in the template itself, then with front matter in the content files. That or you could use shortcodes that generate HTML with specific classes that you could then use regular expressions to pull that piece of content out and place it in its spot.

I can’t picture what you’re trying to accomplish, but it sounds like something that would take a lot of working around Hugo to do. Maybe someone will have a better answer for you.

3

What are pills?

You might want to take advantage of some custom shortcodes in order to do more advanced layouts. Is there a link to a page that showcases what you’re trying to do?

4

bootstrap pills, but if we forget the pills and lets say template has

 <div class="row">
 <div class="col-sm-2">
 </div>
 <div class="col-sm-10">
 </div>
 </div>

there is a md file with text, how do i specify in md file (or otherwise) what part of it goes into what column

5

If I remember correctly, the page bundles feature allows for having the main content file index.md and other content files that can be included in the page. You may be able to leverage this to make col-2.md and col-10.md files that the template then includes in the correct places on the page.

It’s not a feature I have much experience with, but I think the above link and the docs for page resources should get you in the right direction.

6

There are multiple ways of doing it, and it mostly comes down to taste. One way is to use shortcodes. If you’ve ever used a layout shortcode in WordPress, the idea is similar.

1 Like
7

so i make a shortcode template such as

{{ if .IsNamedParams }}
<div {{ with .Get "class"}} class="{{.}}"{{ end }}>
{{ else }}
</div>
{{ end }}

and then to use it

{{< div class="row" >}}
{{< div class="col-sm-2" >}}
{{< div >}}
{{< div class="col-sm-10" >}}
{{< div >}}
{{< div >}}

is this a proper way to do it?

for some reason it adds <p> to it

8

never mind, found some help from bep on github

wrap.html shortcode

{{ .Inner }}

and then

{{< wrap >}}
{{< div class="row" >}}
{{< div class="col-md-2" >}}
{{< div >}}
{{< div class="col-md-10" >}}
{{< div >}}
{{< div >}}
{{< /wrap >}}

no more <p>

9

So glad you solved it. Could you kindly select the correct answer or add it here and select it for posterity? Thank you!