Use variable language specific strings in hugo con

问题:

My goal is to build a multilingual site using hugo. For this I would like to:

• not touch the theme file
• have a config file which defines the overall structure for all languages (config.toml)
• have a "string" file for all languages

So for example, I would have a config.toml file like this:

[params.navigation]
    brand = "out-website"

    [params.navigation.links]
        about     = $ABOUT_NAME
        services  = $SERVICES_NAME
        team      = $TEAM_NAME
        impressum = $IMPRESSUM_NAME

a english language file:

ABOUT_NAME=About
SERVICES_NAME=Services
TEAM_NAME=Team
IMPRESSUM_NAME=Impressum

and a german language file like this:

ABOUT_NAME=Über uns
SERVICES_NAME=Dienste
TEAM_NAME=Mitarbeiter
IMPRESSUM_NAME=Impressum

And then I want to compile the project for english, I do something along the line of:

hugo --theme=... --config=config.toml --config=english.toml

and german:

hugo --theme=... --config=config.toml --config=german.toml

Or in same similar way.

For this I need to use variables in the config.toml that are defined in english.toml or german.toml

My google search so far say, that I cannot use variables in toml. So is there a different approach with which I could achieve this?

回答1:

Your approach with variables is not optimal, use the tutorial below.

Multilingual sites are coming as a feature on Hugo 0.16, but I managed to build a multilingual site on current Hugo using this tutorial and some hacks.

The tutorial above requires to "have a separate domain name for each language". I managed to bypass that and to have to sites, one at root (EN), and one in the folder (/LT/).

Here are the steps I used.

1. Set up reliable build runner, you can use Grunt/Gulp, but I used npm scripts. I hacked npm-build-boilerplate and outsourced rendering from Hugo. Hugo is used only to generate files. This is important, because 1) we will be generating two sites; 2) hacks will require operations on folders, what is easy on npm (I'm not proficient on building custom Grunt/Gulp scripts).

2. Set up config_en.toml and config_de.toml in root folder as per tutorial.

Here's excerpt from my config_en.toml:

contentdir = "content/en"
publishdir = "public"

Here's excerpt from my config_lt.toml (change it to DE in your case):

contentdir = "content/lt"
publishdir = "public/lt"

Basically, I want my website.com to show EN version, and website.com/lt/ to show LT version. This deviates from tutorial and will require hacks.

3. Set up translations in /data folder as per tutorial.

4. Bonus: set up snippet on Dash:

   {{ ( index $.Site.Data.translations $.Site.Params.locale ).@cursor }}

Whenever I type "trn", I get the above, what's left is to paste the key from translations file and I get the value in correct language.

5. Hack part. The blog posts will work fine on /lt/, but not static pages (landing pages). I use this instruction.

Basically, every static page, for example content/lt/duk.md will have slug set:

slug: "lt/duk"

But this slug will result in double URL path, for example lt/lt/duk.

I restore this using my npm scripts task using rsync and manual command to delete redundant folder:

"restorefolders": "rsync -a public/lt/lt/ public/lt/ && rm -rf public/lt/lt/",