feat: added traditional chinese language support

src/App.vue

@@ -114,15 +114,15 @@ export default defineComponent({
         if (appStore.themeConfig.plugins.copy_protection.enable) {
           const locale = appStore.locale
           const linkPlaceholder =
-            locale === 'cn'
+            locale === 'zh-CN'
               ? appStore.themeConfig.plugins.copy_protection.link.cn
               : appStore.themeConfig.plugins.copy_protection.link.en
           const authorPlaceholder =
-            locale === 'cn'
+            locale === 'zh-CN'
               ? appStore.themeConfig.plugins.copy_protection.author.cn
               : appStore.themeConfig.plugins.copy_protection.author.en
           const licensePlaceholder =
-            locale === 'cn'
+            locale === 'zh-CN'
               ? appStore.themeConfig.plugins.copy_protection.license.cn
               : appStore.themeConfig.plugins.copy_protection.license.en
 

src/components/Comment.vue

@@ -23,11 +23,6 @@ import { githubInit } from '@/utils/comments/github-api'
 import { valineInit } from '@/utils/comments/valine-api'
 import { walineInit } from '@/utils/comments/waline-api'
 
-const languages: Record<string, string> = {
-  en: 'en',
-  cn: 'zh'
-}
-
 export default defineComponent({
   name: 'ObComment',
   props: {
@@ -151,7 +146,7 @@ export default defineComponent({
 
         waline = walineInit({
           serverURL,
-          lang: languages[appStore.locale ?? 'en'],
+          lang: appStore.locale ?? 'en',
           login,
           reaction,
           meta,
@@ -181,7 +176,7 @@ export default defineComponent({
       (newLocale, oldLocale) => {
         if (waline && newLocale !== undefined && newLocale !== oldLocale) {
           waline.update({
-            lang: languages[newLocale]
+            lang: newLocale
           })
         }
       }

src/components/Header/src/Controls.vue

@@ -34,15 +34,19 @@
             width="1.2rem"
             height="1.2rem"
           />
-          <span v-if="$i18n.locale == 'cn'">中文</span>
-          <span v-if="$i18n.locale == 'en'">EN</span>
+          <span v-if="$i18n.locale == 'zh-CN'">简体</span>
+          <span v-if="$i18n.locale == 'zh-TW'">繁體</span>
+          <span v-if="$i18n.locale == 'en'">En</span>
         </span>
         <DropdownMenu>
           <DropdownItem name="en" :active="currentLocale === 'en'">
             English
           </DropdownItem>
-          <DropdownItem name="cn" :active="currentLocale === 'cn'">
-            中文
+          <DropdownItem name="zh-CN" :active="currentLocale === 'zh-CN'">
+            简体
+          </DropdownItem>
+          <DropdownItem name="zh-TW" :active="currentLocale === 'zh-TW'">
+            繁體
           </DropdownItem>
         </DropdownMenu>
       </Dropdown>
@@ -98,6 +102,7 @@ import SearchModal from '@/components/SearchModal.vue'
 import { useSearchStore } from '@/stores/search'
 import SvgIcon from '@/components/SvgIcon/index.vue'
 import { useNavigatorStore } from '@/stores/navigator'
+import { Locales } from '@/models/ThemeConfig.class'
 
 export default defineComponent({
   name: 'Controls',
@@ -121,7 +126,7 @@ export default defineComponent({
     const navigatorStore = useNavigatorStore()
     const ballProgress = toRefs(props).scrollProgress
 
-    const handleClick = (name: string): void => {
+    const handleClick = (name: Locales): void => {
       appStore.changeLocale(name)
     }
 

src/components/Header/src/Navigation.vue

@@ -12,17 +12,8 @@
           v-if="route.children && route.children.length === 0"
           :data-menu="route.name"
         >
-          <span
-            class="relative z-50"
-            v-if="$i18n.locale === 'cn' && route.i18n.cn"
-          >
-            {{ route.i18n.cn }}
-          </span>
-          <span
-            class="relative z-50"
-            v-else-if="$i18n.locale === 'en' && route.i18n.en"
-          >
-            {{ route.i18n.en }}
+          <span class="relative z-50" v-if="locale">
+            {{ route.i18n[locale] }}
           </span>
           <span class="relative z-50" v-else>{{ route.name }}</span>
         </div>
@@ -32,17 +23,8 @@
           v-else
           class="nav-link text-sm block px-1.5 py-0.5 rounded-md relative uppercase"
         >
-          <span
-            class="relative z-50"
-            v-if="$i18n.locale === 'cn' && route.i18n.cn"
-          >
-            {{ route.i18n.cn }}
-          </span>
-          <span
-            class="relative z-50"
-            v-else-if="$i18n.locale === 'en' && route.i18n.en"
-          >
-            {{ route.i18n.en }}
+          <span class="relative z-50" v-if="locale">
+            {{ route.i18n[locale] }}
           </span>
           <span class="relative z-50" v-else>{{ route.name }}</span>
           <DropdownMenu>
@@ -51,17 +33,8 @@
               :key="sub.path"
               :name="sub.path"
             >
-              <span
-                class="relative z-50"
-                v-if="$i18n.locale === 'cn' && sub.i18n.cn"
-              >
-                {{ sub.i18n.cn }}
-              </span>
-              <span
-                class="relative z-50"
-                v-else-if="$i18n.locale === 'en' && sub.i18n.en"
-              >
-                {{ sub.i18n.en }}
+              <span class="relative z-50" v-if="locale">
+                {{ sub.i18n[locale] }}
               </span>
               <span class="relative z-50" v-else>{{ sub.name }}</span>
             </DropdownItem>
@@ -100,6 +73,7 @@ export default defineComponent({
     }
 
     return {
+      locale: computed(() => appStore.locale),
       routes: computed(() => appStore.themeConfig.menu.menus),
       pushPage,
       te,

src/components/MobileMenu.vue

@@ -63,9 +63,15 @@
           >
             <span
               class="relative z-50"
-              v-if="$i18n.locale === 'cn' && route.i18n.cn"
+              v-if="$i18n.locale === 'zh-CN' && route.i18n['zh-CN']"
             >
-              {{ route.i18n.cn }}
+              {{ route.i18n['zh-CN'] }}
+            </span>
+            <span
+              class="relative z-50"
+              v-if="$i18n.locale === 'zh-TW' && route.i18n['zh-TW']"
+            >
+              {{ route.i18n['zh-TW'] }}
             </span>
             <span
               class="relative z-50"
@@ -82,9 +88,15 @@
           >
             <span
               class="relative z-50"
-              v-if="$i18n.locale === 'cn' && route.i18n.cn"
+              v-if="$i18n.locale === 'zh-CN' && route.i18n['zh-CN']"
+            >
+              {{ route.i18n['zh-CN'] }}
+            </span>
+            <span
+              class="relative z-50"
+              v-if="$i18n.locale === 'zh-TW' && route.i18n['zh-TW']"
             >
-              {{ route.i18n.cn }}
+              {{ route.i18n['zh-TW'] }}
             </span>
             <span
               class="relative z-50"
@@ -101,9 +113,15 @@
               >
                 <span
                   class="relative z-50"
-                  v-if="$i18n.locale === 'cn' && sub.i18n.cn"
+                  v-if="$i18n.locale === 'zh-CN' && sub.i18n['zh-CN']"
+                >
+                  {{ sub.i18n['zh-CN'] }}
+                </span>
+                <span
+                  class="relative z-50"
+                  v-if="$i18n.locale === 'zh-TW' && sub.i18n['zh-TW']"
                 >
-                  {{ sub.i18n.cn }}
+                  {{ sub.i18n['zh-TW'] }}
                 </span>
                 <span
                   class="relative z-50"

src/hooks/usePageTitle.ts

@@ -1,3 +1,4 @@
+import { Locales } from '@/models/ThemeConfig.class'
 import { useAppStore } from '@/stores/app'
 import { useMetaStore } from '@/stores/meta'
 import { ref, watch } from 'vue'
@@ -9,8 +10,8 @@ export default function usePageTitle() {
   const metaStore = useMetaStore()
   const route = useRoute()
 
-  const updateTitle = (locale?: string | undefined) => {
-    const currentLocale = (locale ?? appStore.locale) === 'cn' ? 'cn' : 'en'
+  const updateTitle = (locale?: Locales | undefined) => {
+    const currentLocale: Locales = locale ?? appStore.locale
     const menuName = String(route.name)
     const routeInfo =
       appStore.themeConfig.menu.menus[

src/locales/languages/zh-TW.json

@@ -0,0 +1,91 @@
+{
+  "menu": {
+    "home": "首頁",
+    "about": "關於",
+    "archives": "歸檔",
+    "categories": "分類",
+    "tags": "標簽",
+    "post": "文章",
+    "message-board": "留言闆",
+    "search": "搜索結果",
+    "not-found": "無法找到頁面"
+  },
+  "home": {
+    "recommended": "推薦文章"
+  },
+  "titles": {
+    "articles": "文章列錶",
+    "about": "關於我",
+    "category_list": "分類",
+    "tag_list": "標簽",
+    "toc": "文章目錄",
+    "comment": "評論區",
+    "recent_comment": "最近評論"
+  },
+  "settings": {
+    "months": [
+      "一月",
+      "二月",
+      "三月",
+      "四月",
+      "五月",
+      "六月",
+      "七月",
+      "八月",
+      "九月",
+      "十月",
+      "十一月",
+      "十二月"
+    ],
+    "articles": "文章",
+    "categories": "分類",
+    "tags": "標簽",
+    "words": "文字",
+    "visitor_count": "總共訪客數",
+    "visit_count": "總共訪問數",
+    "button-all": "全部",
+    "paginator": {
+      "newer": "新的",
+      "older": "以往",
+      "prev": "上一篇更回味",
+      "next": "下一篇更精彩"
+    },
+    "more-tags": "查看更多",
+    "admin-user": "博主",
+    "shared-on": "發佈於",
+    "recently-search": "最近搜索",
+    "search-result": "一共找到 [total] 個結果",
+    "no-recent-search": "沒有最近搜索記錄。",
+    "no-search-result": "沒有找到任何記錄。",
+    "cmd-to-select": "查看",
+    "cmd-to-navigate": "選擇",
+    "cmd-to-close": "關閉",
+    "searched-by": "搜索引擎",
+    "tips-back-to-top": "返回頂部",
+    "tips-open-menu": "打開菜單",
+    "tips-back-to-home": "返回首頁",
+    "tips-open-search": "打開搜索",
+    "default-category": "文章",
+    "default-tag": "未分類",
+    "empty-tag": "目前沒有標簽",
+    "empty-recent-comments": "目前沒有最新評論",
+    "pinned": "置頂",
+    "featured": "推薦",
+    "page-views-value": "瀏覽次數：",
+    "site-running-for": "建站天數：",
+    "site-running-for-unit": "天",
+    "links": "友情鏈接",
+    "links-slogan": "與無數博主共同進步",
+    "links-random-visit": "隨機訪問",
+    "links-apply": "申請友鏈",
+    "links-badge-personal": "個人",
+    "links-badge-personal-desc": "記錄關於自己的點點滴滴",
+    "links-badge-tech": "技術",
+    "links-badge-tech-desc": "技術為主的博主們",
+    "links-badge-designer": "設計",
+    "links-badge-designer-desc": "設計為主的博主們",
+    "links-badge-vip": "贊助者",
+    "links-badge-vip-desc": "最近贊助本站的友友們",
+    "notification-random-jump": "正在隨機挑選一位幸運博主"
+  }
+}