refactor: update blog page localization and content structure

- Simplify blog page translation keys in English and Chinese
- Remove hardcoded category labels in blog post page
- Use server-side translations for publisher, categories, and table of contents
- Remove font-serif class from blog post content
This commit is contained in:
javayhu 2025-03-07 01:00:17 +08:00
parent 11e1df01ed
commit 48adc7ad4a
3 changed files with 12 additions and 16 deletions

View File

@ -61,11 +61,8 @@
"BlogPage": {
"title": "Blog",
"subtitle": "Latest news and updates from our team",
"categories": {
"all": "All",
"news": "News",
"guide": "Guide",
"company": "Company"
}
"publisher": "Publisher",
"categories": "Categories",
"tableOfContents": "Table of Contents"
}
}

View File

@ -61,11 +61,8 @@
"BlogPage": {
"title": "博客",
"subtitle": "来自我们的团队最新新闻和更新",
"categories": {
"all": "全部",
"news": "新闻",
"guide": "指南",
"company": "公司"
}
"publisher": "发布者",
"categories": "分类",
"tableOfContents": "目录"
}
}

View File

@ -13,6 +13,7 @@ import { notFound } from 'next/navigation';
import { useTranslations } from 'next-intl';
import '@/styles/mdx.css';
import { getTranslations } from 'next-intl/server';
/**
* Gets the blog post from the params
@ -89,6 +90,7 @@ export default async function BlogPostPage(props: NextPageProps) {
const publishDate = post.date;
const date = getLocaleDate(publishDate);
const toc = await getTableOfContents(post.content);
const t = await getTranslations("BlogPage");
return (
<div className="flex flex-col gap-8">
@ -120,7 +122,7 @@ export default async function BlogPostPage(props: NextPageProps) {
</div>
{/* blog post content */}
<div className="mt-4 font-serif">
<div className="mt-4">
<Mdx code={post.body.code} />
</div>
@ -134,7 +136,7 @@ export default async function BlogPostPage(props: NextPageProps) {
<div className="space-y-4 lg:sticky lg:top-24">
{/* author info */}
<div className="bg-muted/50 rounded-lg p-6">
<h2 className="text-lg font-semibold mb-4">Publisher</h2>
<h2 className="text-lg font-semibold mb-4">{t("publisher")}</h2>
<div className="flex items-center gap-4">
<div className="relative h-12 w-12 flex-shrink-0">
{post.author?.avatar && (
@ -156,7 +158,7 @@ export default async function BlogPostPage(props: NextPageProps) {
{/* categories */}
<div className="bg-muted/50 rounded-lg p-6">
<h2 className="text-lg font-semibold mb-4">Categories</h2>
<h2 className="text-lg font-semibold mb-4">{t("categories")}</h2>
<ul className="flex flex-wrap gap-4">
{post.categories?.filter(Boolean).map((category) => (
category && (
@ -178,7 +180,7 @@ export default async function BlogPostPage(props: NextPageProps) {
{/* table of contents */}
<div className="bg-muted/50 rounded-lg p-6 hidden lg:block">
<h2 className="text-lg font-semibold mb-4">Table of Contents</h2>
<h2 className="text-lg font-semibold mb-4">{t("tableOfContents")}</h2>
<div className="max-h-[calc(100vh-18rem)] overflow-y-auto">
<BlogToc toc={toc} />
</div>