55 lines
3.4 KiB
Plaintext
55 lines
3.4 KiB
Plaintext
---
|
||
title: 在设计或开发多语言站点时你必须注意什么事？
|
||
---
|
||
|
||
设计和开发多语种网站是国际化的一部分(i18n)。
|
||
|
||
## 搜索引擎优化
|
||
|
||
- 使用 `<html>` 标签上的 `lang` 属性。
|
||
- 在 URL 中包含区域设置(例如 en_US, zh_CN等)。
|
||
- 网页应该使用 `<link rel="alternate" hreflang="other_locale" href="url_for_other_locale">` 来告诉搜索引擎，在指定的 `href` 中有另一个页面具有相同的内容，但是对于另一种语言/本地化。
|
||
|
||
## 了解地域与语言之间的区别
|
||
|
||
地域设置控制您所在区域的数字、日期和时间显示方式：它可能是一个国家，或国家的一部分，甚至可能不尊重国家边界。
|
||
|
||
## 语言可能因国家而异。
|
||
|
||
某些语言，尤其是广为流传的语言在不同国家有不同的“喜好”（语法规则、拼写、字符）。 重要的是要区分目标国家的语言，而不要假定/强制一个国家的语言版本适用于所有讲该语言的国家。 示例：
|
||
|
||
- `en`: `en-USA` (美国英文), `en-GB` (英国英文)
|
||
- `zh`: `zh-CN`(简体中文), `zh-TW`(繁体中文)
|
||
|
||
## 预测地域，但不限制
|
||
|
||
服务器可以通过HTTP头部`Accept-Language`和IP组合来决定访客的地域/语言。 通过这些，可以为访客自动选择最佳地域设置。 然而，预测并不是万无一失的(特别是如果访客使用VPN)，仍然应当允许访客不受干扰地改变自己的国家/语言。
|
||
|
||
## 考虑不同语言文本长度的差异
|
||
|
||
某些内容如果用另一种语言写入，可能会更长。 注意设计中的布局或溢出问题。 最好是避免在文字数量会影响设计的情况下进行设计。 字符数量与标题、标签和按钮等事项有关。 对于自由流动的文本，如正文或评论，它们就不是一个问题。 例如，德语和法语等某些语言往往使用比英语长的语言和句子。 如果您不考虑到这一点，可能会导致布局问题。
|
||
|
||
## 语言阅读方向
|
||
|
||
英语和法语等语言是从左到右、从上到下写的。 但是，有些语言，例如希伯来语和阿拉伯语是从右到左写的。 这可能会影响您站点的布局和页面上元素的位置， 这样你就必须小心设计你的网站，要考虑到不同的文本方向。
|
||
|
||
## 不要简单地串联翻译后的字符串
|
||
|
||
不要做任何类似`"今天的日期为"+日期`的事情。 在语序不同的语言中，它会出现错误。 使用模板字符串加参数替换每种语言。 例如，分别用英文和中文来看看以下两句：`I will travel on {% date %}`，以及`{% date %} 我会出发` 请注意，由于语言的语法规则，变量的位置不同。
|
||
|
||
## 格式化日期和货币
|
||
|
||
日历日期有时以不同的方式呈现。 例如： 美国的“May 31, 2012” vs. 欧洲部分地区的"31 May 2012"。
|
||
|
||
## 不在图片中放置文本
|
||
|
||
将文本放在位图中（如png、gif、jpg等）并不是一种可扩展的方法。 在图片中放置文字仍然是一种常用的方式，可以在任何计算机上显示优雅、非系统字体。 不过，为了支持图片文本翻译成其他语言，需要为每种语言创建单独的图片，这不是设计人员的灵活工作流程。
|
||
|
||
## 要注意色彩的感知方式
|
||
|
||
不同语言和文化对颜色的看法不同。 设计应适当使用颜色。
|
||
|
||
## 参考资料
|
||
|
||
- [地域和语言之间的区别]\(https://devblogs.microsoft.com/setup/the-diffes-between en-locales-and-langues)
|