企业官网建设流程全解析

• 数据集

本篇技术指南以开源仓库 remoteintech.company（项目名 remote-jobs）中 HE:labs 公司档案 为完整示例，逐层拆解"社区维护的远程友好公司目录"这一数据产品从一份 Markdown 档案到最终页面的全链路：frontmatter 字段的取值规范与语义、正文章节的必备结构、Eleventy 静态站点的渲染管线、标签聚合索引，以及自动化校验机制。读完本文，你将掌握该目录"新增一家公司"所需的完整数据建模知识，并理解每一行 YAML 与页面上的按钮、标签、SEO 元信息之间的对应关系。

一、档案全貌：HE:labs 是一份怎样的公司条目

src/companies/he-labs.md是 HE:labs 在目录中的完整数据源。这是一家位于巴西里约热内卢、面向全球招聘的远程技术团队，其档案由两部分构成：顶部的 YAML frontmatter（结构化元数据）与底部的 Markdown 正文（面向读者的说明文本）。

根据正文记录的事实：

• Company blurb：HE:labs 是一支由敏捷设计师与开发者组成的团队，可以把一个想法转化为出色的数字产品；
• Company size：50+ 人；
• Remote status：100% 远程，同时在里约热内卢设有一处办公空间；
• Region：Worldwide（全球）；
• Company technologies：Ruby、Clojure、Elixir、JavaScript、HTML5、CSS3、Postgres、Heroku、AWS、GCE、Docker、Kubernetes；
• Office locations：巴西里约热内卢；
• How to apply：通过 HE:labs 官网的求职页面申请。

档案头部的时间戳表明该条目于 2016-07-23 收录，最近一次更新于 2022-10-10——这与目录"社区持续维护"的定位直接相关，后面会展开说明维护机制。

二、Frontmatter 字段逐项拆解：档案的数据建模

frontmatter 是整份档案的结构化核心。HE:labs 档案完整使用了目录约定的全部元数据字段，正好可以作为逐字段讲解的活教材。字段的合法取值定义在 src/_data/labels.js 与 CONTRIBUTING.md 的"Valid Field Values"表格中。

几个值得深入的点：

1. slug 与文件名的强约束。CONTRIBUTING.md 明确规定{slug}必须与文件名匹配（slug: example-co→src/companies/example-co.md）。这一约定让 src/_config/collections.js 可以通过getFilteredByGlob('./src/companies/**/*.md')一次性收拢全部档案，并用c.data.slug || c.fileSlug兜底解析身份。

2. company_size 取值与正文存在轻微不一致。frontmatter 声明company_size: small（按 labels.js 映射为 11–50 人），而正文 Company size 章节写的是"50+"（按档位划分应接近medium的 51–200）。这是社区维护型目录中常见的数据漂移现象，恰好说明正文与结构化字段由校验机器人与维护者共同把关的必要性。

3. technologies 采用"规范化 slug"而非自然语言。HE:labs 正文列出了 12 项具体技术（Ruby、Clojure、Docker……），但 frontmatter 只登记了 7 个规范化标签：cloud、devops、elixir、javascript、ml、ruby、sql。这些 slug 必须落在 labels.js 的tech白名单内，才能在 src/_layouts/company.njk 中渲染成可点击的技术标签，并参与技术维度索引。

三、正文 Markdown：目录约定的章节结构

除了 frontmatter，正文部分同样有结构约定。CONTRIBUTING.md 规定档案必须包含以下##小节：

• ## Company blurb——公司简介（必填）；
• ## Remote status——远程工作方式说明（必填）；
• ## How to apply——求职页链接或申请说明（必填）。

可选但常见的章节包括## Company size、## Region、## Company technologies。HE:labs 档案恰好是"全量章节"的范本，六类章节全部具备，并且与 frontmatter 形成互补：frontmatter 提供机器可读的离散字段，正文提供面向求职者的人类可读描述。

这种分工还体现在 SEO 上。src/companies/companies.11tydata.js 的eleventyComputed.description会从正文提取## Company blurb之后的文本，经过剥除链接、清除*_、压缩空白等清洗后，截断为约 155 字符作为页面 meta description；若找不到 blurb 章节，则回退到 frontmatter 之后的第一个段落。也就是说，写好 blurb 直接决定了网站在搜索引擎与社交分享中的摘要质量。

四、从档案到页面：Eleventy 渲染管线

src/companies/he-labs.md只是数据源，真正的页面由 src/_layouts/company.njk 渲染。布局顶部声明schema: Organization，因此页面会输出 JSON-LD 结构化数据，内容来自 src/_includes/schemas/Organization.njk：name取title、url取website，若提供careers_url还会写入sameAs。

具体到 HE:labs 档案，页面渲染后的关键元素如下：

• CTA 按钮：布局第 10–16 行用careers_url or website决定按钮目标。HE:labs 未填careers_url，因此按钮显示为"Visit Website"并指向website字段；若填写了careers_url，按钮则变为"Apply Now"。
• Region 标签：/browse/worldwide/，文本经 labels.js 映射为 "Worldwide"；
• Remote policy 标签：/browse/fully-remote/，映射为 "Fully Remote"；
• Tech Stack 区：frontmatter 中 7 个技术 slug 各渲染为一个/browse/{tech}/标签；
• 页脚：显示Last updated: October 10, 2022（由updatedAt经formatDate过滤器输出）。

标签的样式与交互（hover 位移、透明度过渡）在 company.njk 内嵌的局部 CSS 中定义，全部指向目录的浏览聚合页，构成站内索引闭环。这些标签链接的聚合逻辑来自 src/_config/collections.js：getCompaniesByRegion按region分组、getCompaniesByTech遍历technologies数组逐项归类，而 eleventy.config.js 将上述集合注册为companiesByRegion、companiesByTech、companyTags等模板集合。

五、标签与聚合：HE:labs 如何进入目录索引

一份档案的价值在于被检索。基于 frontmatter，HE:labs 会自动出现在多个维度的索引中：

• 技术维度：cloud、devops、elixir、javascript、ml、ruby、sql 七个标签页各收录一份；
• 区域维度：worldwide（全球）标签页；
• 远程策略维度：fully-remote（全远程）标签页。

聚合数据由getCompanyTags（collections.js 第 134–193 行）生成：它遍历全部公司档案，把title、slug、website、region、remote_policy摘录进对应的标签分组，并按公司数量降序排列，从而支撑 src/common/tags.njk 与 browse 页面。标签文本的统一映射则以 src/_data/labels.js 为单一事实源（single source of truth），同时被模板层（labels.*全局数据）与 JS 层（经 src/_data/companyHelpers.js 再导出）消费。这意味着：改一处标签文案，全站索引同步更新，HE:labs 档案本身无需任何改动。

六、维护与校验：让档案长期有效

目录的核心质量保障机制全部记录在 CONTRIBUTING.md 中：

1. 自动化校验：任何触及src/companies/**的 PR 都会触发 Validate Company Profiles 工作流，机器人会在 PR 上评论字段合法性、章节完整性等问题并阻止合并，直到修复；
2. 收录标准：公司需满足"半远程至全远程的技术类企业、直接雇佣员工、提供真正的远程岗位（薪资或时薪制）、careers 页指向企业自己的招聘入口"等硬性条件；
3. 拒绝原则：不满足标准、推广有害服务、档案内容过于简陋、与已有公司重复的条目都会被拒绝。

HE:labs 档案的时间戳即这一机制的注脚：2016 年收录、2022 年更新。读者本地可以用npm run build（参见 README.md）完整重建站点，或npm run start启动热重载开发服务器（要求 Node.js 22+，命令定义见 package.json），验证任何档案修改后的渲染结果。

七、参考模板：为一家新公司撰写档案

结合 CONTRIBUTING.md 的官方模板与 HE:labs 的真实结构，一份合格档案的最小可运行骨架如下：

--- title: "Example Co" slug: example-co website: https://example.com careers_url: https://example.com/careers region: worldwide remote_policy: fully-remote company_size: small technologies: - javascript - python ---

## Company blurb 一段简洁的公司业务描述，将直接用于页面的 meta description。 ## Remote status 公司如何实践远程办公的说明。 ## How to apply 指向公司自有求职页面的链接或申请指引。

写作时对照 HE:labs 档案可得到三条实操经验：

• blurb 即 SEO：它是companies.11tydata.js自动生成 meta description 的唯一数据源，建议在 155 字符内写清"做什么 + 远程特点"；
• 标签宁缺毋滥：technologies只能使用 labels.js 白名单内的 slug，正文可列更细的技术栈（如 HE:labs 的 Clojure、GCE），但索引标签保持规范；
• 正文与字段保持一致：HE:labs 中company_size: small与正文"50+"的分歧提醒我们，维护者与校验机器人会重点关注结构化字段与正文叙述的一致性。

至此，从 YAML 字段到标签页、从 blurb 到 meta description、从提交 PR 到机器人校验，HE:labs 这一份档案已经完整串起了 remoteintech.company 目录的建模、渲染与维护全流程——这既是一份公司档案的解剖，也是向该目录贡献新条目的完整方法论。

• 数据集