Single page with totally different layout to the whole site

support
1

Ok, I have a website with a defined layout and all working well.

My website includes pages like /en/about/ and is using the main predefined layout.

Now, I would like to do a completely new layout for a single page which will be located under /en/about/promo/

It will be like a New page inside the Current page. It will have its own meta tags in the header, individual style, etc.

But, the thing TOTALLY different will be, that it will use all individual parts of the layout, NOTHING (with some exceptions like render-image etc.) will be reused from the main layout, which means that it will have its own HEAD, BODY, AND FOOTER and this will be identified through parameter specified in frontmatter, something like that.

---
individual: true
---

Standard lookup order for hugo is

├── _default
│   ├── baseof.html
│   ├── list.html
│   └── single.html
└── index.html

ref: Template lookup order | Hugo

On my website I am not using baseof.html but else is like on the above.

I could introduce baseof.html and through IF statement get this working in theory:

{{ if .Params.individual }}
  <!-- here will be reference to NEW individual layout -->

{{ partial "individual-head.html" . }}

 <body>

  <div>
    {{ partial "individual-content.html" . }}
  </div>

  {{partial "individual-footer.html" .}}

 </body>
</html>

{{ else }}
  <!-- here will go back to default hugo lookup order base on what type of page, taxonomy etc it is. -->
{{ end }}

Where first part is theoretically sorted, how to tell Hugo to do the default lookup order, which is LIST, SINGLE or INDEX from the above?

2

Hi, create

en/about/promo/index.html

as complete page (in static or under content/en/about/promo/.

IMHO hugo will copy any html file

If you will use markdown, start with promo/_index.md as a new section and define the templates under layout/promo

HTH and I’m right

2 Likes
3

Thanks for replay.
Something to think about.

Yes. I would like to have a Markdown file with content to use on that page.

If I understand right, if you put index.html in place this overwrites default layouts.

is that index.html can contain a reference to partials in current layouts, in case I would like to use one or two bits from the current one.

├── /en/about/promo
│   ├── _index.md
│   ├── mystyle.css
│   └── promo.jpg
├── /layouts/promo
│   └── index.html

I will investigate. If this is working as I think it is, this will open whole new idea for using hugo.

Appreciate others comments and ideas of that approach.

4

Ok, got it,

As I just want to have a single page layout changed, I can apply condition into single.html and job done :slight_smile:

Example

{{ if .Params.individual }}

{{ partial "individual-head.html" . }}

 <body>

  <div>
    {{ partial "individual-content.html" . }}
  </div>

  {{partial "individual-footer.html" .}}

 </body>
</html>

{{ else }}

{{ partial "head.html" . }}

<body>

<div id="container">
    {{ partial "header.html" . }}
    <section id="main" class="outer">
        {{ partial "article.html" . }}
    </section>
    {{ partial "footer.html" . }}
</div>

</body>
</html>

{{ end }}
5

it would be simpler to copy single.html to promo.html and set layout = “promo” in frontmatter
So you haven’t to touch single.html

1 Like
6

Will try that as well. Thank you.

7

Yes, that’s even better, thank you!

8

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