在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

h5bp/Front-end-Developer-Interview-Questions

菜单

翻译系统

相关源文件

翻译系统使《前端开发者面试问题》代码库可用于30多种不同的语言，方便全球开发者访问。该系统通过使用Eleventy静态站点生成器的文件化方法，处理翻译内容的组织、存储和展示。

架构概述

翻译系统遵循一种简单的架构，即原始英文问题被翻译并存储在特定语言的文件中，然后在网站生成过程中进行处理以创建多语言网站。

来源： src/_data/translations.json config/eleventy.config.js src/translations/hindi/README.md src/translations/russian/README.md src/translations/bengali/README.md

翻译文件结构

每个翻译都以一个包含前置元数据和翻译内容的Markdown文件形式存在。文件按照一致的模式组织在特定语言的目录中。

文件组织

来源： src/translations/hindi/README.md src/translations/bengali/README.md src/translations/russian/README.md src/translations/chinese-traditional/README.md

翻译文件内容结构

每个翻译文件都包含YAML前置元数据，后跟翻译内容

来源： src/translations/hindi/README.md1-40 src/translations/bengali/README.md1-50 src/translations/russian/README.md1-60

前置元数据

每个翻译文件都包含带有关键元数据的前置元数据

前置元数据字段的用途如下：

  • title: 显示在页面顶部（以翻译后的语言）
  • layout: 指定用于渲染的模板
  • permalink: 定义翻译页面的URL路径
  • lang: 用于HTML lang 属性的ISO语言代码

来源： src/translations/hindi/README.md1-7 src/translations/bengali/README.md1-6 src/translations/russian/README.md1-6

翻译注册表

所有可用翻译都注册在 src/_data/translations.json 文件中

此注册表：

  1. 提供可用翻译的完整列表
  2. 为UI中的语言选择器提供元数据
  3. 将语言显示名称映射到其URL路径

来源： src/_data/translations.json1-141

构建流程

翻译系统利用Eleventy处理Markdown文件并生成多语言站点

来源： config/eleventy.config.js1-92

构建过程的关键组件

  1. Eleventy配置：EleventyI18nPlugin 在 eleventy.config.js 中配置，默认语言为英语。

  2. 模板处理：每个翻译文件都使用指定的布局模板（通常是 layouts/page.njk）进行处理。

  3. 语言属性：前置元数据中的 lang 属性被应用于HTML，确保浏览器和屏幕阅读器能够正确识别语言。

来源： config/eleventy.config.js20-23

语言支持

该系统目前支持30多种语言，包括：

语系支持的语言
欧洲英语、法语、德语、西班牙语、意大利语、荷兰语、葡萄牙语、罗马尼亚语、捷克语、丹麦语、瑞典语
东亚语言中文、日语、韩语、越南语
南亚印地语、孟加拉语
中东阿拉伯语、波斯语、希伯来语
斯拉夫语言俄语、乌克兰语、波兰语、保加利亚语、克罗地亚语、塞尔维亚语
其他土耳其语、匈牙利语、希腊语、拉脱维亚语、印度尼西亚语

来源： src/_data/translations.json3-139

RTL 语言支持

该系统支持从右到左 (RTL) 语言，如阿拉伯语和希伯来语。当页面使用与RTL语言相关的语言代码时，布局模板会应用适当的文本和布局方向设置。

来源： src/translations/romanian/README.md1-325 src/translations/ukrainian/README.md1-244 src/translations/chinese-traditional/README.md1-274

添加新翻译

添加新语言翻译的过程包括：

  1. 在 src/translations/ 下创建新目录，并以语言名称命名
  2. 添加一个带有适当前置元数据的 README.md 文件
  3. 翻译内容部分，同时保持原始结构
  4. 将语言添加到 translations.json

来源： src/translations/hindi/README.md src/_data/translations.json

翻译文件到网页的流程

此图展示了翻译文件如何被处理并最终显示给用户

来源： src/translations/hindi/README.md src/_data/translations.json config/eleventy.config.js

技术实现总结

翻译系统通过以下关键特性实现多语言支持：

  1. 基于文件的翻译：每种语言都作为独立的Markdown文件存在。
  2. 一致的结构：所有翻译都遵循相同的问题类别和结构。
  3. 国际化插件：使用Eleventy的I18n插件处理语言。
  4. 语言元数据：每个文件都包含明确的语言代码信息。
  5. 中央注册表：所有翻译都列在一个JSON文件中，便于管理。
  6. RTL支持：兼容阿拉伯语和希伯来语等从右到左书写的语言。
  7. 静态生成：所有页面在构建过程中预渲染。

这种方法为维护大量翻译提供了一个简单而有效的解决方案，无需复杂的 инфраструк结构或数据库。

来源： src/translations/hindi/README.md src/translations/bengali/README.md src/translations/russian/README.md src/_data/translations.json config/eleventy.config.js