Single page with nested content

We are going to apply a page with multiple sections on a single page. I am not sure if I am on the right track doing this and if Hugo is intended to do this.

The issue is that the structure of content on Websites become more complex as just having a single content container and included content in a sidebar which the same content is also included in other pages.

It becomes more like having first a section with a carousel, then a section with 3 coloumns and so on. most of the content parts are unique so it will be nice having this parts close to the page in file path.

Regardless to the complexity of a page i would like to leave the simplicity of markdown and break sections and parts of it apart, structured in folders and markdown files.

like so:

page-1/
     index.md
          sections/
               section-1.md
                    sectionpart/
                         left.md
                         right.md
               section-2.md
               section-3.md

page-2/
     index.md
          sections/
               section-1.md
               section-2.md
               section-3.md
               section-4.md

     subpage-1/
           index.md
               sections/
                    section-1.md
                    section-2.md
                    section-3.md

When I implement the Website like this, then every page like /page-2/sections/section-1.md will be accessible. And that is not what we want.

We thought also to implement the section structure with shortcodes but then the markdown-file will not be as simple as intended.

do you have a clue to go on?
thanks

Im currently working on the same problem but im not sure if your way correct, what do you think?
For me, the correct hugo - way would be by shortcodes, but im not sure how i can solve it.

Look at my idea for the file structure:

page-1/
    index.md

Within the file index.md it looks like this:

+++
title = "Page with sections"
+++
Page with sections

{{< section cass="is-grey" >}}
     {{% left %}}Content of left column{{% /left %}}
     {{% right %}}Content of right column{{ /right %}}
{{< /section >}}

So, is there any way to resolve this problem? Whats the right way?

Have a good day, thanks.

Sadly, there’s no great way to do that right now. I wrote a quick tip post on how to do that recently: https://discuss.gohugo.io/t/load-multiple-content-files-in-a-single-template/2566

You’re looking to create an empty page with a few slots, and to fill those slots with bits of content. This is what a content creator would do. As far as I understand it, Hugo is built with developers in mind instead. It kind of the other way around. By default, it takes 1 single content file and parses it through a template.

In other words, it doesn’t provide the tools to answer the logic: I have a page with multiple blocks - let me manually fill those blocks. Surprisingly enough, even HTML didn’t provide a way to do that for the longest time! And even nowadays, the HTML file import function is unsupported in most browsers.

Right now, if you need to design a static page, I’d recommend that you do it directly in HTML and mix it with the tip above. It doesn’t take too much time! I’ll prepare a proper feature request for that, so hopefully we can get manual content file imports in templates in a future version :smile:

1 Like

Hi gdguest,

thank you for your answer. So my conclusion is, that there is at the moment no complete correct and complete wrong solution. Did i understand correct, that your solution makes it necessary to delete after rendering the empty directories?

Keep me posted about your feature request, thanks.

That’s that! You don’t need to delete the extra files though. Just assign them to an empty template, and Hugo will generate empty files. But it would be cool if we could have a variable like:

generatePage: false

Or something similar in the posts’ front end - just so everything stays clean in the export folder.

@gdquest How would generatePage: false provide added functionality that isn’t already addressed via buildDrafts and buildFuture?

@rdwatters i think @gdquest means with generatePage: false that the page itself would not been rendered but the content of itself could used in another template via .Sites.Pages (like that), right?

buildDrafts and buildFuture is not the solution for that because when you, for example, set buildDrafts: true the page isn’t available in .Sites.Pages

We don’t need another flag for this. Hugo should just not write empty files.

Additionally we need a better approach to multi content pages.

I’ve also considered adding a content flag called “hidden” which would render the content but not include it in any of the listings. I’m not sure if this is a good idea yet and it would take some work to get it right. I’m also not sure as to what the ideal behavior would be. Ignore from pages. Ignore from taxonomies? Ignore from site maps?

1 Like

@Adrian I just tested buildDrafts: true in config.toml, then I set draft: true in sample-content-one.md in a starter kit I’m putting together, and then created a quasi json index with .Site.Pages in a separate template (layouts/section/json.html). Everything rendered in the expected manner.

As far as the page not being rendered with it’s full content, the solution from @gdquest is a good one based on content typing (I think?). I agree with @spf13 that an extra flag would make this more complicated than necessary. If you are looking for something similar to your request for the generatePage flag you’ve mentioned, something akin to the following may work for your use case:

<!--content/posts/my-content-sample.md-->
---
title: My Sample Content File
date: 2016-02-11
author: Ryan Watters
generatePage: false
---

Then in your single template:

<!--layouts/posts/single.html-->
{{ if .Params.generatePage "!=" "false"}}
{{ partial "my-header-partial.html"}}
<h1>{{ .Title }}</h1>
{{.Content}}
<!--yada,yada,yada....-->
{{ partial "my-footer-partial.html" }}
{{ end }}

This would create a blank page but still make the content data available to you in .Site.Pages. That said, it’s just a blank page and would still create mysite.com/posts/my-content-sample/index.html. With my example, you’d also have the issue of your <head> still rendering in the blank index.html, but that’s more a matter of the way you’re structuring your partials.

Then in your list page (eg, if you want to include something as post data but don’t want the page to come up in a list for whatever reason [unlikely use case, but you get the picture]):

<!--layouts/section/posts.html-->
{{ partial "my-header-partial.html"}}
<h1>{{.Title}}</h1>
<ul>
{{ range where .Data.Pages "generatePage" "!=" "false" }}
   <li>{{.Title}}</li>
{{ end }}
</ul>
{{ partial "my-footer-partial.html" }}

Keep in mind that you can also use data and data-driven content just about anywhere in any template. You can reference individual data files housed in your /data folder or external resources (eg, via a json file hosted elsewhere). As @gdquest also mentioned, you can create your landing pages as static html files too if you want to deviate from the otherwise hierarchical model of home > list > content.

I know that @gdquest mentioned use of RED as a way to remove the empty index.html files/directories after build, but there may be a way to do this as part of a bash script in, for example, a wercker.yaml if you are interested in using Wercker to automate your build and deploy. I recently got the hang of it thanks to help from @ArjenSchwarz, so let me know if I can lend a hand.

@spf13 The more time I spend on these forums (and reading the documentation), the more I realize there are workarounds for just about every use case. I guess the question for many, but not all, of these workarounds is:

A. Keep the templating syntax barebones and let the community provide complex workarounds for different use cases (this works, but it’s intimidating to newcomers or people who want to use Hugo in a professional context).
B. Bolster the functions, filters, etc of the templating layer.*

* I don’t know how much B would slow things down. If a lot, there is the tradeoff of readability-of-code-versus-slow-build-times. I’ve stewed a lot on this. I’ll start another topic on my thoughts for V1 or possibly just pm you.

1 Like

Yeah, skipping empty files would be great! How about adding a default hidden layout option, something that works with:

type: hidden

If the bits of content are hidden, in most cases you don’t want it to be part of the sitemap.
To me, a simple behavior where you can just import/include the content somewhere and it’s hidden would definitely work.

i.e., in a partial, something that’d look like:

{{ import landing/right-column.md }}

Something along those lines. But I’m sure there’ll be someone who’ll want to use Range over a folder or something like that.

Thanks for the long reply! Instead of adding a conditional statement in the templates, I prefer to just set

--- layout: empty ---

In the front matter. I’ll look into Wercker as soon as I get the chance! By the way, with data, may you have, by any chance, an example using JSON objects? I’ve really got to get into that, for author banners at the end of posts, stuff like that! It’s lazy for me to ask that way, but I have a lot of work lately, little time to experiment :smile:

"author": { "name": "Mr Dupont", "picture": "dupont.png", "website": "http://someweb.com", "facebook": "mr.dupont.6" },

Thanks much!
Nathan

I was thinking about this also. A few comments from what I’ve seen on what’s been said:

It seems there’s a bit of confusion as to what is required. I understand the same as @Adrian , that the OP wants the content file / data available, but not the page generated by Hugo.

@spf13 For me Hugo does build empty files if i use an empty single.html file as the template

@rdwatters I hadn’t tried buildDrafts but I don’t think it is a solution as it has a specific other purpose, which may still be needed in this scenario.

The way I’m doing it (Hugo generating empty html pages for content i don’t need pages for) works ok as users don’t see it, and upload speed is increased, but would be cleaner without the empty files, so a ‘generatepage: false’ flag would be handy, or Hugo skipping generating the empty files would be useful.

The other way to do this, if the content is not more than front matter and single lines of text is to use data files in /data, which don’t generate pages

Is there an official way of resolving this now or is it @gdquest way the right way for the moment?

Thanks,

Like to bump this issue as I’m interested in a simple way to include markdown content in a single page.

This is a pretty old thread @artelse. Would you mind expanding on what your needs are? Hugo has developed a number of really powerful features in the last 13 months. It’s very easy to add markdown content to a single page in a variety of ways.

Perhaps start a new thread?

Ah, so Hugo has added features to address this issue. I mainly want to include markdown content, title, etc. in a section in another page which could be the home page.