企业官网建设流程全解析

• 数据集

本文以 src/companies/meant4.md 这一份公司档案为样本，逐层拆解 remoteintech（remoteintech.company，一个由社区维护的远程友好科技公司目录）中单条公司档案的完整数据链路：从 Markdown 前置元数据（Frontmatter）到 Eleventy 集合聚合、再到公司详情页的最终渲染。读完本文，你将掌握如何阅读和编写一份符合目录规范的公司档案，理解region、remote_policy、company_size、technologies等字段的取值约束与页面表现，并能据此为其他公司快速建档。

Meant4 档案概览：一份典型的公司条目

src/companies/meant4.md是目录中数百个公司档案之一，其结构遵循统一的"前置元数据 + Markdown 正文"格式。前置元数据使用 YAML，定义公司属性；正文则用##二级标题组织人类可读的说明内容。

该档案的完整前置元数据如下：

--- title: "Meant4" slug: meant4 website: https://meant4.com/jobs region: worldwide remote_policy: hybrid company_size: small technologies: - cloud - go - javascript - mobile - php - python addedAt: 2024-10-25 updatedAt: 2025-01-24 ---

这份档案描述的 Meant4 是一家总部位于波兰华沙的软件公司，专注于云端开发与 IT 咨询，团队规模 20-40 人，采用混合办公（Hybrid）策略，面向全球招聘。档案本身虽短，但它完整覆盖了目录系统要求的所有核心字段，是学习公司档案格式的理想范本。

前置元数据字段逐项解析

基础标识：title、slug 与 website

• title：公司展示名称，将直接呈现在公司详情页的<h1>标题与公司卡片中。
• slug：公司条目的唯一标识。按 CONTRIBUTING.md 的约定，slug必须与文件名一致：slug: meant4对应文件src/companies/meant4.md。slug 同时用于生成公司详情页的 URL。
• website：公司官网或招聘页地址。在 src/_layouts/company.njk 中，如果没有设置careers_url，该值会被用作页面主按钮"Visit Website"的跳转目标。

目录维度：region、remote_policy 与 company_size

这三个字段是目录筛选与标签体系的核心维度，其可选值在 src/_data/labels.js 中统一定义（该文件被注释为"单一事实来源"，同时供 JS 与 Nunjucks 模板使用）：

以 Meant4 为例：region: worldwide表示面向全球招聘，档案正文的## Region一节也写明 "Worldwide"；remote_policy: hybrid对应"混合办公"标签，与正文## Remote status中"可以在家或办公室办公"的描述一致；company_size: small对应 11-50 人规模段，与正文## Company size的 "20-40" 吻合。

技术栈：technologies 列表

technologies是数组字段，Meant4 声明了 6 项：cloud、go、javascript、mobile、php、python。这些值同样必须在 src/_data/labels.js 的tech映射表中存在，渲染时会显示为对应的技术标签（Cloud、Go、JavaScript、Mobile、PHP、Python）。正文## Company technologies一节的原始描述（Python、PHP、Go、Node.js、Vue.js、Django、Flutter、Google Cloud、AWS、Drupal）是对技术栈的更细粒度补充，而前置元数据中的 6 个规范化值才是驱动目录技术标签聚合的依据。

时间戳：addedAt 与 updatedAt

addedAt: 2024-10-25与updatedAt: 2025-01-24分别表示条目加入目录和最近更新的日期。按 CONTRIBUTING.md 的说明，这两个日期字段由维护者管理，贡献者提交 PR 时不应自行添加。它们有两个实际用途：

• src/_config/collections.js 中的getRecentCompanies按addedAt倒序筛出最近加入的 12 家公司；
• src/_layouts/company.njk 页面底部通过updatedAt | formatDate('MMMM D, YYYY')显示 "Last updated" 信息。

Markdown 正文：必需区块与可选区块

按 CONTRIBUTING.md 的规定，档案正文必须包含三个##区块：## Company blurb、## Remote status、## How to apply；## Company size、## Region、## Company technologies为常用可选区块。Meant4 档案完整覆盖了全部六个区块。

Company blurb：公司简介

We empower our partners by providing a clear and cutting-edge process for creating digital software solutions that, speak for themselves enabling businesses to reach their objectives swiftly, securely, and effectively. We specialize in cloud development and IT consulting.

这段简介同时承担另一个技术职责：在 src/companies/companies.11tydata.js 中，Eleventy 的 Computed Data 会通过正则##\s*Company\s*blurb\s*\n+([\s\S]*?)(?=\n##|$)提取该区块文本，剥离 Markdown 链接语法、去除* _ \`` 字符、压缩空白，最终截断到约 155 字符，自动生成为公司页面的 meta description。因此，## Company blurb` 的质量直接影响该档案在搜索引擎结果中的摘要呈现。

Remote status：远程政策说明

Possibility to remote work - Get things done - from home or an office. There are employee meetups & events to promote culture

这一节说明公司的远程工作模式（允许远程、在家或办公室皆可），并补充企业文化活动（员工聚会与线下活动）。它与前置元数据remote_policy: hybrid相互印证：Hybrid 标签即表示"部分远程"。

Company size / Region / Company technologies

• ## Company size：20-40，即团队规模；
• ## Region：Worldwide，招聘区域覆盖全球；
• ## Company technologies：完整列出技术栈，包括 Python、PHP、Go、Node.js、Vue.js、Django、Flutter、Google Cloud、AWS、Drupal；
• ## Office locations：总部位居波兰华沙（Warsaw, Poland）。

How to apply：应聘入口

Career Opportunities at Meant4

该区块提供应聘方式链接（指向 Meant4 的招聘页）。在详情页渲染中，src/_layouts/company.njk 会优先使用careers_url生成 "Apply Now" 主按钮；Meant4 档案未设置careers_url，因此按钮回退为website字段并显示 "Visit Website"，访客可从该入口进入招聘页。

从档案到页面：完整的渲染链路

一份公司档案从 Markdown 到最终 HTML 的流转路径如下：

1. 布局指派：src/companies/companies.json 为src/companies/下所有档案指定layout: company；
2. 集合聚合：src/_config/collections.js 通过getFilteredByGlob('./src/companies/**/*.md')收集全部公司，并提供按字母排序的getAllCompanies、按addedAt排序的getRecentCompanies、按 region/technology 分组的getCompaniesByRegion/getCompaniesByTech等派生集合；
3. 标签体系：同文件中的getCompanyTags将每个公司的technologies、region、remote_policy聚合为可浏览的标签页数据，标签文案取自 src/_data/labels.js（经由 src/_data/companyHelpers.js 的regionLabels、remotePolicyLabels、techLabels导出）；
4. 详情页渲染：src/_layouts/company.njk 将title渲染为页首标题，region、remote_policy渲染为带跳转链接的标签，technologies渲染为 "Tech Stack" 技术标签区，updatedAt渲染为底部更新时间，正文内容通过{{ content | safe }}注入；
5. 目录页展示：src/pages/companies.njk 遍历collections.companies渲染公司卡片网格，并支持按data-region做客户端筛选，region: worldwide的公司会落入 "Worldwide" 筛选选项之下。

总结：如何用这份档案作为新条目模板

Meant4 档案麻雀虽小、五脏俱全，是编写新公司条目的理想参照：

• 前置元数据必须包含title、slug（与文件名一致）、website、region、remote_policy、company_size、technologies，取值需符合 CONTRIBUTING.md 的字段约束表；
• 正文必须包含## Company blurb、## Remote status、## How to apply三个必需区块，并按需补充## Company size、## Region、## Company technologies、## Office locations；
• ## Company blurb会被自动截断为页面的 meta description，应保证开头部分信息完整、适合检索；
• 归档后可通过npm run build验证构建，再提交 PR 由校验机器人检查格式（详见 CONTRIBUTING.md 的 Validation 一节）。

理解这份档案的数据结构，就等于掌握了 remoteintech 目录中所有公司条目的组织方式——每新增一家远程友好公司，都是在为这个社区维护的目录补充一个标准化的、可搜索、可筛选、可被搜索引擎收录的数据点。

• 数据集