The Wirecutter 公司档案解析：remote-jobs 目录中 hybrid 远程政策的数据模型与渲染流程

• 数据集

本篇文章以 src/companies/the-wirecutter.md 这份公司档案为实例，逐字段拆解 remote-jobs 项目（Source for remoteintech.company，一个社区维护的远程友好科技公司目录）中公司条目的数据模型、合法字段值域、元数据自动生成逻辑与页面渲染管线。读完本文，你将掌握如何阅读和编写一份合规的公司档案、理解region与remote_policy等枚举值如何驱动标签页与列表页，以及新增公司时需要遵循的提交规范。

档案概览：从一篇 Markdown 生成一张公司页面

The Wirecutter 的档案位于src/companies/the-wirecutter.md，采用「YAML frontmatter + Markdown 正文」的结构。仓库通过 Eleventy 将src/companies/**/*.md下的每个文件渲染为独立的公司页面，文件名the-wirecutter.md与 frontmatter 中的slug: the-wirecutter保持一致，这是目录条目命名的硬性约定（见 CONTRIBUTING.md 的"Adding a Company"一节）。

该档案的完整 frontmatter 如下：

--- title: "The Wirecutter" slug: the-wirecutter website: https://thewirecutter.com/ careers_url: https://thewirecutter.com/jobs/ region: americas remote_policy: hybrid addedAt: 2017-12-29 updatedAt: 2018-08-12 ---

其中addedAt与updatedAt由维护者管理，提交 PR 时不应包含（CONTRIBUTING.md 明确说明"don't include them in your PR"）。其余字段分别驱动着页面的标题、跳转按钮、地域标签与远程政策标签，详见下文渲染章节。

正文五个小节的内容语义

frontmatter 之后是 Markdown 正文，必须包含三个必需的##二级标题，The Wirecutter 档案齐全地给出了全部推荐小节：

• ## Company blurb——公司的核心定位描述。本档案用两句话概括了 Wirecutter 的业务（"a list of the best gear and gadgets"）与关键事实：2011 年 9 月创立，2016 年 10 月被纽约时报公司收购。这段文字不仅是页面内容，还会被自动提取为搜索引擎 meta description（见下文"元数据自动生成"）。
• ## Remote status——远程工作现状。本档案写明部分员工在纽约办公室全职工作，部分员工在美国其他地区远程办公，这是判定remote_policy: hybrid的正文依据。
• ## Region——招聘地域，值为 "United States."，对应 frontmatter 中的region: americas。
• ## Office locations——办公室地点，值为 "New York City"。
• ## How to apply——申请入口，直接给出 careers 链接https://thewirecutter.com/jobs/。

这五个小节与 CONTRIBUTING.md 要求的模板完全对应：## Company blurb、## Remote status、## How to apply为必填，## Region等为常用可选小节。

枚举字段与标签体系：region、remote_policy 的合法值

档案中的region: americas与remote_policy: hybrid不是自由文本，而是受控枚举。项目在 src/_data/labels.js 中集中定义了这些标签映射（该文件是"single source of truth"）：

technologies同样是枚举列表（javascript、python、go等 25 个取值，完整列表见 CONTRIBUTING.md 的 Valid Field Values 表格）。因此本档案中的region: americas会渲染为 "Americas" 标签，remote_policy: hybrid会渲染为 "Hybrid" 标签。

标签映射同时供两处使用：labels.js通过src/_data/companyHelpers.js以regionLabels、remotePolicyLabels等命名导出给 JS 侧的collections.js；而在 Nunjucks 模板中则通过全局数据级联以labels.region[region]、labels.remotePolicy[remote_policy]的形式直接访问（见 src/_layouts/company.njk）。

渲染管线：frontmatter 如何变成一张公司页

公司页面使用company布局，由 src/companies/companies.json 中的"layout": "company"统一指定。核心渲染模板是 src/_layouts/company.njk，其关键渲染逻辑为：

• 申请按钮：优先使用careers_url，没有时才回退到website；有careers_url时按钮文案为 "Apply Now"，否则为 "Visit Website"（{% set buttonUrl = careers_url or website %}，见 company.njk）。
• 标签链接：region与remote_policy分别渲染为指向/browse/{value}/的标签链接，例如本档案会生成/browse/americas/与/browse/hybrid/两个可点击标签。
• Tech Stack 区块：仅当档案声明了technologies数组时才渲染（The Wirecutter 档案未声明，因此不显示该区块）。
• 更新时间：updatedAt经formatDate('MMMM D, YYYY')过滤器格式化为 "Last updated: August 12, 2018"。

页面还带schema: Organization结构化数据与data-pagefind-body属性，后者使正文内容进入 Pagefind 全文索引，支撑列表页的站内搜索。

元数据自动生成：blurb 变成 meta description

src/companies/companies.11tydata.js 为所有公司页面提供了eleventyComputed.description计算属性：若 frontmatter 未显式设置description，它会用正则##\s*Company\s*blurb\s*\n+([\s\S]*?)(?=\n##|$)从原始 Markdown 中截取 "Company blurb" 小节后的文字，清洗掉 Markdown 语法（去链接、去 `*_`` 标记、合并空白），并截断到约 155 字符——尽量在句号边界处截断，其次在空格处加省略号。这意味着本文档的 blurb 内容会自动成为该页面在搜索引擎与社交分享中的描述摘要，这是该档案"内容质量直接影响 SEO"的底层机制。

集合与列表页：档案如何进入目录视图

src/_config/collections.js 定义了公司数据的各类集合：

• getAllCompanies：通过collection.getFilteredByGlob('./src/companies/**/*.md')抓取全部公司档案并按标题字母序排序（getCompanies做了 memoize 缓存以避免约 850 条数据被重复过滤，该数量来自源码注释，随仓库演进可能变化）。
• getCompaniesByRegion/getCompaniesByTech：按region与technologies字段分组，生成/browse/americas/、/browse/hybrid/等浏览页的数据源。
• getRecentCompanies：按 frontmatter 中的addedAt倒序取最近 12 家，这是"Recently added"板块的数据来源。

在 src/pages/companies.njk 列表页中，每条档案通过partials/company-card.njk的companyCard宏渲染为卡片，卡片显示公司名、地域标签，并用careers_url or website作为外链地址。列表页还内置了 Pagefind 搜索与基于data-region属性的客户端地域过滤，region枚举值同时是前端过滤与后端分组的公共键。

新增与维护：提交一份合规档案的流程

参照 CONTRIBUTING.md，如果你要提交类似 The Wirecutter 这样的新公司档案，需要：

1. 在src/companies/{slug}.md创建文件，{slug}必须与 frontmatter 的slug一致；
2. 按模板填写 frontmatter 与必填小节（Company blurb/Remote status/How to apply）；
3. 本地运行npm run build（即clean && build:11ty && pagefind，见 package.json 的 scripts）验证构建通过；
4. 提交 PR，由Validate Company ProfilesGitHub Action 自动校验；若被指出 "older file format"，需改为上述格式。

值得注意的是 The Wirecutter 档案被判定为hybrid（混合办公）而非fully-remote，这与目录收录标准一致——项目收录的是"半远程至全远程友好"的科技公司（semi to fully remote-friendly），并非仅限全远程。这也是阅读本档案时最值得留意的语义：remote_policy枚举值应如实反映公司实际办公形态，正文Remote status小节则是该判断的佐证材料。

• 数据集