企业官网建设流程全解析

• 数据集

本篇指南以 src/companies/annertech.md 这份公司档案为主体，完整拆解其 frontmatter 元数据、正文各章节的内容与含义，并深入说明该档案在 Remote In Tech（remoteintech.company 的源代码仓库）中如何被构建、渲染、打标签与聚合检索。读完你不仅能掌握 Annertech 这家公司的远程招聘信息，还能学会如何以同样规范解读或贡献目录中的任意公司档案。

一、档案定位：目录中的一份标准公司 Markdown

Remote In Tech 是一个社区维护的远程友好科技公司目录，仓库根目录 README.md 明确说明：本仓库是该网站的源代码，每家公司对应 src/companies/ 下的一个 Markdown 文件，文件名即 slug（如annertech.md对应slug: annertech）。

Annertech 档案由两部分组成：

1. frontmatter（YAML 元数据）：机器可读的结构化字段，负责分类、标签、排序与检索；
2. Markdown 正文：以##标题组织的自然语言描述，负责向求职者展示公司背景与申请方式。

这种「元数据 + 正文」的双层结构是目录中所有公司档案的统一范式，也是 CONTRIBUTING.md 规定的贡献格式。

二、Frontmatter 元数据逐字段解析

Annertech 档案开头的 YAML frontmatter 如下（保留原文档全部字段）：

--- title: "Annertech" slug: annertech website: https://www.annertech.com careers_url: https://www.annertech.com/careers region: other remote_policy: remote-friendly company_size: small technologies: - api - devops - infrastructure - javascript - php - search - sql addedAt: 2022-09-20 updatedAt: 2022-10-10 ---

各字段含义与取值约束

枚举字段的「单一事实来源」

字段的合法取值集中在 src/_data/labels.js，它同时被 JavaScript（经 src/_data/companyHelpers.js 重新导出）和 Nunjucks 模板消费：

• region：worldwide（Worldwide）、americas、europe、americas-europe、asia-pacific、other（Other）。Annertech 使用other，其文案显示为「Other」。
• remote_policy：fully-remote、remote-first、hybrid、remote-friendly。Annertech 标记为「Remote Friendly」。
• company_size：tiny（1-10）、small（11-50）、medium（51-200）、large（201-1000）、enterprise（1000+）。

值得注意的一致性细节：本文档 frontmatter 的company_size为small（对应 11-50 人），而正文写的是「Between 50-250 employees」。这是档案内部口径的差异，从源码结构看，标签页与归档检索使用的是 frontmatter 字段值，因此实际按「Small / 11-50」归类展示；阅读时应以双方互相印证为准。

technologies字段对应 src/_data/labels.js 中的tech映射表，Annertech 声明了api、devops、infrastructure、javascript、php、search、sql七项，其中php、javascript、search（对应 Solr）、sql（对应 MySQL/MariaDB）、api（对应 Rest APIs）在正文技术清单中均有实据支撑，infrastructure与devops则与正文中的 Docker、Docksal、Platform.sh、Apache 等运维基础设施对应。

三、正文各章节：内容规范与信息解读

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

Company blurb（公司简介）

原文写道：Annertech 是一家总部位于都柏林的爱尔兰数字代理（digital agency），致力于交付富有雄心的数字体验，并为数字化转型项目提供工作成果。这段简介正是后续章节展开的纲领。

Company size 与 Remote status（规模与远程状态）

• 规模：50-250 名员工（如上一节所述，与 frontmatter 的small档存在口径差异）。
• 远程状态：原文明确「他们一直有遍布全球的远程工作岗位」（Remote working positions worldwide all the time），结合 frontmatter 的remote_policy: remote-friendly，可判定这是一家以远程友好为主、同时保留都柏林办公室的公司，而非全员强制远程。

Company technologies（完整技术栈清单）

原文列出的技术栈是档案的核心资产，必须完整继承：

PHP、Drupal、JavaScript、jQuery、Twig、Drupal Commerce、Platform.sh、Docker、Docksal、Apache、Solr、MySQL、MariaDB、Gitlab、Rest APIs

从技术结构可以推断这家公司的业务画像：以 PHP/Drupal 为内容管理底座，Twig 是 Drupal 8+/9+ 的默认模板引擎，Drupal Commerce 支撑电商类数字转型项目；开发与托管环境基于 Docker、Docksal（Drupal 本地开发环境工具）与 Platform.sh（云 PaaS 托管平台）；搜索与存储层采用 Solr、MySQL、MariaDB；Rest APIs 说明其交付项目普遍涉及前后端解耦或第三方系统集成。

Office locations 与 How to apply（办公地点与申请方式）

办公地点为爱尔兰都柏林 + 完全远程的职位；申请入口指向careers_url（公司官方招聘页）。这就是该档案希望读者最终采取的行动路径——直接访问招聘页获取最新职位。

四、档案如何变成可浏览、可检索的页面

这份 Markdown 不是静态死文件，而是被 Eleventy（11ty）构建管线动态消费的内容源。

布局与页面骨架

src/companies/companies.json 为所有公司档案声明了layout: company，指向 src/_layouts/company.njk。该模板完成的关键工作包括：

• 渲染公司名<h1>与「All Companies」返回链接；
• 依据careers_url（或回退website）生成「Apply Now」主按钮；
• 依据region、remote_policy生成区域标签与远程政策标签，并链接到对应的/browse/{region}/、/browse/{remote_policy}/归档页；
• 遍历technologies数组，为每项技术生成一个可点击的tag--tech标签（标签文案取自labels.tech），链接到/browse/{tech}/；
• 页脚使用formatDate过滤器（实现见 src/_config/filters/dates.js）将updatedAt格式化为「Last updated: October 10, 2022」的形式。

自动生成的 SEO 描述

src/companies/companies.11tydata.js 是公司档案的eleventyComputed数据处理器：它会在页面未显式设置description时，自动从## Company blurb章节提取正文、剥离 Markdown 语法，并截断到约 155 字符作为 meta description。也就是说，Annertech 档案的简介文本会直接演化为页面的搜索引擎描述——这也解释了为何档案正文质量直接影响站点的 SEO 表现。

结构化数据（Schema.org）

公司页面模板还引用了 src/_includes/schemas/Organization.njk，它会根据title、website、careers_url输出application/ld+json类型的 Organization 结构化数据，帮助搜索引擎与 Agent 精确识别公司实体及其招聘入口。

聚合、排序与分组检索

src/_config/collections.js 定义了档案的多种消费方式：

• getAllCompanies：按公司名排序生成完整目录；
• getRecentCompanies：按addedAt倒序取最近 12 家（Annertech 于 2022-09-20 录入，排序依赖该字段）；
• getCompaniesByRegion/getCompaniesByTech：按region与technologies分组，支撑/browse/归档页；
• getCompanyTags：聚合所有档案的technologies、region、remote_policy生成标签体系，供标签页展示每个标签下的公司列表与计数。

从源码结构看，用户按「Search / SQL / PHP」等技术标签浏览时，命中列表即来自对每个档案technologies字段的聚合——frontmatter 中 7 个技术标签的质量，直接决定公司在该浏览维度下的可发现性。

五、如何基于档案开展实践

求职者视角

1. 打开careers_url（公司官方招聘页）查看实时职位；
2. 对照region: other与正文「全球远程岗位」判断地理限制（结合公司政策标签「Remote Friendly」理解其远程程度）；
3. 对照技术栈清单评估自身技能匹配度（Drupal/PHP 经验是核心加分项）。

贡献者视角（以本文档为模板）

1. 新建src/companies/{slug}.md，slug须与文件名一致（参考 CONTRIBUTING.md 的 frontmatter 模板）；
2. 填齐title、slug、website、careers_url、region、remote_policy、company_size、technologies等字段，取值严格对照 src/_data/labels.js 的枚举；
3. 正文至少包含## Company blurb、## Remote status、## How to apply三个必要章节；
4. 运行npm run build（需 Node.js 22+）验证构建通过后提交 PR，维护者机器人会自动校验字段合法性并给出修改意见；
5. addedAt/updatedAt由维护者管理，PR 中不要填写。

六、小结

Annertech 档案是 Remote In Tech 目录中一个典型且完整的样本：frontmatter 提供机器可读的分类与标签（区域、远程政策、规模、技术栈），正文提供求职者需要的人文信息（简介、规模、远程状态、技术清单、办公地点、申请方式），二者经由 src/_layouts/company.njk 渲染为带标签与 Schema.org 数据的公司页面，再通过 src/_config/collections.js 的聚合逻辑进入目录、区域、技术标签等多个浏览入口。理解这份档案，就等于理解了整个目录的「最小数据单元」及其全链路流转方式。

• 数据集