From bf048f9f5f8395a27bf6ba31e59c817d021d4c62 Mon Sep 17 00:00:00 2001 From: xueweihan <595666367@qq.com> Date: Wed, 7 Aug 2024 18:13:10 +0800 Subject: [PATCH] feat: finish trans --- next-i18next.config.js | 2 +- public/locales/en/article.json | 4 +- public/locales/en/common.json | 4 +- public/locales/en/rank.json | 2 +- public/locales/en/repository.json | 4 +- src/components/buttons/LanguageSwitcher.tsx | 8 ++-- src/components/buttons/ThemeSwitcher.tsx | 4 +- src/components/layout/Header.tsx | 2 +- src/components/periodical/item.tsx | 8 +++- src/components/respository/Info.tsx | 2 +- src/components/side/Ad.tsx | 41 +++++++++++++++------ src/pages/article/[aid].tsx | 34 ++++++++++++----- src/pages/article/index.tsx | 8 +++- src/services/article.ts | 5 ++- src/services/base.ts | 24 +++++++----- src/types/article.tsx | 2 + src/types/periodical.tsx | 1 + 17 files changed, 102 insertions(+), 53 deletions(-) diff --git a/next-i18next.config.js b/next-i18next.config.js index 659b2333..8690fad7 100644 --- a/next-i18next.config.js +++ b/next-i18next.config.js @@ -1,7 +1,7 @@ //next-i18next.config.js module.exports = { - debug: true, + // debug: true, i18n: { defaultLocale: 'zh', locales: ['zh', 'en'], diff --git a/public/locales/en/article.json b/public/locales/en/article.json index 28d447aa..d7a6fd45 100644 --- a/public/locales/en/article.json +++ b/public/locales/en/article.json @@ -8,6 +8,6 @@ "hot": "Popular", "last": "Latest" }, - "author": "Author: {{name}}", - "read": "Read: {{num}}" + "author": "Author {{name}}", + "read": "Views {{num}}" } diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 07de2aad..17077e53 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -6,8 +6,8 @@ "rank": "Ranking", "article": "Articles", "submit": "Submit", - "profile": "My Profile", - "notification": "Notifications", + "profile": "Profile", + "notification": "Notification", "logout": "Logout" }, "login": { diff --git a/public/locales/en/rank.json b/public/locales/en/rank.json index 71b13f6b..fe973ab0 100644 --- a/public/locales/en/rank.json +++ b/public/locales/en/rank.json @@ -22,7 +22,7 @@ "rating": "Score", "change": "Change", "md_change": "📊", - "model": "Type" + "model": "Model" } }, "netcraft": { diff --git a/public/locales/en/repository.json b/public/locales/en/repository.json index ef05b8cd..78b74c7f 100644 --- a/public/locales/en/repository.json +++ b/public/locales/en/repository.json @@ -67,10 +67,10 @@ "title": "Comments", "sort_hot": "Popular", "sort_new": "Newest", - "total": "{{total}} selected comments", + "total": "{{total}} comments", "more_reply": "View all {{total}} replies", "load_more": "Load more...", - "no_comment": "No selected comments yet", + "no_comment": "No comments yet", "used": "Used", "unused": "Not Used", "score": "Rating:", diff --git a/src/components/buttons/LanguageSwitcher.tsx b/src/components/buttons/LanguageSwitcher.tsx index 01cfeeab..7a68c033 100644 --- a/src/components/buttons/LanguageSwitcher.tsx +++ b/src/components/buttons/LanguageSwitcher.tsx @@ -1,6 +1,7 @@ // components/LanguageSwitcher.tsx import { useRouter } from 'next/router'; import { useEffect, useRef, useState } from 'react'; +import { MdTranslate } from 'react-icons/md'; type LanguageSwitchProps = { type?: string; @@ -9,7 +10,6 @@ type LanguageSwitchProps = { const LanguageSwitcher = (props: LanguageSwitchProps) => { const router = useRouter(); const { locale, asPath } = router; - const [selectedLocale, setSelectedLocale] = useState(locale); const [isHovered, setIsHovered] = useState(false); const dropdownRef = useRef(null); const timeoutRef = useRef(null); @@ -17,13 +17,11 @@ const LanguageSwitcher = (props: LanguageSwitchProps) => { useEffect(() => { const storedLocale = localStorage.getItem('locale'); if (storedLocale) { - setSelectedLocale(storedLocale); router.push(asPath, asPath, { locale: storedLocale }); } else { const systemLocale = navigator.language.toLowerCase().startsWith('zh') ? 'zh' : 'en'; - setSelectedLocale(systemLocale); localStorage.setItem('locale', systemLocale); router.push(asPath, asPath, { locale: systemLocale }); } @@ -31,7 +29,6 @@ const LanguageSwitcher = (props: LanguageSwitchProps) => { const changeLanguage = (language: string) => { localStorage.setItem('locale', language); - setSelectedLocale(language); setIsHovered(false); router.push(asPath, asPath, { locale: language }); }; @@ -74,7 +71,8 @@ const LanguageSwitcher = (props: LanguageSwitchProps) => { aria-haspopup='true' aria-expanded={isHovered ? 'true' : 'false'} > - {selectedLocale === 'zh' ? '中文' : 'EN'} + + {/* {selectedLocale === 'zh' ? '中文' : 'EN'} */} diff --git a/src/components/buttons/ThemeSwitcher.tsx b/src/components/buttons/ThemeSwitcher.tsx index ca13c9b2..0feddba0 100644 --- a/src/components/buttons/ThemeSwitcher.tsx +++ b/src/components/buttons/ThemeSwitcher.tsx @@ -34,10 +34,10 @@ const ThemeSwitcher: React.FC = (props: ThemeSwitchProps) => { - + diff --git a/src/components/periodical/item.tsx b/src/components/periodical/item.tsx index 34f92f75..61575a26 100644 --- a/src/components/periodical/item.tsx +++ b/src/components/periodical/item.tsx @@ -70,7 +70,13 @@ const PeriodItem: NextPage = ({ item, index }) => { {/* markdown 内容渲染 */} - {item.description} + + {i18n.language == 'en' + ? item.description_en + ? item.description_en + : item.description + : item.description} + {/* 图片预览 */} {item.image_url && (
diff --git a/src/components/respository/Info.tsx b/src/components/respository/Info.tsx index 2e0cfe3a..08dc2855 100644 --- a/src/components/respository/Info.tsx +++ b/src/components/respository/Info.tsx @@ -349,7 +349,7 @@ const Info = ({ repo, t, i18n_lang }: RepositoryProps) => { href={repo.url} onClick={() => handleClickLink('source', repo.rid)} > -

+

{repo.full_name.length >= 20 ? repo.name : repo.full_name}

diff --git a/src/components/side/Ad.tsx b/src/components/side/Ad.tsx index 389413c6..55a0e79f 100644 --- a/src/components/side/Ad.tsx +++ b/src/components/side/Ad.tsx @@ -9,6 +9,7 @@ import { AdvertItem } from '@/types/home'; const ImageURL = 'https://img.hellogithub.com/article/HwsoJXEiYdPhjLa_1720773908.png'; +const PayURL = 'https://buymeacoffee.com/hellogithub'; interface Props { data: AdvertItem; @@ -118,19 +119,35 @@ export default function Ad({ data, className, t, i18n_lang }: Props) { ); } diff --git a/src/pages/article/[aid].tsx b/src/pages/article/[aid].tsx index df57bdd0..73c5865c 100644 --- a/src/pages/article/[aid].tsx +++ b/src/pages/article/[aid].tsx @@ -15,7 +15,7 @@ import { getClientIP } from '@/utils/util'; import { ArticleProps } from '@/types/article'; const ArticlePage: NextPage = ({ article }) => { - const { t } = useTranslation('article'); + const { t, i18n } = useTranslation('article'); return ( <> @@ -27,13 +27,29 @@ const ArticlePage: NextPage = ({ article }) => { {article.content} -
- -
+ {i18n.language === 'zh' ? ( +
+ +
+ ) : ( + + Buy Me A Coffee + + )} +
@@ -51,7 +67,7 @@ export const getServerSideProps: GetServerSideProps = async ({ }) => { const ip = getClientIP(req); const aid = query?.aid as string; - const data = await getArticleContent(ip, aid); + const data = await getArticleContent(ip, aid, locale as string); if (!data.success) { return { notFound: true, diff --git a/src/pages/article/index.tsx b/src/pages/article/index.tsx index 3bbc1d08..53e0b001 100644 --- a/src/pages/article/index.tsx +++ b/src/pages/article/index.tsx @@ -80,11 +80,15 @@ const ArticleIndex: NextPage = () => { /> )} - {item.title} + {i18n.language == 'en' + ? item.title_en || item.title + : item.title}
- {item.desc} + {i18n.language == 'en' + ? item.desc_en || item.desc + : item.desc}
diff --git a/src/services/article.ts b/src/services/article.ts index 6b1f04f3..3be4664f 100644 --- a/src/services/article.ts +++ b/src/services/article.ts @@ -6,12 +6,13 @@ import { ArticleContentItem, OneItemResp, OneItemsResp } from '@/types/article'; export const getArticleContent = async ( ip: string, - aid: string + aid: string, + locale: string ): Promise => { const req: RequestInit = {}; req.headers = { 'x-real-ip': ip, 'x-forwarded-for': ip }; const result = await fetcher( - makeUrl(`/article/${aid}`), + makeUrl(`/article/${aid}`, { lang: locale }), req ); return result; diff --git a/src/services/base.ts b/src/services/base.ts index 98e09e0f..62f4ec6a 100644 --- a/src/services/base.ts +++ b/src/services/base.ts @@ -23,16 +23,21 @@ function translate(key: string, lang: string): string { return messages[key]?.[lang] || messages[key]?.['en'] || key; } -// 获取用户语言的函数 function getUserLanguage(): string { - // 这里可以根据你的应用逻辑来获取用户语言 - // 例如，从 localStorage 或 cookie 中获取 - console.log( - localStorage.getItem('locale') || navigator.language.split('-')[0] || 'en' - ); - return ( - localStorage.getItem('locale') || navigator.language.split('-')[0] || 'en' - ); + if (typeof window === 'undefined') { + // 服务器端渲染 + // 这里可以使用 Next.js 的 API 来获取语言设置 + // 例如，从 cookies 或者请求头中获取 + // 这个实现需要根据你的具体设置来调整 + return 'en'; // 接口异常默认语言 + } else { + // 客户端渲染 + return ( + localStorage?.getItem('locale') || + navigator?.language?.split('-')[0] || + 'en' + ); + } } export const fetcher = async function fetcher( @@ -40,7 +45,6 @@ export const fetcher = async function fetcher( init?: RequestInit ): Promise { const lang = getUserLanguage(); - // if the user is not online when making the API call if (typeof window !== 'undefined' && !window.navigator.onLine) { throw new Error('OFFLINE'); diff --git a/src/types/article.tsx b/src/types/article.tsx index 8040fb90..aa2369df 100644 --- a/src/types/article.tsx +++ b/src/types/article.tsx @@ -17,8 +17,10 @@ export interface ItemProps { export interface ArticleItem { aid: string; title: string; + title_en?: string; head_image: string; desc: string; + desc_en?: string; author: string; is_publish: boolean; is_hot: boolean; diff --git a/src/types/periodical.tsx b/src/types/periodical.tsx index e8792bb0..c0d2be88 100644 --- a/src/types/periodical.tsx +++ b/src/types/periodical.tsx @@ -23,6 +23,7 @@ export interface PeriodicalItem { rid: string; name: string; description: string; + description_en: string; github_url: string; stars: number; forks: number;