如何在Builder.io的Qwik中实现i18n/l10n多语言支持？

以下是实现默认英文（URL无语言前缀）、其他语言带前缀的多语言网站的具体步骤：

1. 配置路由规则 #

Qwik的路由系统可以通过动态参数和路由加载器来处理带语言前缀的路径。首先在src/routes/__layout.tsx中添加语言检测逻辑：

import { component$, Slot } from '@builder.io/qwik';
import { routeLoader$, redirect } from '@builder.io/qwik-city';

// 定义支持的语言列表
const SUPPORTED_LANGS = ['en', 'fr', 'ru'];

// 路由加载器：提取或设置当前语言
export const useLangLoader = routeLoader$(async ({ params, url }) => {
  const langParam = params.lang as string;

  // 无语言参数时默认返回英文
  if (!langParam) return 'en';

  // 语言不在支持列表中，重定向到英文路径
  if (!SUPPORTED_LANGS.includes(langParam)) {
    throw redirect(302, url.pathname.replace(`/${langParam}`, ''));
  }

  return langParam;
});

export default component$(() => {
  const lang = useLangLoader();
  // 可在此处将语言注入全局上下文，方便所有组件访问
  return <Slot />;
});

然后在src/routes目录下，根路径的页面（如src/routes/blog/index.tsx）对应英文内容，而src/routes/[lang]/blog/index.tsx对应其他语言的页面——你可以复用同一个组件，通过useLangLoader获取当前语言来加载对应翻译。

2. 管理翻译资源 #

创建src/i18n/index.ts来维护多语言翻译文本：

// 翻译资源对象
const translations = {
  en: {
    blog: 'Blog',
    welcome: 'Welcome to our website'
  },
  fr: {
    blog: 'Blogue',
    welcome: 'Bienvenue sur notre site'
  },
  ru: {
    blog: 'Блог',
    welcome: 'Добро пожаловать на наш сайт'
  }
};

// 获取翻译的工具函数
export const getTranslation = (lang: string, key: string) => {
  return translations[lang as keyof typeof translations]?.[key] || translations.en[key];
};

在组件中使用翻译：

import { component$ } from '@builder.io/qwik';
import { useLangLoader } from '~/routes/__layout';
import { getTranslation } from '~/i18n';

export default component$(() => {
  const lang = useLangLoader();
  return <h1>{getTranslation(lang.value, 'welcome')}</h1>;
});

3. 适配Builder.io多语言内容 #

在Builder.io中，为每个内容条目添加lang属性（值为en/fr/ru），然后在Qwik组件中根据当前语言加载对应内容：

import { component$ } from '@builder.io/qwik';
import { useLangLoader } from '~/routes/__layout';
import { useContent } from '@builder.io/qwik-city';

export default component$(() => {
  const lang = useLangLoader();
  // 加载对应语言的Builder内容
  const blogPosts = useContent({
    model: 'blog-post',
    query: {
      where: { lang: lang.value },
      limit: 10
    }
  });

  return (
    <div class="blog-list">
      {blogPosts.value?.map(post => (
        <article key={post.id}>
          <h2>{post.data.title}</h2>
          <p>{post.data.excerpt}</p>
        </article>
      ))}
    </div>
  );
});

你也可以在Builder编辑器中设置预览URL（如/fr/blog），直接预览对应语言的内容效果。

4. 生成本地化内部链接 #

创建一个自定义的本地化链接组件，自动根据当前语言生成正确的URL：

import { component$, PropsOf } from '@builder.io/qwik';
import { Link } from '@builder.io/qwik-city';
import { useLangLoader } from '~/routes/__layout';

export const LocalizedLink = component$<PropsOf<Link>>(({ href, ...props }) => {
  const lang = useLangLoader();
  let localizedHref = href;

  // 非英文时，在路径前添加语言前缀
  if (lang.value !== 'en') {
    localizedHref = `/${lang.value}${href}`;
  }

  return <Link href={localizedHref} {...props} />;
});

使用示例：

<LocalizedLink href="/blog">Blog</LocalizedLink>

当当前语言为法文时，链接会自动生成为/fr/blog；英文时则为/blog。

5. 优化SEO与语言标识 #

在根布局的<html>标签中设置语言属性，并添加OG标签帮助搜索引擎识别：

import { component$ } from '@builder.io/qwik';
import { useLangLoader } from '~/routes/__layout';

export default component$(() => {
  const lang = useLangLoader();
  return (
    <html lang={lang.value}>
      <head>
        <meta property="og:locale" content={lang.value} />
        {/* 其他SEO相关标签 */}
      </head>
      <body>
        <Slot />
      </body>
    </html>
  );
});

内容的提问来源于stack exchange，提问作者Fatemeh motlagh