良好实践

网页

使用 Markdown 模式可以提高可读性并简化维护，这对译者和您的网站脚本（用于提取内容）都很有益。

对于多语言网站中的命名锚点，一种有趣的方法是使用 Markdown 设计“硬编码”链接。

例如：对于带锚点的

<h2/>

标签



当前语言标签

LLM 在保护链接方面比人类更有效，

LSDE

允许您检测不同语言版本之间的问题。


因此，您可以共享一个在所有语言中都有效的链接，并使用

LSDE

来管理废弃锚点的替换。




代码歧义

在使用数据驱动模型时，避免歧义。


示例：


不良实践：

术语 'key' 不明确，导致难以查找。



ts
const PRODUCTS: Product[] = [
	{
		id: 'fcf7o',
		logo: '/icons/fcf7o-icon-40.webp',
		label: 'FCF7O',
		key: 'game:fcf7o.words.game_title',
	},
	{
		id: 'lsde',
		logo: '/icons/lsde-icon-40.webp',
		label: '<c1>LSDE</c1>',
		key: 'software:lsde.name',
	},
	{
		id: 'lsge',
		logo: '/icons/lsge.webp',
		label: 'LSGE',
		key: 'software:lsge.name',
	},
];


良好实践：

采用单一且一致的约定。


术语

i18nKey

非常明确，可以通过正则表达式（Regex）精确查找此值。


ts
const PRODUCTS: Product[] = [
	{
		id: 'fcf7o',
		logo: '/icons/fcf7o-icon-40.webp',
		label: 'FCF7O',
		i18nKey: 'game:fcf7o.words.game_title',
	},
	{
		id: 'lsde',
		logo: '/icons/lsde-icon-40.webp',
		label: '<c1>LSDE</c1>',
		i18nKey: 'software:lsde.name',
	},
	{
		id: 'lsge',
		logo: '/icons/lsge.webp',
		label: 'LSGE',
		i18nKey: 'software:lsge.name',
	},
];




懒惰

糟糕的想法源于懒惰。


不要试图通过执行操作来检索内容，从而节省键。


示例：


javascript
const [title, subtitle] = t( 'game:game.title' ).split( /[:：]/ );

这是一个伪好主意，因为在某些语言中，字符可能不同，词序也可能改变。





标签格式

最大限度地减少直接在文本中用于设计的代码，以便从代码库中对其进行控制。


例如，您可以指示图像的位置，但不能指示其样式或渲染方式。


如果您必须进行设计更改，您肯定不想仅仅为了更改标签样式而被迫将文本重新翻译成 10 种语言！



标签可以包含一个标识符，但通常强烈不建议添加额外信息，这是一种不良实践。


示例：不要这样做


<img src='url' left />

而是这样做


<img id=1 />

然后您将获取图像标签的 ID，以便在代码库中应用所需的样式。


ID 应该按字面意思使用，而不是通过它们的索引。


因为在不同的语言中，标签可能会被移动，不再与初始索引对应。


使用自然索引还会给开发人员带来复杂性；试图猜测图像或标签对应的索引是一个真正的难题。


因此，当您希望在插值后能够自定义标签时，请使用带标识符的标签。





CSS

对于网站翻译，当您有段落时，请在翻译后选择最小高度 (`min-height`)，以避免在语言切换时出现视觉偏移。


例如：`mih={'3lh'}`


这允许您根据占用行数最多的语言定义最小高度，从而确保一致且简洁的用户体验（UX）。



命名空间


始终在您的翻译键中包含“命名空间”，即使您只有一个。

这极大地简化了设置正则表达式模式以查找您的键的过程。


例如：

game:a.b.c

,

common:a.b.c