企业官网建设流程全解析

• 数据集

本篇文章以仓库中 Chainlink Labs 公司档案 为样本，完整拆解 Remote In Tech（remoteintech.company）目录体系中公司档案（company profile）的字段结构、正文规范、标签体系与 Eleventy 构建链路。读完本文，你将掌握如何阅读一份公司档案的 YAML frontmatter 与 Markdown 正文、理解region/remote_policy/company_size/technologies等字段的取值规则及其在站内筛选、浏览页和 SEO 元数据生成中的实际作用，并能在本地构建验证档案文件。

档案文件在仓库中的位置与整体结构

Remote In Tech 是一个由社区维护的"远程友好型科技公司目录"，其全部内容都存放于 src/companies/ 目录下，每家公司的信息以一份独立的 Markdown 文件表示。Chainlink Labs 对应的是 src/companies/chainlink.md。

与目录中其他数百家公司档案（如 10up、automattic、linear 等）一致，该文件由两部分组成：

1. YAML frontmatter——机器可读的元数据块，承载站内排序、筛选、标签、卡片展示所需的结构化字段；
2. Markdown 正文——以若干##二级标题组织的人类可读信息小节。

两者在构建时被 company.njk 布局模板（layout: company）渲染为独立的公司详情页，正文内容通过{{ content | safe }}原样注入，frontmatter 字段则驱动按钮、标签与页脚信息。

Frontmatter 字段全解：机器可读的公司元数据

Chainlink Labs 档案的 frontmatter 是理解整个字段体系的绝佳样本：

--- title: "ChainLink Labs" slug: chainlink-labs website: https://chainlinklabs.com/ careers_url: https://chainlinklabs.com/careers region: worldwide remote_policy: remote-friendly company_size: medium technologies: - cloud - devops - go - javascript - python - sql addedAt: 2022-10-01 updatedAt: 2022-10-21 ---

各字段的含义与取值规则如下：

值得一提的是，CONTRIBUTING.md 要求文件名必须与 frontmatter 中slug的文件名部分一致（例如slug: example-co对应src/companies/example-co.md）。Chainlink Labs 档案的slug为chainlink-labs而文件名为chainlink.md，属于历史遗留的命名不一致；从源码结构看，collections.js 同时校验data.slug与fileSlug正是为了兼容这类情况，因此并不会影响构建与收录。

字段取值与标签体系：labels.js 与 companyHelpers.js

frontmatter 中的region、remote_policy、company_size、technologies均采用受限枚举值，其显示名称由 src/_data/labels.js 统一维护，是"单一事实来源"（single source of truth）。Chainlink Labs 档案涉及的映射关系如下：

src/_data/companyHelpers.js 将labels.js的映射重新导出给 JS 消费者（regionLabels、remotePolicyLabels、companySizeLabels、techLabels），并提供getRegionLabel、getRemotePolicyLabel、getCompanySizeLabel、getTechLabel等取值辅助函数；Nunjucks 模板则直接通过全局数据级联中的labels.*访问。

在渲染层，company.njk 会为region与remote_policy生成两个带链接的标签：

• <a href="/browse/worldwide/" class="tag tag--region">（对应地区浏览页）
• <a href="/browse/remote-friendly/" class="tag tag--policy">（对应远程政策浏览页）

technologies数组则在档案页底部渲染为独立的 "Tech Stack" 区块，每一项都是指向/browse/{tech}/的tag--tech标签。这意味着维护者只需在 frontmatter 中声明取值，全站的标签页、浏览页与档案详情页即可自动联动。

档案正文小节逐段解读

Chainlink Labs 档案的正文包含六个小节，与 CONTRIBUTING.md 规定的目录准入格式完全对应（## Company blurb、## Remote status、## How to apply为必填，其余为常用可选节）：

## Company blurb（公司简介）

"We're a world-class team of results-oriented developers, academics, seasoned executives, and startup operators who are building next-generation data infrastructure for smart contracts."

这段简介不仅展示在档案页顶部，还会被 companies.11tydata.js 自动加工为页面的 meta description（详见下文渲染链路）。

## Company size（公司规模）正文记录为 "200+ (as of January 2020)"，而 frontmatter 的company_size: medium按标签映射为 51–200 人区间。两者表述口径不同，属于档案中常见的现象——frontmatter 是构建期使用的机器数据，正文则保留了采集时的原始描述。

## Remote status（远程状态）"Almost all of us are remote. Headquarters in San Francisco, CA." 说明该公司几乎全员远程、总部设于旧金山，与remote_policy: remote-friendly的"远程友好"定位一致。

## Region（地区）"All roles with Chainlink Labs are globally remote based. We encourage you to apply regardless of your location." 明确了全球远程招聘策略，对应 frontmatter 中的region: worldwide。

## Company technologies（公司技术栈）正文列出 Javascript、Python、Golang、TypeScript、Solidity、Postgres、Terraform、AWS。需要注意：正文这份更详细的清单与 frontmattertechnologies数组并不完全一致（frontmatter 仅收录了cloud、devops、go、javascript、python、sql六个枚举值）。从源码结构看，只有 frontmatter 中的technologies才会进入标签体系与浏览页分组，正文清单仅作文字展示——这也是阅读档案时值得留意的数据口径差异。

## Office locations（办公地点）仅列出 "San Francisco, CA"，即总部所在地。

## How to apply（如何申请）指向公司官方招聘页，该地址与 frontmatter 的careers_url一致，会被渲染为档案页主按钮。

渲染与元数据生成链路：从 Markdown 到页面

档案文件的构建消费链路可以从两个文件看清：

其一，src/companies/companies.11tydata.js 通过eleventyComputed为每家公司自动计算description：先提取## Company blurb标题之后的文本，经过去除 Markdown 链接语法（text→text）、去除*/_/`、压缩换行与空格等清洗后，截断到约 155 字符——若后半段存在句号则按句边界截断，否则按最后一个空格截断并追加...。这段逻辑直接决定了 Chainlink Labs 档案页在搜索引擎结果中的 meta description 内容。

其二，src/_layouts/company.njk 负责最终页面结构：头部渲染返回链接、title的 H1、基于careers_url的Apply Now →按钮（无招聘页时降级为Visit Website）、地区与远程政策标签；主体注入 Markdown 正文并追加 Tech Stack 区块；页脚显示updatedAt（经formatDate('MMMM D, YYYY')格式化为 "October 21, 2022" 样式），并保留跳转回全部公司列表的按钮。

集合与筛选：collections.js 如何消费档案

src/_config/collections.js 定义了档案数据在站内的多种组织形态，Chainlink Labs 档案会参与其中多套集合：

• getAllCompanies：按title字典序排序的全部公司列表（"ChainLink Labs" 会出现在 C 区段）；
• getCompaniesByRegion：按region分组，本档案归入worldwide组；
• getCompaniesByTech：按technologies分组，本档案会同时出现在 Cloud、DevOps、Go、JavaScript、Python、SQL 六个技术组；
• getCompanyTags：聚合生成标签页数据，统计每个 region/remote-policy/technology 下的公司数量与公司列表；
• getRecentCompanies：按 frontmatteraddedAt降序取最近 12 家，本档案的addedAt: 2022-10-01决定其出现在"最近收录"列表中的相对位置。

此外，featuredCompanySlugs（见 companyHelpers.js）维护了首页精选公司名单，Chainlink Labs 并未入选，其收录形态以普通目录条目呈现。

维护规范、验证与本地构建

CONTRIBUTING.md 给出了新增公司档案的标准流程：创建src/companies/{slug}.md→ 填写 frontmatter 模板 → 运行npm run build验证 → 提交 PR。目录准入还有明确要求：公司须直接雇佣员工（不接受中介、外包平台）、提供真实的远程岗位（佣金制或独立承包商销售机会不计入）、属于科技行业，且careers_url必须指向公司自身的招聘页面而非服务销售页。触及公司文件的 PR 会由Validate Company ProfilesGitHub Action 自动校验，机器人会在 PR 上以评论形式列出需要修复的问题，并阻塞合并直至解决。

本地构建方式参见 README.md：

npm install # 安装依赖 npm run start # 开发服务器（热重载） npm run build # 生产构建

环境要求 Node.js 22+。

小结

一份公司档案远不止"几行介绍"：frontmatter 是构建期唯一可信的结构化数据源，驱动着标签、浏览页、最近收录与 SEO 元数据；正文小节则提供可读的完整信息。以 chainlink.md 为样本，我们已经完整走通了从字段取值、标签映射（labels.js）、集合组织（collections.js）、元数据计算（companies.11tydata.js）到页面渲染（company.njk）的整条构建链路——理解这套数据约定，是阅读、维护乃至为 Remote In Tech 新增任何公司档案的基础。

• 数据集