Need help with "layout" - where to put what?

support
1

I am trying to do a page without theme (because I couldn’t find a suitable one).

For the layout I like to have that "right sidebar"structure. CSS is Tailwind. So far so good. They Layout looks and works the way I wanted (before styling).

What I am not clear about. is where do I put those different layout classes.

So far I placed them in following partials/HTML & baseof:

<div class="flex flex-col h-screen m-auto max-w-screen-xl"> #baseof

  <header class="h-10 bg-red-500">Header</header> #header
  <nav class="h-10 bg-gray-200">Nav</nav> #header
  <div class="md:flex  bg-blue-200 h-screen"> #header

    <main class="bg-green-500 md:w-5/6">  #baseof
      Content
    </main>  #baseof

    <div class="bg-blue-200 w-fixed "> #sidebar
    </div>  #sidebar

  </div> #baseof

  <footer class="h-20 bg-gray-800">Footer</footer> #footer
</div> #baseof

Or put all in list.html and single html? I am unclear what the proper pages are to place the elements.

Suggestions are appreciated!

2

Is your site:

a) Single page without taxonomies?
b) Single page with taxonomies?
c) Multiple pages?

Which one?

3

Basically c) (+ taxo later) - I am still doing some testing, so the above where/what I change and tend to put layout elements in the single/list pages.

are there any links how to place the core basic layout elements in Hugo?

4

A basic starting point is something like…

layouts/
└── _default/
    ├── baseof.html
    ├── home.html
    ├── list.html
    └── single.html
layouts/_default/baseof.html 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0">
  <title>{{ if .IsHome }}{{ .Title }}{{ else }}{{ with .Title }}{{ printf "%s | " . }}{{ end }}{{ .Site.Title }}{{ end }}</title>
</head>
<body>
{{ block "main" . }}

{{ end }}
</body>
</html>

layouts/_default/home.html 
{{ define "main" }}
  <h1>{{ .Title }}</h1>
  {{ .Content }}
  {{ range .Site.RegularPages }}
    <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
  {{ end }}
{{ end }}

layouts/_default/list.html 
{{ define "main" }}
  <h1>{{ .Title }}</h1>
  {{ .Content }}
  {{ range .Pages }}
    <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
  {{ end }}
{{ end }}

layouts/_default/single.html 
{{ define "main" }}
  <h1>{{ .Title }}</h1>
  {{ .Content }}
{{ end }}

5

I am aware of the file structure, question was where to place the skeleton container layout.

My latest is nothing in baseof, all in single.html and list.html. That works fine for now.

Starting with no theme is quite a good learning experience. Really fun once you get the hang of it.

6

I apologize that my response was not clear.

  • Put content that is the same across all pages in baseof, or partials that are called from baseof
  • Put content unique to list pages in list
  • Put content unique to regular pages in single

Most of what I see in your “container” seems appropriate for baseof, with the possible exception of the content and sidebar divs – but that depends on what you want those sections to contain.