MDN 新前端的幕后

Last year, we launched a new frontend for MDN. The most noticeable changes were adjustments to our styles; we simplified and unified the MDN design across all of our pages. In truth, the biggest changes were not reader-visible, but rather in the overhauled code that powers our frontend. This post describes what we've done, the technologies we chose, and why we did it at all.

去年，我们为 MDN 推出了新的前端。最明显的改变是对我们样式的调整；我们简化并统一了 MDN 在所有页面上的设计。事实上，最大的改变并非读者可见，而是支撑我们前端的彻底重构代码。本文描述了我们所做的事情、我们选择的技术，以及我们为什么这么做。

MDN's architecture

MDN 的架构

To fully understand the changes we made to MDN's frontend, I should provide some context on how MDN content is assembled into the website you all know and love. MDN's architecture is probably worthy of its own blog post, but to simplify for the sake of this post, pages are published to the site via these major steps:

要完全理解我们对 MDN 前端的更改，我应该提供一些关于 MDN 内容如何组装成你们熟悉和喜爱的网站背景。MDN 的架构可能值得一篇独立的博客文章，但为了简化起见，本文将页面发布到站点的主要步骤简化为：

The documentation is written and maintained in Markdown, across a couple of git repositories, by our fantastic team of technical writers, partners, and invited experts, alongside our enormous community of contributors and translators.
文档使用 Markdown 编写和维护，分布在几个 git 仓库中，由我们出色的技术作家团队、合作伙伴和特邀专家维护，还有我们庞大的贡献者和翻译者社区。
A build tool ingests these Markdown files, converts them into HTML, and saves them as a set of JSON files with supplemental metadata about each page.
一个构建工具会读取这些 Markdown 文件，将其转换为 HTML，并保存为带有每个页面补充元数据的一组 JSON 文件。
Our frontend traverses these JSON files and compiles fully-featured pages, complete with browser compatibility tables, l10n support, navigation menus, and so on - in a step we name (or perhaps misname) server-side rendering (SSR).
我们的前端会遍历这些 JSON 文件，并编译出功能齐全的页面，包括浏览器兼容性表格、l10n 支持、导航菜单等等——这一步我们称之为（或者或许是误称）server-side rendering (SSR)。
At this point, the resulting HTML, CSS, and JavaScript files are uploaded to cloud buckets and delivered to our readers globally.
此时，生成的 HTML、CSS 和 JavaScript 文件被上传到云存储桶，并全球分发给我们的读者。

Why we rebuilt MDN's frontend

为什么我们重建了 MDN 的前端

Rebuilding...