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

h5bp/前端开发者面试问题

菜单

模板与组件

相关源文件

本文档描述了前端开发者面试问题网站中使用的模板和组件架构。它涵盖了模板、组件和样式之间的结构、组织和关系，旨在创建一个统一且易于维护的网站。有关使用 Eleventy 进行静态网站生成的更多信息，请参阅Eleventy 静态网站生成。

模板和组件概述

本网站采用了基于 Nunjucks 模板（.njk 文件）和有组织 CSS 的组件化架构。这种模块化设计实现了关注点分离，并允许在整个网站中重用组件。

模板架构图

来源：src/_includes/layouts/default.njk src/_includes/components/navigation.njk src/_includes/components/footer.njk

主布局模板

默认布局模板是网站所有页面的基础。它定义了 HTML 结构，包含必要的元标签，并集成了组件和样式。

默认布局结构

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

默认布局模板（src/_includes/layouts/default.njk）实现了多项重要功能：

  1. 语言支持：根据当前页面或翻译上下文设置文档语言
  2. 元信息：包含一套全面的元标签，用于 SEO 和社交分享
  3. CSS 集成：内联并最小化 CSS 文件以提高性能
  4. RTL 支持：当使用从右到左语言时，向 body 添加 RTL 类
  5. 无障碍性：包含一个跳过链接，用于键盘导航
  6. 组件集成：集成了导航和页脚组件
  7. 内容块：定义了用于页面特定内容的块（pageTop 和 main）

组件系统

本网站使用可重用组件来保持一致性并简化维护。这些组件以 Nunjucks 模板的形式实现，位于 src/_includes/components/ 目录中。

导航组件（src/_includes/components/navigation.njk）创建了网站的主导航菜单，其中包括：

  1. 主页链接：指向首页，带有一个星形表情符号
  2. 翻译链接：提供对可用翻译的访问，带有一个地球表情符号
  3. 问题下拉菜单：列出所有问题类别，具有响应式行为
  4. 当前页面指示器：视觉上突出显示当前活动页面

该组件使用 JavaScript 处理移动设备上的下拉行为，在较小的屏幕上，菜单会折叠成一个切换按钮。

页脚组件（src/_includes/components/footer.njk）提供了：

  1. 版权信息：使用 helpers.currentYear() 函数动态显示年份范围
  2. 贡献者链接：指向贡献者页面的链接
  3. 关于链接：了解更多项目信息的链接

CSS 组织

CSS 以模块化的方式组织，针对网站的不同方面有特定的文件。

CSS 结构图

来源：src/_includes/layouts/default.njk43-51 src/_includes/assets/css/variables.css src/_includes/assets/css/content.css src/_includes/assets/css/header.css src/_includes/assets/css/navigation.css

CSS 变量

src/_includes/assets/css/variables.css文件（src/_includes/assets/css/variables.css）通过 CSS 自定义属性（变量）建立了一个集中式主题系统，用于：

  1. 排版：标题、正文和代码的字体族
  2. 颜色：主色、辅色和辅助色
  3. 渐变：用于视觉元素的线性渐变
  4. 间距和尺寸：边框半径、阴影和过渡持续时间
  5. RTL 支持：为从右到左语言设计的特殊字体族变量

变量定义的示例

组件特定 CSS

每个组件都有专门的 CSS 文件，以保持关注点分离：

  1. 页眉样式（src/_includes/assets/css/header.css）：网站页眉的样式，包括响应式排版
  2. 导航样式（src/_includes/assets/css/navigation.css）：导航组件的样式，包括下拉行为
  3. 内容样式（src/_includes/assets/css/content.css）：内容元素、列表、排版的一般样式
  4. 页脚样式：页脚组件的样式

国际化和 RTL 支持

该模板系统包含了对多种语言的强大支持，包括从右到左（RTL）的语言，如阿拉伯语、希伯来语和波斯语。

RTL 实现图

来源：src/_includes/layouts/default.njk54 src/_includes/assets/css/variables.css18-20 src/_includes/assets/css/content.css61-64 src/_includes/assets/css/header.css34-36

RTL 支持包括：

  1. 方向标志：RTL 语言的页面在其前置数据中设置 rtl: true
  2. Body 类：模板将 rtl 类添加到 body 元素
  3. CSS 变量：为 RTL 上下文定义了特殊的 CSS 变量
  4. 文本对齐：应用了 RTL 特定的文本对齐规则
  5. 布局调整：调整了边距、内边距和其他方向性属性

CSS 中 RTL 调整的示例

模板渲染过程

模板和组件在构建时由 Eleventy 处理，将模板逻辑与数据合并以生成静态 HTML 页面。

模板处理流程

来源：src/_includes/layouts/default.njk43-52 src/_includes/layouts/default.njk65-66 src/_data/helpers.js

模板渲染过程包括：

  1. 数据收集：收集全站数据、页面特定数据和组件数据
  2. 模板编译：使用收集到的数据处理 Nunjucks 模板
  3. 组件集成：将组件包含到其适当位置
  4. 资产处理：对 CSS 和 JavaScript 进行最小化和内联以提高性能
  5. HTML 生成：生成集成了所有组件、样式和脚本的最终 HTML 输出

helpers.js 文件（src/_data/helpers.js）提供了可在模板中使用的实用函数，例如用于页脚显示当前年份的 currentYear()。

翻译中的组件使用

模板和组件系统支持超过 30 种翻译，每种翻译都保持一致的结构，同时适应特定语言的要求。

语言RTL 支持文件路径特殊注意事项
阿拉伯语是translations/arabic/README.md自定义字体族
希伯来语是translations/hebrew/README.md自定义字体族
波斯语是translations/farsi/README.md自定义字体族
其他否translations/[lang]/README.md标准渲染

来源：src/translations/arabic/README.md1-7 src/translations/hebrew/README.md1-7 src/translations/farsi/README.md1-7

每个翻译文件都包含指定以下内容的前置数据：

此元数据确保在页面渲染时应用正确的布局、方向和语言属性。

结论

前端开发者面试问题项目中的模板和组件系统为创建多语言、可访问且易于维护的网站奠定了坚实基础。采用独立组件和 CSS 文件的模块化结构，实现了关注点的清晰分离，并简化了更新。对国际化的支持，特别是对 RTL 语言的支持，体现了对全球可访问性的承诺。