feat(i18n): add select-menu for i18n

pogor-dev · Mar 3, 2020 · 1d1cae6 · 1d1cae6
1 parent cbfc965
commit 1d1cae6
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 35 deletions.
diff --git a/assets/css/_partial/_header.scss b/assets/css/_partial/_header.scss
@@ -10,6 +10,28 @@ header {
   .header-title {
     font-weight: bold;
   }
+
+  .select-language {
+    font-weight: $global-font-weight;
+    border: none;
+    box-shadow: none;
+    background: transparent;
+    background-image: none;
+    -webkit-appearance: none;
+    color: $global-font-color;
+
+    .dark-theme & {
+      color: $global-font-color-dark;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
 }
 
 #header-desktop {

diff --git a/assets/css/_partial/_home/_summary.scss b/assets/css/_partial/_home/_summary.scss
@@ -30,24 +30,6 @@
       font-size: 1.6rem;
     }
 
-    .post-meta {
-      a {
-        color: $global-font-secondary-color !important;
-
-        .dark-theme & {
-          color: $global-font-secondary-color-dark !important;
-        }
-
-        &:hover {
-          color: $global-link-hover-color !important;
-
-          .dark-theme & {
-            color: $global-link-hover-color-dark !important;
-          }
-        }
-      }
-    }
-
     .content {
       display: -moz-box;
       display: -webkit-box;
@@ -59,6 +41,11 @@
       overflow: hidden;
       text-overflow: ellipsis;
       overflow-wrap: break-word;
+      color: $global-font-secondary-color;
+
+      .dark-theme & {
+        color: $global-font-secondary-color-dark;
+      }
 
       h2,
       h3,

diff --git a/assets/css/_variables.scss b/assets/css/_variables.scss
@@ -6,7 +6,7 @@
 // Font and Line Height
 $global-font-family: -apple-system, BlinkMacSystemFont, PingFang SC, Microsoft Yahei, Segoe UI, Helvetica, Arial, sans-serif, Segoe UI Emoji !default;
 $global-font-size: 16px;
-$global-font-weight: 300;
+$global-font-weight: 400;
 $global-line-height: 1.5rem;
 
 // Color of the background

diff --git a/exampleSite/config.toml b/exampleSite/config.toml
@@ -26,6 +26,8 @@ enableEmoji = true
     languageCode = "en"
     # website title
     title = "LoveIt Theme"
+    # language name
+    languageName = "English"
     # whether to include chinese/japanese/korean
     hasCJKLanguage = false
     # default amount of posts in each pages
@@ -58,13 +60,6 @@ enableEmoji = true
         name = "About"
         url = "/about/"
         weight = 4
-      [[languages.en.menu.main]]
-        identifier = "zh"
-        pre = '<i class="fas fa-language fa-fw"></i>'
-        name = ""
-        title = "简体中文"
-        url = "/zh/"
-        weight = 5
       [languages.en.params]
         # site description
         description = "About LoveIt Theme"
@@ -232,6 +227,8 @@ enableEmoji = true
     languageCode = "zh"
     # 网站标题
     title = "LoveIt 主题"
+    # 语言名称
+    languageName = "简体中文"
     # 是否包括中日韩文字
     hasCJKLanguage = true
     # 默认每页列表显示的文章数目
@@ -264,13 +261,6 @@ enableEmoji = true
         name = "关于"
         url = "/about/"
         weight = 4
-      [[languages.zh.menu.main]]
-        identifier = "en"
-        pre = '<i class="fas fa-language fa-fw"></i>'
-        name = ""
-        title = "English"
-        url = "../"
-        weight = 5
     [languages.zh.params]
       # 网站描述
       description = "关于 LoveIt 主题"

diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -12,6 +12,26 @@
                     {{- .Pre | safeHTML }}{{ .Name -}}
                 </a>
             {{- end -}}
+            {{- if .Site.IsMultiLingual -}}
+                &nbsp;|&nbsp;
+                <span class="menu-item">
+                    <i class="fas fa-language fa-fw"></i>&nbsp;
+                    <select class="select-language" onchange="location = this.value;">
+                        {{- range .Page.AllTranslations -}}
+                            {{- $translation := . -}}
+                            {{- range $.Site.Languages -}}
+                                {{- if eq $translation.Lang .Lang -}}
+                                    {{- if eq $.Page.Lang .Lang -}}
+                                        <option value="{{ $translation.Permalink }}" selected>{{ .LanguageName }}</option>
+                                    {{- else -}}
+                                        <option value="{{ $translation.Permalink }}">{{ .LanguageName }}</option>
+                                    {{- end -}}
+                                {{- end -}}
+                            {{- end -}}
+                        {{- end -}}
+                    </select>
+                </span>
+            {{- end -}}
             <a href="javascript:void(0);" class="theme-switch" title="{{ T "switchTheme" }}">
                 <i class="fas fa-adjust fa-rotate-180 fa-fw"></i>
             </a>
@@ -39,6 +59,25 @@
                     {{- .Pre | safeHTML }}{{ .Name -}}
                 </a>
             {{- end -}}
+            {{- if .Site.IsMultiLingual -}}
+                <span class="menu-item">
+                    <i class="fas fa-language fa-fw"></i>&nbsp;
+                    <select class="select-language" onchange="location = this.value;">
+                        {{- range .Site.Home.AllTranslations -}}
+                            {{- $translation := . -}}
+                            {{- range $.Site.Languages -}}
+                                {{- if eq $translation.Lang .Lang -}}
+                                    {{- if eq $.Page.Lang .Lang -}}
+                                        <option value="{{ $translation.Permalink }}" selected>{{ .LanguageName }}</option>
+                                    {{- else -}}
+                                        <option value="{{ $translation.Permalink }}">{{ .LanguageName }}</option>
+                                    {{- end -}}
+                                {{- end -}}
+                            {{- end -}}
+                        {{- end -}}
+                    </select>
+                </span>
+            {{- end -}}
             <a href="javascript:void(0);" class="theme-switch" title="{{ T "switchTheme" }}">
                 <i class="fas fa-adjust fa-rotate-180 fa-fw"></i>
             </a>

diff --git a/resources/_gen/assets/scss/css/style.template.scss_40942e46c3aa444eabf479d066570690.content b/resources/_gen/assets/scss/css/style.template.scss_40942e46c3aa444eabf479d066570690.content
diff --git a/resources/_gen/assets/scss/css/style.template.scss_40942e46c3aa444eabf479d066570690.json b/resources/_gen/assets/scss/css/style.template.scss_40942e46c3aa444eabf479d066570690.json
@@ -1 +1 @@
-{"Target":"css/style.min.8d8ebcf734d4e8e32cab589f8df6e5bad5775d4d25d0cf2b66c6c5476831f18d.css","MediaType":"text/css","Data":{"Integrity":"sha256-jY689zTU6OMsq1ifjfblutV3XU0l0M8rZsbFR2gx8Y0="}}
+{"Target":"css/style.min.52eef027334e2f9819adcad242e7298beefaf3f468d9085be0327f795ae0e4e5.css","MediaType":"text/css","Data":{"Integrity":"sha256-Uu7wJzNOL5gZrcrSQucpi+768/Ro2Qhb4DJ/eVrg5OU="}}
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		{"Target":"css/style.min.8d8ebcf734d4e8e32cab589f8df6e5bad5775d4d25d0cf2b66c6c5476831f18d.css","MediaType":"text/css","Data":{"Integrity":"sha256-jY689zTU6OMsq1ifjfblutV3XU0l0M8rZsbFR2gx8Y0="}}
		{"Target":"css/style.min.52eef027334e2f9819adcad242e7298beefaf3f468d9085be0327f795ae0e4e5.css","MediaType":"text/css","Data":{"Integrity":"sha256-Uu7wJzNOL5gZrcrSQucpi+768/Ro2Qhb4DJ/eVrg5OU="}}