Content organization not working in multilingual site

Greetings,

I still have the problem I described here, in the other topic titled “How to set index pages of site subsections?” In addition to that, there is something that I am missing about the multilingual setup for a bilingual en/it site, which I need to be just like the example in http://gohugo.io/content/multilingual/ (that is, the final website must have the english part in example.com/ and the italian part in example.com/it/). I have a content layout like this:

/home
/writings
/projects
/it/                 home page of italian section
/it/pubblicazioni (translation of "writings")
/it/projects (translation of "projects")

I have defined an English menu and an Italian one. No matter where they are, pages with the .it.md suffix are correctly rendered with the italian menu, but in the wrong location. For example, the file it/pubblicazioni/magazine1.it.md does not end up, as it should, in:

it/pubblicazioni/magazine1/index.html

but in it/it/pubblicazioni/magazine1/index.html

I have reproduced the config.toml file in http://gohugo.io/content/multilingual/, but obviously did something wrong. What?

If you need more info… I have no problem to send a copy of the whole source directory to whoever wants to have a look at it Send me a message here in the forum with your email address and you’ll have it. But for several reasons I cannot put it online, in github or elsewhere, before it’s ready and I can go live. THANKS!

PS: Another things I don’t see happening, is this (from the Multilingual doc page):

“By having the same base file name, the content pieces are linked together as translated pieces”

but maybe that depends on the theme used?

1 Like

can anybody please share a complete AND working configuration and source tree layout for a hugo multilingual site that actually works as said in http://gohugo.io/content/multilingual/ ???

I am trying to set up a bilingual site with:

  1. english source files in the content folder, italian source files in content/it, with same structure, but translated names for subfolders (e.g. content/projects corresponds to content/it/progetti (which is italian for “projects”))
  2. only one domain, english content in example.com, italian content in example.com/it
  3. different menus for English and Italian content (I have this working)
  4. (not mandatory, but really welcome, if possible) different versions of the same page linked to each other, e.g projects/project1/ linked to it/progetti/project1/ and viceversa

accordingly to the multilingual doc page, this should happen almost automatically, but I must obviously be missing something obvious. I have been trying both hugo 0.17 and 0.18/0.18.1, but no difference. No matter how I rearrange or rename the files and folders in the content directory, there always is something not going in the right place (e.g. stuff in /it/it, instead of /it/…), and I’ve never seen “content pieces linked together as translated pieces”, when having the same base file name.

if Hugo does not work as the documentation says, I can make do by building the two sites independently, with two hugo runs, and then copying the italian one into the an it/ subfolder of the english one of course, but of course I’d prefer to use it as the documentation says.

(see what I wrote in the original post about sharing the sources of the website…)

Thanks in advance for any feedback!

I’m monolingual :slight_smile: but have a look at https://github.com/bep/bepsays.com

As @moorereason pointed out, my site is conceptually similar to yours.

I have currently only linked to the translations of the blog posts (and not the home page etc.), see the “Translation” link at the top here:

Thanks @bep and @moorereason for the pointers. I have already downloaded the whole site for studying it. I will look at it in detail later today when I’m back home,for the moment… unless I’m wrong, the main difference I see between your site and the one I need to build is that folders/sections paths need to be translated too, and I don’t see, or recognize, how to achieve that in the Hugo docs. Let me make an example from Bep’s site.

In its content folder, we find:

content/art/instagram.md
content/art/instagram.en.md

which are rendered as, respectively:

http://bepsays.com/2016/12/10/instasnaps-london/
http://bepsays.com/en/2016/12/10/instasnaps-from-london/

In my case, instead (that is, with the constraints I have), those two URLs should be (assuming that, as google translate says, the Norwegian translation of “art” is “kunst”):

http://bepsays.com/kunst/2016/12/10/instasnaps-london/
http://bepsays.com/en/art/2016/12/10/instasnaps-from-london/

and they should have different menus, one in Norwegian, one in English. I see that Hugo assigns the menus by looking at the source file suffix, and that is OK with me. What I really don’t understand is how to write, tag, name or organize in subfolders, whatever… all the files in the secondary language so that Hugo gives them the right URLs, with the right translations of the sub-paths, i.e. /en/art/ instead of /kunst/

I would be OK, using your website again as example, with using a source content folder organized like this:

content/kunst/post1.md
content/kunst/post2.md
content/en/art/post1.en.md
content/en/art/post2.en.md

but even the source organization below would be OK, or maybe better, if there just were a way to tell Hugo "all posts with .en suffix go in en/art/, NOT in /kunst :

content/kunst/post1.md
content/kunst/post1.en.md
content/kunst/post2.md
content/kunst/post2.en.md

thanks!

I forgot to add one thing. If I do the equivalent of this for my site:

content/kunst/post1.md
content/kunst/post2.md
content/en/art/post1.en.md
content/en/art/post2.en.md

I do get english posts with english menus, but one subfolder too deep, e.g.:

http://bepsays.com/en/en/art/post1/

This will not work. The section is the first folder below /content – and you will have to pick some common term(s) here that don’t look too bad in your languages (me I picked some short ones, tec (technologi / teknologi) etc.)

So

content/art/post1.en.md
content/art/post2.en.md
content/art/post1.md
content/art/post2.md

If you really want to split the content by language (for easier management), you would have to do something like:

content/art/en/post1.en.md
content/art/en/post2.en.md
content/art/post1.md
content/art/post2.md

And the only reason I have the “clever translations” of my sections for the menu is that I use the feature called:

sectionPagesMenu = "sect"

And that feature currently use the section name as is to create the menu title. Thinking about that, we should fix that so it uses the Title in the section frontmatter if set (_index.md).

I see you have some other questions, but I will have to leave them to others.

[quote=“bep, post:7, topic:4967, full:true”]
This will not work. The section is the first folder below /content – and you will have to pick some common term(s) here that don’t look too bad in your languages (me I picked some short ones, tec (technologi / teknologi) etc.)[/quote]

OK. Thanks for the clarification. If this how things stand, the sites I have to migrate now to hugo will probably have to be generated by keeping the two languages completely separated, running hugo twice, once per language, and then merging the results. It is possible that I must do this, to keep the existing links from external sites working. But I will take your suggestion in mind for building new sites from scratch.

Hi again @bep ,

while confirming what I wrote in may previous reply… I am now studying the theme of your website, and I understand that the bit that generates the link to the translation of a page in another language is the “translation.html” partial.

However, I confess I do not understand yet how to make this work in other themes, namely:

  1. in which/how many layouts that partial should be inserted
  2. if I have to add something else, and where

thanks for any help on this

  1. In any template where you want, the translation links to be listed. That partial is “universal” (content pages, taxonomies, home page …) – you only need to pass it a page context for it to work.
  2. No

Hi @bep, and all

I have come across something pretty weird, for me at least.

Unlike what I wrote here earlier, I eventually decided to go for this content organization:

content/history/index.md
content/history/index.it.md
content/writings/index.md
content/writings/index.it.md
content/courses/index.md
content/courses/index.it.md

plus many other pages in each section. I also did what you said at https://discuss.gohugo.io/t/how-to-set-index-pages-of-site-subsections/4956/13?u=mfima to have index.md loaded as index page of a site section, and I also changed the templates as you said here, to add in each page the link to its translated version, with the translations.html partial from your site, adapted to show a flag. Finally, I defined two menus, one for italian, one for english. Now I do have the content rendered like this:

example.com/history/
example.com/it/history
example.com/writings
example.com/it/writings
example.com/courses
example.com/it/courses

each section index contains the right index.md, each page in each section has both the menus in the right language, AND the right link to its translation, when present… with two exceptions:

one is that history/index.html, it/history/index.html, writings/index.html, it/writings/index.html, ALL show two flags instead of one (right half of the screenshot), and the links of those flags all point to courses and it/courses. The courses/index.html and it/course/index.html on the left of the screenshot, instead, are correct.

the other exception is that I have a layouts/index.html file like this:

{{ range where .Site.Pages "Source.Path" "homepage.md" }}
{{ .Content }}
{{ end }}

which works in english, showing the content of homepage.md, but when I load the the italian home page, example.com/it/ shows nothing.

I will look at your other issue tomorrow, but the above can be replaced with:

{{ ( .Site.GetPage "home").Content }}
```

(the above is new in Hugo 0.18.
1 Like

I have realized this only now, because I was focusing on the main sections of this test website but… the permalinks of the post section are not working. More exactly:

I have a “post” section with posts I want to appear at example.com/YYYY/MM/post-title/. I have written this in config.toml:

[Languages.en.permalinks]
post = "/:year/:month/:title/"

and also:

[Languages.it.permalinks]
post     = "/:year/:month/:title/"

but when I run hugo (v0.18.1) the posts end up in:

example:com/post/file-name-of-post-1/
example:com/post/file-name-of-post-2/
example:com/post/file-name-of-post-3/

etc etc…

(the posts with .it.md suffix end up in it/post/file-name-of-post-1/ etc)

this doesn’t change if I only use the permalink statement in the english section of config.toml, or if I put it at the very beginning of the same file, outside language blocks

I suspect there is a 1 for all site permalinks config restriction currently enforced, which fits fine in you case, I guess. Just pull the permalinks config outside the language definitions.

I have to correct what I wrote in my earlier comment. As I said there, I had already tried to “pull the permalinks outside the language blocks”, but the result is not what I wrote. What happens with hugo 0.18.1, with the permalinks outside the language block, instead, is that:

  • the permalinks for the posts are generated as requested. ie. /YYYY/MM/title, it/YYYY/MM/title-of-italian-translation
  • but the index pages of the sections are not recognized and processed anymore

what I mean is that with the permalinks as I wrote earlier, that in both in the english and italian language block, I had this:

content/writings/index.md    => example.com/writings/index.html
content/writings/index.it.md => example.com/it/writings/index.html

which is correct. With the permalinks outside the language blocks, instead, I get this WRONG result:

content/writings/index.md    => example.com/writings/index.html
content/writings/index.it.md => example.com/it/writings/title-of-index.it.md/index.html

It appears that the very last problems I reported were my fault, meaning that I must have either created, while trying to make things work, some unnecessary layout file that confused hugo, or modified and then forgotten, some theme file.

I say this because one hour ago I restarted from scratch with “hugo new site” and then started to put inside it files from the previous attempt, a few at a time, and now I have a bilingual website that works as I originally wanted, with the only exception that section names are NOT localized, that is instead of “/projects/” and “/it/progetti” I have “/projects” and “/it/projects”. OK, I can live with that.

Thanks to the Hugo developers and to all those who answered here and in this other thread https://discuss.gohugo.io/t/how-to-set-index-pages-of-site-subsections/4956

in the next comment I’ll put what I had to do to make the website work as expected.

(this is an ultraquick summary. I hope to make of it a much more detailed post on my website when it goes live, but for now here it is, so othes can use it. Also, it probably contains errors or explanations that are not the best ones. Thanks in advance to whoever will improve them)

Here is how I have managed to build, with hugo 0.18.1, a bilingual website with:

    • home pages and section indexes that are static markdown files
    • post archives in /YYYY/MM/post-title/
    • each page or post linked to its translation in the other language, when available

I organized content in this way:

content/_index.md
content/_index.it.md
content/section1/_index.md
content/section1/_index.it.md
content/section1/somepage.md
content/section1/somepage.it.md
content/archives/blogpost1.md
content/archives/blogpost1.it.md

the first two files become the home pages of the two languages, if you use a layouts/index.html that contains these commands:

<h2>{{ ( .Site.GetPage "home").Title }}</h2>
{{ ( .Site.GetPage "home").Content }}

to have hugo use the other _index.md files as home pages of the subsections, you have to have in layouts/_default/ a section.html file that is the same as the single.html file you use

links to translations are inserted by adding in the template the call to the translation partial mentioned in other posts of this page:

<div class="translations-bottom">
{{ partial "translations.html" . }}
</div>

Hugo knows which files are translations of each other by the language suffix in the filenames: see content organization above.

In order to have the permalinks I wanted, I wrote this, only once, at the top of the config file:

[permalinks]
   archives = "/:year/:month/:title/"
   section1 = "/section1/:title/"
   section2 = "/section2/:title/"

Finally, in the language sections at the end of the config file I wrote:

[Languages]
[Languages.en]
languageCode = "en-us"
languageName = "English"
title = "english title"
# english menu
[[Languages.en.menu.main]]
 name = "About"
 url = "about"
 weight = 1

[[Languages.en.menu.main]]
 name = "section1"
 url = "section1"
weight = 2

etc etc… and then a similar section for italian, with the menu urls like /it/about, /it/section1 etc…