How to structure a hugo project to have a multilingual landing page with 2-3 subpages

support
1

Dear all,

I just started with hugo and read a lot in the documentation which is really great.
But it is not really 100% clear for me how to structure a site.

What I would like to do is writing parts like About me, How it works, Contact, this blocks should be arranged on one single page always separated by a picture.
Ideally I have for each block a small .md file that holds the content (so it is easy to maintain and translate it).
You can say it should be a typical landing page. The navigation just point to each block with #about and so on.
If you change the link from / to /en/ you should get the complete page in English, the default language is German.

Besides this main page there will be some (1-3 subpages) hold like data protection (/datenschutz/).

Can anyone please recommend a structure how such a site should be build up with hugo. I really do not need a full example, but some tips, use the following folder structure and following types to build your own theme or use this theme to start from would really extremely help.

Thanks a lot!
Matthias

2

Hi there,

I would recommend reading (a few times) the docs on content organization, multilingual mode, page bundles.

Have a look at themes tagged multilingual, as some of them have exampleSites included.

Then actually try to create a site structure. And finally come back when you have specific questions about why X, Y and Z don’t work.

1 Like
3

Thanks a lot for the links @pointyfar.
I read now all of them and started to play.
I organized now the site the following:
±–archetypes
±–assets
| ±–css
| —js
±–content
| ±–de
| —en
±–data
±–layouts
±–resources
±–static
| —video
—themes
±–bootstrap-bp-hugo-theme
| ±–.github
| ±–archetypes
| ±–assets
| | ±–css
| | —js
| ±–i18n
| ±–images
| ±–layouts
| | ±–partials
| | ±–shortcodes
| | —_default
| —static
| ±–img
| | —flags
| ±–videos
| —webfonts

This works really good, translation is working fine for template string using {{ i18n "Contact" }}.
My content has now a frontmatter like:
—
title: “Willkommen”
date: 2020-03-14T015:00:02+01:00
type: “landing”
titleType: “left” # left, icon
showBreadcrumb: true
weight: 20
menu:
main:
name: “Willkommen”
url: “#willkommen”
weight: 20
pre: “”
—
Similar approach for the english translation which is then located in en/ instead of de/.

But now I have problem filtering the data in the themes/ mytheme/layouts/index.html.
I do not know how to filter on type == ‘landing’, the language and order by weight.

I tried to do this:
{{ range where .Site.Pages.ByWeight “Params.type” “landing”}}

{{ printf “%#v” . }}

{{ .Lang }}

{{ .Content }}


{{ end }}

But it does not work. It displays both languages. How can I only show .md files of type landing for the language the user currently is and sort this by weight?

Thanks a lot.