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

support
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!