企业官网建设流程全解析

• 数据集

导读

本文以 src/companies/ocient.md 这份公司档案为完整样本，逐字段解析 Remote In Tech（remoteintech.company）这一社区维护的远程友好科技公司目录的数据模型：从前置元数据（frontmatter）的取值规范，到 Markdown 正文的章节约定，再到 Eleventy 集合、标签体系与公司档案页渲染管线的底层实现。读完本文，你既能完整掌握 Ocient 这家公司的档案信息，也能理解目录中数百家公司档案是如何被结构化、索引、验证并最终渲染成页面的，从而具备为该仓库贡献新公司档案、或为类似静态目录站点设计数据模型的实战能力。

一、档案速览：Ocient 是谁

ocient.md是仓库src/companies/目录下的 800+ 份公司档案之一（该目录还包含companies.json与companies.11tydata.js两个配套文件，前者指定所有档案默认使用company布局，后者负责为档案页自动生成 meta description）。

Ocient 的档案核心信息如下：

• 公司定位：Ocient Hyperscale Data Warehouse（超大规模数据仓库）——其官方简介称，该产品能在数秒内完成数据转换与加载，支持存储与分析更大规模的数据，并在超大规模数据集上以高达 50 倍的速度执行查询。
• 公司规模：100–200 人（对应 frontmatter 中的company_size: medium）。
• 远程政策：Remote First（远程优先）。
• 招聘区域：北美、欧洲、印度。
• 办公室：芝加哥（Chicago）。
• 技术栈：C++、Java、Python、SQL、Bazel（正文部分）。
• 申请方式：通过其官网职业页面直接申请（对应 frontmatter 中的careers_url）。

说明：关于产品性能的描述（如"50x faster"）引自档案自带的 Company blurb 原文，属于公司自述，本文不做额外演绎。

二、frontmatter：档案的结构化骨架

ocient.md开头是一段 YAML frontmatter，这是目录中每家公司档案的"身份证"，全部字段都被下游的构建管线消费：

--- title: "Ocient" slug: ocient website: https://ocient.com careers_url: https://ocient.com/job-postings/ region: americas remote_policy: remote-first company_size: medium technologies: - java - python - sql addedAt: 2022-10-12 updatedAt: 2022-10-14 ---

结合 CONTRIBUTING.md 中的字段模板与 src/_data/labels.js 的取值定义，各字段的语义与约束如下：

1.title/slug

title是公司显示名称，slug用于定位档案文件与生成 URL。规则要求文件名必须与 slug 一致：slug: ocient对应src/companies/ocient.md。

2.website/careers_url

• website：公司官网。
• careers_url：招聘页链接。贡献规范要求该链接必须指向公司自己的职业页面，而非"出售服务给客户"的页面；同时要求公司直接雇佣员工（不收录只挂他人岗位的 bootcamp、人力外包或自由职业平台）。

在 src/_layouts/company.njk 的渲染逻辑中，两者存在优先级关系：

{% set buttonUrl = careers_url or website %} {% if buttonUrl %} <a href="{{ buttonUrl }}" ...> {% if careers_url %}Apply Now{% else %}Visit Website{% endif %} &rarr; </a> {% endif %}

即：有careers_url时按钮显示 "Apply Now" 并跳转招聘页；没有时回退到website并显示 "Visit Website"。

3.region：招聘区域

region: americas。可选值及展示标签在 src/_data/labels.js 中统一定义：

4.remote_policy：远程政策

remote_policy: remote-first，可选值与标签如下（labels.js）：

注意目录的收录边界：只收录**提供真实远程岗位（带薪或按小时计薪）**的公司；纯佣金制或独立承包的销售机会不算数。

5.company_size：公司规模

company_size: medium，对应展示为 "51-200 employees"（labels.js）：

6.technologies：技术标签

technologies: - java - python - sql

这是受控词表（labels.js 与 CONTRIBUTING.md 均列出），当前可取值包括：javascript、typescript、react、nodejs、python、ruby、go、java、php、rust、dotnet、elixir、scala、swift、cloud、devops、docker、kubernetes、mobile、data、ml、sql、postgres、nosql、search。ocient.md使用的java、python、sql均属于合法取值。

7.addedAt/updatedAt

addedAt: 2022-10-12、updatedAt: 2022-10-14。这两个日期字段由维护者管理，贡献者提交 PR 时不应自行填写。它们被用于两个场景：

• 首页"最近新增公司"集合（getRecentCompanies）按addedAt倒序取前 12 家；
• 档案页页脚展示"Last updated: ..."（由 company.njk 通过formatDate过滤器渲染）。

8.description的自动生成

src/companies/companies.11tydata.js 为所有档案提供了 Eleventy 的eleventyComputed.description：它会用正则/##\s*Company\s*blurb\s*\n+/定位正文中## Company blurb小节，提取其后的段落文本，剥离 Markdown 链接与强调符号、合并换行与多余空格，并截断至约 155 字符（优先在句号处截断）作为页面 meta description。Ocient 的 blurb 是一段完整句子，因此会被直接用作该档案页的 SEO 描述。

三、正文 Sections：档案的可读部分

除 frontmatter 外，ocient.md的 Markdown 正文遵循目录的必选/可选章节规范（见 CONTRIBUTING.md 的 Required Sections）：

值得注意的一个细节：## Company technologies正文中写的是C++、Java、Python、SQL、Bazel（自由文本，用于给人阅读），而 frontmattertechnologies只声明了java、python、sql三个受控词（用于标签索引与浏览页筛选）。两者来源不同、职责不同——正文是面向读者的展示信息，frontmatter 是面向构建系统的结构化数据。

## How to apply一节在 Ocient 档案中直接指向其官网职业页面；结合上一节的careers_url优先级逻辑，页面顶部的主按钮与正文申请链接会指向同一招聘入口。

四、标签与浏览体系：档案数据如何被索引

ocient.md的 frontmatter 字段不仅渲染单个档案页，还驱动整个目录的浏览与检索体系。src/_config/collections.js 定义了多个基于getFilteredByGlob('./src/companies/**/*.md')的集合：

• getAllCompanies：全部公司档案按title字母序排序，用于/companies/总览页；
• getFeaturedCompanies：从人工精选列表（src/_data/companyHelpers.js 中的featuredCompanySlugs）随机打乱后取 8 家展示在首页；
• getRecentCompanies：按addedAt倒序取最近 12 家；
• getCompaniesByRegion：按region分组，Ocient 会落入americas组；
• getCompaniesByTech：遍历每家公司的technologies数组完成分组——因此java、python、sql三个标签下都会出现 Ocient；
• getCompanyTags：汇总生成按计数排序的标签列表，供浏览页使用。

在 src/_layouts/company.njk 中，这些字段被渲染为可点击的标签：

• region→ 链接到/browse/{{ region }}/，样式类tag--region（labels.js 提供展示文案）；
• remote_policy→ 链接到/browse/{{ remote_policy }}/，样式类tag--policy；
• technologies数组 → 循环生成一组tag--tech标签，各指向/browse/{{ tech }}/。

这意味着读者从 Ocient 档案页可以直接跳转到"Americas 地区公司"、"Remote First 公司"、"Java/Python/SQL 技术公司"等聚合浏览页，实现档案 → 标签 → 同类别公司清单的闭环浏览。

五、档案页渲染管线：从 Markdown 到页面

一个完整档案页的生成链路为：

1. 内容层：ocient.md的 frontmatter + 正文；
2. 计算层：companies.11tydata.js基于## Company blurb自动生成description；
3. 布局层：src/_layouts/company.njk 指定layout: company、schema: Organization，并继承base.njk；页脚通过updatedAt+formatDate('MMMM D, YYYY')显示最后更新时间；
4. 样式层：布局内嵌的局部 CSS 定义公司档案页的标签、区块标题（tag--region/tag--policy/tag--tech及.company-profile__content h2等）；
5. 站点层：showInSitemap集合（collections.js）将src/**/*.{md,njk}收录进 sitemap.xml，保证档案页可被搜索引擎索引。

Ocient 档案添加于 2022-10-12、更新于 2022-10-14，距今为较早批次；由于正文完整、字段齐全，它完全可以作为新档案的"标准模板"参照。

六、如何贡献与验证这样的档案

若你想为目录新增一家公司（或复刻 Ocient 这类档案），CONTRIBUTING.md 给出的流程为：

1. 在src/companies/{slug}.md创建文件，{slug}必须与 frontmatter 的slug一致；
2. 填写上述 frontmatter 模板（字段取值严格参照 labels.js 的受控词表），并写好必选/常用正文章节；
3. 本地运行npm run build（需 Node.js 22+，仓库根目录 README.md 提供了npm install/npm run start/npm run build三个命令）验证构建通过；
4. 提交 PR。仓库会通过Validate Company ProfilesGitHub Action 自动校验档案格式与取值，机器人会在 PR 中注释问题并阻止合并，直至修复。

维护者拒绝收录的情形包括：不符合收录标准、宣传有害服务、档案内容过少、与现有公司重复等（详见 CONTRIBUTING.md 的 What Maintainers Will Reject 一节）。此外，若公司业务变更导致不再符合收录标准，维护者通常会删除档案而非改写。

七、小结

ocient.md是一份小而完整的公司档案范本：frontmatter 的 10 个字段与正文的 7 个章节，分别承担结构化索引与人类可读展示的职责；而labels.js（受控词表）、collections.js（聚合分组）、company.njk（布局渲染）、companies.11tydata.js（描述自动生成）共同构成了一条从数据到页面的完整流水线。理解这份档案，就等于理解了 Remote In Tech 整个远程公司目录的内容模型与构建机制，既可据此为项目贡献新档案，也可将其数据驱动思路迁移到任何静态目录类站点的设计中。

• 数据集