If it's possible to build and show complex components in one page from several separated files?

support
1

Hello, friends! I’m looking at Gohugo docs repository for learning purposes.
Here is our example Showcase page: Showcase: PHARMASEAL
Here is the direct link for the page above: hugoDocs/content/en/showcase/pharmaseal at master · gohugoio/hugoDocs · GitHub

image
image989×606 149 KB

So we saw there 3 separate files:

  • Main image
  • Bio (content on the left sidebar)
  • And main content in the center of the page.

So page was built using 3 different files, which makes possible to build advanced page layouts and very simple at the same time. I like it a lot.

I have 2 questions, let me ask please:

  1. We saw in the repository bio.md file, why Hugo didn’t build separate page for bio.md markdown? I thought Hugo will build pages by default for all mardown pages, something like /showcase/pharmaceal/index and /showcase/pharmaceal/bio? In this case, of couse we don’t need bio.md page, because it’s just extra duplicate of content, which not necessary.
  2. If I want to build showcase card instead separate page for showcase. Let’s say, I wan’t to convert the page above to component, and in the one page should been displayed a lot of showcases with full content in the cards. Can I build a complex component within one page? Instead building a separate page using index.md file + 2 extra files (bio.md + image). Basically I want to use files like index.md + bio.md + image to build one component, not a one separate page.

Sorry for the bad English and grammar errors, I’m not a native speaker.

2

Hi!

Read up on Page bundles | Hugo and you will see how it works.

When you have tested and get stuck, post your question and a link to your repo so we can see the code. A lot of helpful people here in the forum but without the code they can only guess.

3

Thank you a lot for the answer! Looks like page bundles exactly what I needed.
I’m not coding my site yet, please, let me ask one question.
If I have article about Toyota cars, like:

posts
   toyota
      index.md

Then I create separate folder within my post, where I contain content of components, in my case it’s a different car models of toyota. Like:

posts
   toyota
      index.md
   camry-folder // which is component, not a page, doesn't contain index.md file
      camry.jpg
      price.md // content with price
      pros-cons.md 
      description.md
   corolla-folder // another car
      corolla.jpg
      price.md
      pros-cons.md 
      description.md

Can I do something like that? Then build car model components using markdown and image files within my folder?
In the end, I want to build a component like that:

image
image790×358 65.3 KB

4

I’m stupid, I can’t understand, how I can render data from children-folder into my index.md page in the post (parent) folder.

5

Also on the page budles page:

Branch vs Leaf folders

Use _index.md (leading underscore) instead of index.md

6

What you need is Resources | Hugo.

And your content need to be organised like this:

posts
    toyota
        index.md
        camry-folder // which is component, not a page, doesn't contain index.md file
            camry.jpg
            price.md // content with price
            pros-cons.md 
            description.md
        corolla-folder // another car
            corolla.jpg
            price.md
            pros-cons.md 
            description.md

This makes “toyota” directory in to a leaf bundle with a lot of resources.

7

As I understand it @zhandosweb want a leaf bundle and then “index.md” is the correct naming.

8

The problem with using a leaf bundle: you can’t (easily) iterate by subdirectory. To me, this is a section page with content views (e.g., .Render “card”).

9

Did not think about the iterate issue, good point.

Yes, doing it as a section and marking the sub post not to render, only list, would work.

10

“marking the sub post not to render, only list”
What is this mean, sir? Little bit explanation, please?
I’m trying to leave from React to no JS, pure HTML websites.
But GoHugo too complicated to undrestand(framework only for smart old farts like you sir, lot of things complicated in documentation(
And no properly coded templates where I can learn (most of themes just hard code components in HTML, don’t make them reusable, etc).

11

That’s probably not the best way to encourage others to help you.

12

Sorry, language barrier)) It was supposed to be a compliment.

13

Then I will assume you intended to say “old-timers” or similar :slight_smile:.

1 Like
14

If you know React I assure you that Hugo is easy in comparison.

Get started on your site and when you hit a road block, share your repo and ask question here.

Start with the less complicated pages and get to know Hugo. When you understand the basics the documentation will start to make a lot more sense.

2 Likes