Хорошая практика

Для ВЕБ

Использование шаблонов Markdown улучшает читаемость и упрощает обслуживание как для переводчика, так и для ваших скриптов веб-сайта, которые будут извлекать контент.

Для именованных якорей на многоязычном сайте интересный подход заключается в том, чтобы «жестко кодировать» ссылки с помощью дизайна Markdown.

Напр.: для тега

<h2/>

с якорем

label-in-current-language

LLM более эффективны, чем люди, в защите ссылок, и

LSDE

позволяет вам обнаруживать проблемы между различными языковыми версиями.

Таким образом, вы можете делиться ссылкой, которая будет работать на всех языках, и использовать

LSDE

для управления заменой устаревшего якоря.

Двусмысленность кода

Избегайте двусмысленности при работе с моделями, ориентированными на данные.

Пример:

Плохая практика:

Термин 'key' не является явным и затрудняет его поиск.

tsconst 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

tsconst 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',
	},
];

Лень

Плохие идеи рождаются от лени.

Не пытайтесь экономить ключи, выполняя операции по извлечению контента.

Пример:

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

Это ложная хорошая идея, потому что в некоторых языках символы могут различаться, а порядок слов может меняться.

Формат тегов

Максимально сократите код, предназначенный для дизайна, непосредственно в тексте, чтобы управлять им из кодовой базы.

Например, вы можете указать местоположение изображения, но не его стиль или способ отображения.

Если вам нужно внести изменения в дизайн, вы не захотите быть вынужденными переводить текст на 10 языков только для того, чтобы изменить стиль тега!

Теги могут включать идентификатор, но добавление дополнительной информации обычно крайне не рекомендуется и является плохой практикой.

Пример: Не делайте

<img src='url' left />

а лучше

<img id=1 />

Затем вы получите ID тега изображения, чтобы применить к нему необходимые стили в кодовой базе.

ID должны использоваться буквально, а не через их индекс.

Действительно, в разных языках теги могут быть перемещены и перестать соответствовать исходному индексу.

Использование естественных индексов также усложняет работу для разработчика; попытка угадать, какому индексу соответствует изображение или тег, является настоящей головоломкой.

Поэтому используйте теги с идентификатором, когда вы хотите иметь возможность настраивать их после интерполяции.

CSS

Для перевода сайта, когда у вас есть абзацы, выберите минимальную высоту (`min-height`) после перевода, чтобы избежать визуальных смещений при смене языка.

Напр.:

mih={'3lh'}

Это позволяет вам определить минимальную высоту на основе языка, который занимает больше всего строк, тем самым обеспечивая согласованный и ненавязчивый пользовательский опыт (UX).

Пространство имен

Всегда включайте 'namespace' в свои ключи перевода, даже если у вас только одно.

Это значительно упрощает настройку шаблона Regex для поиска ваших ключей.