🚩 Support for multiple languages

Alexander Bilz

01.53.2020 42aa983fe4dc4782893088b1c7d9ec6882cc8a67

🚩 Support for multiple languages

Closes #40

 README.md

@@ -14,6 +14,7 @@
- Dark mode
- Navigation items
- Pagination
- Multilingual
- 100⁄100 Google Lighthouse score
- Google Analytics (optional)
- Comments powered by Disqus (optional)
@@ -83,6 +84,42 @@
  identifier = "about"
  url = "/about/"
```
### Multilingual support
Anatole supports multilingual page setups. All you need to do is to add the languages to your 'config.toml'. For each Language you can set the custom options like title or description. It's important to include a `LanguageName`, as it will be displayed in the main menu.  
```toml
[Languages]
  [Languages.en]
  title = "My blog"
  weight = 1
  LanguageName = "EN"

  [Languages.de]
  title = "Mein blog"
  description = "Ich bin Jane"
  weight = 2
  LanguageName = "DE"
```
To make sure your menu is linking to the correct localized content, make sure that you customize the menu items to inlude the language prefix. Your menu might look like the following:
```toml
[[Languages.de.menu.main]]
url    = "/de/"
identifier = "home"
name   = "Startseite"
weight = 100

[[Languages.de.menu.main]]
name = "Beiträge"
weight = 200
identifier = "posts"
url = "/de/post/"

[[Languages.de.menu.main]]
name = "Über"
weight = 300
identifier = "about"
url = "/de/about/"
```
Anatole currently ships with support for some basic languages. Contributions for other language translations are welcome.
### :100: Google Lighthouse score
The theme is optimized to adhere to the requirements checked for in the Lighthouse Audit. On my [personal site](https://www.alexbilz.com) I was able to reach a perfect 100⁄100 score.
![Google Lighthouse Score](https://raw.githubusercontent.com/lxndrblz/anatole/master/images/lighthouse.png)

 i18n/ch-zn.toml

New file
@@ -0,0 +1,21 @@
[category]
other = "分类"

[tag]
other = "标签"

[reading_time]
one = "1分钟阅读时间"
other = "{{ .Count }} 分钟阅读时间"

[page_not_found]
other = "找不到页面"

[page_does_not_exist]
other = "此页面不存在"

[head_back]
other = "返回 <a href=\"{{ . }}\">主页面</a>."

[comments]
other = "注释"

 i18n/de.toml

New file
@@ -0,0 +1,21 @@
[category]
other = "Kategorie"

[tag]
other = "Tag"

[reading_time]
one = "{{ .Count }} Minute zum Lesen"
other = "{{ .Count }} Minuten zum Lesen"

[page_not_found]
other = "Seite nicht gefunden"

[page_does_not_exist]
other = "Tut mir Leid, diese Seite existiert leider nicht."

[head_back]
other = "Du kannst hier zurück zur <a href=\"{{ . }}\">Startseite</a>."

[comments]
other = "Kommentare"

 i18n/en.toml

New file
@@ -0,0 +1,21 @@
[category]
other = "category"

[tag]
other = "tag"

[reading_time]
one = "One-minute read"
other = "{{ .Count }}-minute read"

[page_not_found]
other = "Page Not Found"

[page_does_not_exist]
other = "Sorry, this page does not exist."

[head_back]
other = "You can head back to <a href=\"{{ . }}\">homepage</a>."

[comments]
other = "comments"

 layouts/404.html

@@ -1,6 +1,8 @@

{{- define "main" -}}
{{ define "main" }}
<div class="page_404">
    <p>The page you are looking for is missing</p>
    <h1>404</h1>
    <h2>{{ i18n "page_not_found" }}</h2>
    <p>{{ i18n "page_does_not_exist" }}</p>
    <p>{{ i18n "head_back" .Site.BaseURL | safeHTML }}</p>
</div>
{{- end -}}
{{ end }}

 layouts/_default/single.html

@@ -7,8 +7,9 @@
        </h3>
        {{ if eq .Type "post"}}
        <div class="info">
          <i class="fa fa-sun-o"></i><span class="date">{{ .Date.Format "Mon, Jan 2, 2006" }}</span>
          <i class="fa fa-clock-o"></i><span class="reading-time">{{ .ReadingTime }}-minute read</span>
          <i class="fa fa-sun-o"></i>
          <span class="date">{{ .Date.Format "Mon, Jan 2, 2006" }}</span>
          <i class="fa fa-clock-o"></i><span class="reading-time">{{ i18n "reading_time" .ReadingTime }}</span>
        </div>
        {{ end }}
        </div>
@@ -25,7 +26,7 @@
    {{ if eq .Type "post"}}
    {{ if .Site.DisqusShortname -}}
    <div id="fb_comments_container">
      <h2>Comments</h2>
      <h2>{{ i18n "comments" }}</h2>
      {{ template "_internal/disqus.html" . }}
    </div>
    {{- end }}       

 layouts/partials/navbar.html

@@ -5,8 +5,14 @@
        {{ $active := eq $url .URL }}
        <li><a {{if $active }}class="current"{{end}} href="{{ .URL }}" title="{{ .Title }}">{{ .Name }}</a></li>
        {{ end }}
        {{ if .Site.IsMultiLingual }}
            {{ range $.Site.Home.AllTranslations }}
            <li><a href="{{ .Permalink }}" title="{{ .Language.LanguageName }}">{{ .Language.LanguageName }}</a></li>
            {{ end }}
            </ul>
        {{ end }}  
    </ul>
    <div class="themeswitcher">
    <div class="themeswitcher">      
        <a class="theme-switch" title="Switch Theme">
            <i class="fa fa-adjust fa-fw" aria-hidden="true"></i>
        </a>