chore(i18n): support translation for theme toggle (#152)

i18n/zh-cn.yaml

@@ -9,9 +9,12 @@ backToTop: "返回顶部"
 changeLanguage: "切换语言"
 changeTheme: "切换主题"
 copyright: "© 2023 Hextra Project."
+dark: "深色"
 editThisPage: "在 GitHub 上编辑此页 →"
 lastUpdated: "最后更新于"
+light: "浅色"
 noResultsFound: "无结果"
 onThisPage: "此页上"
+poweredBy: "由 Hextra 驱动"
 readMore: "更多 →"
 searchPlaceholder: "搜索文档..."

layouts/partials/footer.html

@@ -2,6 +2,7 @@
 {{- $displayThemeToggle := site.Params.theme.displayToggle | default true -}}
 
 {{- $copyright := (T "copyright") | default "© 2023 Hextra." -}}
+{{- $poweredBy := (T "poweredBy") | default "Powered by Hextra" -}}
 
 {{- $footerWidth := "max-w-screen-xl" -}}
 {{- with .Site.Params.footer.width -}}
@@ -27,7 +28,7 @@
     class="{{ $footerWidth }} mx-auto flex justify-center py-12 pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-right),1.5rem)] text-gray-600 dark:text-gray-400 md:justify-start"
   >
     <div class="flex w-full flex-col items-center sm:items-start">
-      {{- if (.Site.Params.footer.displayPoweredBy | default true) }}<div class="font-semibold">{{ template "theme-credit" . }}</div>{{ end }}
+      {{- if (.Site.Params.footer.displayPoweredBy | default true) }}<div class="font-semibold">{{ template "theme-credit" $poweredBy }}</div>{{ end }}
       {{- if .Site.Params.footer.displayCopyright }}<div class="mt-6 text-xs">{{ $copyright | markdownify }}</div>{{ end }}
     </div>
   </div>
@@ -36,7 +37,7 @@
 {{- define "theme-credit" -}}
   <a class="flex text-sm items-center gap-1 text-current" target="_blank" rel="noopener noreferrer" title="Hextra GitHub Homepage" href="https://github.com/imfing/hextra">
     <span
-      >Powered by Hextra
+      >{{ . | safeHTML }}
       {{- partial "utils/icon.html" (dict "name" "hextra" "attributes" "height=1em class=\"inline-block ml-1 align-text-bottom\"") -}}
     </span>
   </a>

layouts/partials/theme-toggle.html

@@ -1,6 +1,8 @@
 {{- $hideLabel := .hideLabel | default false -}}
 
 {{- $changeTheme := (T "changeTheme") | default "Change theme" -}}
+{{- $light := (T "light") | default "Light" -}}
+{{- $dark := (T "dark") | default "Dark" -}}
 
 
 <button
@@ -8,12 +10,12 @@
   data-theme="light"
   class="theme-toggle group h-7 rounded-md px-2 text-left text-xs font-medium text-gray-600 transition-colors dark:text-gray-400 hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-primary-100/5 dark:hover:text-gray-50"
   type="button"
-  aria-label="Toggle Dark Mode"
+  aria-label="{{ $changeTheme }}"
 >
   <div class="flex items-center gap-2 capitalize">
     {{- partial "utils/icon.html" (dict "name" "sun" "attributes" "height=12 class=\"group-data-[theme=light]:hidden\"") -}}
-    {{- if not $hideLabel }}<span class="group-data-[theme=light]:hidden">Light</span>{{ end -}}
+    {{- if not $hideLabel }}<span class="group-data-[theme=light]:hidden">{{ $light }}</span>{{ end -}}
     {{- partial "utils/icon.html" (dict "name" "moon" "attributes" "height=12 class=\"group-data-[theme=dark]:hidden\"") -}}
-    {{- if not $hideLabel }}<span class="group-data-[theme=dark]:hidden">Dark</span>{{ end -}}
+    {{- if not $hideLabel }}<span class="group-data-[theme=dark]:hidden">{{ $dark }}</span>{{ end -}}
   </div>
 </button>