Associate Layout and content

Hello,

I am sorry I have to ask the question,but after several hours of tests, i am desperate,and do not know what to do but ask you for help :

  • I have seen many people asking the same question than me :
    • they all seemed to have solved their issue
    • I tried what was explained as a solution in all those entries in Hugo 's discourse, and still have no result…

So here it is :

  • I run hugo version :
$ hugo version
Hugo Static Site Generator v0.78.2-959724F0 linux/amd64 BuildDate: 2020-11-13T10:08:14Z
$ hugo env
Hugo Static Site Generator v0.78.2-959724F0 linux/amd64 BuildDate: 2020-11-13T10:08:14Z
GOOS="linux"
GOARCH="amd64"
GOVERSION="go1.15.1"
$ git version
git version 2.11.0

  • I have a hugo project. I created files in the layouts/ folder and in the content/ folder :
~/hugofied-gravitee-docs$ tree layouts/
layouts/

0 directories, 0 files
~/hugofied-gravitee-docs$ tree themes/
themes/
└── gravitee-docs
    └── layouts
        β”œβ”€β”€ _default
        β”‚   β”œβ”€β”€ baseof.html
        β”‚   β”œβ”€β”€ list.html
        β”‚   └── single.html
        β”œβ”€β”€ index.html
        β”œβ”€β”€ testjb
        β”‚   β”œβ”€β”€ baseof.html
        β”‚   β”œβ”€β”€ list.html
        β”‚   └── single.html
        └── testjb2
            └── index.html

5 directories, 8 files
~/hugofied-gravitee-docs$ tree content
content
β”œβ”€β”€ _index.md
β”œβ”€β”€ test
β”‚   β”œβ”€β”€ _index.md
β”‚   β”œβ”€β”€ test1.md
β”‚   β”œβ”€β”€ test2.md
β”‚   └── test4
β”‚       └── _index.md
└── test2
    └── test3
        └── default.md

4 directories, 6 files
~/hugofied-gravitee-docs$ cat content/test/test1.md 
---
layout: "testjb"
type: "test"
---

Fichier `content/test/test1.md`
~/hugofied-gravitee-docs$ cat content/test2/test3/default.md 
---
layout: "testjb2"
type: "test2"
layout: "testjb"
---

Fichier `content/test/testX.md`
~/hugofied-gravitee-docs$ cat content/test/test2.md 
---
layout: "testjb2"
type: "test"

---

Fichier `content/test/test2.md`
~/hugofied-gravitee-docs$ cat config.toml 
baseURL = "http://127.0.0.1:1313/"
languageCode = "en-us"
title = "Gravitee.io API Platform"
themesDir = "themes"
theme = "gravitee-docs"

  • Result :
    • http://127.0.0.1:1313/test/test1/ does exist (no 404),
    • generated page for /test/test1/ is completely empty
    • generated root page exists,and is absolutely not empty, it does base it self from the default layout

I am sure it will be extremely fast and easy to tell me what to do, to have those two pages use layout β€œtestjb2”

To see exactly all that I have in my project :

git clone https://github.com/gravitee-lab/hugofied-gravitee-docs
cd hugofied-gravitee-docs
git checkout  HUGO_QUESTION_ONE
# and there you go, you have exactly the files I amtalking about
hugo serve --watch

Use

---
type: testjb2
---

Hi pointyfar,

Thank you so much for your answer. I have just tried your suggestion :

  • I might, though, not understand one of the things you are suggesting : indeed, I still have the same result, absolutely all pages, except the root page, are empty.
  • Now let me describe exactly What I tested, following your suggestions.

Again:

~/hugofied-gravitee-doc$ hugo env
Hugo Static Site Generator v0.78.2-959724F0 linux/amd64 BuildDate: 2020-11-13T10:08:14Z
GOOS="linux"
GOARCH="amd64"
GOVERSION="go1.15.1"
~/hugofied-gravitee-doc$ git --version
git version 2.11.0
~/hugofied-gravitee-doc$

My Content, config.toml, and my layouts folder

~/hugofied-gravitee-doc$ tree content/
content/
β”œβ”€β”€ _index.md
β”œβ”€β”€ test
β”‚   β”œβ”€β”€ _index.md
β”‚   β”œβ”€β”€ test1.md
β”‚   β”œβ”€β”€ test2.md
β”‚   └── test4
β”‚       └── _index.md
β”œβ”€β”€ test2
β”‚   └── test3
β”‚       └── default.md
└── testjb2
    └── test6.md

5 directories, 7 files
~/hugofied-gravitee-doc$ cat content/test/test1.md
---
type: testjb2
---

Fichier `content/test/test1.md`

~/hugofied-gravitee-doc$ cat config.toml
baseURL = "http://127.0.0.1:1313/"
languageCode = "en-us"
title = "Gravitee.io API Platform"
themesDir = "themes"
theme = "gravitee-docs"
~/hugofied-gravitee-doc$ tree layouts/
layouts/

0 directories, 0 files

All the files in the content, contain :

  • the front matter you suggested me :
---
type: testjb2
---
  • and one sentence containing the path of the file.

My Theme

Last, in my hugo theme, in all folders, the same 4 Html files are present:

  • index.html and baseof.html have the exact same content, and use 2 blocks :
{{ block "main" . }}
{{ end }}
{{ block "footer" . }}
{{ end }}
  • list.html and single.html have the exact same content, and they define main and footer blocks :
{{ define "main" }}
<!--  a lot of HTML -->
  {{ .Content }}
<!--  a lot of HTML -->
{{ end }}

{{ define "footer" }}
<!--  a lot of HTML but no .Content -->
{{ end }}

And here is exactly the tree of my hugot theme :

~/hugofied-gravitee-doc$ tree themes/gravitee-docs/
themes/gravitee-docs/
β”œβ”€β”€ layouts
β”‚   β”œβ”€β”€ _default
β”‚   β”‚   β”œβ”€β”€ baseof.html
β”‚   β”‚   β”œβ”€β”€ index.html
β”‚   β”‚   β”œβ”€β”€ list.html
β”‚   β”‚   └── single.html
β”‚   β”œβ”€β”€ index.html
β”‚   β”œβ”€β”€ testjb
β”‚   β”‚   β”œβ”€β”€ baseof.html
β”‚   β”‚   β”œβ”€β”€ index.html
β”‚   β”‚   β”œβ”€β”€ list.html
β”‚   β”‚   └── single.html
β”‚   └── testjb2
β”‚       β”œβ”€β”€ baseof.html
β”‚       β”œβ”€β”€ index.html
β”‚       β”œβ”€β”€ list.html
β”‚       └── single.html
└── theme.toml

4 directories, 14 files
~/hugofied-gravitee-doc$ cat themes/gravitee-docs/theme.toml
name = "gravitee-docs"
license = "AGPL v3"
licenselink = "https://www.gnu.org/licenses/agpl-3.0.txt"
description = "A Hugo theme for all Gravitee.io documentation websites"
homepage = "https://github.com/gravitee-lab/hugofied-gravitee-docs/"
tags = ["documentation", "clean", "customizable", "light", "highlighting", "minimal", "corporate", "responsive", "simple"]
features = ["documentation", "APi documentation"]
min_version = 0.54

[author]
  name = "Jean-Baptiste-Lasselle"
  homepage = "https://github.com/Jean-Baptiste-Lasselle"

[original]
    author = "Gravitee.io"
    homepage = "https://github.com/gravitee-io/gravitee-docs"
~/hugofied-gravitee-doc$ # index.html has exactly same content than all themes/gravitee-docs/layouts/*/index.html
~/hugofied-gravitee-doc$ ls -allh themes/gravitee-docs/layouts/*/index.html
-rw-r--r-- 1 jibl jibl 3.7K Dec  7 15:25 themes/gravitee-docs/layouts/_default/index.html
-rw-r--r-- 1 jibl jibl 3.7K Dec  7 15:19 themes/gravitee-docs/layouts/testjb2/index.html
-rw-r--r-- 1 jibl jibl 3.7K Dec  7 15:25 themes/gravitee-docs/layouts/testjb/index.html

  • Finally :
    • The themes/gravitee-docs/layouts/testjb2/index.html theme Layout file contains the following sentence:
  I am the [themes/gravitee-docs/layouts/testjb2/index.html] file
  • The content/_index.md content file contains the following sentence:
VoilΓ  le `content/_index.md` Γ  la racine du rΓ©pertoire hugo `content`.

Tests :

  • I stop any server, delete the public/ folder, and run the hugo command, result is :
    • All Html files in the public/ folder are empty.(Not even one character inside), except public/index.html
  • I then start the hugo server in watch mode, with hugo serve --watch -b http://127.0.0.1:1313/, result is :
    • the page at http://127.0.0.1:1313/ exists (no 404), I can see the rendered public/index.html, and I know it is built from the 2 themes/gravitee-docs/layouts/testjb2/index.html, and content/_index.md files, because it contains both of the sentences present in those 2 files.
    • the pages at the following URLs exist (no 404), and all display a blank page (replace below BASE_URL by http://127.0.0.1:1313 ) :
      • BASE_URL/test/
      • BASE_URL/test/test1
      • BASE_URL/test/test2
      • BASE_URL/test/test4
      • BASE_URL/test2/test3
      • BASE_URL/testjb2/test6

You can checkout my source codeexactly as I described it here, with my git tag https://github.com/gravitee-lab/hugofied-gravitee-docs/releases/tag/HUGO_ANSWER_ONE :

git clone https://github.com/gravitee-lab/hugofied-gravitee-docs
cd hugofied-gravitee-docs/
git checkout HUGO_ANSWER_ONE
hugo serve --watch -b http://127.0.0.1:1313/

Now I am sure we are getting very close to make clear how to use a layouts in hugo, and we willfind what I am doing wrong, but I really am dismayed of my test results, now…

You have HTML outside the {{ define ... }} block, which is breaking things.

<!-- Navigation -->   <-- this bit
{{ define "main" }}

<nav class="navbar navbar-inverse navbar-fixed-top">

Docs: https://gohugo.io/templates/base/#override-the-base-template

2 Likes

Thannnkkk youuu so much !!!

Now I understand of coursethe rule thatI was missing.

Also note :

  • For the root page only,with the change you suggested, what happened is that the whole HTML generated by the defined went missing.
  • All that I had to do, to recover the rootpage, is :
    • to remove the layouts/index.html and layouts/_default/index.html, and then I had my content back on !
    • I honestly do not understand the use of the index.html in combination with a baseof.html, but basically, no more index.html files in the layouts folder for me from now on…!

Anyway thank you so much for taking the time to drag me out of this issue !

To thank you all (I do not know if you are from the gohugo Team or not), I released a git flow release of my repo, which gives a quite well self explanatory (see Release notes) example of how to manage content with layout, using baseof / single / list HTML layout files :

For future People asking similar questions, this might help speed up going beyond the difficulty.

Glad to have helped!

To answer the question of index.html vs baseof :

Usually, baseof is where you would put the things that don’t change across your site, so that you don’t repeatedly have to add the same lines of code multiple times. This is usually what’s in the <head> tags, maybe the js scripts, etc.

index.html (which can be layouts/index.html, layouts/_default/index.html, etc) is the layout that Hugo uses to generate your homepage, ie the root of your site.

If you don’t have a specific index.html layout, Hugo will default to using your _default/list.html, because the homepage is also a list page.

The longer explanation of this, and how Hugo selects which layout file to use is covered here: https://gohugo.io/templates/lookup-order/

So, for example, if you look here: https://gohugo.io/templates/lookup-order/#examples-layout-lookup-for-home-page

that will show you where Hugo looks for layout files (and in which order) to figure out how to generate your homepage.

2 Likes

So to sum it up: If you don’t want your homepage to be built as a List, then you would rather use index.html.

Thank you so much, real clear and valuable conclusion on the management of my issue.

I think the gohugo documentation would really be more useful if, instead of a 10 pages long table of lookup order reference , it would give an example as the one I gave with the relase I below gave, plus this discussion, and conclusion.

gohugo is awesome, and would really gain a lot, by making its documentation a lot more friendly, with a a much more developed quickstart tutorial.

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