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

h5bp/Front-end-Developer-Interview-Questions

菜单

可用语言

相关源文件

本文档描述了前端开发面试问题（Front-end Developer Interview Questions）仓库中的多语言支持系统。它解释了面试问题如何以多种语言提供、翻译文件的结构以及系统如何处理从右到左（RTL）语言。有关这些翻译如何在网站上呈现的信息，请参阅网站架构。

翻译系统概述

前端开发面试问题仓库支持34种不同的语言，使全球开发者都能访问这些面试问题。每种语言都有自己的问题翻译，存储在具有标准化结构的专用目录中。

翻译系统包括：

  1. translations.json 中所有可用语言的中央注册表
  2. 带有 frontmatter 元数据的Markdown格式的单独语言文件
  3. 从右到左（RTL）语言的特殊处理
  4. 与Eleventy静态网站生成器集成以进行渲染

来源

翻译系统架构

来源

支持的语言

该仓库目前支持 translations.json 文件中定义的34种语言：

语言URL 路径
阿拉伯语arabic/
孟加拉语bengali/
保加利亚语bulgarian/
缅甸语burmese/
中文chinese/
繁体中文chinese-traditional/
克罗地亚语croatian/
捷克语czech/
丹麦语danish/
荷兰语dutch/
波斯语farsi/
法语french/
德语german/
希伯来语hebrew/
希腊语greek/
印地语hindi/
匈牙利语hungarian/
印度尼西亚语indonesian/
意大利语italian/
日语japanese/
韩语korean/
拉脱维亚语latvian/
波兰语polish/
葡萄牙语portuguese/
罗马尼亚语romanian/
俄语russian/
塞尔维亚语serbian/
斯洛伐克语slovakian/
斯洛文尼亚语slovenian/
西班牙语spanish/
瑞典语swedish/
土耳其语turkish/
乌克兰语ukrainian/
越南语vietnamese/

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

翻译文件结构

每种语言翻译都遵循标准化的文件结构。所有语言文件的一致性确保了高效的维护和更新。

来源

Frontmatter元数据

每个翻译文件都以 frontmatter 元数据开头，该数据定义了几个关键参数：

对于阿拉伯语等从右到左的语言，还包括一个额外的 rtl: true 参数。

来源

内容结构

在 frontmatter 之后，每个翻译都遵循一致的模式：

  1. 本地语言的标题
  2. 带有问题类别链接的目录
  3. 每个问题类别的部分（通用、HTML、CSS、JS 等）
  4. 翻译成当地语言的实际问题

来源

从右到左（RTL）语言支持

该仓库对阿拉伯语、希伯来语和波斯语等从右到左的语言实施了特殊处理。这确保了这些语言的正确文本方向和布局。

RTL语言实现

来源

RTL支持的关键组件是：

  1. Frontmatter标记：每个RTL语言文件都在frontmatter中包含 rtl: true。

  2. 方向属性：内容被包裹在 <div dir="rtl"> 标签中，以确保正确的文本方向。

  3. 布局集成：当检测到RTL时，默认布局模板会向 body 添加一个"rtl"类。

  4. CSS调整：特殊的CSS规则应用于RTL语言，包括字体族更改。

来源

翻译处理流程

下图展示了翻译文件的处理和渲染方式：

来源

实现细节

语言注册表

所有受支持的语言都在 translations.json 文件中注册，该文件作为中央注册表。

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

页面永久链接结构

每种语言翻译都有一个一致的URL结构：

/translations/{language}/index.html

例如

  • 印地语：/translations/hindi/index.html
  • 阿拉伯语：/translations/arabic/index.html

来源

HTML语言属性

每个翻译的语言代码都用于设置HTML lang 属性。

这确保了浏览器、屏幕阅读器和搜索引擎的正确语言识别。

来源：src/_includes/layouts/default.njk2

翻译示例对比

下表展示了相同内容在不同语言中的呈现方式：

语言问题示例
印地语क्या आपने कल/इस हफ्ते कुछ सीखा?
孟加拉语আপনি গতকাল বা এই সপ্তাহে কি শিখেছেন?
阿拉伯语ماذا تعلمت بالأمس/هذا الأسبوع؟

来源

添加新语言

要向仓库添加新的语言翻译：

  1. 在 src/translations/ 下创建带有语言名称的新目录。
  2. 创建带有适当 frontmatter 元数据的README.md文件。
  3. 将语言条目添加到 translations.json。
  4. 对于RTL语言，包含 rtl: true 参数并将内容包裹在 <div dir="rtl"> 中。

这种可扩展的架构使得该仓库能够不断扩展其语言支持，以触达全球开发者。

来源