Layout doesn't work but Type sets the layout---why?

support
9

Content Type

content
└── post/
    └── post-1.md

content/post/post-1.md

+++
title = "Post 1"
date = 2021-01-01T00:00:00-00:00
draft = false
+++

The content type is not explicitly defined in front matter. The type is inferred from the top level section: post.

Example 1

With this layout structure:

layouts/
└── _default/
    ├── baseof.html
    ├── list.html
    └── single.html     <-- Post 1 uses this

the “Post 1” page will use layouts/_default/single.html.

Example 2

With this layout structure:

layouts/
├── _default/
│   ├── baseof.html
│   ├── list.html
│   └── single.html
└── post/
    └── single.html     <-- Post 1 uses this

the “Post 1” page will use layouts/post/single.html.

Example 3

Now let’s specify a different layout for the “Post 1” page:

+++
title = "Post 1"
date = 2021-01-01T00:00:00-00:00
draft = false
layout = "condensed"
+++

This won’t change anything, because we have not created the “condensed” layout yet. The “Post 1” page will still use layouts/post/single.html.

Let’s create the “condensed” layout:

layouts/
├── _default/
│   ├── baseof.html
│   ├── list.html
│   └── single.html
└── post/
    ├── condensed.html  <-- Post 1 uses this 
    └── single.html

Now the “Post 1” page will use layouts/post/condensed.html.

Example 4

Now let’s create a new content type, article.

content/
├── article/
│   └── article-1.md
└── post/
    └── post-1.md

+++
title = "Article 1"
date = 2021-05-08T13:01:07-07:00
draft = false
+++

With our existing layout structure, the “Article 1” page will use layouts/_default/single.html.

Example 5

What if we want “Article 1” to use the “condensed” layout?

+++
title = "Article 1"
date = 2021-05-08T13:01:07-07:00
draft = false
layout = "condensed"
+++

That doesn’t work. The “Article 1” page will still use layouts/_default/single.html. Why? Because Hugo is looking for layouts/article/condensed.html or layouts/_default/condensed.html, neither of which are defined.

What can we do?

Option 1 (Bad Idea)

Explicitly set the content type for the “Article 1” page to post.

+++
title = "Article 1"
date = 2021-05-08T13:01:07-07:00
draft = false
layout = "condensed"
type = "post"
+++

Now the “Article 1” page will use layouts/post/condensed.html.

Why is this a bad idea? Because now both “Post 1” and “Article 1” will appear when we do this:

{{ range where .Site.RegularPages "Type" "post" }}

Option 2

+++
title = "Article 1"
date = 2021-05-08T13:01:07-07:00
draft = false
layout = "condensed"
+++

layouts/
├── _default/
│   ├── baseof.html
│   ├── condensed.html  <-- Article 1 uses this 
│   ├── list.html
│   └── single.html
└── post/
    ├── condensed.html  <-- Post 1 uses this 
    └── single.html

Now the “Article 1” page will use layouts/_default/condensed.html, and the “Post 1” page will use layouts/post/condensed.html.

Option 3

+++
title = "Article 1"
date = 2021-05-08T13:01:07-07:00
draft = false
layout = "condensed"
+++

layouts/
├── article/
│   └── condensed.html  <-- Article 1 uses this 
├── _default/
│   ├── baseof.html
│   ├── list.html
│   └── single.html
└── post/
    ├── condensed.html  <-- Post 1 uses this 
    └── single.html

Now the “Article 1” page will use layouts/article/condensed.html, and the “Post 1” page will use layouts/post/condensed.html.

3 Likes