How to have two themes for different sections of a site?

support
1

Hi all, I would like to have two themes for my website. A custom themes for the overall website and use the crisp theme for the blog section. What would be the best way to accomplish this?

Thanks,
Norm

2

Can anyone shed some light on this?

3

Hmm, I did this using specific css for the index page, and just used different css in my single, for a certain section. For example, see http://esolia.com and http://esolia.com/about.

4

You can see the repo here: https://github.com/eSolia/eSolia

5

From a static site point of view they just sound like two separate sites that link to each other.

6

Let’s say you have a file abc.html. In that file, you can add

layout: foo

in the front-matter and hugo will use that template for this specific file. Foo.html can be anywhere under the layouts path.

This page has information. https://gohugo.io/templates/content/

So for all the pages that you want to use foo template, just add layout:foo to those files. As a matter of interest, of course, foo.html template can call its own partials.

Please try and let us know.

1 Like
7

Thank you all for your suggestions. I will take them in and report back what I came up with. :slight_smile:

8

Ultimately I took the suggestion of just creating a separate site. The more I thought through what I was trying to do, the more that made sense.

Thanks again.

1 Like
9

thx for this @sudharshan!

here’s what i did (and it works very nicely too!):

  1. using mike dane’s gahugo theme
    with config.toml having theme = 'gahugo'

  2. content directory tree:
    content
    ├── dir1
    │ ├── _index.md
    │ └── itm1.md
    └── dir2
    ├── _index.md
    ├── itm1.md
    └── itm2.md

  3. we want to change the layout for dir1/itm1.md, so create dir1 in layouts and copy themes/gahugo/layouts/_default/single.html as foo.html:
    layouts
    └── dir1
    └── foo.html
    note that we need the foo.html inside of dir1, since that’s where the layout is to be applied. it didn’t work if foo.html was placed in just the layouts directory, so it seems that the content structure needs to be paralleled for this sort of thing.

  4. remove the partial lines inside of foo.html because we don’t want to do anything complicated for this test.

  5. add layout: foo to frontmatter in dir1/itm1

now any changes made to foo.html will show up when you view the page using hugo server -D!

for instance, try changing the color and format of the date in foo from

<div style="color:grey; font-size:16px;">
              {{ dateFormat "Monday, Jan 2, 2006" .Date }}

to

<div style="color:red; font-size:16px;">
              {{ dateFormat "2006-01-02" .Date }}

very nice … and very useful for what i’m planning to do!