Creating a Layout for Content with multiple Subfolders?

support
1

Hello,

I’m looking for a good tutorial or explanation how you can create relatively clean Layouts for Content with 3 or 4 subfolders in Hugo. Most tutorials I found are mostly very basic and end with section 1 or section 2 unfortunately.

I don’t want 4 “Sub-URLs”, but I would like to order my content with at least 3, maybe 4 subfolders in the /Content folder.

First subfolder is for /posts, second for /authors (Author1, Author2…), and subfolder 3 & 4 for the topics and subtopics, so like this

/Content

├── posts
    └── author1
         └── topic
              └── post.md
              └── post2.md
         └── topic2
              └── post.md
         └── topic3
              └── post.md
              └── post2.md
              └── post3.md
    └── author2
         └── topic
              └── subtopic
                   └── post.md
    └── author3
         └── topic
              └── ....
    └── author4
         └── ...
└── basic
    └── about.md
    └── imprint.md
└── index.html

Personally I have problems getting the Layouts working for content in the 3rd or 4th subdirectory.
If you know good tutorial or have suggestions for me what I could do I would be very thankful :slight_smile:

I think a lot websites use more than 2 subfolders for organizing their content, so this could be useful to know for other people too.

2

Your content structure does not include any _index.md files, so the only section is the top level section (posts).

I’m not sure what you’re trying to accomplish.

If you like the structure above, but want to eliminate the “sub-URLs”, create a permalinks setting in your site configuration. See https://gohugo.io/content-management/urls/#permalinks.

3

I have the _index.md files included in every folder, but for better readability I left these out in this example. “index.html” is of course “_index.md” here. Sorry for the confusion, you can ignore it.

This is what I’m trying to accomplish now:

  1. I would like to remove the /posts section from URL; so the end user only sees the directories AFTER /posts, like here https://www.myhugosite.com/author1 or https://www.myhugosite.com/author1/topic/post2

The /posts folder is only FOR ME to organize my content and should not be relevant for the page at all. I already tried out Permalinks. It’s working, but I can’t get rid of /posts without breaking the page structure. /posts keeps rendering, even if I include this into the Frontmatter:

_build:
render: never
list: never

Is there a way how I can completely ignore the /posts section and make the Author directories the first subdirectory without deleting the /posts folder?

  1. I would like to create slightly different Headers for every author (different Name and Image) + make different Head Layouts for e.G. Table Pages, Link-Lists and so on because I use different CSS files for the sites.

That’s why I was asking for a more detailed Layouts tutorial because it’s a bit more complicated what I’m trying to do. As a beginner this can be very overwhelming

4

Okay it seems like I get closer to a solution for the first problem. Here’s what to do

  1. Write sth. like posts: /:title or posts: /:slug into your config.yaml file.
  2. In the Layouts folder rename the respective list.html to empty.html
  3. Add this code into the empty.html file
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="refresh" content="0; url=/404/" />
  </head>
</html>
  1. In content/posts (or your first section) create an “index.md” File (NOT _index.md).
  2. In this index.md file set “Layout: empty” and “headless: true”.

(I got the infos from here: How to disable section but child are accessible? - #5 by Marek_Lichtner )

Update: I added this to my _index.md file in the Author subdirectory. Now the Author List page is rendering:

_build:
  list: true
  render: true
5

To remove “posts” from the permalinks…

content structure 
content/
├── posts/
│   ├── section-1/
│   │   ├── section-1-1/
│   │   │   ├── _index.md
│   │   │   ├── a.md
│   │   │   └── b.md
│   │   ├── section-1-2/
│   │   │   ├── _index.md
│   │   │   ├── c.md
│   │   │   └── d.md
│   │   └── _index.md
│   ├── section-2/
│   │   ├── section-2-1/
│   │   │   ├── _index.md
│   │   │   ├── e.md
│   │   │   └── f.md
│   │   ├── section-2-2/
│   │   │   ├── _index.md
│   │   │   ├── g.md
│   │   │   └── h.md
│   │   └── _index.md
│   └── _index.md
└── _index.md

site configuration 
[permalinks.page]
posts = '/:sections[1:]/:slug/'
[permalinks.section]
posts = '/:sections[1:]/'

content/posts/_index.md 
+++
title = 'Posts'
date = 2023-08-06T07:56:11-07:00
draft = false
[_build]
render = 'never'
list = 'never'
+++

published site 
public/
├── section-1/
│   ├── section-1-1/
│   │   ├── a/
│   │   │   └── index.html
│   │   ├── b/
│   │   │   └── index.html
│   │   └── index.html
│   ├── section-1-2/
│   │   ├── c/
│   │   │   └── index.html
│   │   ├── d/
│   │   │   └── index.html
│   │   └── index.html
│   └── index.html
├── section-2/
│   ├── section-2-1/
│   │   ├── e/
│   │   │   └── index.html
│   │   ├── f/
│   │   │   └── index.html
│   │   └── index.html
│   ├── section-2-2/
│   │   ├── g/
│   │   │   └── index.html
│   │   ├── h/
│   │   │   └── index.html
│   │   └── index.html
│   └── index.html
├── favicon.ico
└── index.html

1 Like
6

Thanks a lot, This is the content structure I use, I will try the Permalinks option.

One little more question: What exactly does (') mean in ‘/:sections[1:]/’ ?
Does it leave the specific path empty? I couldn’t find this on Hugos documentation page.

And sorry for the 3 posts. Won’t happen again.

7

The ' is just a single quote, encapsulating a string in TOML. You can use a double quote (") if you would prefer.

[permalinks.page]
posts = "/:sections[1:]/:slug/"
[permalinks.section]
posts = "/:sections[1:]/"
8

Oh of course, I see. I’m mostly using the double quotes " ".
I first thought it’s some kind of placeholder like * or . :slight_smile:

1 Like
9

I followed your instruction and it worked. The /posts section is gone now. Section 1 is /Section1 .

But now Section-1 can’t access their child pages anymore because Hugo still builds the lower-sections with the old URL /posts/section-1/section-1-1 .

No matter how I changed the Config Permalinks, it’s seemingly only affecting /posts and section-1.
So I changed the URLs manually to “/section-1/section-1-1” etc. in the Frontmatter.
Unfortunately Section-1 still can’t list their child pages.

Is there a workaround, how I can get access to the child pages again, or am I doing sth. wrong?
It seems like the sub sections are still officially stored under /posts/section-1 , although I edited their URL in the Frontmatter.

10

I’m not sure what you’re doing, but what I described works as intended. Try it:

git clone --single-branch -b hugo-forum-topic-45618 https://github.com/jmooring/hugo-testing hugo-forum-topic-45618
cd hugo-forum-topic-45618
hugo server
1 Like
11

This is extremely helpful. Thanks for the big effort!
I still don’t exactly know what was the problem. Everything is indeed working as expected. Also, if I adapt it to my Layout - It works :slight_smile:

Only the following confuses me:

  1. I created a new Hugo Site, copied everything from your site into my project and I still got /posts on every page. Same as on my regular website.

  2. I created another new Hugo Site. Now I DELETED EVERYTHING inside and pasted your archetypes, content, layouts, resources, static folder and the hugo.toml + .hugo_build.lock files into this new Hugo Site and it worked like a charm.

I’m relatively sure, that I made no mistake in 1, so I’m wondering what could be the reason?
I use the newest Hugo extended version for Linux and Hugo automatically creates me a standalone “assets” and a “data” folder, which wasn’t in your project. Can this be the reason?

12

I’m pretty sure that you did, but impossible to say without seeing your original repository. At this point it’s not worth your time.

No.

13

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.