remoteintech.company 公司档案全解析：以 Honeycomb（honeycomb.md）为例，读懂远程友好公司目录的数据结构、标签体系与渲染链路

• 数据集

remoteintech.company 是一个由社区维护的远程友好科技公司目录，其站点源码正是当前仓库remote-jobs。目录中每一家公司的档案都以一个独立的 Markdown 文件存放在 src/companies/ 下，honeycomb.md 就是其中之一。本文以 Honeycomb 这份档案为完整样例，逐字段拆解公司档案的前置元数据（frontmatter）与正文小节，并结合 companies.11tydata.js、company.njk、labels.js、collections.js 等源码，讲清楚一条公司记录如何从 Markdown 文件被渲染成可浏览、可检索、可被搜索引擎理解的公司主页，读完你就能自己读懂甚至新增任意一条档案。

一、档案文档的整体结构：一份 Markdown 就承载一整条公司记录

打开 honeycomb.md，可以看到它由两大部分组成：

1. 前置元数据（frontmatter）：位于文件开头两个---之间的 YAML 键值对，是整条记录的"结构化骨架"，用于分类、筛选、排序与元信息展示；
2. 正文小节（H2 标题段落）：以##开头的七个标准小节，即Company blurb、Company size、Remote status、Company technologies、Region、Office locations、How to apply，是面向读者的自然语言内容。

全站约 850 家公司档案（源码注释见 collections.js）都遵循同一套模板，因此只要吃透这一份文件，就等于掌握了整个目录的数据组织方式。目录对每个公司页面只做一层包装（见 companies.json 中的"layout": "company"），正文内容原样注入 company.njk 布局，其余全部由 frontmatter 驱动。

二、Frontmatter 字段详解：一条档案的"结构化骨架"

honeycomb.md 的 frontmatter 完整内容如下（与仓库文件逐字一致）：

--- title: "Honeycomb" slug: honeycomb website: https://honeycomb.tv/ region: europe remote_policy: remote-first company_size: small technologies: - cloud - devops - nosql - ruby - sql addedAt: 2017-04-07 updatedAt: 2018-04-16 ---

每个字段的含义与在本项目中的实际作用如下：

注意两点：一是所有取值都必须在 labels.js 等"单一事实来源"中注册，否则标签会直接回退显示原始键名（例如 companyHelpers.js 中的|| size || 'Unknown'兜底逻辑）；二是addedAt/updatedAt由 Eleventy 直接读取 frontmatter 参与计算，无需额外维护（companies.11tydata.js 的注释明确说明这一点）。

三、正文七个小节逐一拆解

frontmatter 之外的正文是档案的"血肉"，七个小节的内容如下（均继承自原文档）：

Company blurb——一句话定位公司：

Supercharged video advertising delivery. Faster delivery and better collaboration for brands, broadcasters and everyone in between.

这段文字有双重用途：它不只是给读者看的简介，更是整个页面 meta description 的自动来源。详见下文第四节。

Company size——约 50 人规模，与 frontmatter 中company_size: small（11-50 人）互相印证。

Remote status——远程办公实况：公司是remote-first（远程优先）组织，员工分布在整个欧洲；伦敦附近的团队成员每周到办公室一次进行同步，其余成员通过 Google Hangouts 或 Screehero（原文拼写如此）远程加入。

Company technologies——技术栈描述：主要使用Ruby on Rails，未来的新服务则采用无 Rails 的纯 Ruby；同时强调"相信实验、选择最适合任务的工具"，为其他语言留出空间。此外明确列出团队日常依赖的工具链：Ansible、AWS/Azure、Git、Postgres、Redis、Github、Slack、Trello。

Region——Europe（与 frontmatterregion: europe一致）。

Office locations——两个办公室：

• London, UK
• Frankfurt, DE

How to apply——应聘渠道：由工程师 Louis 直接对接，通过邮件louis.pilfold@honeycomb.tv联系（原文档为mailto:链接）。

这份档案描述的对象是 honeycomb.tv——一家面向品牌与广播机构的视频广告投放技术公司（注意与同名可观测性产品区分，勿混淆）。七个小节与 frontmatter 字段互为印证：正文说欧洲、说 remote-first、说约 50 人，与元数据中的region、remote_policy、company_size完全对齐，这正是目录数据质量的保证。

四、从 Markdown 档案到页面：元数据自动生成与渲染链路

一份档案要变成完整页面，经历两条关键链路。

链路一：meta description 自动生成。companies.11tydata.js 是一个eleventyComputed计算属性：若档案未手动设置description，它就用正则##\s*Company\s*blurb\s*\n+([\s\S]*?)(?=\n##|$)抓取Company blurb小节之后的文本，清洗掉 Markdown 链接语法、星号、下划线、反引号，把换行与连续空格压缩为单个空格，再截断到约 155 字符——优先在句号处截断，否则在最后一个空格处截断并补...。这意味着 Honeycomb 页面的 meta description 会直接取自其 blurb 文本，无需人工额外维护，同时天然保证摘要与正文一致。

链路二：页面渲染。company.njk 是公司档案的专属布局，它做了这些事：

• 用{% set buttonUrl = careers_url or website %}决定主按钮：有careers_url显示 "Apply Now"，否则显示 "Visit Website"（company.njk）；
• region与remote_policy渲染为可点击的标签，分别指向/browse/{{ region }}/与/browse/{{ remote_policy }}/（company.njk）；
• technologies数组逐项渲染为 Tech Stack 标签，指向/browse/{{ tech }}/（company.njk）；
• updatedAt经formatDate('MMMM D, YYYY')过滤器显示为 "Last updated: April 16, 2018" 格式（company.njk）。

此外，公司页的<head>中还会注入 Organization.njk 生成的 JSON-LD（@type: "Organization"，含name与url），配合 meta description，让搜索引擎与 LLM 能结构化地理解这条公司记录。

五、标签体系与浏览页：档案如何进入全站索引

frontmatter 里的region、remote_policy、technologies不只是页面装饰，它们直接驱动全站浏览体系：

• 按地区分组：getCompaniesByRegion遍历全部档案，把company.data.region归入regionLabels预初始化的分组中（collections.js）。Honeycomb 因而出现在Europe浏览页中；
• 按技术分组：getCompaniesByTech对technologies数组逐项归类（collections.js），Honeycomb 会同时出现在 Cloud、DevOps、NoSQL、Ruby、SQL 五个技术浏览页；
• 标签页元数据：getCompanyTags从 Eleventy 集合而非手工文件 IO 派生全部标签，为每个标签统计公司数量并生成含count、companies的元数据（collections.js），标签显示名统一取自 labels.js；
• 排序与收录：getAllCompanies按标题字母序排列（collections.js），getRecentCompanies按addedAt倒序取最近 12 家（collections.js）。

也就是说，编辑只需在 frontmatter 里写好三个枚举字段，这份档案就会自动进入地区、政策、技术等所有相关浏览页，无需任何手工维护列表。

六、如何新增或更新一条公司档案

按照 README.md 与 CONTRIBUTING.md 的说明，贡献一条公司档案的流程是：

1. 在src/companies/下创建以 slug 命名的{slug}.md文件（例如honeycomb.md）；
2. 按本文拆解的模板填写 frontmatter（title、slug、website、region、remote_policy、company_size、technologies、addedAt、updatedAt）与七个正文小节；
3. 本地验证并构建：

npm install # 安装依赖 npm run start # 开发服务器，支持热重载 npm run build # 生产构建

构建需要 Node.js 22+；npm run build会经由 Eleventy 走完上述渲染链路，把档案生成到站点输出目录。提交 PR 后，校验机器人会自动检查 frontmatter 字段是否合法、必填小节是否齐全，并以评论形式反馈需要修复的问题。

新增、更新 Honeycomb 这类档案时，只需保证 frontmatter 取值落在 labels.js 定义的合法集内、正文小节齐全且与元数据一致，页面、meta 描述、结构化数据与浏览页索引就会全部自动联动。

七、小结

一份 honeycomb.md 看似只有五十来行，却是整个 remoteintech.company 目录的最小完整单元：frontmatter 提供结构化分类（地区、远程政策、规模、技术栈、时间戳），正文提供人读的内容（简介、远程实况、技术栈、办公地点、应聘方式），companies.11tydata.js、company.njk、labels.js、collections.js 则分别负责自动摘要、页面渲染、标签命名与全站索引。看懂这一份档案，就能看懂整个远程友好公司目录的运作方式，也能按同样的规范快速为目录新增高质量的公司条目。

• 数据集