Using specific theme for one section

support
1

I want to use one basic theme for all sections except About section and another specific theme for About.

Here’s the information of config.toml:

[menu]
  [[menu.main]]
    name                   = "Sci-Tech"
    weight                 = 1
    identifier             = "sci-tech"
    url                    = "sci-tech/"


  [[menu.main]]
    name                   = "Blog"
    weight                 = 2
    identifier             = "blog"
    url                    = "blog/"

  [[menu.main]]
    name                   = "About"
    weight                 = 5
    identifier             = "about"
    url                    = "about/"

I found the tutorial of Theme Components.
But, after setting the theme as below, I don’t know how to specify the theme in About section:

theme                      = ["AllinOne", "hugo-resume"]

Could you help me with this problem?

I searched several questions (1, 2, 3) related to this, but didn’t get the answer.

1 Like
2

You are on the right track. I’m using the reveal-hugo theme in a specific section.

config.toml

theme = ["now-ui", "reveal-hugo"]

[outputs]
home = [ "HTML", "RSS", "JSON" ]
section = [ "HTML", "RSS"]
taxonomy = [ "HTML", "RSS"]

[outputFormats.Reveal]
baseName = "index"
mediaType = "text/html"
isHTML = true

Then, on pages of a section called slides, I use this frontmatter where the last line is what you want:

---
date: 2019-01-08T16:22:59Z
description: ""
draft: true
resources: 
- src: john-cameron-737252-unsplash.jpg
  name: "header"
outputs: Reveal
---

I think that’s all you need.

4 Likes
3

@brunoamaral nice solution. I did not know about this.

4

can’t really take credit, @zwbetz, but i also don’t remember the source where I found it.

5

Thanks @brunoamaral !
I tried your method for AllinOne with hugo-orbit-theme for About section using your method.

But, it seems hugo-orbit-theme doesn’t work for that section.

This is part of the config.toml:

[outputs]
home = [ "HTML", "RSS", "JSON" ]
section = [ "HTML", "RSS"]
taxonomy = [ "HTML", "RSS"]

[outputFormats.hugo-orbit-theme]
baseName = "index"
mediaType = "text/html"
isHTML = true

This is part of the index.md under About section:

+++
date = "2018-01-06T02:15:26+08:00"
draft = false
title = "About"
outputs = "hugo-orbit-theme"
+++

You can check my source code on the repository.

6

I forgot to tell you that in the other theme, the files need to be labeled with something like index.hugo-orbit-theme.html.

I took a quick look and the orbit folder is empty when I clone.

But I also found a few issues in the config toml section that caused the about page not to be rendered:

[permalinks]
  sci-tech                 = ":year/:month/:day/:slug/"
  project                  = ":slug/"
  blog                     = ":year/:month/:day/:slug/"
  profile                  = ":slug/"

I don’t think you need this section the way it is now. It seems that you are trying to get specific sections to have their own permalink structure. Hugo will do that based on the directory tree under /content/.

7

Thanks!

I deleted permalinks to make sure it works well.
For the empty orbit folder, it maybe the problem of Internet?
You can check it by that GitHub link directly.

But, I don’t understand that the files need to be labeled with something like index.hugo-orbit-theme.html..
As you mentioned before, outputs option is added to index.md under About directory.
How to label it?

8

i said label but I should have said rename :slight_smile:

image
image.jpg726×858 128 KB

In my test I used “orbit” because it was easier to write.

9

Aha, get it.

I’ve changed theme name to orbit :slight_smile:

So, here’s the content of config.toml:

theme                      = ["AllinOne", "orbit"]

[outputFormats.orbit]
baseName = "index"
mediaType = "text/html"
isHTML = true

Then, I labeled orbit to several file:

image
image.png917×487 39.9 KB

However, I got this warning when using hugo server:

Change detected, rebuilding site
2019-08-05 19:41:20.533 +0800
WARN 2019/08/05 19:41:20 Page's .RSSLink is deprecated and will be removed in a future release. Use the Output Format's link, e.g. something like: 
    {{ with .OutputFormats.Get "RSS" }}{{ .RelPermalink }}{{ end }}.
WARN 2019/08/05 19:41:20 Page's .URL is deprecated and will be removed in a future release. Use .Permalink or .RelPermalink. If what you want is the front matter URL value, use .Params.url.
WARN 2019/08/05 19:41:20 found no layout file for "JSON" for "home": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
Total in 10 ms

And, the About page is 404 page not found.
If I delete JSON in outputs, that warning about JSON disappeared, but the About page is still 404.

Sorry, I’m not familiar with web. Maybe I need to create some files for that page?
BTW, the 404.orbit.html, list.orbit.html and single.orbit.html are all empty.

10

Yes, it’s because these files are empty that you are getting a 404, I think.

11

However, these files in the original orbit theme are empty and it works well.
I can’t figure how to add list.orbit.html and single.orbit.html to make it work as same as that.

12

So that means that the orbit theme does not have a single.html template page. Therefore you will need to choose a different theme that does.

13

OK. I switched to another theme hugo-resume which contains all html files.
However, the page of About section just shows the title when using hugo server.
It doesn’t use these htmls.

image
image.png650×650 18.8 KB

BTW, after I uploaded these to GitHub, that page appears as the basic theme:

web
web.jpg1143×791 122 KB

14

you seem to be missing steps in implementing the second template, but I can’t verify because the theme you installed is a sub-module.

If you can’t figure it out, I can take a look during the weekend.

15

Thank you for your help!

I find that the About section uses the section.resume.html, instead of index.html, in the hugo-resume theme.
Is that because About is a section?
BTW, after copy the content in the index.html to section.resume.html, it shows but some other problems appears.

I’m trying to fix these problems and tell you the result before the weekend :slight_smile:

16

Aha, finally figure out how to fix it.
This is the modified demo: https://zxdawn2.github.io/about/
Thanks again!

17

Awesome! Glad you got it working :smiley:

18

There’s a strange thing left:
the article in the Blog section also uses the resume theme, it should have used the basic AlliOne theme.

BTW, I don’t assign outputs values in that md file:

---
title: "Test_blog"
date: 2019-07-08T16:36:48+08:00
draft: false
categories: ["Blog"]
tags: ["test"]
---
19

it will always use the main theme unless you set a output param.