Merge pull request #98 from meetqy/97-i18n-使用占位符

97 i18n 使用占位符
meetqy · Apr 5, 2024 · ebcec28 · ebcec28
2 parents 4d20130 + cda3450
commit ebcec28
Show file tree

Hide file tree

Showing 11 changed files with 107 additions and 196 deletions.
diff --git a/src/app/[lang]/ci-pai-ming/[page]/page.tsx b/src/app/[lang]/ci-pai-ming/[page]/page.tsx
@@ -6,25 +6,18 @@ import { HeaderMain } from "~/components/ui/header";
 import { api } from "~/trpc/server";
 import {
   getDictionary,
-  getLangText,
   getLangUrl,
   getMetaDataAlternates,
   type Locale,
 } from "~/dictionaries";
 import { type Metadata } from "next";
 import { cache } from "react";
+import { stringFormat } from "~/utils";
 
 interface Props {
   params: { page: string; lang: Locale };
 }
 
-const description = {
-  "zh-Hans":
-    "词的一种制式曲调的名称，亦即唐宋时代经常用以填词的大致固定的一部分乐曲的原名，有固定的格式与声律，决定着词的节奏与音律。",
-  "zh-Hant":
-    "詞的一種制式曲調的名稱，亦即唐宋時代經常用以填詞的大致固定的一部分樂曲的原名，有固定的格式與聲律，決定着詞的節奏與音律。",
-};
-
 const getItem = cache(({ params }: Props) => {
   const pageIndex = Number(params.page || 1);
   if (pageIndex < 1 || isNaN(pageIndex)) notFound();
@@ -43,15 +36,9 @@ export async function generateMetadata(props: Props): Promise<Metadata> {
   const { data, page } = await getItem(props);
 
   return {
-    title: getLangText(
-      {
-        "zh-Hans": `${dict.menu.ci_pai_ming} 第${page}页`,
-        "zh-Hant": `${dict.menu.ci_pai_ming} 第${page}頁`,
-      },
-      params.lang,
-    ),
+    title: stringFormat(dict.ci_pai_ming.title_meta, [page.toString()]),
     alternates: getMetaDataAlternates(`/ci-pai-ming/${page}`, params.lang),
-    description: getLangText(description, params.lang),
+    description: dict.ci_pai_ming.description,
     keywords: data.map((item) => item.name),
   };
 }
@@ -74,12 +61,12 @@ export default async function Page(props: Props) {
         <header>
           <h1 className="text-f400">
             {dict.menu.ci_pai_ming}
-            <span className="text-f200 ml-1 font-mono text-muted-foreground">
+            <span className="ml-1 font-mono text-f200 text-muted-foreground">
               cí pái míng
             </span>
           </h1>
-          <p className="text-f100 mt-6 text-secondary-foreground">
-            {getLangText(description, params.lang)}
+          <p className="mt-6 text-f100 text-secondary-foreground">
+            {dict.ci_pai_ming.description}
           </p>
         </header>
 
@@ -90,7 +77,7 @@ export default async function Page(props: Props) {
               className="group relative cursor-pointer justify-between rounded-md border border-border bg-card p-4 text-card-foreground transition-all hover:bg-accent hover:text-accent-foreground hover:shadow-md"
             >
               <div className="flex justify-between">
-                <div className="text-f200 w-full lg:w-3/5">
+                <div className="w-full text-f200 lg:w-3/5">
                   <Link
                     href={getLangUrl(`/tag/${item.id}`, params.lang)}
                     className="underline-animation relative z-10 flex-1 text-primary"
@@ -105,7 +92,7 @@ export default async function Page(props: Props) {
                 </div>
               </div>
 
-              <p className="text-f50 mt-2 text-muted-foreground">
+              <p className="mt-2 text-f50 text-muted-foreground">
                 {item.introduce}
               </p>
 

diff --git a/src/app/[lang]/layout.tsx b/src/app/[lang]/layout.tsx
@@ -31,7 +31,6 @@ export async function generateMetadata({
     description: dict.description,
     icons: [{ rel: "icon", url: "/favicon.ico" }],
     alternates: getMetaDataAlternates("/", params.lang),
-    keywords: dict.keywords,
     metadataBase: new URL(MyHost),
     twitter: {
       site: `${MyHost}/${params.lang}`,

diff --git a/src/app/[lang]/list/[page]/page.tsx b/src/app/[lang]/list/[page]/page.tsx
@@ -9,10 +9,10 @@ import { Pagination } from "~/components/pagination";
 import {
   type Locale,
   getDictionary,
-  getLangText,
   getMetaDataAlternates,
 } from "~/dictionaries";
 import { type Metadata } from "next";
+import { stringFormat } from "~/utils";
 
 interface Props {
   params: { page: string; lang: Locale };
@@ -24,44 +24,25 @@ export async function generateMetadata({
   searchParams,
 }: Props): Promise<Metadata> {
   const pageIndex = Number(params.page);
+  const dict = await getDictionary(params.lang);
 
   if (pageIndex < 1 || isNaN(pageIndex)) notFound();
 
   let text = "";
   let description = "";
   if (searchParams?.sort === "createdAt" || !searchParams?.sort) {
-    text = getLangText({ "zh-Hans": "最新", "zh-Hant": "最新" }, params.lang);
-    description = getLangText(
-      {
-        "zh-Hans": "当前诗词列表按照最近修改时间倒序排列",
-        "zh-Hant": "當前詩詞列表按照最近修改時間倒序排列",
-      },
-      params.lang,
-    );
+    text = dict.poem_list.tab_new;
+    description = dict.poem_list.description_improve;
   } else if (searchParams?.sort === "improve") {
-    text = getLangText(
-      { "zh-Hans": "待完善", "zh-Hant": "待完善" },
-      params.lang,
-    );
-    description = getLangText(
-      {
-        "zh-Hans":
-          "当前诗词列表按照完善程度倒序排列，需要完善的诗词排在最前面。",
-        "zh-Hant":
-          "當前詩詞列表按照完善程度倒序排列，需要完善的詩詞排在最前面。",
-      },
-      params.lang,
-    );
+    text = dict.poem_list.tab_improve;
+    description = dict.poem_list.description_new;
   }
 
   return {
-    title: getLangText(
-      {
-        "zh-Hans": `${text}诗词列表 第${pageIndex}页`,
-        "zh-Hant": `${text}詩詞列表 第${pageIndex}頁`,
-      },
-      params.lang,
-    ),
+    title: stringFormat(dict.poem_list.title_meta, [
+      text,
+      pageIndex.toString(),
+    ]),
     description,
     alternates: getMetaDataAlternates(`/list/${pageIndex}`, params.lang),
   };

diff --git a/src/app/[lang]/tag/page.tsx b/src/app/[lang]/tag/page.tsx
@@ -10,6 +10,7 @@ import {
   type Locale,
 } from "~/dictionaries";
 import { api } from "~/trpc/server";
+import { stringFormat } from "~/utils";
 
 interface Props {
   params: { lang: Locale };
@@ -31,22 +32,9 @@ export async function generateMetadata(props: Props): Promise<Metadata> {
   const keywords = tags.slice(0, 15).map((item) => item.name);
 
   return {
-    title: getLangText(
-      {
-        "zh-Hans": "标签",
-        "zh-Hant": "標籤",
-      },
-      params.lang,
-    ),
-    description: getLangText(
-      {
-        "zh-Hans": `诗词分类常用标签包括：${keywords.join("，")}等`,
-        "zh-Hant": `詩詞分類常用標籤包括：${keywords.join("，")}等`,
-      },
-      params.lang,
-    ),
+    title: dict.menu.tag,
+    description: stringFormat(dict.tag.description, [keywords.join(",")]),
     alternates: getMetaDataAlternates("/tag", params.lang),
-    keywords: keywords.concat(dict.point_keywords),
   };
 }
 

diff --git a/src/dictionaries/en.json b/src/dictionaries/en.json
@@ -1,30 +1,6 @@
 {
   "title": "Learn Chinese Poems Website",
-  "description": "aspoem.com is a modern poetry learning website that offers a comprehensive site search feature, allowing you to quickly search for regulated verse, quatrains, and works by various poets. We have also optimized the display of pinyin annotations, annotations, and vernacular Chinese, making poetry easier to read. Additionally, we provide a poetry printing tool to assist you in better studying ancient poetry. Come and experience the charm of our website!",
-  "point_keywords": [
-    "poetry learning",
-    "learning ancient poetry",
-    "Three Hundred Tang Poems",
-    "Three Hundred Song Lyrics",
-    "Complete Works of Li Bai",
-    "Complete Works of Du Fu"
-  ],
-  "keywords": [
-    "poetry learning",
-    "learning ancient poetry",
-    "Three Hundred Tang Poems",
-    "Three Hundred Song Lyrics",
-    "Complete Works of Li Bai",
-    "Complete Works of Du Fu",
-    "ancient poetry",
-    "poetry",
-    "poet statistics",
-    "poetry search",
-    "poetry pinyin",
-    "poetry annotations",
-    "poetry translation",
-    "pinyin"
-  ],
+  "description": "aspoem.com is a learning chinese poetry website that offers a comprehensive site search feature, allowing you to quickly search for regulated verse, quatrains, and works by various poets. We have also optimized the display of pinyin annotations, annotations, and vernacular Chinese, making poetry easier to read. Additionally, we provide a poetry printing tool to assist you in better studying ancient poetry. Come and experience the charm of our website!",
   "menu": {
     "poem": "Poems",
     "author": "Poets",
@@ -57,7 +33,10 @@
   },
   "poem_list": {
     "title": "Poem List",
+    "title_meta": "{0} Poem List Page {1}",
     "empty": "No relevant poems found",
+    "description_new": "The latest poems are here, come and read them!",
+    "description_improve": "The poems that need to be improved are here, come and help us improve them!",
     "tab_new": "Newest",
     "tab_improve": "To be improved"
   },
@@ -67,10 +46,18 @@
   "author_detail": {
     "title": "Poets"
   },
+  "ci_pai_ming": {
+    "title_meta": "Ci Pai Ming Page {0}",
+    "description": "A name for a standardized tune of a poem, that is, the original name of a large part of the music that was frequently used to fill in the poems in the Tang and Song dynasties, with a fixed format and tone, determining the rhythm and tone of the poem."
+  },
   "search": {
     "placeholder": "Search for poems, poets, etc.",
     "empty": "No search results found"
   },
+  "tag": {
+    "title": "Tags",
+    "description": "Popular tags for poetry: {0}"
+  },
   "pagination": {
     "prev": "Previous",
     "next": "Next"

diff --git a/src/dictionaries/index.ts b/src/dictionaries/index.ts
@@ -28,14 +28,29 @@ export const getMetaDataAlternates = (suffix: string, lang: Locale) => {
   };
 };
 
+const defaultsConfig = (
+  de: Record<string, string | object>,
+  target: Record<string, string | object | undefined>,
+) => {
+  for (const key in de) {
+    if (target[key] === undefined) {
+      target[key] = de[key];
+    } else if (typeof de[key] === "object") {
+      defaultsConfig(
+        de[key] as Record<string, string | object>,
+        target[key] as Record<string, string | object>,
+      );
+    }
+  }
+
+  return target;
+};
+
 export const getDictionary = async (locale: Locale = "zh-Hans") => {
   const zhHans = await dictionaries["zh-Hans"]();
-  const result = await dictionaries[locale]();
+  const targetLocale = await dictionaries[locale]();
 
-  return {
-    ...zhHans,
-    ...result,
-  };
+  return defaultsConfig(zhHans, targetLocale) as typeof zhHans;
 };
 
 export type Dictionary = Awaited<ReturnType<typeof getDictionary>>;

diff --git a/src/dictionaries/ja.json b/src/dictionaries/ja.json
@@ -1,30 +1,6 @@
 {
-  "title": "近代詩学習ウェブサイト",
-  "description": "aspoem.comは、近代詩学習のためのモダンなウェブサイトであり、サイト全体の検索機能を提供しています。この機能を利用することで、律詩や絶句、詩人たちの作品をより迅速に検索することができます。また、私たちは拼音の表示方法、注釈や白話文の展示方法などを最適化し、詩をより読みやすくしています。さらに、古代詩学の学習をサポートする詩学印刷ツールも提供しています。ぜひ、私たちのウェブサイトの魅力を体験してください！",
-  "point_keywords": [
-    "詩学習",
-    "古詩学習",
-    "唐詩300首",
-    "宋詞300首",
-    "李白詩集",
-    "杜甫詩集"
-  ],
-  "keywords": [
-    "詩学習",
-    "古詩学習",
-    "唐詩300首",
-    "宋詞300首",
-    "李白詩集",
-    "杜甫詩集",
-    "古詩",
-    "詩",
-    "詩人統計",
-    "詩検索",
-    "詩の拼音",
-    "詩の注釈",
-    "詩の翻訳",
-    "ピンイン"
-  ],
+  "title": "中国の詩を学ぶウェブサイト",
+  "description": "aspoem.comは中国の詩学習ウェブサイトであり、包括的なサイト検索機能を提供しています。規範詩、四行詩、さまざまな詩人の作品を素早く検索することができます。また、拼音注釈、注釈、口語中国語の表示を最適化し、詩を読みやすくしています。さらに、古代詩の学習をサポートする詩の印刷ツールも提供しています。ぜひ、当ウェブサイトの魅力を体験してください！",
   "menu": {
     "poem": "詩",
     "author": "詩人",
@@ -57,7 +33,10 @@
   },
   "poem_list": {
     "title": "詩のリスト",
+    "title_meta": "{0}詩のリスト ページ {1}",
     "empty": "関連する詩が見つかりませんでした",
+    "description_new": "最新の詩がここにあります、読んでみてください！",
+    "description_improve": "改善が必要な詩がここにあります、改善に協力してください！",
     "tab_new": "最新",
     "tab_improve": "改善待ち"
   },
@@ -67,10 +46,18 @@
   "author_detail": {
     "title": "詩人詳細"
   },
+  "ci_pai_ming": {
+    "title_meta": "詞牌名 ページ {0}",
+    "description": "詩の標準的な旋律の名称であり、唐宋時代に詩にしばしば用いられ、固定された形式と音調によって詩のリズムと音調を決定する大部分の音楽の元の名称です。"
+  },
   "search": {
     "placeholder": "詩人、詩、名言を検索",
     "empty": "関連する詩が見つかりませんでした"
   },
+  "tag": {
+    "title": "タグ",
+    "description": "人気のある詩のタグ: {0}"
+  },
   "pagination": {
     "prev": "前へ",
     "next": "次へ"