feat(blogs): 新增多语言博客内容及图片资源

添加英文、日文和中文博客文章，包括1.mdx、2.mdx和3.mdx文件
新增博客相关图片资源到public/images目录

app/[locale]/about/page.tsx

@@ -1,5 +1,4 @@
 import MDXComponents from "@/components/mdx/MDXComponents";
-import TableOfContents from "@/components/mdx/TableOfContents.client";
 import { Locale, LOCALES } from "@/i18n/routing";
 import { constructMetadata } from "@/lib/metadata";
 import fs from "fs/promises";
@@ -17,52 +16,7 @@ const options = {
   },
 };
 
-interface TableOfContentsItem {
-  id: string;
-  text: string;
-  level: number;
-}
-
-// 解析MDX内容并提取标题
-async function parseMDXContent(content: string): Promise<TableOfContentsItem[]> {
-  if (!content) {
-    return [];
-  }
-
-  try {
-    const headingRegex = /^#{2,4}\s+(.+)$/gm;
-    const headings: TableOfContentsItem[] = [];
-    let match;
-
-    while ((match = headingRegex.exec(content)) !== null) {
-      const fullMatch = match[0];
-      const text = match[1]?.trim();
-
-      if (!text) continue;
-
-      // 确定标题级别
-      let level = 2;
-      if (fullMatch.startsWith("###")) {
-        level = fullMatch.startsWith("####") ? 4 : 3;
-      }
-
-      // 生成ID（将文本转换为URL友好的格式）
-      const id = text
-        .toLowerCase()
-        .replace(/[^a-z0-9\u4e00-\u9fa5\s-]/g, "")
-        .replace(/\s+/g, "-");
-
-      headings.push({ id, text, level });
-    }
-
-    return headings;
-  } catch (error) {
-    console.error("Error parsing MDX content for TOC:", error);
-    return [];
-  }
-}
-
-async function getMDXContent(locale: string, section: string): Promise<string> {
+async function getMDXContent(locale: string, section: string) {
   const filePath = path.join(
     process.cwd(),
     "content",
@@ -115,37 +69,15 @@ export default async function AboutPage({
   const section = (resolvedSearchParams.section as string) || "company";
 
   const content = await getMDXContent(locale, section);
-  const tocItems = await parseMDXContent(content);
-
-  // 获取多语言目录标题
-  const t = await getTranslations({ locale, namespace: "Common" });
-  const tocTitle = t("tableOfContents") || "目录";
 
   return (
-    <div className="flex flex-col md:flex-row w-full gap-8">
-      {/* 侧边目录 - 在移动端显示在内容上方 */}
-      <div className="w-full md:w-1/4 lg:w-1/5 order-2 md:order-1">
-        <TableOfContents
-          items={tocItems || []}
-          title={tocTitle}
-        />
-      </div>
-
-      {/* 主要内容 */}
-      <article className="w-full md:w-3/4 lg:w-4/5 px-2 md:px-8 ml-0 md:ml-64 order-1 md:order-2">
-        {content ? (
-          <MDXRemote
-            source={content}
-            components={MDXComponents}
-            options={options}
-          />
-        ) : (
-          <div className="text-center py-8 text-gray-500">
-            <p>内容加载中...</p>
-          </div>
-        )}
-      </article>
-    </div>
+    <article className="w-full md:w-3/5 px-2 md:px-12">
+      <MDXRemote
+        source={content}
+        components={MDXComponents}
+        options={options}
+      />
+    </article>
   );
 }
 

app/[locale]/blog/[slug]/page.tsx

@@ -4,9 +4,11 @@ import { Locale, LOCALES } from "@/i18n/routing";
 import { getPosts } from "@/lib/getBlogs";
 import { constructMetadata } from "@/lib/metadata";
 import { BlogPost } from "@/types/blog";
+import fs from "fs/promises";
 import { Metadata } from "next";
 import { MDXRemote } from "next-mdx-remote-client/rsc";
 import { notFound } from "next/navigation";
+import path from "path";
 
 type Params = Promise<{
   locale: string;
@@ -17,14 +19,112 @@ type MetadataProps = {
   params: Params;
 };
 
+async function getMDXContent(locale: string, section: string): Promise<BlogPost> {
+  const filePath = path.join(
+    process.cwd(),
+    "blogs",
+    locale,
+    `${section}.mdx`
+  );
+
+  try {
+    const content = await fs.readFile(filePath, "utf-8");
+
+    // 解析MDX文件的frontmatter和内容
+    const { frontmatter, content: postContent } = parseMDXContent(content);
+
+    // 构建BlogPost对象
+    const blogPost: BlogPost = {
+      locale,
+      title: frontmatter.title || '',
+      description: frontmatter.description,
+      image: frontmatter.image,
+      slug: frontmatter.slug || '',
+      tags: frontmatter.tags,
+      // 解析日期
+      date: frontmatter.date ? new Date(frontmatter.date) : new Date(),
+      // 设置visible默认值为published
+      visible: frontmatter.visible || 'published',
+      // 处理pin字段 - 如果有pin标记则为true，否则为false
+      pin: frontmatter.pin === 'pin',
+      // 去除frontmatter后的内容
+      content: postContent.trim(),
+      // 所有frontmatter作为metadata
+      metadata: { ...frontmatter }
+    };
+
+    return blogPost;
+
+  } catch (error) {
+    console.error(`Error reading MDX file: ${error}`);
+    // 返回默认的BlogPost对象（符合类型要求）
+    return {
+      title: '',
+      slug: '',
+      date: new Date(),
+      content: '',
+      visible: 'published',
+      pin: false,
+      metadata: {},
+      locale
+    };
+  }
+}
+
+/**
+ * 解析MDX内容，提取frontmatter和正文
+ */
+function parseMDXContent(content: string): {
+  frontmatter: Record<string, any>
+  content: string
+} {
+  // 匹配frontmatter的正则表达式（---开头和结尾）
+  const frontmatterRegex = /^---\s*[\r\n]([\s\S]*?)[\r\n]---\s*[\r\n]/;
+  const match = frontmatterRegex.exec(content);
+
+  let frontmatter: Record<string, any> = {};
+  let postContent = content;
+
+  if (match && match[1]) {
+    // 提取frontmatter部分并解析
+    const frontmatterStr = match[1];
+    postContent = content.slice(match[0].length);
+
+    // 解析frontmatter的每一行
+    const lines = frontmatterStr.split(/[\r\n]+/);
+    lines.forEach(line => {
+      // 跳过空行和注释
+      if (!line.trim() || line.trim().startsWith('#')) return;
+
+      // 分割键值对（支持值中有冒号的情况）
+      const colonIndex = line.indexOf(':');
+      if (colonIndex === -1) return;
+
+      const key = line.substring(0, colonIndex).trim();
+      let value = line.substring(colonIndex + 1).trim();
+
+      // 移除值的引号（如果有）
+      if ((value.startsWith('"') && value.endsWith('"')) ||
+        (value.startsWith("'") && value.endsWith("'"))) {
+        value = value.substring(1, value.length - 1);
+      }
+
+      frontmatter[key] = value;
+    });
+  }
+
+  return { frontmatter, content: postContent };
+}
+
+
 export async function generateMetadata({
   params,
 }: MetadataProps): Promise<Metadata> {
   const { locale, slug } = await params;
-  let { posts }: { posts: BlogPost[] } = await getPosts(locale);
-  const post = posts.find((post) => post.slug === slug);
+  let post = await getMDXContent(locale, slug);
+
+  console.log(post, 'post');
 
-  console.log(post, posts);
   if (!post) {
     return constructMetadata({
       title: "404",
@@ -38,9 +138,9 @@ export async function generateMetadata({
 
   return constructMetadata({
     page: "blog",
-    title: post.title,
-    description: post.description,
-    images: post.image ? [post.image] : [],
+    title: post.title || '',
+    description: post.description || '',
+    images: [],
     locale: locale as Locale,
     path: `/blog/${slug}`,
     canonicalUrl: `/blog/${slug}`,
@@ -49,10 +149,9 @@ export async function generateMetadata({
 
 export default async function BlogPage({ params }: { params: Params }) {
   const { locale, slug } = await params;
-  let { posts }: { posts: BlogPost[] } = await getPosts(locale);
-
-  const post = posts.find((item) => item.slug === slug);
+  let post = await getMDXContent(locale, slug);
 
+  console.log(post);
   if (!post) {
     return notFound();
   }