How to divide a content page?

support
1

Hi there,
I am still fairly new to HUGO, as well as Markdown, and also neither really fluent in HTML nor CSS nor JS. Some stuff still puzzles me a lot despite watching a ton of videos and reading pages upon pages.

So, I got my main page setup all nice and working, dropdown top menu and all, but the content pages are giving me a ton of a hard time, and I’m not even entirely sure if I am not better off hard coding them all into HTML - it’s an entirely static website after all, no blog or anything that changes regularly.

Now, on to my question: Most of the content pages I need to setup have a full width headline and smaller subtitle. Below there are two columns (roughly 65% wide, 5% gap, 30% wide), but both contain page content, not navigation or static images, but on the left it’s the main text, on the right a mixture of content related images, downloads and other links. Below there’s sometimes a summary, again spanning both columns, sometimes nothing. And all I just described is just the main content, with the header and a hero portion above and the footer below.

Is there anyone out there who could describe how to get this sorted and setup? I already found this snippet here:

but then again I struggle with how to use this.

Next I attempted to divide my .md files into variables just like the config.toml and pull them into the .html file, which just ended in multiple server errors.

Now Google leads me to no new ideas and I have none of my own, so I have to rely on some support from you folks. Thanks in advance.

TC, Martin

2

Hello,

I suggest that you have a look at the Hugo Themes Showcase because you may find a theme that suits your needs.

Also you can have a look at any theme’s GitHub repo and see how the various templates are constructed to output specific HTML.

3

Thanks for the suggestion, but been there, done that - at least the first part, browsing the available themes. I can’t seem to find any that actually pulls content from a single .md file and spreads it in a defined way over a number of div sections on the page. I am able to position the containers in ways I want them to be, but can’t seem to get them to fill properly.

EDIT: And if I implement the div containers in the .md file, all markup is lost inbetween the tags, so I had to use html. In that case I could as well just switch to plain html.

EDIT #2: I am actually doing just that rn: adding massive amounts of HTML to the .md file(s) to achieve the desired placement of my content. It’s probably rather quick&dirty, but it works. I am still very open to other ideas and suggestions though!

4

You can also use Inline Shortcodes.

5

I am trying to understand to be able to make some suggestion with your topic.
Do you want to do something similar to each of the posts shown here?

When you look at it on a computer (not mobile phone). There each post has a two column layout. The column on the left has an image related to the content, a summary, sometimes a table of contents, etc. The right column has the other content of the post.

6

Yes, that’s pretty close to what I am looking for. It’s different in details, like the picture on the right (and not always a picture present), and more information below it, like more text and some related links.

Also, both sides are supposed to scroll together, whereas in the linked page, the picture side remains static.

I really wonder how that’s done now, and if the left side of each post really fills from within the .md file - that’s what I am looking for, because both sides contain text in our layout.

Of course I tried to look at the source code, but that’s plainly illegible. All code squished into eight lines, width maxed out…
Also I am missing any mentions or a link to a theme. Can you tell me if it’s an official one, and which one, of course? Or any code snippets? Thank you.

7

Ok. @mwrsa Don’t worry, I’ll try to explain how it works.

  1. It is not an theme. Rather it is a custom design.
  2. The whole design is built using a CSS framework called Bootstrap.
  3. With Bootstrap classes, the layout is diagrammed in one column, when the screen is narrow, and two columns, when the screen is wide (-lg): div class=“col-12 col-lg-6” :wink:
  4. The content of the left column is built with some html elements (h1, image, div and button) and content taken from the markdown (like the page variable .Description). Although you can take more elements from the markdown or include partials like Related Content and almost anything else.
  5. The content of the right column is based on the content of the markdown, called with {{ .Content }} and some other elements built with “Hugo Partials Templates”.

Here I share the aforementioned complete layout, which works as a Hugo Single Page Template:

8

An alternative solution.

The layout you describe resembles that of a traditional blog.

Perhaps you should install a blog theme and study its design and internal workings. Especially Single Page Template. Once you understand it, you can customize it as you wish or build your own theme.
Some I suggest:
https://themes.gohugo.io/hugo-future-imperfect-slim/
or