How to display a particular nested section differently

[idadel]

Hello everyone,
I’m new to hugo and the content of my site has a couple of sections. I decided to include subsections to one of these new sections. I wanted to ask how to target a particular section to display a particular partial. Looking at what we have below I want the page to be displayed differently when in the blockchain subsection. The various pages in the subsection should be listed differently from how they are listed out when we are in the first-level sections. I want to use an if statement to target these particular sections to have them display differently but I think I am missing something because I keep getting errors. Please how do I achieve this?

[jmooring]

@idadel

how to target a particular section to display a particular partial

Do you mean “a particular template” instead?

@idadel

pages in the subsection should be listed differently

Do you mean “displayed differently” instead?

I am trying to figure out whether you want to render things differently on list pages, or on content pages, or both.

It would be easier to help you if you were to share your code. See:
https://discourse.gohugo.io/t/requesting-help/9132

Let us see your code

Include a link to the source code repository of your project, because we really need the context of seeing your templates and partials to be able to help you. It is trivial to do a quick git clone on your repo, then run hugo server in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.

If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.

[bep]

I think your simples approach would be to set a specific type using cascade to match the sub section and all its pages and then create layout file(s) for that below /layouts/mytype.

Front Matter

[idadel]

Here’s the code GitHub - Idadelveloper/inventory: UNICEF Open Source Inventory. A UNICEF Global Innovation knowledge base of best practices and resources for working and leading Open. and the theme is a submodule in the main repo. So here’s the theme’s repo (GitHub - Idadelveloper/inventory-hugo-theme: Theme used with UNICEF Open Source Inventory portal. Forked from Dot, a Hugo theme by ThemeFisher.). So currently I am trying to add a new section known as cohorts which will have multiple subsections like blockchain, drones, etc. And in these subsections, we will have content files. There is already a standard way for listing out the content. You can see how it is displayed here (Documentation)
These new subsections I am trying to add take the same format so I am trying to figure out how I can target just these subsections and have them display differently.

content
└── cohorts        
│├── blockchain
││   ├── _index.en.adoc
││   └── sample.en.adoc   
│├── drones               
││ └── _index.en.adoc
││ └── sample.en.adoc
│└──_index.en.adoc 
│
├── communities
│      └── _index.en.adoc
│      └── sample.en.adoc
│
├──  data
        └── _index.en.adoc
        └── sample.en.adoc

So the directory tree stucture will look somwhat like the above. I want to condition the list display of blockchain and drones different from the list display of cohorts, communities, and data.

PS: I’m currently working on this nested section feature so it’s not yet in my repo.

[jmooring]

Expanding upon bep’s answer…

config.toml

[[cascade]]
  type = 'foo'
  [cascade._target]
    path = '/cohorts/*/**'

Then create the required/desired templates:

mkdir -p layouts/foo
cp themes/inventory/layouts/_default/single.html layouts/foo/
cp themes/inventory/layouts/_default/list.html layouts/foo/

URL	Template Used
inventory/cohorts/	themes/inventory/layouts/_default/list.html
inventory/cohorts/blockchain/	layouts/foo/list.html
inventory/cohorts/blockchain/sample/	layouts/foo/single.html

[idadel]

@jmooring for some weird reason inventory/cohorts/blockchain/sample/ uses themes/inventory/layouts/_default/single.html instead of layouts/foo/single.html.
I don’t know what I am missing…

[jmooring]

@idadel

I don’t know what I am missing…

Without seeing your code, neither do I.

Please update your repository with your most recent changes.

[jwf]

To add context for the look-and-feel we are going for, see the below screenshots. A Figma board we are working from with wireframes has more context too.

@jmooring @bep Thanks for your on-going support in helping us figure out the best approach to take on implementing this!

The index page for a sub-section:

[jwf]

Splitting this up into two posts since I am a new user, and I can only embed a single image/screenshot into a post:

A specific page within the sub-section:

[idadel]

@jmooring I created a branch with my changes here GitHub - Idadelveloper/inventory at teams

For the themes since it’s a submodule, my changes will go to the main repo here GitHub - Idadelveloper/inventory-hugo-theme at teams
I added a cohorts.html partial and that’s what I expected to be displayed. There’s an if condition there for the content pages which for now I expect to see an h3 title “About”. But like I earlier said it’s rather themes/inventory/layouts/_default/single.html being used instead of layouts/foo/single.html for the content pages (eg content/cohorts/blockchain/kotanipay.en.adoc)

I will also like to have the cohorts.html partial be in the inventory repository and not in the themes repo since the themes repo is being utilized by another project and this particular change I am working on is specific to this project. How could I achieve this, please?

[jmooring]

I did this:

git clone --recurse-submodules https://github.com/Idadelveloper/inventory/
cd inventory/
git checkout teams
hugo

and got this:

Error: Error building site: failed to render pages: render of “section” failed: “/home/jmooring/temp/inventory/layouts/foo/list.html:3:3”: execute of template failed: template: foo/list.html:3:3: executing “main” at <partial “cohorts.html” .>: error calling partial: partial “cohorts.html” not found

So…

1. The “cohort” partial is missing. Perhaps it is in another branch.
2. The “foo/list.html” template is called.

I also noticed that you set the cascade values in both of these files:

• content/cohorts/blockchain/_index.en.adoc
• config.toml

It should only exist in config.toml.

@idadel

I will also like to have the cohorts.html partial be in the inventory repository and not in the themes repo

Place it in the project’s layouts/partials directory. Hugo will look in the themes/modules first, then in the project directory.

[idadel]

I placed the cascade values in the config.toml file initially and it did not work. That’s why I later placed them in content/cohorts/blockchain/_index.en.adoc

[jmooring]

@idadel

I placed the cascade values in the config.toml file initially and it did not work.

Yes, it did. Placing it in the site configuration file is sufficient.

It did not apply to files such as “content/cohorts/blockchain/grassroots.en.adoc” because you have already set the type in front matter. The cascade does not overwrite existing values.