feat: add i18n supports (#214)

添加界面的 i18n 支持。

/kind feature

Fixes #198
Fixes #75

```release-note
添加界面的 i18n 支持。
```

env.d.ts

@@ -7,5 +7,6 @@ declare global {
   interface Window {
     Alpine: Alpine;
     SearchWidget: any;
+    i18nResources: Record<string, string>;
   }
 }

i18n/en.properties

@@ -0,0 +1,54 @@
+common.previousPage=Previous
+common.nextPage=Next
+common.more=More
+common.all=All
+common.noPosts=No Posts
+common.comment=Comment
+common.edit=Edit
+common.publishedOn=Published on {0}
+common.visitCount={0} Visits
+
+widget.categories.title=Categories
+widget.popularPosts.title=Popular Posts
+widget.tags.title=Tags
+widget.latestComments.title=Latest Comments
+widget.profile.postCount.label=Posts
+widget.profile.categoryCount.label=Categories
+widget.profile.commentCount.label=Comments
+widget.profile.visitCount.label=Visits
+
+page.archives.title=Archives
+page.archives.date={0} / {1}
+page.links.title=Links
+page.moments.title=Moments
+page.photos.title=Photos
+page.tags.title=Tags
+page.tags.morePosts=More Posts
+page.tag.title=Tag: {0}
+page.category.title=Category: {0}
+page.author.title=Author: {0}
+page.error.backToHome=Back to Home
+page.post.toc=Table of Contents
+
+fragment.header.search=Search
+fragment.header.menu=Menu
+fragment.header.console=Console
+fragment.header.logout=Logout
+fragment.header.login=Login
+fragment.layout.toTop=Back to Top
+fragment.tagFilter.allTags=All Tags
+fragment.shareModal.title=Share
+fragment.shareModal.copy=Copy
+fragment.shareModal.copied=Copied
+fragment.postCard.pinned=Pinned
+
+jsModule.colorSchemeSwitcher.dark=Dark
+jsModule.colorSchemeSwitcher.light=Light
+jsModule.colorSchemeSwitcher.auto=Auto
+jsModule.share.qzone=QQ Zone
+jsModule.share.weibo=Weibo
+jsModule.share.douban=Douban
+jsModule.share.wechat=WeChat
+jsModule.share.native=System
+jsModule.share.windowTitle=Share
+jsModule.upvote.networkError=Network request failed, please try again later

i18n/es.properties

@@ -0,0 +1,54 @@
+common.previousPage=Página Anterior
+common.nextPage=Página Siguiente
+common.more=Más
+common.all=Todo
+common.noPosts=No hay Publicaciones
+common.comment=Comentario
+common.edit=Editar
+common.publishedOn=Publicado el {0}
+common.visitCount={0} Lecturas
+
+widget.categories.title=Categorías
+widget.popularPosts.title=Publicaciones Populares
+widget.tags.title=Etiquetas
+widget.latestComments.title=Últimos Comentarios
+widget.profile.postCount.label=Número de Publicaciones
+widget.profile.categoryCount.label=Número de Categorías
+widget.profile.commentCount.label=Número de Comentarios
+widget.profile.visitCount.label=Visitas
+
+page.archives.title=Archivos
+page.archives.date=Año {0} Mes {1}
+page.links.title=Enlaces
+page.moments.title=Momentos
+page.photos.title=Galería
+page.tags.title=Etiquetas
+page.tags.morePosts=Más Publicaciones
+page.tag.title=Etiqueta: {0}
+page.category.title=Categoría: {0}
+page.author.title=Autor: {0}
+page.error.backToHome=Volver al Inicio
+page.post.toc=Tabla de Contenidos
+
+fragment.header.search=Buscar
+fragment.header.menu=Menú
+fragment.header.console=Consola
+fragment.header.logout=Cerrar Sesión
+fragment.header.login=Iniciar Sesión
+fragment.layout.toTop=Volver Arriba
+fragment.tagFilter.allTags=Todas las Etiquetas
+fragment.shareModal.title=Compartir
+fragment.shareModal.copy=Copiar
+fragment.shareModal.copied=Copiado
+fragment.postCard.pinned=Fijado
+
+jsModule.colorSchemeSwitcher.dark=Oscuro
+jsModule.colorSchemeSwitcher.light=Claro
+jsModule.colorSchemeSwitcher.auto=Seguir Sistema
+jsModule.share.qzone=QQ Zona
+jsModule.share.weibo=Weibo
+jsModule.share.douban=Douban
+jsModule.share.wechat=WeChat
+jsModule.share.native=Compartir del Sistema
+jsModule.share.windowTitle=Compartir
+jsModule.upvote.networkError=Error de red, por favor intente nuevamente más tarde

i18n/zh_CN.properties

@@ -0,0 +1,54 @@
+common.previousPage=上一页
+common.nextPage=上一页
+common.more=更多
+common.all=全部
+common.noPosts=没有文章
+common.comment=评论
+common.edit=编辑
+common.publishedOn=发布于 {0}
+common.visitCount={0} 阅读
+
+widget.categories.title=分类目录
+widget.popularPosts.title=热门文章
+widget.tags.title=标签
+widget.latestComments.title=最新评论
+widget.profile.postCount.label=文章数
+widget.profile.categoryCount.label=分类数
+widget.profile.commentCount.label=评论数
+widget.profile.visitCount.label=访问量
+
+page.archives.title=归档
+page.archives.date={0} 年 {1} 月
+page.links.title=链接
+page.moments.title=瞬间
+page.photos.title=图库
+page.tags.title=标签
+page.tags.morePosts=更多文章
+page.tag.title=标签：{0}
+page.category.title=分类：{0}
+page.author.title=作者：{0}
+page.error.backToHome=返回首页
+page.post.toc=目录
+
+fragment.header.search=搜索
+fragment.header.menu=菜单
+fragment.header.console=控制台
+fragment.header.logout=退出登录
+fragment.header.login=登录
+fragment.layout.toTop=回到顶部
+fragment.tagFilter.allTags=所有标签
+fragment.shareModal.title=分享
+fragment.shareModal.copy=复制
+fragment.shareModal.copied=已复制
+fragment.postCard.pinned=置顶
+
+jsModule.colorSchemeSwitcher.dark=暗色
+jsModule.colorSchemeSwitcher.light=暗色
+jsModule.colorSchemeSwitcher.auto=跟随系统
+jsModule.share.qzone=QQ 空间
+jsModule.share.weibo=微博
+jsModule.share.douban=豆瓣
+jsModule.share.wechat=微信
+jsModule.share.native=系统分享
+jsModule.share.windowTitle=分享
+jsModule.upvote.networkError=网络请求失败，请稍后再试

i18n/zh_TW.properties

@@ -0,0 +1,54 @@
+common.previousPage=上一頁
+common.nextPage=下一頁
+common.more=更多
+common.all=全部
+common.noPosts=沒有文章
+common.comment=評論
+common.edit=編輯
+common.publishedOn=發布於 {0}
+common.visitCount={0} 閱讀
+
+widget.categories.title=分類目錄
+widget.popularPosts.title=熱門文章
+widget.tags.title=標籤
+widget.latestComments.title=最新評論
+widget.profile.postCount.label=文章數
+widget.profile.categoryCount.label=分類數
+widget.profile.commentCount.label=評論數
+widget.profile.visitCount.label=訪問量
+
+page.archives.title=歸檔
+page.archives.date={0} 年 {1} 月
+page.links.title=連結
+page.moments.title=瞬間
+page.photos.title=圖庫
+page.tags.title=標籤
+page.tags.morePosts=更多文章
+page.tag.title=標籤：{0}
+page.category.title=分類：{0}
+page.author.title=作者：{0}
+page.error.backToHome=返回首頁
+page.post.toc=目錄
+
+fragment.header.search=搜索
+fragment.header.menu=菜單
+fragment.header.console=控制台
+fragment.header.logout=退出登入
+fragment.header.login=登入
+fragment.layout.toTop=回到頂部
+fragment.tagFilter.allTags=所有標籤
+fragment.shareModal.title=分享
+fragment.shareModal.copy=複製
+fragment.shareModal.copied=已複製
+fragment.postCard.pinned=置頂
+
+jsModule.colorSchemeSwitcher.dark=暗色
+jsModule.colorSchemeSwitcher.light=亮色
+jsModule.colorSchemeSwitcher.auto=跟隨系統
+jsModule.share.qzone=QQ 空間
+jsModule.share.weibo=微博
+jsModule.share.douban=豆瓣
+jsModule.share.wechat=微信
+jsModule.share.native=系統分享
+jsModule.share.windowTitle=分享
+jsModule.upvote.networkError=網路請求失敗，請稍後再試

src/alpine-data/color-scheme-switcher.ts

@@ -2,9 +2,9 @@ import { currentColorScheme } from "../main";
 
 export default () => ({
   colorSchemes: [
-    { label: "暗色", value: "dark", icon: "i-gg-moon" },
-    { label: "亮色", value: "light", icon: "i-gg-sun" },
-    { label: "跟随系统", value: "system", icon: "i-gg-dark-mode" },
+    { label: window.i18nResources["jsModule.colorSchemeSwitcher.dark"], value: "dark", icon: "i-gg-moon" },
+    { label: window.i18nResources["jsModule.colorSchemeSwitcher.light"], value: "light", icon: "i-gg-sun" },
+    { label: window.i18nResources["jsModule.colorSchemeSwitcher.auto"], value: "system", icon: "i-gg-dark-mode" },
   ],
   currentValue: currentColorScheme,
   get colorScheme() {

src/alpine-data/share.ts

@@ -36,35 +36,35 @@ export default (deprecatedShareIds: { id: string }[], shareIds: string[]) => ({
     },
     {
       id: "qzone",
-      name: "QQ空间",
+      name: window.i18nResources["jsModule.share.qzone"],
       icon: "i-simple-icons-qzone",
       type: "url",
       url: `https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url={url}&title={title}`,
     },
     {
       id: "weibo",
-      name: "微博",
+      name: window.i18nResources["jsModule.share.weibo"],
       icon: "i-simple-icons-sinaweibo",
       type: "url",
       url: `http://service.weibo.com/share/share.php?url={url}&title={title}`,
     },
     {
       id: "douban",
-      name: "豆瓣",
+      name: window.i18nResources["jsModule.share.douban"],
       icon: "i-simple-icons-douban",
       type: "url",
       url: `https://www.douban.com/share/service?href={url}&name={title}`,
     },
     {
       id: "wechat",
-      name: "微信",
+      name: window.i18nResources["jsModule.share.wechat"],
       icon: "i-simple-icons-wechat",
       type: "url",
       url: `/themes/theme-earth/assets/qrcode-share.html?url={url}`,
     },
     {
       id: "native",
-      name: "系统分享",
+      name: window.i18nResources["jsModule.share.native"],
       icon: "i-tabler-device-desktop",
       type: "native",
     },
@@ -96,7 +96,6 @@ export default (deprecatedShareIds: { id: string }[], shareIds: string[]) => ({
         });
         return;
       }
-      alert("您的浏览器不支持系统分享");
       return;
     }
 
@@ -105,7 +104,11 @@ export default (deprecatedShareIds: { id: string }[], shareIds: string[]) => ({
     const top = window.innerHeight / 2 - height / 2;
     const left = window.innerWidth / 2 - width / 2;
     const windowParams = `width=${width}, height= ${height}, top=${top}, left=${left}, status=no, scrollbars=no, resizable=no`;
-    window.open(pupa(item.url || "", { url: this.permalink, title: this.title }), `分享：${this.title}`, windowParams);
+    window.open(
+      pupa(item.url || "", { url: this.permalink, title: this.title }),
+      `${window.i18nResources["jsModule.share.windowTitle"]} - ${this.title}`,
+      windowParams,
+    );
   },
   handleCopy() {
     navigator.clipboard.writeText(this.permalink);

src/alpine-data/upvote.ts

@@ -37,7 +37,7 @@ export default (key: string, group: string, plural: string): upvoteState => ({
       upvoteNode.textContent = upvoteCount + 1 + "";
     };
     xhr.onerror = function () {
-      alert("网络请求失败，请稍后再试");
+      alert(window.i18nResources["jsModule.upvote.networkError"]);
     };
     xhr.send(
       JSON.stringify({

templates/archives.html

@@ -1,19 +1,19 @@
 <!doctype html>
 <html
   xmlns:th="https://www.thymeleaf.org"
-  th:replace="~{modules/layout :: html(title = '归档 - ' + ${site.title}, hero = null, content = ~{::content}, head = null, footer = null, sidebar = null, contentClass = '')}"
+  th:replace="~{modules/layout :: html(title = |#{page.archives.title} - ${site.title}|, hero = null, content = ~{::content}, head = null, footer = null, sidebar = null, contentClass = '')}"
 >
   <th:block th:fragment="content">
     <div class="rounded-xl bg-white p-4 dark:bg-slate-800">
-      <h1 class="mb-6 text-2xl font-medium dark:text-slate-50">归档</h1>
+      <h1 class="mb-6 text-2xl font-medium dark:text-slate-50" th:text="#{page.archives.title}"></h1>
       <div class="flex flex-col gap-4">
         <th:block th:each="archive : ${archives.items}">
           <th:block th:each="month : ${archive.months}">
             <div class="grid grid-cols-12 gap-4">
               <div class="col-span-12 sm:col-span-3">
                 <h2
                   class="sticky top-20 mt-2 text-lg font-medium dark:text-slate-50"
-                  th:text="|${archive.year} 年 ${month.month} 月|"
+                  th:text="#{page.archives.date(${archive.year},${month.month})}"
                 ></h2>
               </div>
               <div class="col-span-12 sm:col-span-9">
@@ -71,7 +71,7 @@ <h1 class="mb-6 text-2xl font-medium dark:text-slate-50">归档</h1>
       </div>
 
       <div th:if="${archives.total == 0}" class="mt-6 flex items-center justify-center">
-        <span class="text-sm font-light text-gray-600">当前没有文章</span>
+        <span class="text-sm font-light text-gray-600" th:text="#{common.noPosts}"></span>
       </div>
 
       <div class="mt-6 flex items-center justify-between" th:if="${archives.hasPrevious() || archives.hasNext()}">
@@ -80,7 +80,7 @@ <h1 class="mb-6 text-2xl font-medium dark:text-slate-50">归档</h1>
           class="whitespace-no-wrap group inline-flex items-center justify-center gap-1 rounded-md border border-gray-200 bg-white px-4 py-1 text-sm font-medium leading-6 text-gray-600 shadow-sm hover:bg-gray-50 focus:shadow-none focus:outline-none dark:border-slate-600 dark:bg-slate-700 dark:text-slate-100 dark:hover:bg-slate-600 dark:hover:text-white"
         >
           <span class="i-tabler-arrow-left text-lg transition-all group-hover:-translate-x-1"></span>
-          <span>上一页</span>
+          <span th:text="#{common.previousPage}"></span>
         </a>
         <span
           class="text-sm text-gray-900 dark:text-slate-50"
@@ -90,7 +90,7 @@ <h1 class="mb-6 text-2xl font-medium dark:text-slate-50">归档</h1>
           th:href="@{${archives.nextUrl}}"
           class="whitespace-no-wrap group inline-flex items-center justify-center gap-1 rounded-md border border-gray-200 bg-white px-4 py-1 text-sm font-medium leading-6 text-gray-600 shadow-sm hover:bg-gray-50 focus:shadow-none focus:outline-none dark:border-slate-600 dark:bg-slate-700 dark:text-slate-100 dark:hover:bg-slate-600 dark:hover:text-white"
         >
-          <span>下一页</span>
+          <span th:text="#{common.nextPage}"></span>
           <span class="i-tabler-arrow-right text-lg transition-all group-hover:translate-x-1"></span>
         </a>
       </div>