Hello, I have following site structure:
content/
├── city1/
│ ├── suburb1a/
│ ├── suburb1b/
│ ├── suburb1c/, etc
├── city2/
│ ├── suburb2a/
│ ├── suburb2b/
│ ├── suburb2c/, etc
There will be many cities and each city can have many suburbs.
I also have:
content/
├── services/
│ ├── service1/
│ ├── service2/
│ ├── service3/
│ ├── service4/
│ ├── service5/, etc
Each suburb will have links to every service.
I need to pass the city and suburb into each service. IE each service page must have programmatic access to eg the title of the parent city and suburb pages, and maybe some other info, so that eg service1 content can include “service1 in suburb1a, city1”
So far I see 2 ways to do this:
Option 1 - Make each suburb a section and have service leaf bundles under it:
├── city2/
│ ├── suburb2a/
│ ├── service1/
│ ├── service2/
│ ├── service3/
│ ├── service4/
│ ├── service5/, etc
The problem with this is that if I have many cities and many suburbs and each suburb has dedicated set of services, is that there will a lot of sections and pages in the site. And each service is duplicated for each suburb. Eg service1 is exactly the same for each suburb, and so this is not reusing reusable code or content.
My understanding is that Hugo does not programmatically create index.md/html pages, and so this would also be a fair bit of work to manually create pages.
I can (and have) developed Python code to create service leaf bundles under each suburb but I would rather stick to just using Hugo.
The advantage of this option that it is fairly easy and secure to pass info from a parent city and suburb to each service, just using Hugo code.
Option 2 - I have figured out how to create links in each suburb page to every service and pass info in the URL of the link:
In baseof.html:
<script>
document.addEventListener("DOMContentLoaded", function () {
const params = new URLSearchParams(window.location.search);
const foo = params.get("foo");
const bar = params.get("bar");
if (foo) {
document.querySelectorAll(".foo-target").forEach(el => {
el.textContent = foo;
});
}
if (bar) {
document.querySelectorAll(".bar-target").forEach(el => {
el.textContent = bar;
});
}
});
</script>
In /suburb1a/index.html:
<a href="/services/service1/?foo=suburb1a&bar=city1">Service1</a>
In /service1/index.html:
<span class="foo-target"></span>
<br>
<span class="bar-target"></span>
This works fine.
The advantage of this is that I only need to have one page for each service. This means not having to produce dedicated service pages under each suburb.
The disadvantage is that I am showing the suburb and city in the URL of the link, which is not elegant and subject to manipulation and XSS.
So both the options I have come up with IMHO are not ideal.
I was wondering if anyone would have any other suggestions as to how to achieve this? Or how to improve either option that I have listed?
Any help is much appreciated and thanks in advance 
you want the referrer