企业官网建设流程全解析

• 数据集

本文以 Remote In Tech（remoteintech.company）开源目录仓库中 DataCamp 公司档案 为完整样本，逐字段拆解其 frontmatter 元数据与正文章节结构，并结合仓库中的公司布局模板、集合逻辑与标签映射源码，讲清楚一份"可直接复制的远程友好公司档案"在数据层、渲染层和 SEO 层是如何串联工作的。读完你既能读懂任意一家公司的档案，也能照着模板提交你自己的档案。

DataCamp 档案：一份典型的 fully-remote 公司卡片

src/companies/datacamp.md是 Remote In Tech 社区目录中众多公司档案之一。Remote In Tech 是一个社区维护的远程友好科技公司目录，本仓库即其站点源码（见 README.md）。DataCamp 档案记录了这家在线数据技能学习平台的远程工作信息，核心内容如下：

• 公司定位：DataCamp 正在构建学习与教授数据技能的最佳平台，为个性化学习体验打造技术，为全球数百万人带来数据素养能力；学习者通过浏览器中自定进度的交互式数据科学课程、练习与项目获得真实动手经验。
• 团队构成：一个拥有教育、数据科学、设计、心理学、生物学、语言学、工程等背景的国际团队，共同致力于影响教育未来。
• 公司规模：100–200 人（截至 2021 年 4 月）。
• 远程状态：提供 fully remote 职位，同时也有带灵活居家办公政策的驻地职位。
• 招聘区域：欧洲或相近时区。
• 技术栈：TypeScript、React、React-Native、Ruby、Kubernetes、Terraform、JavaScript 等（视团队而定）。
• 办公地点：比利时鲁汶（Leuven, BE）、英国伦敦（London, UK）、美国纽约（New York, USA）。
• 申请方式：访问 DataCamp careers 页面。

这份档案虽然只有 47 行，却包含了完整的结构化元数据（frontmatter）与正文章节，是理解整个目录数据模型的最佳样本。

frontmatter 字段逐项拆解

档案头部由 YAML frontmatter 构成，承载机器可读的结构化数据。DataCamp 档案使用了以下字段：

--- title: "DataCamp" slug: datacamp website: https://www.datacamp.com/ careers_url: https://datacamp.com/careers region: europe remote_policy: fully-remote company_size: medium technologies: - devops - javascript - mobile - ruby addedAt: 2021-04-02 updatedAt: 2021-04-02 ---

这些字段的含义与合法取值在 CONTRIBUTING.md 中有明确规范：

technologies字段的合法值由 src/_data/labels.js 中的tech映射统一维护，包括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。DataCamp 档案中登记的四个标签均在此白名单内。

值得注意的约束：slug必须与文件名匹配——slug: datacamp对应src/companies/datacamp.md。同时，addedAt/updatedAt属于维护者专用字段，普通贡献者提交的 PR 中不应包含它们，验证机器人会检查这一点。

正文章节：目录档案的内容骨架

CONTRIBUTING.md 规定，Markdown 正文必须包含以下##标题，DataCamp 档案完整满足：

• ## Company blurb—— 一段关于公司与业务方向的简介。DataCamp 用它交代产品定位（数据技能在线学习平台）、学习模式（浏览器内自定进度的交互式课程/练习/项目）以及团队多元背景。
• ## Remote status—— 公司如何开展远程工作。DataCamp 明确"fully remote 职位可提供，同时也有带灵活居家办公政策的驻地职位"，这与 frontmatter 中remote_policy: fully-remote相互印证。
• ## How to apply—— 指向招聘页或申请说明。DataCamp 直接引导读者访问其 careers 页面。

此外，## Company size、## Region、## Company technologies、## Office locations属于常用可选章节。DataCamp 档案恰好把以上全部字段都用上了：规模（100-200 人）、区域（欧洲或相近时区）、技术栈清单、以及三个办公地点。这也让 DataCamp 成为学习"完整档案长什么样"的理想样本。

从源码看档案如何被渲染成公司页面

档案之所以能变成网站上可浏览、可检索的公司页，是因为它被 Eleventy（11ty）构建系统消费。从源码结构看，整个链路分四层：

1. 布局层：src/companies/companies.json为所有公司档案指定"layout": "company"，最终渲染使用 src/_layouts/company.njk。该模板接收 frontmatter 字段，做了以下工作：

• 页面主按钮逻辑：careers_url or website——有招聘页就显示 "Apply Now"，否则显示 "Visit Website"；
• 区域标签与远程政策标签分别链接到/browse/{region}/和/browse/{remote_policy}/，例如 DataCamp 的europe与fully-remote会被渲染成可点击的分类标签；
• technologies列表渲染成一组技术标签，逐个链接到/browse/{tech}/；
• 页脚展示updatedAt（通过formatDate过滤器格式化）。

2. 数据层：src/companies/companies.11tydata.js 通过eleventyComputed自动生成description——它从正文中正则匹配## Company blurb标题后的段落，剥离 Markdown 链接、星号、反引号，压缩空白后截断到约 155 字符，用作页面 meta description。DataCamp 档案的 blurb 正是通过这一机制进入搜索引擎元数据的。

3. 集合层：src/_config/collections.js 定义公司集合的多种组织方式：getAllCompanies（按标题字母序）、getCompaniesByRegion（按区域分组）、getCompaniesByTech（按技术分组）、getCompanyTags（生成浏览/标签页数据）。DataCamp 的europe区域、fully-remote政策与四个技术标签会分别被归入对应分组，这就是/browse/europe/、/browse/fully-remote/等浏览页的数据来源。

4. SEO 层：src/_includes/schemas/Organization.njk 输出application/ld+json结构化数据，将title写入Organization.name、website写入url、careers_url写入sameAs。也就是说，DataCamp 档案的官网与招聘页地址会被序列化为 JSON-LD，帮助搜索引擎理解页面主体。

5. 标签层：src/_data/companyHelpers.js 从 src/_data/labels.js 重新导出区域、远程政策、规模与技术的标签映射（单一事实来源），供集合逻辑与模板共用。DataCamp 的europe会显示为 "Europe"，fully-remote显示为 "Fully Remote"，medium显示为 "51-200 employees"。

本地构建与验证：让档案可运行

想在本地验证这份档案或亲手实验，参考 README.md 的说明，需要 Node.js 22+：

npm install # 安装依赖 npm run start # 启动带热重载的开发服务器 npm run build # 生产构建

新增公司的标准流程（来自 CONTRIBUTING.md）：在src/companies/{slug}.md创建文件、填写 frontmatter 与正文、运行npm run build验证构建、再提交 PR。PR 中涉及公司档案的改动会被 "Validate Company Profiles" GitHub Action 自动校验，机器人会在 PR 评论区指出问题并在修复前阻止合并。

从 DataCamp 档案延伸到目录收录标准

DataCamp 档案之所以能保留在目录中，是因为它满足 Remote In Tech 的收录门槛：公司直接雇佣员工（无中介/外包平台）、提供真实的远程职位（非佣金制销售岗）、处于科技行业周边、careers_url指向自家招聘页而非客户服务页。反过来看，目录维护者会拒绝不符合条件、推广有害服务、内容过于单薄以及重复收录的档案。

因此，当你阅读任何一份类似 DataCamp 档案 的公司页时，其实是在阅读一份经过了人工核验、结构化编码、模板渲染和 SEO 增强的完整数据记录——这正是 Remote In Tech 目录"社区维护 + 机器可读"设计理念的最小缩影。

• 数据集