客户: 年度 国际会议“ProStarch” — 由“SOYUZKRAHMAL”协会组织的淀粉和糖浆行业专家平台。会议在莫斯科举行,汇集了来自俄罗斯和国外的参与者。2026年,会议将庆祝其成立10周年。
任务: 网站最初只有俄语版本。为了2026年的周年会议,需要吸引外国参与者和合作伙伴,主要是来自中国、土耳其和东南亚国家。启动一个多语言网站,供所有国际合作伙伴访问。
一次性上线六种语言
会议连接了六种语言: 俄语、英语、中文、土耳其语、越南语和泰语。
带有旗帜的切换器出现在网站的标题中。每个语言版本都可以通过单独的 URL 访问,并被搜索引擎索引:来自泰国的用户可以通过泰语 Google 找到该网站。
赞助商和参与者的页面已翻译成所有语言,包括详细的参与条款和反馈表。
但对于这个网站,简单的连接是不够的——该网站是使用 Zero Block 制作的,没有自适应定位(flexbox)。这意味着当文本改变时,元素的位置不会改变。
此外,网站上还有几个设计元素直接取决于文本的长度。所以,我们遇到了第一个问题...
不同文本标题的视觉适应
网站是在 Tilda 上制作的。其中一个关键区块是具有两部分结构的横幅标题:第一行是深色,第二行用颜色突出显示。在俄语版本中,该区块看起来很整洁。
翻译成其他语言时,突出显示的区块不再与文本匹配:文本超出了区块的边界并与相邻元素重叠。
为什么? Tilda 对部分横幅元素使用绝对定位。突出显示区块的宽度是根据俄语文本固定设置的。在其他语言中,文本长度不同,文本不匹配。修改 CSS 后,该区块开始适应文本长度:
同样的问题在中文中反向出现:文本明显更短,块看起来是空的。因此,我们修正了对齐方式:
现在,对于每个网站版本,设计师的最初构想都得以保留,并且任何语言的访问者都能看到正确的布局。
通过神经网络指令(提示)保留双关语
网站文案的最初构想是:为每个方向使用“PRO”前缀。这是对会议名称“ProStarch”的文字游戏:
但问题是:最初,神经网络还没有那么聪明,无法理解这一点。因此,它会直译前缀:
为了保留这一点,我们为神经网络添加了一个提示(指令),以便它能考虑到这种文字游戏。有趣的是,这个提示并非针对网站上的特定区块——它为整个网站提供了通用指令。因此,如果其他地方也使用了这种文字游戏,神经网络就已经“知道”了。
只需提供以下带有解释和示例的文本:
"PRO 分析"、"PRO 策略"、"PRO 技术"、"PRO 消费者" 是
与会议名称 "ProStarch" 的文字游戏,意思是 "关于"
某事。
不要翻译 "PRO" 部分。行业词汇表以实现精确翻译
该行业使用高度专业化和特定的术语。未经准备的标准翻译会在需要精确行业术语的地方使用通用词汇。
我们与组织者一起,收集了一份详细的关键术语词汇表,其中包含正确的英文对应词。该词汇表也成为神经网络系统提示的一部分,以下是其片段:
## 行业术语词汇表:
- ПроКрахмал => ProStarch
- ПроКрахмал: от сырья к биоэкономике => ProStarch: 从原材料到
生物经济
- Союзкрахмал => StarchUnion
- Ассоциация предприятий глубокой переработки зерна => 谷物深加工企业协会
- ГПЗ => 谷物深加工
- ЕАЭС => 欧亚经济联盟 (EAEU)
- ШОС => 上海合作组织
- ГФС => 葡萄糖-果糖糖浆
...
不同语言的不同视频版本
作为宣传材料,网站上使用了三种语言的视频: 俄语、 英语 和 中文。需要根据网站语言显示正确的视频。
这是通过CSS类实现的:每个视频块都被赋予了video-ru、video-cn或video-en类。通过选择器删除元素的规则,Multify在将HTML代码发送到浏览器之前,直接从HTML代码中删除了“多余的”视频。例如,对于英文版本,规则如下:
"remove": [
{
"selector": ".video-ru, .video-cn"
}
]而对于俄文版本,则删除了英文和中文版本的视频:
"remove": [
{
"selector": ".video-en, .video-cn"
}
]反过来,在 Tilda 编辑器中,所有三个版本的视频都已创建并相互叠加。
天数计数器修改的本地化
主页上使用了JavaScript修改,其中包含一个会议开始前的天数计数器。与视频显示类似,可以替换页面上的文本——包括JavaScript代码片段,我们就是这样做的。顺便说一下,这是代码——这次是ANNEXX的修改:
这就是将“дней”翻译成英文的方式:
"replace": [
[
"daysText1 = 'день' || 'день', daysText2 = 'дня' || 'дня', daysText5 = 'дней' || 'дней'",
"daysText1 = 'day' || 'days', daysText2 = 'days' || 'days', daysText5 = 'days' || 'days'"
],
],这就是翻译成中文的方式:
"replace": [
[
"daysText1 = 'день' || 'день', daysText2 = 'дня' || 'дня', daysText5 = 'дней' || 'дней'",
"daysText1 = '天', daysText2 = '天', daysText5 = '天'"
],
],因此,在每个网站版本上,计数器都以所需的语言显示:
响应式布局 (flexbox)
前面提到,在 Tilda 中对元素进行绝对定位(使用 Zero Block 进行布局时的常见现象)时,元素实际上是“钉死的”,因此其中任何文本的更改都可能导致文本与其他元素重叠。
为了避免这种情况,可以使用每个浏览器中内置的机制——flexbox。通过这种方法,元素变得“弹性”,也就是说它们会根据内容自行调整。
实际上,对于 ProStarch 会议网站,我们更新了大多数元素的布局:胶囊、列表和卡片。在比较俄语和中文时,差异最为明显,因为中文要短得多:
因此,网站上的所有内容都能正确显示,无论元素中的文本是长是短。
会议组织者的反馈
Daria,ProStarch 会议组织者:
今年,我们的国际会议迎来了十周年。为此,我们决定推出自己的网站,但遇到了翻译成不同外语的问题:许多翻译人员经常使用模板词汇,而由于我们行业的专业性,我们需要特定的术语。同时,一次性翻译成多种语言也存在困难:泰语、中文、英语、土耳其语和越南语。
我们决定联系 Multify,结果非常满意!专家立即告诉我们,可以一次性设置所有内容。他解释了细节,并平静耐心地接受了修改。
他们专门为我们制作了一个词汇表,以正确翻译特定术语,并为每种语言调整了网站设计。我们感谢这项服务,并相信我们的合作将持续多年!
会议的中国合作伙伴也对结果表示赞赏:
总结
prostarch.ru 网站自发布以来一直以六种语言运行。语言版本可在搜索中找到,切换器在页眉中运行,赞助商和参与者的页面已完全本地化。
案例的特殊性在于非标准语言集(泰语、越南语、土耳其语)和一些需要手动修改布局的技术细微差别。对于没有绝对定位的标准网站,其中大多数都不会出现。
