【网站出海】什么！？我用30分钟完成了12个国家的网站语言i18n 配置

最新推荐文章于 2024-08-02 18:21:33 发布

开发者码神

最新推荐文章于 2024-08-02 18:21:33 发布

阅读量491

点赞数 4

文章标签：前端科技流量运营学习 javascript

本文链接：https://blog.csdn.net/developermasheng/article/details/139439599

版权

本文来自公众号：开发者码神。欢迎关注第一时间阅读精华文章。

SEO中多语言支持是很有必要的，你想想，全世界的用户都是你的流量来源，光印度就十几亿人，这个量级的用户量支不支持？

假设你已经迁移或创建好了Astro项目，下面我们开始如何在30分钟内设置十几个国家国际化。

1、配置 i18n 路由

在 i18n 配置对象中必须指定一个默认语言（defaultLocale）和所有支持的语言列表（locales）。此外，你还可以配置更具体的路由和回退行为，以匹配你期望的 URL。修改：astro.config.mjs

import { defineConfig } from 'astro/config';

// https://astro.build/config
export default defineConfig({
    site: "",
    i18n: {
        defaultLocale: "en",
        locales: ["en","es", "zh", "hi", "ar", "fr", "pt", "ru", "bn", "id", "pa", "de"],
      }
});

2、规划文章目录

创建一个你想支持的语言的目录，这里我想支持11个国家，所以就创建了11个国家的目录，每个目录下面放着对应国家语言的文章。例如，如果你打算支持英语和法语，那么是创建 en/ 和 fr/ 目录：

3、定义你的文件集合（如果已定义则忽略）

4、翻译网页标签

创建一个 src/i18n/ui.ts 文件来存储你翻译后的标签

export const languages = {
  ar: 'English',
  bn: 'Français',
  de: 'English',
  en: 'Français',
  es: 'English',
  fr: 'Français',
  hi: 'English',
  id: 'Français',
  pa: 'English',
  pt: 'Français',
  ru: 'English',
  zh: 'Français'
};

export const defaultLang = 'en';

export const ui = {
  ar: {
    'nav.home': 'Home',
    'nav.about': 'About',
    'nav.twitter': 'Twitter',
  },
  bn: {
    'nav.home': 'Accueil',
    'nav.about': 'À propos',
  },  
  de: {
    'nav.home': '主页',
    'nav.about': '关于',
  },en: {
    'nav.home': 'Home',
    'nav.about': '关于',
  },es: {
    'nav.home': 'Home',
    'nav.about': '关于',
  },fr: {
    'nav.home': '主页',
    'nav.about': '关于',
  },hi: {
    'nav.home': '主页',
    'nav.about': '关于',
  },id: {
    'nav.home': '主页',
    'nav.about': '关于',
  },pa: {
    'nav.home': '主页',
    'nav.about': '关于',
  },pt: {
    'nav.home': '主页',
    'nav.about': '关于',
  },
  ru: {
    'nav.home': '主页',
    'nav.about': '关于',
  },
  zh: {
    'nav.home': '主页',
    'nav.about': '关于',
  }
} as const;

5、创建辅助函数

src/i18n/utils.ts

import { ui, defaultLang } from './ui';
//通过入参URL获取语言缩写，比如入参/en/XXX,返回en
export function getLangFromUrl(url: URL) {
  const [, lang] = url.pathname.split('/');
  if (lang in ui) return lang as keyof typeof ui;
  return defaultLang;
}
//通过入参语言缩写和标签种类，返回对应的UI标签翻译
export function useTranslations(lang: keyof typeof ui) {
  return function t(key: keyof typeof ui[typeof defaultLang]) {
    return ui[lang][key] || ui[defaultLang][key];
  }
}
//过滤出指定语言的文章
export function filterPostsBySlugPrefix(posts, prefix) {
  return posts.filter(post => {
      const slugPrefix = post.slug.split('/')[0];
      return slugPrefix === prefix;
  });
}

6、创建本地化内容文件夹

根据语言组织你的内容文件夹中的本地化内容。在 src/pages/ 内的任何位置创建单独的 /[locale]/ 文件夹，Astro 的基于文件的路由将会在相应的 URL 路径下创建你的页面。

你的文件夹名称必须与 locales 中的项完全匹配。

这时候我们输入http://localhost:4321/en,就展示的因为文章列表，输入http://localhost:4321/zh,就展示中文文章列表。

文章详情的跳转链接可以通过内容集合的值获取，图中的post.slug就返回的类似zh/post-1.md,这样点击就能访问对应的语言的文章：

7、UI标签转换

如图，通过utils中的方法可以轻松转换

设置标签

每个页面必须在 <html> 元素中包含一个 lang 属性以匹配页面的语言。在这个例子中，可复用布局会从当前路由中提取语言：

8、允许用户切换不同标签

为你所支持的不同语言创建链接，以便用户能选择他们浏览你网站时所使用的语言。

创建一个用以显示每个语言的链接的组件

---
import { languages } from '../i18n/ui';
---
<ul>
  {Object.entries(languages).map(([lang, label]) => (
    <li>
      <a href={`/${lang}/`}>{label}</a>
    </li>
  ))}
</ul>

将 <LanguagePicker /> 组件放到你的网站中，以便它能在每个页面上显示。如下例子则在基础布局中将它添加到了网站的页脚部分：

---
import LanguagePicker from '../components/LanguagePicker.astro';
import { getLangFromUrl } from '../i18n/utils';

const lang = getLangFromUrl(Astro.url);
---
<html lang={lang}>
    <head>
        <meta charset="utf-8" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="viewport" content="width=device-width" />
        <title>Astro</title>
    </head>
    <body>
        <slot />
        <footer>
          <LanguagePicker />
        </footer>
    </body>
</html>