Merge branch 'master' into giscus-lang-support

assets/icons/language.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-language" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M4 5h7" />
+  <path d="M9 3v2c0 4.418 -2.239 8 -5 8" />
+  <path d="M5 9c-.003 2.144 2.952 3.908 6.7 4" />
+  <path d="M12 20l4 -9l4 9" />
+  <path d="M19.1 18h-6.2" />
+</svg>
+
+

assets/scss/partials/article.scss

@@ -91,7 +91,8 @@
     }
 }
 
-.article-time {
+.article-time,
+.article-translations {
     display: flex;
     align-items: center;
     color: var(--card-text-color-tertiary);
@@ -101,19 +102,21 @@
 
     svg {
         vertical-align: middle;
-        margin-right: 15px;
         width: 20px;
         height: 20px;
         stroke-width: 1.33;
     }
 
-    time {
+    time,
+    a {
         font-size: 1.4rem;
+        color: var(--card-text-color-tertiary);
     }
 
     & > div {
         display: inline-flex;
         align-items: center;
+        gap: 15px;
     }
 }
 

assets/scss/partials/menu.scss

@@ -125,7 +125,6 @@
 .menu {
     padding-left: 0;
     list-style: none;
-    display: flex;
     flex-direction: column;
     overflow-y: auto;
     flex-grow: 1;
@@ -138,8 +137,17 @@
 
     margin: 0 -15px;
 
+    &,
+    .menu-bottom-section {
+        gap: 15px;
+        @include respond(xl) {
+            margin-top: 30px;
+            gap: 20px;
+        }
+    }
+
     &.show {
-        display: block;
+        display: flex;
     }
 
     @include respond(md) {
@@ -161,14 +169,6 @@
         vertical-align: middle;
         padding: 10px 30px;
 
-        &:not(:last-of-type) {
-            margin-bottom: 15px;
-
-            @include respond(xl) {
-                margin-bottom: 20px;
-            }
-        }
-
         @include respond(md) {
             width: 100%;
             padding: 10px 0;
@@ -200,6 +200,13 @@
             }
         }
     }
+
+    .menu-bottom-section {
+        margin-top: auto;
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+    }
 }
 
 .social-menu {

assets/scss/partials/sidebar.scss

@@ -158,3 +158,20 @@
         display: none;
     }
 }
+
+#i18n-switch {
+    color: var(--body-text-color);
+    display: inline-flex;
+    align-content: center;
+
+    select {
+        border: 0;
+        background-color: transparent;
+        color: var(--body-text-color);
+
+        option {
+            color: var(--card-text-color-main);
+            background-color: var(--card-background);
+        }
+    }
+}

exampleSite/config.yaml

@@ -4,6 +4,16 @@ theme: hugo-theme-stack
 paginate: 5
 title: Example Site
 
+languages:
+    en:
+        languageName: English
+        title: Example Site
+        weight: 1
+    cn:
+        languageName: 中文
+        title: 演示站点
+        weight: 2
+
 # Change it to your Disqus shortname before using
 disqusShortname: hugo-theme-stack
 

exampleSite/content/page/about/index.cn.md

@@ -0,0 +1,5 @@
+---
+title: 关于
+---
+
+This is a test page for i18n support.

layouts/partials/article/components/details.html

@@ -42,4 +42,15 @@
         {{ end }}
     </footer>
     {{ end }}
+
+    {{ if .IsTranslated }}
+        <footer class="article-translations">
+            {{ partial "helper/icon" "language" }}
+            <div>
+                {{ range .Translations }}
+                    <a href="{{ .Permalink }}" class="link">{{ .Language.LanguageName }}</a>
+                {{ end }}
+            </div>
+        </footer>
+    {{ end }}
 </div>

layouts/partials/sidebar/left.html

@@ -73,12 +73,26 @@
         </li>
         {{ end }}
 
-        {{ if (default false .Site.Params.colorScheme.toggle) }}
+        <div class="menu-bottom-section">
-            <li id="dark-mode-toggle">
+            {{- $currentLanguageCode := .Language.Lang -}}
-                {{ partial "helper/icon" "toggle-left" }}
+            {{ with .Site.Home.AllTranslations }}
-                {{ partial "helper/icon" "toggle-right" }}
+                <li id="i18n-switch">  
-                <span>{{ T "darkMode" }}</span>
+                    {{ partial "helper/icon" "language" }}
-            </li>
+                    <select name="language" onchange="window.location.href = this.selectedOptions[0].value">
-        {{ end }}
+                        {{ range . }}
+                            <option value="{{ .Permalink }}" {{ if eq .Language.Lang $currentLanguageCode }}selected{{ end }}>{{ .Language.LanguageName }}</option>
+                        {{ end }}
+                    </select>
+                </li>
+            {{ end }}
+            
+            {{ if (default false .Site.Params.colorScheme.toggle) }}
+                <li id="dark-mode-toggle">
+                    {{ partial "helper/icon" "toggle-left" }}
+                    {{ partial "helper/icon" "toggle-right" }}
+                    <span>{{ T "darkMode" }}</span>
+                </li>
+            {{ end }}
+        </div>
     </ol>
 </aside>