diff --git a/docs/content/tutorials/create-a-multilingual-site.md b/docs/content/tutorials/create-a-multilingual-site.md new file mode 100644 index 000000000..866f665b2 --- /dev/null +++ b/docs/content/tutorials/create-a-multilingual-site.md @@ -0,0 +1,136 @@ +--- +author: "Rick Cogley" +date: 2015-06-07 +linktitle: Multilingual Site +menu: + main: + parent: tutorials +prev: /tutorials/migrate-from-jekyll +title: Create a Multilingual Site +weight: 10 +--- + +## Introduction + +Hugo allows you to create a multilingual site from its built-in tools. This tutorial will show one way to do it, and assumes: + +* You already know the basics about creating a Hugo site +* You have a separate domain name for each language +* You'll use `/data` files for some translation strings +* You'll use single, combined `layout` and `static` folders +* You'll use a subfolder for each language under `content` and `public` + +## Site Configs + +Create your site configs in the root of your repository, for example for an English and Japanese site. + +**English Config `config_en.toml`**: + +~~~toml +baseurl = "http://acme.com/" +title = "Acme Inc." +contentdir = "content/en" +publishdir = "public/en" +... +[params] + locale = "en-US" +~~~ + +**Japanese Config `config_ja.toml`**: + +~~~toml +baseurl = "http://acme.jp/" +title = "有限会社アクミー" +contentdir = "content/ja" +publishdir = "public/ja" +... +[params] + locale = "ja-JP" +~~~ + +If you had more domains and languages, you would just create more config files. The standard `config.toml` is what Hugo will run as a default, but since we're creating language-specific ones, you'll need to specify each config file when running `hugo server` or just `hugo` before deploying. + +## Prep Translation Strings in `/data` + +Create `.yaml` (or `.json` or `.toml`) files for each language, under `/data/translations`. + +**English Strings `en-US.yaml`**: + +~~~yaml +topslogan: Acme Inc. +topsubslogan: You'll love us +... +~~~ + +**Japanese Strings `ja-JP.yaml`**: + +~~~yaml +topslogan: 有限会社アクミー +topsubslogan: キット勝つぞ +... +~~~ + +In some cases, where there is more complex formatting within the strings you want to show, it might be better to employ some conditional logic in your template, to display a block of html per language. + +## Reference Strings in templates + +Now you can reference the strings in your templates. One way is to do it like in this `layouts/index.html`, leveraging the fact that you have the locale set: + +~~~html + + +... +
+ +