国际化站点的开发注意
时间
因为各个地区的时区不同，会导致时间也会不一样。
因此需要有一个基准时间，在前端根据时间来开关活动的显示。
/**
* 匹配时间是否在范围内
* @param { string } startDate 开始的时间 为 Date 的有效参数 e.g. `2024/11/22 10:00:00 UTC+8`
* @param { string } endDate 结束的时间 为 Date 的有效参数 e.g. `2024/11/26 10:00:00 UTC+8`
* @returns 是否在时间范围内
*/
export function matchDate(startDate = new Date().toString(), endDate = new Date().toString()) {
const start = new Date(startDate)
const end = new Date(endDate)
const now = new Date()
return +now > +start && +now < +end
}
// 11.22号北京时间10点上线
// 11.29号北京时间10点下线
// 北京时间是东八区 也就是 UTC+8
if (matchDate('2024/11/22 10:00:00 UTC+8', '2024/11/29 10:00:00 UTC+8')){
// todo ...
}
语言
国际化站点一般具有多种语言，这里是一个根据浏览器语言跳转到对应国际化路由的示例。
需要注意的是，浏览器语言和系统语言是分开的。浏览器语言实际上是 用户偏好语言 而不是系统语言。
也就是系统语言是 EN， 但浏览器语言却可以是 CN 的原因。
// 检测浏览器语言进行重定向
const browserLanguage = window.navigator.language
const languages = {
pt: ['pt'],
ar: ['ar'],
es: ['es'],
it: ['it'],
de: ['de'],
fr: ['fr'],
nl: ['nl']
}
for (const [lng, asName] of Object.entries(languages)) {
if (asName.includes(browserLanguage)) {
// 增加国际化前缀 e.g. /user -> /fr/user
const link = returnHref(router, lng)
router.push(link)
break
}
}
// 如果没有跳转 那么就是默认语言了
此外，记得在 html 标签中增加 lang 属性，它的取值就是对应的语言简称，比如 <html lang="en">
排版
这里以阿拉伯文为例子，它是 rtl (right to left) 的，而中文，英文则是 ltr （left to right) 的。
所以排版是需要进行更改的。
HTML 元素有一个全局的（即任何元素都有的） dir 属性, 它是一个指示元素中文本方向的枚举属性。它的取值如下：
- ltr，指从左到右，用于那种从左向右书写的语言（比如英语）；
- rtl，指从右到左，用于那种从右向左书写的语言（比如阿拉伯语）；
- auto，指由用户代理决定方向。它在解析元素中字符时会运用一个基本算法，直到发现一个具有强方向性的字符，然后将这一方向应用于整个元素。
此外，需要避免使用 left，right 等明确方向。而是使用逻辑属性，如 start，end 等。
Internationalization (i18n) - 国际化
-
定义：设计和开发一个产品，使其能够轻松适配多种语言和地区，而无需进行重大更改。
-
特点：
- 是一种开发阶段的策略，目的是为本地化提供支持。
- 通常包括提取硬编码字符串、支持不同字符集（如 Unicode）、设计灵活的日期、时间和货币格式。
-
作用：为 L10n 提供技术支持，简化本地化工作。
Localization (L10n) - 本地化
- 定义：根据特定语言、地区或文化习惯调整产品，使其更符合本地用户的需求。
- 特点：
- 包括翻译内容、适配日期/时间格式、货币符号、度量单位，以及文化或法律上的调整。
- 是产品进入具体市场的关键。
- 作用：将产品变得“本地友好”，从而吸引目标市场的用户。
Translation (t9n) - 翻译
- 定义：将一种语言的文本转换成另一种语言，同时保留其语义、语法和上下文。
- 特点：
- 仅限于文字层面的语言转换。
- 是 L10n 中非常重要的一部分，但 L10n 不仅限于翻译。
- 作用：确保语言转换后的内容具有流畅的语义表达。
Globalization (g11n) - 全球化
-
定义：整合国际化和本地化，以便产品在全球范围内轻松适配多个市场。
-
特点：
- 是一种综合策略，强调产品在全球范围内的无缝扩展。
- 不仅包括技术层面（i18n），还包括市场和文化层面的考量（L10n）。
-
作用：帮助企业同时管理多市场的需求，避免碎片化。
-
总结
- t9n 是基础，聚焦于语言层面的转换。
- L10n 扩展到文化和地区适配，覆盖更广。
- i18n 是技术层面的准备工作，为 L10n 打下基础。
- g11n 则是所有这些工作的全局化实现，涵盖技术和文化的整体适配。
国际化站点的开发注意
http://localhost:8080/archives/guo-ji-hua-zhan-dian-de-kai-fa