从 Glenn Website Design 档案看 Remote In Tech 远程公司目录：frontmatter 字段解析、远程政策标签与 Eleventy 渲染机制

本文以 src/companies/glenn-website-design.md 这份公司档案为解剖样本，完整解读 Remote In Tech（remoteintech.company 的开源源码仓库）中"远程友好科技公司目录"的单条档案是如何构成的：从 YAML frontmatter 元数据到 Markdown 正文各章节，再到 Eleventy 静态站点生成器如何把它渲染成可浏览、可被搜索引擎与 Agent 解析的页面。读完本文，你将掌握目录中每一份公司档案的字段语义、合法取值、渲染链路与招聘信息提取方法，并能在 CONTRIBUTING.md 的规范框架下理解或新增一份同样结构清晰的档案。

档案定位：一家什么样的公司

Glenn Website Design 是一家定制化网页设计公司，档案开头的 Company blurb 明确了其业务形态：

Glenn is a custom web design company that offers full-service web solutions for many types of business profiles including hotels, restaurants, e commerce shopping websites, interactive websites.

即它面向酒店、餐厅、电商购物网站、互动型网站等各类商业主体提供"全服务式"网页解决方案。在 Remote In Tech 目录中，这份档案将该公司标记为 fully-remote（全远程） 且 tiny（微型团队，1–10 人），档案记录的时间点为 2019 年 12 月（团队当时约 5 人并处于增长中）。该档案的 addedAt 与 updatedAt 均为 2020-02-22，说明这是一份较早入库且信息相对稳定的档案。

frontmatter 元数据逐字段解读

公司档案的头部是 YAML frontmatter，它是整个目录系统索引、排序、过滤与渲染的核心数据源。以下逐一解读 glenn-website-design.md 中的每个字段，并与 CONTRIBUTING.md 中给出的合法值表对照。

---
title: "Glenn Website Design"
slug: glenn-website-design
website: https://glennwebsitedesign.com/
careers_url: https://glennwebsitedesign.com/contact/
region: worldwide
remote_policy: fully-remote
company_size: tiny
technologies:
  - javascript
  - ml
  - php
  - sql
addedAt: 2020-02-22
updatedAt: 2020-02-22
---

字段	本档案取值	语义与合法取值
title	Glenn Website Design	公司展示名称，用于页面标题与字母排序
slug	glenn-website-design	URL 片段，必须与文件名一致（即 src/companies/{slug}.md）
website	公司官网	公司主页，渲染为页面主按钮的兜底链接
careers_url	公司联系页	招聘/申请入口，渲染为 "Apply Now" 按钮；目录要求指向公司自有招聘页而非销售页
region	worldwide	招聘地域，合法值：worldwide、americas、europe、americas-europe、asia-pacific、other
remote_policy	fully-remote	远程政策，合法值：fully-remote、remote-first、hybrid、remote-friendly
company_size	tiny	团队规模档位：tiny(1–10)、small(11–50)、medium(51–200)、large(201–1000)、enterprise(1000+)
technologies	javascript、ml、php、sql	技术标签数组，合法值见 labels.js 中的 tech 映射表
addedAt / updatedAt	2020-02-22	入库/更新时间，由维护者管理，贡献者 PR 中不应提交

两个值得注意的细节：

1. slug 与文件名的强约束：CONTRIBUTING.md 明确规定 {slug} 必须与 src/companies/ 下的文件名匹配（如 slug: glenn-website-design → src/companies/glenn-website-design.md）。这套约束由仓库中的 Validate Company Profiles 自动化校验 Action 在 PR 阶段强制检查。

2. 字段取值的枚举约束：region、remote_policy、company_size 都是受控枚举，不是自由文本。这保证了全目录数据一致，使 collections.js 中的 getCompaniesByRegion、getCompaniesByTech 能稳定地将全部约 850 家公司按地域与技术分组，驱动 /browse/ 浏览页。

Markdown 正文章节：必填与可选的结构

除去 frontmatter，档案正文由若干 ## 二级标题组成。CONTRIBUTING.md 规定以下章节为必填：

• ## Company blurb — 公司简介与业务描述（本档案已提供）
• ## Remote status — 公司如何开展远程工作（本档案已提供）
• ## How to apply — 申请链接或指引（本档案已提供）

可选但常见的章节包括 ## Company size、## Region、## Company technologies，本档案全部覆盖，另附 ## Office locations 记录了线下办公点（美国俄克拉荷马州 Tulsa、印度尼西亚万隆 Bandung）。

远程工作信息（Remote status）——求职者最关心的段落

All of our company works remote. We communicate via email, messenger, and online chats

这段描述与 frontmatter 中的 remote_policy: fully-remote 互相印证：全公司远程办公，日常协作依赖 email、messenger 与在线聊天工具。从档案结构上可以看出，Remote In Tech 用**结构化枚举（frontmatter）记录"远程程度"以便检索，用自然语言段落（正文）**补充"远程如何运作"的细节，二者互补。求职者在评估时可以这样组合信息：

• 政策维度：fully-remote → 无固定办公要求，全球招聘；
• 地域维度：region: worldwide → 不限时区与国别，可全球远程应聘；
• 团队维度：tiny + 5 人规模 → 小型团队，远程协作依赖轻量沟通工具而非复杂流程。

技术栈章节的"双轨"记录

档案中技术信息存在两处：frontmatter 的 technologies 数组（javascript、ml、php、sql）与正文 ## Company technologies 段落（WordPress、HTML、JavaScript、PHP、MySQL）。两者并不完全等价：

• frontmatter 的 technologies 是受控枚举标签，供目录按技术分组与筛选，其展示名称统一映射自 labels.js（如 javascript→JavaScript、ml→ML/AI、php→PHP、sql→SQL）；
• 正文段落则是自由文本，可补充框架细节（如 WordPress、MySQL），读者可以直接理解，但不会进入目录的标签索引。

这也提示贡献者：若某技术不在枚举列表中（例如 WordPress），应把它写进正文段落，同时尽量在枚举中选取语义最接近的标签放入 frontmatter，以获得目录内可检索性。

源码链路：一份档案如何变成可浏览页面

1. 元数据描述自动生成（Eleventy Computed Data）

companies.11tydata.js 为所有公司档案提供 eleventyComputed.description：若 frontmatter 未显式声明 description，它会用正则抓取 ## Company blurb 标题后的段落文本，剥离 Markdown 链接语法、星号、反引号，压缩换行与多余空格，并截断到约 155 字符以生成页面 meta description。这意味着本档案的 blurb 会自动成为该页面的搜索引擎摘要，无需人工维护。

2. 页面布局与按钮逻辑（Company 布局模板）

src/companies/companies.json 为目录内所有公司档案指定 layout: company，由 _layouts/company.njk 完成渲染。与本题档案直接相关的渲染逻辑包括：

• 主按钮回退规则：{% set buttonUrl = careers_url or website %} —— 本档案同时提供了 careers_url，因此页面渲染出 "Apply Now →" 主按钮，跳转目标为联系页；若某档案缺少 careers_url，则退化为 "Visit Website" 按钮；
• 地域标签：region: worldwide 被渲染为指向 /browse/worldwide/ 的标签链接，文案取自 labels.region；
• 远程政策标签：remote_policy: fully-remote 被渲染为指向 /browse/fully-remote/ 的标签，文案取自 labels.remotePolicy 中的 "Fully Remote"；
• 技术栈区块：frontmatter 中 technologies 数组的每一项都会渲染为指向 /browse/{tech}/ 的 tag--tech 标签；
• 更新时间戳：updatedAt: 2020-02-22 经 formatDate('MMMM D, YYYY') 过滤器格式化为页面底部 "Last updated" 信息。

3. 结构化数据输出（schema.org）

src/_includes/schemas/Organization.njk 为每个公司页面注入 JSON-LD 结构化数据：@type: Organization，name 取 title，url 取 website，并在存在 careers_url 时将其写入 sameAs 数组。对 Agent 与搜索引擎而言，这意味着本档案的官网与招聘入口会被机器可读地显式标注，是"可被解析引用"的关键实现环节。

4. 目录集合与浏览页数据（Collections）

collections.js 通过 getFilteredByGlob('./src/companies/**/*.md') 收集全部公司档案（带内存缓存以避免重复过滤），并派生多类数据：

• getAllCompanies — 按 title 字母排序的全量列表；
• getFeaturedCompanies — 从精选 slug 列表随机抽取 8 家（配 shuffleArray 洗牌）；
• getRecentCompanies — 按 addedAt 降序取最近新增 12 家；
• getCompaniesByRegion / getCompaniesByTech — 按地域与技术分组，支撑浏览页。

本档案因 region: worldwide、technologies: [javascript, ml, php, sql]，会自动落入全球地域组及 JavaScript、ML/AI、PHP、SQL 四个技术组，成为对应 /browse/ 页面中的可检索条目。

从档案到行动：求职者视角的实用清单

结合本档案与 README.md、CONTRIBUTING.md 中的流程信息，可将一份公司档案转化为可执行的求职与评估动作：

1. 确认远程匹配度：remote_policy: fully-remote + region: worldwide 意味着全球远程职位，无地域限制；
2. 核对团队规模预期：company_size: tiny（1–10 人）且档案显示当时约 5 人，适合偏好小团队、扁平沟通的求职者；
3. 比对技术栈：档案技术标签（JavaScript、PHP、SQL、ML/AI）与正文补充（WordPress、HTML、MySQL）共同勾勒技能要求，应同时查看两处以避免遗漏；
4. 走官方申请入口：点击页面 "Apply Now" 按钮（对应 careers_url）进入公司联系页提交申请，这是目录校验的官方路径（要求指向公司自有页面）；
5. 关注时效性：updatedAt: 2020-02-22 表明信息较旧，应聘前应在公司官网二次确认当前招聘状态——这正体现了"档案记录 + 站点时效核对"的正确使用方式。

小结

一份看似只有十几行的公司档案，在 Remote In Tech 仓库中承载了完整的元数据契约：受控枚举保证可检索性，Markdown 正文承载人类可读细节，而 companies.11tydata.js、_layouts/company.njk、Organization.njk 与 collections.js 四层源码把它渲染成带 SEO 描述、JSON-LD 结构化数据、多维度浏览标签的标准化页面。以 Glenn Website Design 为样本理解这套机制后，无论你是求职者、研究者还是目录贡献者，都能快速读懂目录中任意一份档案，并依照 CONTRIBUTING.md 的模板产出规范的新条目。