Skip to content

Commit 8d77c37

Browse files
coderz-wcoderz-w
committed
feat: 进一步完善国际化
1 parent d5a0409 commit 8d77c37

File tree

8 files changed

+112
-69
lines changed

8 files changed

+112
-69
lines changed

‎src/app/(app)/list/AnimatedPostItem.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,10 @@ import type { PostItem as PostItemType } from '@/core';
1010
interface AnimatedPostItemProps {
1111
item: PostItemType;
1212
index: number;
13+
locale: Record<string, string>;
1314
}
1415

15-
const AnimatedPostItem: React.FC<AnimatedPostItemProps> = ({ item, index }) => {
16+
const AnimatedPostItem: React.FC<AnimatedPostItemProps> = ({ item, index, locale }) => {
1617
return (
1718
<m.li
1819
initial={{ y: 50, opacity: 0.01 }}
@@ -28,7 +29,7 @@ const AnimatedPostItem: React.FC<AnimatedPostItemProps> = ({ item, index }) => {
2829
}}
2930
key={item.path}
3031
>
31-
<PostItem data={item} />
32+
<PostItem locale={locale} data={item} />
3233
</m.li>
3334
);
3435
};

‎src/app/(app)/list/page.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import AnimatedPostItem from './AnimatedPostItem';
55

66
import { NormalContainer } from '@/components/layout/container/Normal';
77
import { getPostData } from '@/core';
8+
import { getUserLocale } from '@/lib/getLocale';
9+
import localeValues from '@/locale';
810

911
export const metadata: Metadata = {
1012
title: '文稿',
@@ -13,12 +15,14 @@ export const metadata: Metadata = {
1315

1416
const ArticleList: React.FC = async () => {
1517
const { postDataList } = await getPostData();
18+
const lang = getUserLocale();
19+
const listLocale = localeValues[lang].list;
1620

1721
return (
1822
<NormalContainer>
1923
<ul>
2024
{postDataList.map((item, index) => (
21-
<AnimatedPostItem key={item.path} item={item} index={index} />
25+
<AnimatedPostItem locale={listLocale} key={item.path} item={item} index={index} />
2226
))}
2327
</ul>
2428
</NormalContainer>

‎src/app/(app)/notes/[nid]/page.tsx‎

Lines changed: 63 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,21 @@ import { Metadata } from 'next';
44

55
import {
66
NoteTitle,
7-
NoteDateMeta,
87
IndentArticleContainer,
98
NoteMarkdown,
109
PaperLayout,
1110
PageTransition,
1211
} from './pageExtra';
1312

13+
import dayjs from '@/lib/dayjs';
14+
import { MdiClockOutline } from '@/components/icons/clock';
1415
import { type PostItem as PostItemType, getPostData } from '@/core';
1516
import { LayoutRightSidePortal } from '@/providers/shared/LayoutRightSideProvider';
1617
import { ArticleRightAside } from '@/components/modules/shared/ArticleRightAside';
1718
import { Signature } from '@/components/modules/shared/signature';
1819
import Gisus from '@/components/modules/comment/Giscus';
1920
import { getUserLocale } from '@/lib/getLocale';
21+
import localeValues from '@/locale';
2022

2123
const { postDataMap } = await getPostData();
2224

@@ -72,26 +74,64 @@ export default async function Page({ params }: { params: Record<string, any> })
7274
);
7375
}
7476

75-
const PageInner = ({ postData }: PageInnerProps) => (
76-
<>
77-
<div>
78-
<NoteTitle title={postData.title} />
79-
<span className="flex flex-wrap items-center text-sm text-neutral-content/60">
80-
<NoteDateMeta
81-
createdAt={postData.createdAt!}
82-
updatedAt={postData.updatedAt!}
83-
modified={postData.modified}
84-
/>
85-
</span>
86-
</div>
87-
<IndentArticleContainer>
88-
<NoteMarkdown text={postData.text} />
89-
<div className="signature-animated my-2 flex w-full justify-end" data-hide-print="true">
90-
<Signature />
77+
const PageInner = ({ postData }: PageInnerProps) => {
78+
const lang = getUserLocale();
79+
const notesLocale = localeValues[lang].notes;
80+
81+
return (
82+
<>
83+
<div>
84+
<NoteTitle title={postData.title} />
85+
<span className="flex flex-wrap items-center text-sm text-neutral-content/60">
86+
<NoteDateMeta
87+
createdAt={postData.createdAt!}
88+
updatedAt={postData.updatedAt!}
89+
modified={postData.modified}
90+
/>
91+
</span>
9192
</div>
92-
<LayoutRightSidePortal>
93-
<ArticleRightAside></ArticleRightAside>
94-
</LayoutRightSidePortal>
95-
</IndentArticleContainer>
96-
</>
97-
);
93+
<IndentArticleContainer>
94+
<NoteMarkdown text={postData.text} />
95+
<div className="signature-animated my-2 flex w-full justify-end" data-hide-print="true">
96+
<Signature />
97+
</div>
98+
<LayoutRightSidePortal>
99+
<ArticleRightAside locale={notesLocale} />
100+
</LayoutRightSidePortal>
101+
</IndentArticleContainer>
102+
</>
103+
);
104+
};
105+
106+
const NoteDateMeta = ({
107+
createdAt,
108+
updatedAt,
109+
modified,
110+
}: {
111+
createdAt: Date;
112+
updatedAt: Date;
113+
modified: boolean;
114+
}) => {
115+
const lang = getUserLocale();
116+
const notesLocale = localeValues[lang].notes;
117+
118+
const isZh = lang === 'zh';
119+
const formatDate = (date: Date) =>
120+
isZh
121+
? dayjs(date).format('YYYY 年 M 月 D 日')
122+
: dayjs(date).locale('en').format('MMMM D, YYYY');
123+
124+
return (
125+
<span className="inline-flex items-center space-x-1">
126+
<MdiClockOutline />
127+
<time className="font-semibold text-sm font-mono">
128+
{formatDate(createdAt)}
129+
{modified && (
130+
<>
131+
&nbsp;&nbsp;{notesLocale['Updated on']} {formatDate(updatedAt)}
132+
</>
133+
)}
134+
</time>
135+
</span>
136+
);
137+
};

‎src/app/(app)/notes/[nid]/pageExtra.tsx‎

Lines changed: 0 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,6 @@ import React, { PropsWithChildren, useEffect, useRef } from 'react';
44
import { m } from 'framer-motion';
55
import { useShallow } from 'zustand/react/shallow';
66

7-
import dayjs from '@/lib/dayjs';
8-
import { MdiClockOutline } from '@/components/icons/clock';
97
import { cn } from '@/lib/helper';
108
import { MainMarkdown } from '@/components/ui/markdown';
119
import { useMainArticleStore } from '@/store/mainArticleStore';
@@ -22,26 +20,6 @@ export const NoteTitle = ({ title }: { title: string }) => {
2220
);
2321
};
2422

25-
export const NoteDateMeta = ({
26-
createdAt,
27-
updatedAt,
28-
modified,
29-
}: {
30-
createdAt: Date;
31-
updatedAt: Date;
32-
modified: boolean;
33-
}) => {
34-
return (
35-
<span className="inline-flex items-center space-x-1">
36-
<MdiClockOutline />
37-
<time className=" font-semibold text-sm font-mono">
38-
{createdAt && dayjs(createdAt).format('YYYY 年 M 月 D 日')}
39-
{modified && <>&nbsp;&nbsp;编辑于 {dayjs(updatedAt).format('YYYY 年 M 月 D 日')}</>}
40-
</time>
41-
</span>
42-
);
43-
};
44-
4523
export const IndentArticleContainer = (props: PropsWithChildren) => {
4624
return (
4725
<article className={cn('prose relative', 'with-indent with-serif', ' min-w-full')}>

‎src/components/modules/list/PostItem.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,10 @@ import { MdiClockOutline } from '@/components/icons/clock';
88
import { FeHash } from '@/components/icons/fa-hash';
99
import type { PostItem as PostItemType } from '@/core';
1010

11-
export const PostItem = memo<{ data: PostItemType }>(function PostItem({ data }) {
11+
export const PostItem = memo<{ data: PostItemType; locale: any }>(function PostItem({
12+
data,
13+
locale,
14+
}) {
1215
const postLink = `/notes/${data.path}`;
1316

1417
return (
@@ -24,7 +27,7 @@ export const PostItem = memo<{ data: PostItemType }>(function PostItem({ data })
2427
<span className=" flex min-w-0 items-center space-x-1 text-sm">
2528
<MdiClockOutline />
2629
{data.createdAt ? dayjs(data.createdAt).format('YYYY 年 M 月 D 日') : '1999 年 9 月 9 日'}
27-
{data.modified && <>&nbsp;&nbsp;(已编辑)</>}
30+
{data.modified && <>&nbsp;&nbsp;{locale.Edited}</>}
2831
</span>
2932
<span className="flex min-w-0 items-center space-x-1 text-sm">
3033
<FeHash className="translate-y-[0.5px]" />

‎src/components/modules/shared/ArticleRightAside.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
11
import React from 'react';
2-
import { PropsWithChildren } from 'react';
32

43
import { TocAside } from '../toc/TocAside';
54
import { ReadIndicator } from './ReadIndicator';
65

7-
export const ArticleRightAside = ({ children }: PropsWithChildren) => {
6+
export const ArticleRightAside = ({ children, locale }: any) => {
87
return (
98
<aside className="sticky top-[120px] mt-[120px] h-[calc(100vh-6rem-4.5rem-150px-120px)]">
109
<div className="relative h-full">
1110
<TocAside
1211
as="div"
1312
className="static ml-4"
1413
treeClassName="absolute h-full min-h-[120px] flex flex-col"
15-
accessory={<ReadIndicator />}
14+
accessory={<ReadIndicator locale={locale} />}
1615
/>
1716
</div>
1817
{!!children &&

‎src/components/modules/shared/ReadIndicator.tsx‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { cn } from '@/lib/helper';
88
import { springScrollToTop } from '@/lib/scroller';
99
import { useMainArticleStore } from '@/store/mainArticleStore';
1010

11-
export const ReadIndicator = () => {
11+
export const ReadIndicator = ({ locale }: { locale: Record<string, string> }) => {
1212
const { Element } = useMainArticleStore();
1313
const [readPercent, setReadPercent] = useState(0);
1414

@@ -40,22 +40,24 @@ export const ReadIndicator = () => {
4040
<MaterialSymbolsProgressActivity progress={readPercent} />
4141
{readPercent}%<br />
4242
</div>
43-
<BackToTop readPercent={useDeferredValue(readPercent)} />
43+
<BackToTop locale={locale} readPercent={useDeferredValue(readPercent)} />
4444
</div>
4545
);
4646
};
4747

48-
const BackToTop = memo(({ readPercent }: { readPercent: number }) => {
49-
return (
50-
<MotionButtonBase
51-
onClick={springScrollToTop}
52-
className={cn(
53-
'mt-1 flex flex-nowrap items-center gap-2 opacity-50 transition-all duration-500 hover:opacity-100',
54-
readPercent > 10 ? '' : 'pointer-events-none opacity-0',
55-
)}
56-
>
57-
<i className="i-mingcute-arrow-up-circle-line" />
58-
<span className="whitespace-nowrap">back</span>
59-
</MotionButtonBase>
60-
);
61-
});
48+
const BackToTop = memo(
49+
({ readPercent, locale }: { readPercent: number; locale: Record<string, string> }) => {
50+
return (
51+
<MotionButtonBase
52+
onClick={springScrollToTop}
53+
className={cn(
54+
'mt-1 flex flex-nowrap items-center gap-2 opacity-50 transition-all duration-500 hover:opacity-100',
55+
readPercent > 10 ? '' : 'pointer-events-none opacity-0',
56+
)}
57+
>
58+
<i className="i-mingcute-arrow-up-circle-line" />
59+
<span className="whitespace-nowrap">{locale['Back to Top']}</span>
60+
</MotionButtonBase>
61+
);
62+
},
63+
);

‎src/locale/index.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,14 @@ const localeValues = {
2222
projects: {
2323
projects: '项目',
2424
},
25+
notes: {
26+
'Updated on': '编辑于',
27+
'Back to Top': '回到顶部',
28+
},
29+
list: {
30+
Edited: '已编辑',
31+
lang: 'zh',
32+
},
2533
},
2634
en: {
2735
lang: 'en',
@@ -46,6 +54,14 @@ const localeValues = {
4654
projects: {
4755
projects: 'projects',
4856
},
57+
notes: {
58+
'Updated on': 'Updated on',
59+
'Back to Top': 'Back to Top',
60+
},
61+
list: {
62+
Edited: 'Edited',
63+
lang: 'en',
64+
},
4965
},
5066
};
5167

0 commit comments

Comments
 (0)