feat(language-selector): Implement optional language selector (#298)

README.md

@@ -41,6 +41,16 @@ Can also support any other languages as well. For example, to support german, cr
 
 P.S. In multilingual mode, the language which currently being used to render the website will be used.
 
+### Language selector
+
+It is possible to enable language selector for multilingual site. It will be displayed in the header or in the slide menu.
+
+To enable it, set `showLanguageSelector` parameter to `true`.
+
+```toml
+showLanguageSelector = true
+```
+
 ## Favicon
 
 In order to customize the favicon you need to place **all** the following files in the `static` folder at the root of your site, which will overwrite those files in the [`themes/even/static/`](https://github.com/olOwOlo/hugo-theme-even/tree/master/static) folder.

assets/sass/_partial/_header.scss

@@ -8,12 +8,19 @@
 
   @import '_header/logo';
   @import '_header/menu';
-}
 
+  .language-selector {
+    float: right;
+  }
+}
 
 @include max-screen() {
   .header {
     padding: 50px 0 0;
     text-align: center;
+
+    .language-selector {
+      display: none;
+    }
   }
 }

assets/sass/_partial/_language-selector.scss

@@ -0,0 +1,25 @@
+.language-selector {
+  width: max-content;
+
+  .languages-list {
+    padding: 0;
+    background: darken($deputy-color, 3%);
+
+    .language-item {
+      display: inline-block;
+      list-style-type: none;
+      text-transform: uppercase;
+      font-family: $global-serif-font-family;
+      font-size: 18px;
+      padding: 0 10px;
+
+      &.active {
+        background: $theme-color;
+
+        > a {
+          color: #fff;
+        }
+      }
+    }
+  }
+}

assets/sass/_partial/_slideout.scss

@@ -13,6 +13,10 @@
   -webkit-overflow-scrolling: touch;
   z-index: 0;
   display: none;
+
+  .language-selector {
+    padding-left: 30px;
+  }
 }
 
 .slideout-panel {

assets/sass/main.scss

@@ -16,3 +16,4 @@
 @import "_partial/mobile";
 @import "_partial/back-to-top";
 @import "_partial/404";
+@import "_partial/language-selector";

exampleSite/config.toml

@@ -111,6 +111,9 @@ copyright = ""            # default: author.name ↓        # 默认为下面配
 
   uglyURLs = false          # please keep same with uglyurls setting
 
+  # Show language selector for multilingual site.
+  showLanguageSelector = false
+
   [params.publicCDN]        # load these files from public cdn                          # 启用公共CDN，需自行定义
     enable = true
     jquery = '<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>'

layouts/partials/header.html

@@ -8,6 +8,8 @@
   </a>
 </div>
 
+{{ partial "header/language-selector.html" . }}
+
 <nav class="site-navbar">
   <ul id="menu" class="menu">
     {{ range .Site.Menus.main -}}

layouts/partials/header/language-selector.html

@@ -0,0 +1,25 @@
+<!--
+  Language selector.
+
+  If current page has version in another language, language link will lead
+  to the translated page. If not, the link will be to the home page of the site
+  with specified language.
+-->
+{{ if (and (.Site.IsMultiLingual) ($.Site.Params.showLanguageSelector)) }}
+  <div class="language-selector">
+    <ul class="languages-list">
+      {{ range $homeTranslation := .Site.Home.AllTranslations }}
+        {{ $active := eq $homeTranslation.Language $.Site.Language }}
+        {{ $pageTranslation := (index (where $.Page.AllTranslations "Language.Lang"  "eq" $homeTranslation.Language.Lang) 0) }}
+
+        <li class="language-item {{if $active}}active{{end}}">
+          {{ with $pageTranslation }}
+            <a href="{{ .Permalink }}">{{ .Language.Lang }}</a>
+          {{ else }}
+            <a href="{{ $homeTranslation.Permalink }}">{{ .Language.Lang }}</a>
+          {{ end }}
+        </li>
+      {{ end }}
+    </ul>
+  </div>
+{{ end }}

layouts/partials/slideout.html

@@ -22,4 +22,6 @@
       </a>
     {{- end }}
   </ul>
+
+  {{ partial "header/language-selector.html" . }}
 </nav>