企业官网建设流程全解析

• 数据集

本篇技术指南以 remoteintech.company（Remote In Tech）开源仓库中的公司档案src/companies/nettl-edinburgh.md为对象，完整解析该公司档案的 frontmatter 字段、正文章节结构、字段合法取值，以及这些数据在 Eleventy 构建管线中如何被消费与渲染。读者读完可掌握"如何在 Remote In Tech 目录中新增/维护一家远程友好科技公司档案"的完整套路，并理解companies集合、标签系统与公司页布局的底层工作原理。

一、档案概览：一份标准的远程友好公司条目长什么样

src/companies/nettl-edinburgh.md是 Remote In Tech 目录中一份典型的公司档案。该仓库维护着数百份类似的 Markdown 档案（全部位于 src/companies/ 目录），每份档案由两部分组成：YAML frontmatter（结构化元数据）与Markdown 正文（面向读者的叙述内容）。

Nettl Edinburgh 档案的 frontmatter 如下：

--- title: "Nettl Edinburgh" slug: nettl-edinburgh website: https://www.webdesignedinburgh.com region: worldwide remote_policy: fully-remote company_size: tiny technologies: - infrastructure - linux - php - sql addedAt: 2017-05-23 updatedAt: 2022-10-03 ---

这份元数据揭示了该公司的几个关键事实：

• slug: nettl-edinburgh：决定了档案文件名必须为src/companies/nettl-edinburgh.md，这是仓库的硬性约定（见 CONTRIBUTING.md：{slug}必须与 frontmatter 中的slug值一致）。
• region: worldwide：表示该公司的远程岗位面向全球招聘，不限地域。
• remote_policy: fully-remote：属于"完全远程"政策，是目录中最严格的远程等级。
• company_size: tiny：对应labels.js中的定义，即 1-10 人规模。
• technologies：标注了infrastructure、linux、php、sql四项技术标签。

正文部分则由## Company blurb、## Company size、## Remote status、## Region、## Company technologies、## Office locations、## How to apply七个章节组成，其中前三个章节（blurb、Remote status、How to apply）是仓库强制要求的必填章节，其余为可选章节——这一点在 CONTRIBUTING.md 的 "Required Sections" 一节有明确规定。

二、frontmatter 字段详解与合法取值

根据 CONTRIBUTING.md 中的 "Valid Field Values" 表格，以及 src/_data/labels.js 中维护的标签单一事实源，各字段的合法取值如下：

需要特别指出两点：

1. technologies字段的取值集合在持续扩展。Nettl Edinburgh 档案使用的infrastructure、linux标签目前并未出现在 CONTRIBUTING.md 的列举清单中，但 src/_data/labels.js 的注释明确指出它是"单一事实源（single source of truth）"，被 JS 侧（companyHelpers.js）和 Nunjucks 模板侧（labels.*）共同引用。从源码结构看，技术标签集合是开放式的，只要标签系统能消费即可，但未被 labels 收录的标签会以原始 slug 形式直接展示在页面上（labels.tech[tech] or tech的回退逻辑）。

2. addedAt与updatedAt由维护者管理。CONTRIBUTING.md 明确要求贡献者不要在 PR 中包含这两个日期字段——Nettl Edinburgh 档案中addedAt: 2017-05-23、updatedAt: 2022-10-03即由维护者维护，它们会被站点用于展示"最后更新时间"以及"最近新增公司"等排序逻辑。

三、正文章节结构：必填项与可选项

Nettl Edinburgh 档案完整覆盖了目录要求的正文结构，是学习公司档案写作规范的理想范本：

必填章节

• ## Company blurb：公司简介，用 2-3 句话说明公司业务。Nettl Edinburgh 的 blurb 描述了其"位于苏格兰爱丁堡市中心的网站设计代理公司 + 曼彻斯特 Nettl HQ 技术团队"的双地结构，以及从小型单页站到大型电商站的业务范围。
• ## Remote status：说明公司如何开展远程工作。该档案指出其员工分布于曼彻斯特（英格兰）、莫斯科（俄罗斯）、波士顿（美国）三地。
• ## How to apply：应聘方式。该档案给出了邮箱hello@nettledinburgh.com并附官网链接。

可选但常用的章节

• ## Company size：约 10 名员工，与 frontmatter 中company_size: tiny（1-10 人）互相印证。
• ## Region：Worldwide，员工从美洲到欧洲均有分布。
• ## Company technologies：WordPress、Linux、Apache、PHP、MySQL。
• ## Office locations：苏格兰爱丁堡、格拉斯哥格林诺克两个线下办公点。

这些章节中的信息并非孤立存在：## Region、## Company technologies等章节内容与 frontmatter 字段存在语义对应关系（正文是面向读者的自然语言叙述，frontmatter 是面向机器的结构化数据）。

四、数据如何被消费：集合、标签与渲染管线

公司档案并不直接以原始 Markdown 呈现，而是经过 Eleventy 的集合系统、标签系统和布局模板三层加工。以下代码证据来自仓库源码，可完整还原一份档案的"生命周期"。

4.1 集合构建：companies集合

src/_config/collections.js 通过getFilteredByGlob('./src/companies/**/*.md')抓取全部公司档案（源码注释提到约 850 家，并使用缓存避免重复过滤），进而派生出多个集合：

• getAllCompanies：按标题字母序排序，供/companies/列表页使用。
• getFeaturedCompanies：从 src/_data/companyHelpers.js 中的featuredCompanySlugs精选名单（automattic、stripe、netlify、github 等 8 家）随机洗牌后取 8 家展示在首页。
• getRecentCompanies：依据 frontmatter 中的addedAt字段降序排序，取最近 12 家。
• getCompaniesByRegion/getCompaniesByTech：分别按region与technologies字段分组。

以 Nettl Edinburgh 为例，其region: worldwide会使其进入worldwide分组，technologies数组中的每一项都会被getCompaniesByTech挂到对应技术标签下。这些分组结果正是站内/browse/{region}/、/browse/{tech}/浏览页面的数据来源。

4.2 标签体系：labels.js与companyHelpers.js

src/_data/labels.js 定义了 region、remotePolicy、companySize、tech 四组标签的展示文案。而 src/_data/companyHelpers.js 将这些标签重新导出并提供了getRegionLabel、getRemotePolicyLabel、getCompanySizeLabel、getTechLabel四个取值函数，其回退逻辑为labels[slug] || slug || 默认值——即未被收录的取值会原样展示或回退到默认文案。

例如remote_policy: fully-remote会通过remotePolicyLabels['fully-remote']渲染为 "Fully Remote"；若未来出现新的标签值而 labels 未同步更新，则会直接显示原始值，这也解释了为何 CONTRIBUTING.md 要求region、remote_policy、company_size必须使用受限枚举值。

4.3 页面渲染：company.njk布局

src/_layouts/company.njk 是公司档案的专属布局（frontmatter 中layout: company由 src/companies/companies.json 统一注入）。该模板负责：

• 渲染标题、主按钮（优先取careers_url，否则取website，Nettl Edinburgh 未设careers_url，故显示 "Visit Website"）；
• 根据region与remote_policy渲染可跳转的区域/政策标签；
• 遍历technologies数组渲染技术标签（对应模板中的company-profile__tech区块）；
• 在页脚展示updatedAt并格式化为 "MMMM D, YYYY" 形式，Nettl Edinburgh 会显示 "October 3, 2022"；
• 引入Organization结构化数据 schema（src/_includes/schemas/Organization.njk），便于搜索引擎理解公司实体信息。

4.4 Meta 描述自动生成

src/companies/companies.11tydata.js 通过eleventyComputed.description自动为每个公司页面生成 meta description：它优先提取## Company blurb章节后的文本，剥离 Markdown 语法（链接转纯文本、去除*/_/`）、合并多余空白，并截断至约 155 字符（优先在句号处截断）。这意味着 Nettl Edinburgh 档案的 blurb 文本质量会直接影响其页面的搜索引擎描述，是内容维护中值得重视的隐性机制。

五、从这份档案反推：如何新增/维护公司档案

结合 CONTRIBUTING.md 与 Nettl Edinburgh 档案，新增一家公司档案的完整流程是：

1. 在src/companies/下创建{slug}.md文件，确保文件名与 frontmatter 的slug一致；
2. 填写 frontmatter：title、slug、website必填，region、remote_policy、company_size、technologies按合法枚举取值（addedAt/updatedAt留给维护者）；
3. 编写正文，必须包含## Company blurb、## Remote status、## How to apply三个章节，可补充## Company size、## Region、## Company technologies、## Office locations等；
4. 本地运行npm run build验证构建（需 Node.js 22+，见 README.md）；
5. 提交 PR，由 "Validate Company Profiles" GitHub Action 自动校验，机器人会在 PR 中评论需要修复的问题，未解决前会阻止合并。

维护者会拒绝内容过于单薄、不符合"远程友好科技公司"收录标准、存在重复条目或业务含害的公司档案。Nettl Edinburgh 档案自 2017 年收录、2022 年更新，始终符合标准，可视为一份规范的长期存活档案样例。

六、小结：一份档案的完整生命周期

从nettl-edinburgh.md出发，我们可以梳理出 Remote In Tech 目录中一份公司档案的完整生命周期：

1. 创作：按 CONTRIBUTING.md 模板填写 frontmatter 与正文章节；
2. 校验：GitHub Action 自动校验字段合法性、必填章节与旧格式兼容性；
3. 构建：Eleventy 通过 src/_config/collections.js 将其归入公司集合，按 region/technology 分组，供浏览页与首页消费；
4. 渲染：src/_layouts/company.njk 将 frontmatter 映射为页面按钮、区域/政策/技术标签与更新日期，src/companies/companies.11tydata.js 自动生成 SEO meta description；
5. 维护：维护者通过updatedAt字段追踪档案新鲜度，公司业务不再符合标准时整份移除。

对于希望贡献该目录的开发者而言，src/companies/nettl-edinburgh.md是一份字段完整、章节规范、数据自洽的参考样例；对于希望理解 Eleventy 数据流与标签系统的工程师而言，它又是一条贯穿 frontmatter → 集合 → 标签 → 布局的完整链路入口，值得顺着 companies.11tydata.js 与 collections.js 继续深入阅读。

• 数据集