博客网站中英文切换遇到 Bug 修复

问题一：Prettier 格式化冲突导致构建失败

在修改标签页 [lang]/tags/[tag]/page.tsx 时，Prettier 对链式调用格式的要求反复变化：

• 单行上报错要求拆成多行
• 多行上报错要求并成单行

原因：当 && 连接的多个条件换行时，Prettier 的 printWidth 和 arrowParens 规则产生冲突。

解决：将链式 filter 回调函数改为传统的 if 语句写法，避免在单行中写复杂逻辑：

// 修改前
allBlogs.filter((post) => post.language === lang && post.tags && post.tags.map(...))

// 修改后
allBlogs.filter((post) => {
  if (post.language !== lang) return false
  if (!post.tags) return false
  const postTagSlugs = post.tags.map((t) => slug(t))
  return postTagSlugs.includes(tagDecoded)
})

问题二：About 页面预渲染失败

部署时 About 页面报错：TypeError: Cannot read properties of undefined (reading 'body')

原因：查找作者时使用 p.slug === 'default'，但 contentlayer 的 computed field 对 Authors 类型的 slug 计算方式与 Blog 不同，导致匹配失败。

解决：改用 name 字段查找作者：

// 修改前
const author = allAuthors.find((p) => p.slug === 'default')

// 修改后
const author = allAuthors.find((p) => p.name === 'FeiFan')

问题三：博客文章双重路径问题

从主页点击博客标题跳转会跳转到 /zh/blog/zh/blog/...（重复语言前缀），而从导航栏进入则正常。

原因：首页博客列表中，链接路径直接拼接了 /${lang}/blog/${slug}，但 post.slug 已经包含了完整路径 zh/blog/first-blog。

解决：直接使用完整的 slug 作为路径，不再额外拼接语言前缀：

// 修改前
<Link href={`/${lang}/blog/${slug}`}>

// 修改后
<Link href={`/${slug}`}>

问题四：重复博客文件导致 404

构建日志提示 blog/first-blog.mdx 缺少 language 字段。

原因：存在重复的博客文件（不在 zh/en 子目录中，且缺少 language 字段），与正确位置的博客文件重复。

解决：删除多余的博客文件，只保留各语言目录下的版本。

总结

这次遇到的几个问题都比较隐蔽，涉及内容管理系统、静态生成和国际化配置的交互。核心是要注意 contentlayer 的 computed field 对不同文档类型的处理逻辑，以及链接路径的构建方式。排查这类问题需要仔细查看构建日志，并理解各个配置项之间的依赖关系。