企业官网建设流程全解析

• 数据集

90 Seconds 是全球性视频创作平台，它的档案文件 src/companies/90-seconds.md 收录在 Remote In Tech（remoteintech.company）这一社区维护的远程友好科技公司目录中。本文将围绕这份档案，逐字段拆解其 frontmatter 元数据与 Markdown 正文的语义，并结合仓库中的标签定义、集合逻辑与页面模板，说明一份公司档案从数据到页面的完整落成过程，同时展示该样本所代表的"混合远程"（Hybrid）公司形态。

档案速览：frontmatter 里有哪些字段

90-seconds.md以 YAML frontmatter 开头，声明了这家公司在目录中被索引的全部结构化元数据。与 CONTRIBUTING.md 中给出的模板逐一对齐，字段如下：

其中region、remote_policy、company_size与technologies的取值均来自目录的唯一事实源 src/_data/labels.js，该文件同时被前端模板（以labels.*形式进入数据级联）和后端集合逻辑（经 src/_data/companyHelpers.js 导入）复用，保证标签口径一致。

Company blurb：90 Seconds 在做什么

正文第一部分## Company blurb是这样描述的：

90 Seconds 是全球视频创作平台，让世界最大的品牌可以在世界任何地方创作高质量、真实的视频；它通过简化视频制作的复杂性来变革视频生产方式。其独特技术——包括一整套端到端协作工具——帮助品牌将线下的视频拍摄连接并追踪回自动化的线上工作流。

这段简介不仅是页面正文，还会被自动加工为搜索引擎元描述：src/companies/companies.11tydata.js 中eleventyComputed.description会解析## Company blurb标题后的原始 Markdown，剥离链接语法与标记符号，压缩空白后截断到约 155 字符（优先在句号处截断），生成页面的 meta description。也就是说，blurb 写得好不好，直接影响目录页在搜索结果中的展示质量。

Remote status：'hybrid' 标签背后的真实工作形态

frontmatter 将remote_policy标记为hybrid（混合远程），正文## Remote status给出了更细的说明：

• 许多职位是远程友好的；
• 也有一部分职位需要在办公室办公；
• 每个职位的具体状态会随职位描述一并展示。

这种"大部分可远程、少部分驻场、具体以 JD 为准"的描述，与labels.js中remotePolicy对hybrid的定义（Hybrid）精确对应。当页面渲染时，src/_layouts/company.njk 会把remote_policy渲染为可点击的标签，并链接到/browse/hybrid/聚合页，让求职者可以一键浏览所有采用同一远程政策的公司。对于求职者而言，阅读此类档案时应以正文说明和具体职位描述为准，而不是仅看标签。

技术栈：frontmatter 与正文的两份清单

值得注意，该档案存在两处技术栈信息：

• frontmattertechnologies：java、javascript、php—— 这三个键必须落在 src/_data/labels.js 的tech白名单内（java、javascript、php均在列），用于目录侧的分类聚合与标签页跳转。
• 正文## Company technologies：列出React.js、Typescript、Java、C++、PHP—— 这是人类可读的完整栈说明。

两者互为补充：frontmatter 清单驱动/browse/{tech}/浏览页的归类（见 src/_config/collections.js 中getCompaniesByTech的实现），正文清单则给阅读者更全面的技术上下文。这也提示维护者：新增档案时两者都应同步更新，避免"标签可检索但正文遗漏"。

公司规模、地域与办公地点

• 规模：约 150 人（截至 2023-10-11 收录时），对应company_size: medium（51-200 人档）。
• 地域：region: worldwide，即全球范围招聘，labels.js中region.worldwide显示为 "Worldwide"。
• 办公地点：新加坡、伦敦、悉尼、旧金山、香港与奥克兰。六个城市横跨亚太与欧美，恰好佐证其"全球视频拍摄网络"的业务属性——线下拍摄遍布各地，而线上协作工作流则支撑远程岗位的运转。

在目录侧，src/_config/collections.js 的getCompaniesByRegion与getCompaniesByTech会依据region与technologies字段将该档案分别归入 "Worldwide" 地区组与相关技术组；getRecentCompanies则按addedAt倒序抽取最近入库的 12 家公司。换言之，frontmatter 中的每个枚举值都会直接决定该档案出现在目录的哪些聚合视图中。

How to apply：求职入口

正文## How to apply指向https://90seconds.com/about/careers/，与 frontmatter 中的careers_url一致。在渲染层，src/_layouts/company.njk 优先使用careers_url生成Apply Now主按钮（无careers_url时才回退为website的Visit Website按钮），并为其加上data-track-outbound与rel="noopener noreferrer"属性。对求职者而言，直接通过该按钮进入官方招聘页查看实时职位，是最可靠的路径——档案本身并不维护职位清单。

档案的完整生命周期：从 Markdown 到页面

一份像90-seconds.md这样的公司档案，在仓库中经历了清晰的流转：

1. 数据声明：frontmatter提供结构化字段，正文##小节提供叙述性内容；
2. 集合构建：src/_config/collections.js 通过getFilteredByGlob('./src/companies/**/*.md')收集全部公司档案，按名称排序生成getAllCompanies，并衍生出按地域、技术、最近新增、精选等集合；
3. 元描述生成：src/companies/companies.11tydata.js 从Company blurb自动计算 155 字符以内的 meta description；
4. 页面渲染：src/_layouts/company.njk 输出Organization结构化数据，渲染标题、申请按钮、region/remote_policy标签、正文与Tech Stack区块，并在页脚展示 "Last updated" 时间（来自updatedAt，经formatDate格式化）。

了解这一链条后，若你想为某家远程友好公司提交档案，可参照 CONTRIBUTING.md 的模板与取值表新建src/companies/{slug}.md，执行npm run build验证构建后提交 PR；addedAt/updatedAt由维护者管理，无需自行填写。

• 数据集