feat: multilingual

assets/js/main.js

@@ -24,7 +24,16 @@
 
   const navbarMenuToggle = document.getElementById('navbar-menu-toggle');
   const navbarMenu = document.getElementById('navbar-menu');
+  const navbarLangToggle = document.getElementById('navbar-lang-toggle');
+  const navbarLang = document.getElementById('navbar-lang');
+
   navbarMenuToggle.addEventListener('click', function () {
+    navbarLang.classList.add('hidden');
     navbarMenu.classList.toggle('hidden');
   });
+
+  navbarLangToggle.addEventListener('click', function () {
+    navbarMenu.classList.add('hidden');
+    navbarLang.classList.toggle('hidden');
+  });
 })();

config/_default/hugo.toml

@@ -1,5 +1,5 @@
 baseURL = 'https://example.org/'
-languageCode = 'en-us'
+languageCode = 'en'
 title = 'My New Hugo Site'
 hasCJKLanguage = true
 

exampleSite/config/_default/hugo.toml

@@ -4,7 +4,7 @@ author = "Xiaoliang Wang"
 copyright = "Xiaoliang Wang"
 paginate = 2 # for demonstration of pagination
 languageCode = "en"
-DefaultContentLanguage = "en"
+defaultContentLanguage = "en"
 enableInlineShortcodes = true
 # prevent build failures when using Hugo's Instagram shortcode due to deprecated Instagram API.
 # See https://github.com/gohugoio/hugo/issues/7228#issuecomment-714490456

exampleSite/config/_default/languages.toml

@@ -0,0 +1,35 @@
+[en]
+  languageCode = 'en-US'
+  languageDirection = 'ltr'
+  languageName = 'English'
+  weight = 0
+  [en.menu]
+  [[en.menu.main]]
+    identifier = "post"
+    name = "Post"
+    pageRef = "post"
+    weight = 0
+
+  [[en.menu.main]]
+    identifier = "about"
+    name = "About"
+    pageRef = "about"
+    weight = 10
+
+[zh-cn]
+  languageCode = 'zh-CN'
+  languageDirection = 'ltr'
+  languageName = '中文'
+  weight = 1
+  [zh-cn.menu]
+  [[zh-cn.menu.main]]
+    identifier = "post"
+    name = "文章"
+    pageRef = "post"
+    weight = 0
+
+  [[zh-cn.menu.main]]
+    identifier = "about"
+    name = "关于"
+    pageRef = "about"
+    weight = 10

exampleSite/config/_default/params.toml

@@ -10,7 +10,7 @@ contentTypeName = "post"
   logo = "logo.webp"
 
 [footer]
-  since = 2023
+  since = 2022
   poweredby = true
 
 # giscus is comments system powered by GitHub Discussions
@@ -54,7 +54,7 @@ contentTypeName = "post"
     link = 'https://www.linkedin.com/'
 
   [[social_media.items]]
-  enabled = true
-  title = 'Github'
-  icon = 'brand-github'
-  link = 'https://github.com/tomowang'
+    enabled = true
+    title = 'Github'
+    icon = 'brand-github'
+    link = 'https://github.com/tomowang'

exampleSite/content/about.zh-cn.md

@@ -0,0 +1,9 @@
++++
+title = "关于"
+description = "Hugo, 世上最快的站点构建框架"
+date = "2019-02-28"
+aliases = ["about-us", "about-hugo", "contact"]
+author = "Hugo Authors"
++++
+
+multilingual中文测试页面

i18n/en.toml

@@ -0,0 +1,23 @@
+read_more = "Read more"
+table_of_contents = "Table of Contents"
+open_main_menu = "Open main menu"
+open_lang_switcher = "Open language switcher"
+
+[404]
+go_back_home = "Go back home"
+sorry = "Sorry, we couldn't find the page you're looking for."
+page_not_found = "Page not found"
+
+[footer]
+powered_by = "Powered by {{ .Generator }} {{ .Heart }} {{ .Theme }}"
+copyright_with_since ="{{ .CopyrightSign }} {{ .SinceYear }} - {{ .CurrentYear}} {{ .Copyright }}"
+copyright_wo_since ="{{ .CopyrightSign }} {{ .CurrentYear}} {{ .Copyright }}"
+
+[paginator]
+newer_posts = "Newer posts"
+older_posts = "Older posts"
+
+[taxonomies]
+categories = "Categories"
+tags = "Tags"
+series = "Series"

i18n/zh-CN.toml

@@ -0,0 +1,23 @@
+read_more = "阅读更多"
+table_of_contents = "目录"
+open_main_menu = "打开菜单"
+open_lang_switcher = "打开语言切换"
+
+[404]
+go_back_home = "回到首页"
+sorry = "对不起，暂未找到您请求的页面"
+page_not_found = "页面未找到"
+
+[footer]
+powered_by = "Powered by {{ .Generator }} {{ .Heart }} {{ .Theme }}"
+copyright_with_since ="{{ .CopyrightSign }} {{ .SinceYear }} - {{ .CurrentYear}} {{ .Copyright }}"
+copyright_wo_since ="{{ .CopyrightSign }} {{ .CurrentYear}} {{ .Copyright }}"
+
+[paginator]
+newer_posts = "新文章"
+older_posts = "旧文章"
+
+[taxonomies]
+categories = "分类"
+tags = "标签"
+series = "系列"

layouts/404.html

@@ -2,11 +2,11 @@
   <main class="grid place-items-center w-full min-h-full max-w-4xl lg:max-w-5xl px-6 py-24">
     <div class="text-center w-full">
       <p class="text-base font-semibold text-indigo-600 dark:text-indigo-300">404</p>
-      <h1 class="mt-4 text-3xl font-bold tracking-tight text-slate-800 dark:text-slate-200 sm:text-5xl">Page not found</h1>
-      <p class="mt-6 text-base leading-7 text-slate-400">Sorry, we couldn't find the page you're looking for.</p>
+      <h1 class="mt-4 text-3xl font-bold tracking-tight text-slate-800 dark:text-slate-200 sm:text-5xl">{{ T "404.page_not_found" }}</h1>
+      <p class="mt-6 text-base leading-7 text-slate-400">{{ T "404.sorry" }}</p>
       <div class="mt-10 flex items-center justify-center gap-x-6">
         <a href="/" class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
-          Go back home
+          {{ T "404.go_back_home" }}
         </a>
       </div>
     </div>

layouts/_default/list.html

@@ -30,7 +30,7 @@ <h2 class="text-4xl font-semibold text-slate-800 dark:text-slate-200">
               <div class="grow"></div>
               <div class="flex flex-row">
                 <a class="flex flex-row text-base ml-6" href="{{.RelPermalink}}">
-                  <span class="">Read more</span>
+                  <span class="">{{ T "read_more" }}</span>
                   <i class="h-6 w-6 flex-none">
                     {{ partial "icon" "chevron-right" }}
                   </i>

layouts/_default/single.html

@@ -15,7 +15,7 @@ <h1 class="text-4xl font-semibold text-slate-800 dark:text-slate-100">
     {{ if or .Params.Toc $.Site.Params.Toc }}
       {{ if ne .Params.Toc false }}
       <section class="prose prose-slate dark:prose-invert w-full max-w-4xl lg:max-w-5xl mt-6">
-        <h2>Table of Contents</h2>
+        <h2>{{ T "table_of_contents" }}</h2>
         <aside>{{ .TableOfContents }}</aside>
       </section>
       {{ end }}

layouts/_default/terms.html

@@ -2,7 +2,7 @@
   {{ $type := .Type }}
   <div class="flex flex-col gap-y-3 p-6 mt-6 mx-2 md:mx-0 rounded-lg shadow-md bg-white dark:bg-gray-700 w-full max-w-4xl lg:max-w-5xl">
     <h1 class="text-4xl font-semibold text-slate-800 dark:text-slate-200">
-      <a href="{{ .RelPermalink }}">{{ .Title | markdownify }}</a>
+      <a href="{{ .RelPermalink }}">{{ T (printf "taxonomies.%s" $type) | safeHTML }}</a>
     </h1>
     <ul class="flex flex-col gap-3">
       {{ range $key, $value := .Data.Terms.ByCount }}

layouts/partials/block/sidebar_section.html

@@ -10,7 +10,7 @@
         {{ partial "icon" $icon }}
       </i>
       <h2 class="pl-1 uppercase">
-        {{ $taxonomy }}
+        {{ T (printf "taxonomies.%s" $taxonomy) | safeHTML }}
       </h2>
     </a>
   </div>

layouts/partials/footer.html

@@ -4,21 +4,35 @@
   </div>
   <div class="grow"></div>
   <div class="flex flex-row">
-    <i class="h-6 w-6 flex-none"> {{ partial "icon" "copyright" }} </i>
-    <span class="">
-      {{ if and (.Site.Params.footer.since)
-        (ne .Site.Params.footer.since (int (now.Format "2006")))
-      }} {{ .Site.Params.footer.since }} -
-      {{ end }}
-      {{ now.Format "2006" }} {{ .Site.Copyright }}
-    </span>
+    {{- $CopyrightSign := (printf `<i class="h-6 w-6 flex-none">%s</i>` (partial "icon" "copyright")) -}}
+    {{- $SinceYear := .Site.Params.footer.since -}}
+    {{- $CurrentYear := now.Format "2006" -}}
+    {{- $Copyright := .Site.Copyright -}}
+
+    {{ if and (.Site.Params.footer.since)
+      (ne .Site.Params.footer.since (int (now.Format "2006")))
+    }}
+    {{ T "footer.copyright_with_since"  (dict
+      "CopyrightSign" $CopyrightSign
+      "SinceYear" $SinceYear
+      "CurrentYear" $CurrentYear
+      "Copyright" $Copyright
+    ) | safeHTML }}
+    {{ else }}
+    {{ T "footer.copyright_wo_since"  (dict
+      "CopyrightSign" $CopyrightSign
+      "CurrentYear" $CurrentYear
+      "Copyright" $Copyright
+    ) | safeHTML }}
+    {{ end }}
   </div>
   {{ if .Site.Params.footer.poweredby }}
   <div class="flex flex-row">
-    <span class="ml-0 pl-0 md:ml-2 md:pl-2 border-l-0 md:border-l border-slate-300 dark:border-slate-400">Powered by
-      <a href="https://gohugo.io" target="_blank" rel="noopener" class="underline">Hugo</a>
-      <span class="text-red-600">&hearts;</span>
-      <a href="https://github.com/tomowang/hugo-theme-tailwind" target="_blank" rel="noopener" class="underline">Tailwind</a>
+    {{- $Generator := `<a href="https://gohugo.io" target="_blank" rel="noopener" class="underline">Hugo</a>` -}}
+    {{- $Theme := `<a href="https://github.com/tomowang/hugo-theme-tailwind" target="_blank" rel="noopener" class="underline">Tailwind</a>` -}}
+    {{- $Heart := `<span class="text-red-600">&hearts;</span>` }}
+    <span class="ml-0 pl-0 md:ml-2 md:pl-2 border-l-0 md:border-l border-slate-300 dark:border-slate-400">
+      {{ T "footer.powered_by" (dict "Generator" $Generator "Theme" $Theme "Heart" $Heart ) | safeHTML }}
     </span>
   </div>
   {{ end }}

layouts/partials/header.html

@@ -8,7 +8,31 @@
   <div class="flex-none">
     {{ partial "menu.html" }}
   </div>
-  <div class="darkmode-toggle flex flex-none mx-2 md:mr-0">
+  {{ if (gt .AllTranslations.Len 1) }}
+  <div class="flex-none">
+    <div class="h-full static">
+      <button id="navbar-lang-toggle" type="button" class="inline-flex items-center p-2 text-sm text-slate-800 dark:text-slate-200 rounded-lg" aria-controls="navbar-menu" aria-expanded="false">
+        <span class="sr-only">{{ T "open_lang_switcher" }}</span>
+        <i class="w-8 h-8">
+          {{ partial "icon" "language" }}
+        </i>
+      </button>
+      <div class="absolute hidden top-16 z-50" id="navbar-lang">
+        <ul class="flex flex-col rounded-sm px-3 text-base font-medium text-slate-800 dark:text-slate-200 shadow-lg bg-white dark:bg-gray-600 shadow-slate-800/5 dark:shadow-slate-200/5 ring-1 ring-slate-900/5 dark:ring-slate-100/5">
+        {{ range .AllTranslations.ByWeight }}
+          <li class="">
+            <a class="block px-3 py-3 hover:text-emerald-500"
+              href="{{ .RelPermalink }}" title="{{ .Language.LanguageName }}">{{ .Language.LanguageName }}</a>
+          </li>
+        {{ end }}
+        </ul>
+      </div>
+    </div>
+  </div>
+  {{ else }}
+  <div class="flex-none mx-1"></div>
+  {{ end }}
+  <div class="darkmode-toggle flex flex-none mr-2 md:mr-0">
     <label class="flex items-center px-3 cursor-pointer rounded-full bg-gray-100 dark:bg-gray-600">
       <input type="checkbox" class="sr-only peer">
       <div class="group flex flex-row gap-1 justify-center h-8 px-1 rounded-full bg-white dark:bg-gray-700">

layouts/partials/menu.html

@@ -1,6 +1,6 @@
 <nav class="h-full static">
   <button id="navbar-menu-toggle" type="button" class="inline-flex items-center p-2 text-sm text-slate-800 dark:text-slate-200 rounded-lg md:hidden" aria-controls="navbar-menu" aria-expanded="false">
-    <span class="sr-only">Open main menu</span>
+    <span class="sr-only">{{ T "open_main_menu" }}</span>
     <i class="w-8 h-8">
       {{ partial "icon" "menu-2" }}
     </i>

layouts/partials/pagination.html

@@ -4,13 +4,13 @@
     <a href="{{ .Paginator.Prev.URL }}"
       class="flex flex-row text-base font-semibold rounded-md text-slate-700 dark:text-slate-300 bg-slate-200 dark:bg-gray-700 p-2 pr-3">
       <i class="h-6 w-6 flex-none mr-1">{{ partial "icon" "caret-left" }}</i>
-      <span>{{ $.Site.Params.NewerPosts | default "Newer posts" }}</span>
+      <span>{{ T "paginator.newer_posts" }}</span>
     </a>
   {{ end }}
   {{ if .Paginator.HasNext }}
     <a href="{{ .Paginator.Next.URL }}"
       class="flex flex-row text-base font-semibold rounded-md text-slate-700 dark:text-slate-300 bg-slate-200 dark:bg-gray-700 p-2 pl-3">
-      <span>{{ $.Site.Params.OlderPosts | default "Older posts" }}</span>
+      <span>{{ T "paginator.older_posts" }}</span>
       <i class="h-6 w-6 flex-none ml-1">{{ partial "icon" "caret-right" }}</i>
     </a>
   {{ end }}

static/main.css

@@ -1157,6 +1157,11 @@ video {
   z-index: 50;
 }
 
+.mx-1 {
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+}
+
 .mx-2 {
   margin-left: 0.5rem;
   margin-right: 0.5rem;