• 数据集

remoteintech/remote-jobs（Remote In Tech）是一个社区维护的远程友好型科技公司目录，它以 Markdown 公司档案文件为数据源，经 Eleventy 静态站点生成器渲染为可浏览、可检索的公司页面。本文以 Infinite Red 档案 为完整实例，拆解一份公司档案的 frontmatter 字段与正文章节的语义、合法取值与底层处理逻辑，并结合 labels.js、collections.js、company.njk 等源码说明这些字段如何被解析、归类、渲染与索引。读完本文，你将掌握该仓库公司档案的完整数据模型、如何解读任意一份.md档案，以及如何按规范为目录新增或修正公司条目。

档案文件概览：一份公司档案长什么样

在src/companies/目录下，每一家公司对应一个<slug>.md文件，slug 必须与 frontmatter 中的slug字段一致。Infinite Red 的档案文件位于 src/companies/infinite-red.md，其结构分为两部分：

1. YAML frontmatter（元数据区）：由---包裹，存放结构化字段，供站点程序化消费；
2. Markdown 正文：以##二级标题组织的人类可读章节，包括Company blurb、Company size、Remote status、Region、Company technologies、Office locations、How to apply。

这种"结构化元数据 + 自由正文"的双层设计，是理解整个仓库的关键：frontmatter 决定公司如何被排序、筛选、打标签和生成 meta 描述，正文则决定页面上展示给访客的具体内容。

Frontmatter 字段逐项拆解：语义与合法取值

以 Infinite Red 档案的 frontmatter 为例：

--- title: "Infinite Red" slug: infinite-red website: https://infinite.red region: americas remote_policy: fully-remote company_size: small technologies: - dotnet - elixir - javascript - ml - mobile - ruby addedAt: 2019-06-11 updatedAt: 2019-06-11 ---

各字段的含义与约束如下（合法值以 labels.js 为单一事实来源）：

需要特别注意的是technologies字段与正文Company technologies章节的区别：前者必须是 labels.js 中定义的标准标签（javascript、dotnet、elixir、ml、mobile、ruby等），用于被 collections.js 的getCompaniesByTech归类；而正文中的技术列表是自由文本，供人类阅读（Infinite Red 正文还列出了 Rails、Phoenix、React、React Native、Web Assembly、C# 等未进入标准标签体系的更细粒度技术）。

正文章节解读：七段式公司介绍模板

Infinite Red 档案正文完整覆盖了仓库约定的必要章节：

• Company blurb（公司简介，必填）：一行概括——"We're an app design and development team for mobile and web"。这段文本不只是展示用，还会被自动提取为页面 meta description（见下节）。
• Company size（公司规模）：30ish，与 frontmatter 的small（11-50 人）区间标签相互印证——frontmatter 提供可枚举区间用于筛选，正文提供精确描述。
• Remote status（远程政策说明，必填）：明确宣称100% Remote，并给出公司关于远程实践的博客订阅入口，佐证 frontmatter 中remote_policy: fully-remote的判定依据。
• Region（地区）：说明面向 "US and Canada freelancers and employees"，与region: americas对应；同时明确表达"不接受外包分包（NO SOLICITING），但欢迎双向合作"的边界立场。
• Company technologies（技术栈）：列出 JavaScript、Rails、Elixir、Phoenix、React、React Native、ML、Web Assembly、C# 九项。
• Office locations（办公地点）：100% Remote，重申无实体办公室。
• How to apply（申请方式，必填）：通过社区 Slack（community.infinite.red）联系 CEO。

按照 CONTRIBUTING.md 的约定，Company blurb、Remote status、How to apply是必要章节，其余为常用可选章节——Infinite Red 档案是模板的完整示范。

从 Markdown 到页面：渲染管线中的三个关键环节

1. 自动生成 meta description（companies.11tydata.js）

src/companies/companies.11tydata.js 定义了公司页面的eleventyComputed数据，其中description逻辑会：

1. 若 frontmatter 未显式设置description，则用正则/##\s*Company\s*blurb\s*\n+([\s\S]*?)(?=\n##|$)/i从原始 Markdown 中截取## Company blurb标题后的段落；
2. 剥离 Markdown 链接语法text、*、_、`等标记，将换行与多余空格压缩为单个空格；
3. 截断至 155 字符左右：优先在句号处断句，否则在空格处断并追加...。

对 Infinite Red 而言，其 blurb 很短（33 字符），因此整句 "We're an app design and development team for mobile and web" 会原样成为该页面的 meta description。这意味着## Company blurb章节的文案质量直接影响搜索引擎结果页（SERP）的摘要，属于档案中"兼具人读与机读"的关键字段。

2. 页面骨架与标签渲染（company.njk 与 companies.json）

src/companies/companies.json 仅声明"layout": "company"，使所有公司档案统一套用 src/_layouts/company.njk 布局。该布局将 frontmatter 字段映射为页面 UI：

• 存在careers_url时按钮文案为 "Apply Now"，否则为 "Visit Website"（链接指向website），并带rel="noopener noreferrer"与data-track-outbound外链追踪属性；
• region渲染为地区标签，指向/browse/<region>/，标签文案取自 labels.js 的region映射（americas→ "Americas"）；
• remote_policy渲染为政策标签，指向/browse/<remote_policy>/（fully-remote→ "Fully Remote"）；
• technologies非空时输出## Tech Stack区块，每个标签链接到/browse/<tech>/，文案取自labels.tech（如dotnet→ ".NET"、ml→ "ML/AI"）；
• 页脚显示Last updated: {{ updatedAt | formatDate('MMMM D, YYYY') }}，因此updatedAt字段驱动页面上"最后更新"时间的呈现。

同时，src/_includes/schemas/Organization.njk 会基于title、website、careers_url输出 schema.org 的OrganizationJSON-LD 结构化数据，帮助搜索引擎理解公司实体。对 Infinite Red 而言，即生成name: "Infinite Red"、url: "https://infinite.red"的机构标记。

3. 集合归类与浏览页检索（collections.js 与 companies.njk）

src/_config/collections.js 从./src/companies/**/*.md一次性加载全部公司档案（并带缓存），再派生出多种视图：

• getAllCompanies：按title的 localeCompare 字典序排序，供"All Companies"列表使用；
• getCompaniesByRegion：按region字段将公司分组（Infinite Red 落在americas组）；
• getCompaniesByTech：遍历每家公司的technologies数组进行归类（Infinite Red 会同时出现在 dotnet、elixir、javascript、ml、mobile、ruby 六个技术分组中）；
• getCompanyTags：汇总三类标签（technology/region/remote-policy）并附带每组的公司明细与数量；
• getRecentCompanies：按addedAt降序取最近 12 家，用于首页"最近收录"模块——addedAt缺失的公司不会出现在该列表。

在 src/pages/companies.njk 的浏览页中，data-region="{{ company.data.region | default('other') }}"把region写进 DOM 属性，供前端按地区下拉筛选；同时集成 Pagefind 对页面全文做静态搜索。可以看到，region与technologies两个字段共同构成了目录最核心的两条浏览维度。

依样画葫芦：如何为目录新增一份档案

按照 CONTRIBUTING.md 的流程，新增公司只需四步：在src/companies/创建<slug>.md→ 填写 frontmatter 与正文 → 运行npm run build验证构建 → 提交 PR。其中需要遵守的规则包括：

• frontmatter 采用 CONTRIBUTING.md 提供的模板，slug与文件名严格一致；
• 目录只收录"半远程到全远程、且直接雇佣员工"的科技公司，careers_url必须指向公司自有招聘页而非服务销售页；
• addedAt/updatedAt由维护者管理，贡献者不要自行添加；
• PR 会自动触发 "Validate Company Profiles" 工作流校验，不合规条目会被机器人拒绝合并。

Infinite Red 档案（2019-06-11 收录）正是这套规范下的完整产物：frontmatter 字段全部落在合法取值内，七个正文章节齐全，远程政策、地区、规模、技术栈均与正文描述相互印证。

总结：一份档案 = 结构化数据 + 可读叙事

通过 Infinite Red 这条实例可以清晰地看到 remoteintech/remote-jobs 的档案设计哲学：frontmatter 是"机器的接口"，承载可枚举、可归类、可排序的规范字段（region、remote_policy、company_size、technologies），经由 labels.js 的标签映射、collections.js 的集合派生和 company.njk 的布局渲染，自动生成带标签、带结构化数据、可被 Pagefind 检索的公司页面；正文则是"人的接口"，用 Company blurb、Remote status、How to apply 等章节承载自由叙述，其中 blurb 还会被 companies.11tydata.js 自动加工为搜索引擎摘要。理解这套双层模型后，无论是解读目录中任意一家公司（如 Infinite Red 的全远程、美洲地区、小型团队、跨多技术栈画像），还是按 CONTRIBUTING.md 提交新公司条目，都能做到准确、规范、一次通过。

• 数据集