tailwindcss.com翻译

1>. 修改 /src/app/layout.tsx 文件，引入如下代码

import { headers } from "next/headers";
import { languages,languagesComparison } from "@/app/languages";

2>. 修改静态 metadata 为动态 generateMetadata()，如下：（注意：不要直接粘贴复制，要保留翻译后的 title 和 description ）

## 修改前 ---------------------------------------------------------------------------------------------------------
export const metadata: Metadata = {
  metadataBase: new URL("https://tailwindcss.com"),
  title: {
    default: "Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.",
    template: "%s - Tailwind CSS",
  },
  description:
    "Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.",
};

## 修改后 ---------------------------------------------------------------------------------------------------------
export async function generateMetadata(): Promise<Metadata> {
  const headersList = headers();

  // 获取中间件添加到请求中的URI，例如: /tailwindcss/zh-CN/docs/installation
  const fullPathname = headersList.get("x-pathname") || "/tailwindcss";
  const siteUrl = headersList.get("x-site-url") || "https://tr.eztun.net";
  const pagePath = headersList.get("x-page-path");
  const lang = headersList.get("x-lang");

  // 构建 alternate 多语言标签
  const languageAlternates: Record<string, string> = {};
  Object.keys(languages).forEach((_lang) => {
    languageAlternates[_lang] = `${siteUrl}/tailwindcss/${_lang}${pagePath}`;
  });

  return {
    metadataBase: new URL(siteUrl),
    title: {
      default: "Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.",
      template: `%s - ${languagesComparison[lang]}`,
    },
    description:
      "Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.",
    alternates: {
      canonical: fullPathname,
      languages: {
        ...languageAlternates,
        "x-default": `${siteUrl}/tailwindcss/zh-CN${pagePath}`,
      },
    },
  };
}

3>. 在 headersList 中增加如下获取语言代码和书写方向的代码：

const headersList = headers();
  const lang = headersList.get("x-lang");
  const langDir = headersList.get("x-lang-dir");

  return (
    <html
      lang={lang}
      dir={langDir}