Could need some help creating a multilanguage website

support
1

Hi Hugo community,

I am very new to Hugo and could need some help setting up a multilanguage static website.
The website should be simple and straight.

Here is a small overview:

The main navigation will look like this:
HOME | WORK | ABOUT | CONTACT | LANGUAGE_SELECT

About, Contact will be simple single pages.
There will be some more single pages for privacy stuff and imprint (links in footer).

Each single page of the ‘work’ section should contain a dynamic sub menu that include links to the all single pages in the work subfolder, eg gallery1, gallery2, …, gallery5.
I was able to create that dynamic by adding the following code to layouts\work\single.html:

<ul class="list-unstyled">
    {{- $firstUrlElement := print "/" (index (split .URL "/") 1) "/" -}}
    {{ $url := .URL }}
    {{ range where .Site.RegularPages "Section" "work" }} {{ if ne .Title "Pages" }}
    <li class="{{ if eq $url .URL }}active{{ end }}">
        <a href="{{.RelPermalink}}">{{ .Title | markdownify }}</a>
    </li>
    {{ end }} {{ end }}
</ul>

The current content folder organization look like this:

.
+-- content
+-- _index.md 
+ about.md 
+-- about.de.md 
+-- contact.md 
+-- contact.de.md 
+-- imprint.md 
+-- imprint.de.md 
+-- privacy.md 
+-- privacy.de.md     
+-- work
|   +-- _index.md 
|   +-- gallery1.md 
|   +-- gallery2.md 
|   +-- gallery3.md 
|   +-- gallery4.md 
|   +-- gallery5.md

What I want to achieve:

  • Redirect some links: ‘HOME’ and ‘WORK’ links of the main navigation should point to work/gallery1.md temporarily.
  • Since all gallery*.md content files will include the same content, do I still have to create the related language files like gallery1.de.md?

Thanks for help.

2

Did you look here?

3

Yes, I looked at that section and the sub topic ‘Translate Your Content’. I searched the forum as well but did not found a solution. I will do some more research.

4

If you have a site/language with missing translations, you could use the lang.Merge to merge in the pages from other language(s).

5

I looked at the lang.Merge documentation and found a related post as well but it´s unclear to me.
I want exactly what you mentioned here:

Do I have to past a code snippet into layouts\work\single.html?

6

In which file do I have to use lang.Merge?
layouts/work/single.html or layouts/work/list.html

Does the result render those missing translation content files or how does it work?

7

Currently I am thinking about the content organization of my website:

content/
├── _index.md
├── about.md
├── about.de.md
├── contact.md
├── contact.de.md
├── imprint.md
├── imprint.de.md
├── privacy.md
├── privacy.de.md
└── work
    ├── _index.md
    ├── gallery1.md
    ├── gallery2.md
    ├── gallery3.md
    ├── gallery4.md
    └── gallery5.md

The work folder with the _index.md is a Branch bundle or simply a section or both?
\work_index.md is not mandatory, right?

I am not sure if it makes sense to move to a more Leaf bundle related organization like this?:

content/
├── _index.md
├── about
│    ├── index.md
│    └── index.de.md
├── contact
│    ├── index.md
│    └── index.de.md
├── imprint
│    ├── index.md
│    └── index.de.md
├── policy
│    ├── index.md
│    └── index.de.md
└── work
    ├── gallery1
    │    └── index.md
    ├── gallery2
    │    └── index.md
    ├── gallery3
    │    └── index.md
    ├── gallery4
    │    └── index.md
    └── gallery5
         └── index.md

Can someone please take a look and give me some hint?

8

Build first, make it work, then worry about the organization.

9

Okay.

If I click on the ‘WORK’ navigation link which points to http://my-domain/work/ I currently get a default page rendered by layouts_default\list.html.
Is it possible to show the page only if length of .Paginator.Pages <= 0, otherwise show - or redirect to the first page of .Paginator.Pages?

10

In the common use case do you expect not to have any items in that collection, @vulcan? If not, would adding a single item using some ipsum text suffice during development? If it’s disrupting your dev workflow why not just hide it with CSS and add a TODO item for later? (Sorry if I’m oversimplifying.)

11

That´s a good point. It´s not expected that there are no items in that collection / section. So it seems that I can ignore that use case.
But how can I show the first item or a specific item of that collection by clicking on the section menu entry?
Clicking on ‘WORK’ or entering http://my-domain/work/ should should navigate to http://my-domain/work/gallery1
An alias cannot be used here, right?

12

You’re definately on the right track being concerned about the URLs. Best never to change them. Thankfully Hugo gives us a lot of flexibility on how the files are organized without forcing URLs to have to change.

If you’re making a gallery under /work you could create a single page called work in the content directory and pull in a collection of gallery data, give it a layout. In this case the gallery wouldn’t have its own subpath but that’s okay because you won’t ever risk sharing a URL you might get the urge to later break when you reorganize stuff.

Once you have two galleries you’ll probably want both to show up on the work page and, once you reach that point, refactor the content to make the subpaths and use the work page to show a slim view of the detailed gallery views.

There’re other ways to accomplish this as well, some of which would require you to perform redirects on the remote webserver. But for now I’d just go simple until you’re familiar with the content management concepts in Hugo.

Hope that makes sense. Just let it rip and when you hit stumbling blocks try and ask some specific questions here after you struggle for a while to figure it out.

13

Thanks for your help so far.

I followed your suggestions as good as I could and I´ve done this:

  • Created a single page work in content. This single page consumes a ‘work’ partial with the main layout (navigation to select a gallery and the gallery content section, based on Bootstrap tabs). The ‘work’ partial itself consumes a ‘gallery’ partial to fill in the items / thumbnails in the content section.

How do I refactor the content to make the subpaths you mentioned before? Should I post some more source code?