Redirecting to preferred language at site root

user_5516787 0
Viewed 509

I'm working on a multilingual website in hugo using a multilingual-supported theme. I added the content in two languages and set the following two settings in the config file:

defaultContentLanguage = "en"
defaultContentLanguageInSubdir = true

I also specified the two languages as follows:

[languages]
  [languages.en]
    baseURL = "https://example.com/en"
    weight = 100
  [languages.nl]
    baseURL = "https://example.com/nl"

When hugo generates the website, two directories are created as expected, one for each language. When I deploy the website, navigating to either of those urls send me to the website in the respective language. However, navigating to the base url example.com leads me nowhere because there is no html generated at that location.

I can implement this by bypassing hugo and manually adding an index.html at the site root:

<!DOCTYPE html>
<html lang="en-us">
  <head>
   <script type="text/javascript">

      var languageCookie = getCookie("preferredLanguage")

      if (languageCookie) {
         var language = languageCookie
      } else {
         var language = navigator.language || navigator.userLanguage;
      }

      if (language == "nl") {
         window.location.href = "https://example.app/nl"
         document.cookie = "preferredLanguage=nl"
      }
      else {
         window.location.href = "https://example.app/en"
      }

      function getCookie(name) {
         const value = `; ${document.cookie}`;
         const parts = value.split(`; ${name}=`);
         if (parts.length === 2) return parts.pop().split(';').shift();
      }

   </script>
  </head>
</html>

But I rather have hugo generate this html. How can I specify a seperate page/javascript, that is language independent? Or is there another place where I can call this javascript? Any help is appreciated

hugo multilingual redirect javascript
1 Answers

Generating index.html

However, navigating to the base url example.com leads me nowhere because there is no html generated at that location.

It might have to do with the fact that you have the same baseURL for both languages; the config docs mention it's for the hostname. Indeed, I can't find anything obvious about it on the docs, but it seems like it's intended to be used for different domains altogether, rather than different paths on the same domain. If this is your use-case, then sorry, I don't know!

It might very well be a bug, but I didn't search for that either.

Out of the box

What should work, however, if you have just one domain, is

DefaultContentLanguage = "en"
defaultContentLanguageInSubdir = true

output= ["html"]

[languages]
  [languages.en]
    languageName = "English"
    contentDir = "content/en"
    weight = 10
  [languages.nl]
    languageName = "Nederlands"
    contentDir = "content/nl"
    weight = 20

to result in a structure like this:

public
├── index.html
├── en
│   ├── index.html
│   ├── posts
│   │   └── index.html
│   ├── sitemap.xml
│   └── tags
│       └── index.html
├── nl
│   ├── index.html
│   ├── posts
│   │   └── index.html
│   ├── sitemap.xml
│   └── tags
│       └── index.html
└── sitemap.xml

With the mention that the generated index.html already has the redirect made for you, and that's using a <meta> refresh tag redirecting to your default language.

This should solve your index.html issue, without having to create extra stuff.

Host-dependent

Depending on how you are hosting the site, you can check whether you can supply them your custom redirect rules, e.g. Netlify's _redirects file.

Language independent output

How can I specify a seperate page/javascript, that is language independent?

If you want custom code on that root index.html, then I don't know if you can have that, unfortunately. But, if you really want to, you can

  1. Try the first suggestion, so you still have an index.html;
  2. Just drop that js into your layout
user_11484830
Related