网站架构

相关源文件

• .gitignore
• package-lock.json
• package.json
• src/_data/site.json
• src/index.njk
• src/questions/html-questions.md
• src/translations/danish/README.md

本文档概述了前端开发人员面试问题网站的结构和生成方式。它涵盖了网站的核心架构，包括静态站点生成过程、内容组织、模板系统和整体请求流程。有关构建和部署过程的具体详细信息，请参阅构建和部署，有关翻译系统的信息，请参阅翻译系统。

概述

前端开发人员面试问题网站是使用 Eleventy (11ty) 构建的，Eleventy 是一种现代静态网站生成器。该架构遵循内容驱动的方法，其中包含面试问题的 markdown 文件通过模板处理，以生成多语言静态网站。

来源：package.json40-48 src/index.njk1-20

核心组件

网站架构由几个核心组件协同工作，以生成最终网站

组件	目的	位置
内容文件	包含面试问题的 Markdown 文件	src/questions/*.md
数据文件	包含网站元数据和配置的 JSON 文件	src/_data/*.json
布局	用于页面结构的 Nunjucks 模板	src/_includes/layouts/*.njk
组件	可重用的 UI 元素	src/_includes/components/*.njk
资源	CSS、JavaScript 和图片	src/assets/*
Eleventy 配置	网站生成配置	config/eleventy.config.js

来源：package.json6-9 src/_data/site.json1-9

静态网站生成过程

该网站使用 Eleventy 将内容文件转换为静态 HTML，优化了性能并简化了托管要求。

来源：package.json6-9 .gitignore1-4

内容处理流程

当构建过程运行时，Eleventy 按以下顺序处理内容：

1. 内容收集：从 src/questions/ 收集 markdown 文件和翻译文件
2. 数据集成：与 src/_data/ 文件中的数据合并
3. Markdown 转换：使用 markdown-it 将 markdown 转换为 HTML
4. 模板应用：应用 Nunjucks 模板创建完整的页面
5. 优化：压缩 HTML、CSS 和 JavaScript
6. 输出生成：将静态文件输出到 _site 目录

来源：package.json40-48 src/questions/html-questions.md1-5

目录结构和内容组织

网站内容以结构化的目录格式组织，将内容、模板和资产分开。

来源：src/questions/html-questions.md1-20 src/translations/danish/README.md1-269

模板系统

网站使用 Nunjucks 作为其模板引擎，允许布局继承、组件重用和条件渲染。

模板层级

来源：src/index.njk1-20 src/questions/html-questions.md1-5 src/translations/danish/README.md1-5

页面生成

每个内容文件（如问题集或翻译）都使用 frontmatter 来定义其元数据和模板。

---
title: HTML Questions
layout: layouts/page.njk
permalink: /questions/html-questions/index.html
---

这会告诉 Eleventy：

• 页面使用的标题
• 要应用的布局模板
• 最终 HTML 文件的输出位置

来源：src/questions/html-questions.md1-5 src/translations/danish/README.md1-5

资产管理

网站架构包括几种处理资产的方法：

1. CSS 处理：使用 Clean CSS 进行压缩
2. JavaScript 压缩：UglifyES 处理脚本优化
3. 静态资产：图片和其他静态文件复制到输出目录

来源：package.json40-48

构建配置

Eleventy 配置定义了网站的构建方式，包括模板引擎设置、文件处理和输出格式。

来源：package.json6-9

请求流程

当用户访问网站时，会发生以下序列：

1. 用户请求一个 URL（例如，/questions/html-questions/）
2. 网络服务器提供预生成的静态 HTML 文件
3. 浏览器加载附加的资产（CSS、JS、图片）
4. 内容显示给用户

由于网站是静态生成的，因此在请求时没有服务器端处理，这提高了性能和安全性。

来源：src/_data/site.json1-9

开发工作流

网站架构的开发工作流程遵循以下步骤：

1. 使用 npm start 进行本地开发（以服务模式运行 Eleventy）
2. 编辑 markdown 文件中的内容
3. 使用 npm run build 进行生产构建
4. 通过 GitHub Pages 部署

来源：package.json5-9

总结

前端开发人员面试问题网站架构旨在实现简洁性、高性能和可维护性。通过利用 Eleventy 作为静态网站生成器，该项目实现了：

1. 内容中心开发：作者可以专注于编写 markdown 格式的问题
2. 多语言支持：翻译可以轻松地在单独的目录中管理
3. 性能优化：静态文件经过预渲染和优化
4. 易于部署：网站可以托管在任何静态文件服务器上

这种架构为项目的成长和演进提供了坚实的基础，同时保持了高性能和用户体验标准。

来源：package.json1-54 src/_data/site.json1-9