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

9 files changed, 83 insertions, 4 deletions

diff --git a/README.md b/README.md
index 9a3648b..979287a 100644
--- a/README.md
+++ b/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.
diff --git a/assets/sass/_partial/_header.scss b/assets/sass/_partial/_header.scss
index d81f17c..9c4de56 100644
--- a/assets/sass/_partial/_header.scss
+++ b/assets/sass/_partial/_header.scss
@@ -3,17 +3,24 @@
 // ==============================
 
 .header {
-  @include clearfix; 
+  @include clearfix;
   padding: $header-padding;
 
   @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;
+    }
   }
 }
diff --git a/assets/sass/_partial/_language-selector.scss b/assets/sass/_partial/_language-selector.scss
new file mode 100644
index 0000000..7640e61
--- /dev/null
+++ b/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;
+        }
+      }
+    }
+  }
+}
diff --git a/assets/sass/_partial/_slideout.scss b/assets/sass/_partial/_slideout.scss
index 2dc757d..58891fd 100644
--- a/assets/sass/_partial/_slideout.scss
+++ b/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 {
diff --git a/assets/sass/main.scss b/assets/sass/main.scss
index 5bdac04..2b843f7 100644
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@@ -16,3 +16,4 @@
 @import "_partial/mobile";
 @import "_partial/back-to-top";
 @import "_partial/404";
+@import "_partial/language-selector";
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index a9e84ab..05a3998 100644
--- a/exampleSite/config.toml
+++ b/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>'
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 3592e88..24d5b37 100644
--- a/layouts/partials/header.html
+++ b/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 -}}
@@ -16,4 +18,4 @@
       </li>
     {{- end }}
   </ul>
-</nav>
\ No newline at end of file
+</nav>
diff --git a/layouts/partials/header/language-selector.html b/layouts/partials/header/language-selector.html
new file mode 100644
index 0000000..e28650e
--- /dev/null
+++ b/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 }}
diff --git a/layouts/partials/slideout.html b/layouts/partials/slideout.html
index 42ed13e..da0885c 100644
--- a/layouts/partials/slideout.html
+++ b/layouts/partials/slideout.html
@@ -22,4 +22,6 @@
       </a>
     {{- end }}
   </ul>
-</nav>
\ No newline at end of file
+
+  {{ partial "header/language-selector.html" . }}
+</nav>