Add language switch at bottom of page

assets/_main.scss

@@ -227,6 +227,54 @@ ul.pagination {
   }
 }
 
+
+.book-languages {
+  position: relative;
+  overflow: visible;
+
+  padding: $padding-16;
+  margin: -$padding-16;
+
+  &:hover .book-languages-list {
+    display: block;
+  }
+
+  .book-languages-list {
+    display: none;
+
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    padding: $padding-8 0;
+
+    background: $body-background;
+    box-shadow: 0 0 $padding-4 rgba(0, 0, 0, 0.1);
+
+    li {
+      padding: $padding-8 $padding-16;
+      white-space: nowrap;
+    }
+
+    img {
+      opacity: .1;
+    }
+
+    li.active img {
+      opacity: 1;
+    }
+
+    a {
+      color: inherit;
+    }
+  }
+
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+}
+
 .book-posts {
   min-width: $body-min-width;
   max-width: $body-min-width * 2;

assets/_print.scss

@@ -1,4 +1,3 @@
-// Printing styles
 @media print {
   .book-menu,
   .book-footer {

exampleSite/config.toml

@@ -23,6 +23,9 @@ defaultContentLanguage = 'en'
   [languages.ru]
     languageName = 'Russian'
     weight = 2
+  [languages.cn]
+    languageName = 'Chinese'
+    weight = 3
 
 [params]
   # (Optional, default 6) Set how many table of contents levels to be showed on page.

exampleSite/config.yaml

@@ -23,6 +23,9 @@ languages:
   ru:
     languageName: Russian
     weight: 2
+  cn:
+    languageName: Chinese
+    weight: 3
 
 params:
   # (Optional, default 6) Set how many table of contents levels to be showed on page.

exampleSite/i18n/en.yaml

@@ -1,6 +0,0 @@
-# General
-- id: translations
-  translation: Translations
-
-- id: languages
-  translation: Languages

exampleSite/i18n/ru.yaml

@@ -1,6 +0,0 @@
-# General
-- id: translations
-  translation: Переводы
-
-- id: languages
-  translation: Языки

exampleSite/resources/_gen/assets/scss/theme/hugo-book/book.scss_50fc8c04e12a2f59027287995557ceff.json

@@ -0,0 +1 @@
+{"Target":"book.min.9655dddcbdb7746824f6a5a12c435a2fd6b9c5d6d7928958bf434d9563068728.css","MediaType":"text/css","Data":{"Integrity":"sha256-llXd3L23dGgk9qWhLENaL9a5xdbXkolYv0NNlWMGhyg="}}

i18n/cn.yaml

@@ -0,0 +1,5 @@
+- id: Search
+  translation: 搜索
+
+- id: Edit this page
+  translation: Edit this page

i18n/en.yaml

@@ -0,0 +1,5 @@
+- id: Search
+  translation: Search
+
+- id: Edit this page
+  translation: Edit this page

i18n/ru.yaml

@@ -0,0 +1,5 @@
+- id: Search
+  translation: Поиск
+
+- id: Edit this page
+  translation: Редактировать эту сраницу

layouts/docs/baseof.html

@@ -17,7 +17,7 @@
     <div class="book-page">
       {{ partial "docs/mobile-header" . }}
       {{ template "main" . }}
-      {{ partial "docs/git-footer" . }}
+      {{ partial "docs/footer" . }}
       {{ partial "docs/inject/footer" . }}
     </div>
 

layouts/partials/docs/footer.html

@@ -1,5 +1,6 @@
 {{ if or .GitInfo .Site.Params.BookEditPath }}
 <div class="book-footer {{ if not .GitInfo }}justify-end{{ else }}justify-between{{ end }}">
+  {{ partial "docs/languages" . }}
   {{ with .GitInfo }}
   <div>
     {{ $date := .AuthorDate.Local.Format (default "January 2, 2006" $.Site.Params.BookDateFormat) }}
@@ -14,7 +15,7 @@
     {{ if $.File }}
     <a class="flex align-center" href="{{ $.Site.Params.BookRepo }}/{{ . }}/{{ $.File.Path }}" target="_blank" rel="noopener">
       <img src="{{ "svg/edit.svg" | relURL }}" alt="Edit" />
-      <span>Edit this page</span>
+      <span>{{ i18n "Edit this page" }}</span>
     </a>
     {{ end }}
   </div>

layouts/partials/docs/language-switch.html

@@ -1,14 +0,0 @@
-{{ if .Site.IsMultiLingual }}
-<ul>
-    <li class="book-section-flat">
-        <span>{{ i18n "languages" }}</span>
-        <ul>
-        {{ range .Site.Home.AllTranslations -}}
-            <li>
-               <a href="{{ .Permalink }}" class="{{ if (eq $.Site.Language .Language ) }}active{{ end }}">{{ .Language.LanguageName }}</a>
-            </li>
-         {{- end }}
-        </ul>
-    </li>
-</ul>
-{{ end }}

layouts/partials/docs/languages.html

@@ -0,0 +1,32 @@
+{{ if .Site.IsMultiLingual }}
+<!-- Merge home and current page translations -->
+{{ $langs := dict }}
+{{ range .Site.Home.AllTranslations }}
+  {{ $langs = merge $langs (dict .Language.Lang .) }}
+{{ end }}
+{{ range .Translations }}
+  {{ $langs = merge $langs (dict .Language.Lang .) }}
+{{ end }}
+
+<div class="book-languages">
+
+  <ul>
+    <li class="flex">
+      <img src="{{ "svg/translate.svg" | relURL }}" />
+      {{ $.Site.Language.LanguageName }}
+    </li> 
+  </ul>
+
+  <ul class="book-languages-list">
+    {{ range sort $langs }}
+    <li class="{{ if (eq $.Site.Language .Language ) }}active{{ end }}">
+      <a href="{{ .Permalink }}" class="flex">
+        <img src="{{ "svg/translate.svg" | relURL }}" />
+        {{ .Language.LanguageName }}
+      </a>
+    </li>
+    {{ end }}
+  </ul>
+
+</div>
+{{ end }}

layouts/partials/docs/menu-filetree.html

@@ -15,7 +15,7 @@
   {{ end }}
 {{ else }}
   <ul>
-  {{ range where $sections "Params.bookhidden" "!=" true }}
+  {{ range where $sections "Params.bookHidden" "!=" true }}
     {{ template "book-section" (dict "Section" . "CurrentPage" $) }}
   {{ end }}
   </ul>

layouts/partials/docs/menu.html

@@ -10,11 +10,6 @@
 {{ end }}
 
 {{ partial "docs/inject/menu-after" . }}
-
-{{ if .Site.IsMultiLingual }}
-    {{ partial "docs/translation-switch" . }}
-    {{ partial "docs/language-switch" . }}
-{{ end }}
 </nav>
 
 <!-- Restore menu position as soon as possible to avoid flickering -->

layouts/partials/docs/search.html

@@ -1,6 +1,6 @@
 {{ if default true .Site.Params.BookSearch }}
 <div class="book-search">
-  <input type="text" placeholder="Search" id="book-search-input" maxlength="64" />
+  <input type="text" placeholder="{{ i18n "Search" }}" id="book-search-input" maxlength="64" />
   <div class="book-search-spinner spinner hidden"></div>
   <ul id="book-search-results"></ul>
 </div>

layouts/partials/docs/translation-switch.html

@@ -1,14 +0,0 @@
-{{ if .IsTranslated }}
-<ul>
-    <li class="book-section-flat">
-        <span>{{ i18n "translations" }}</span>
-        <ul>
-        {{ range .Translations }}
-            <li>
-                <a href="{{ .Permalink }}">{{ .Lang }}: {{ .Title }}{{ if .IsPage }} ({{ i18n "wordCount" . }}){{ end }}</a>
-            </li>
-        {{ end }}
-        </ul>
-    </li>
-</ul>
-{{ end }}

layouts/posts/baseof.html

@@ -17,7 +17,7 @@
     <div class="book-posts">
       {{ partial "docs/mobile-header" . }}
       {{ template "main" . }}
-      {{ partial "docs/git-footer" . }}
+      {{ partial "docs/footer" . }}
       {{ partial "docs/inject/footer" . }}
     </div>
 

static/svg/translate.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"/></svg>