企业官网建设流程全解析

• 数据集

本篇技术指南以 remote-jobs（Remote In Tech）开源仓库中的 Graylog 公司档案 为研究对象，逐层拆解一份公司档案的完整构成：从 frontmatter 数据模型、字段取值约束，到 Markdown 内容如何被 Eleventy 编译渲染成可浏览、可检索的站点页面，再到元描述（meta description）的自动生成算法。读完本文，你将掌握在本仓库中新增、修改与验证公司档案的完整方法，并理解整个目录站点从数据到页面的真实渲染链路。

档案全景：Graylog 在目录中的完整呈现

Graylog 档案位于 src/companies/graylog.md，是一份符合 Remote In Tech 目录规范的标准公司档案。它由两部分组成：YAML frontmatter（结构化元数据）与 Markdown 正文（可读性描述），二者共同决定页面最终呈现的内容。

frontmatter 结构化数据一览

档案开头是一段 YAML frontmatter，完整内容如下：

--- title: "Graylog" slug: graylog website: https://www.graylog.org/ careers_url: https://www.graylog.org/careers region: worldwide remote_policy: fully-remote company_size: small technologies: - java - javascript - nosql addedAt: 2018-04-24 updatedAt: 2019-10-28 ---

逐个字段的语义如下：

Markdown 正文的五个核心小节

正文部分由五个##小节组成，涵盖了目录规范要求的全部必填与常用可选内容：

• Company blurb：一句话定位——"Graylog is an open source, centralized log management alternative to Splunk."，即开源、集中式日志管理平台，定位为 Splunk 的开源替代品；
• Company size：20-50 人（与 frontmatter 中company_size: small对应的 11-50 人档位一致）；
• Remote status：100% remote，即全员远程；
• Region：Worldwide，全球范围招募；
• Company technologies：Java、MongoDB、ReactJS/Javascript；
• Office locations：总部所在地为美国得克萨斯州休斯顿（Houston, TX）；
• How to apply：前往招聘页面，选择感兴趣的职位，填写页面底部的申请表提交申请。

正文中所有内容都是纯文本描述，不带任何 Frontmatter 之外的结构化元信息——这也正体现了该目录"Markdown 描述 + frontmatter 结构化"的双层设计哲学。

字段取值约束：数据模型的单一事实来源

档案中的region、remote_policy、company_size、technologies并非自由字符串，而是受控枚举。其取值定义统一集中在 src/_data/labels.js，该文件注释明确写着它是 "single source of truth"（单一事实来源），同时被 JavaScript 侧与 Nunjucks 模板侧消费。

各字段的合法取值如下：

• region：worldwide、americas、europe、americas-europe、asia-pacific、other；
• remote_policy：fully-remote、remote-first、hybrid、remote-friendly；
• company_size：tiny（1-10 人）、small（11-50 人）、medium（51-200 人）、large（201-1000 人）、enterprise（1000+ 人）；
• technologies：java、javascript、nosql、python、go、rust、kubernetes等 24 个预定义标签。

Graylog 档案使用的worldwide、fully-remote、small、java、javascript、nosql全部命中合法枚举，属于完全合规的档案。上述取值约束的权威说明位于 CONTRIBUTING.md 的 "Valid Field Values" 表格中，贡献者在提交新档案前应逐一对照。

此外，src/_data/companyHelpers.js 通过getRegionLabel、getRemotePolicyLabel、getCompanySizeLabel、getTechLabel四个函数将枚举值映射为人类可读文案（例如fully-remote→Fully Remote、small→11-50 employees），同时导出这些映射供集合模块与浏览页复用。

渲染链路：一份 Markdown 如何变成完整页面

Graylog 档案在站点中由 src/_layouts/company.njk 模板渲染。整个渲染链路如下：

1. 集合收集：src/_config/collections.js中的getAllCompanies通过getFilteredByGlob('./src/companies/**/*.md')收集所有公司档案并按标题字母序排序；getRecentCompanies按addedAt倒序取最近 12 家；getCompaniesByRegion与getCompaniesByTech则分别按地域与技术栈分组，Graylog 因此会同时出现在 "worldwide" 与 Java/JavaScript/NoSQL 三个技术浏览页中；
2. 模板渲染：company.njk使用data-track-outbound追踪外链点击，将careers_url或website渲染为申请按钮（careers_url存在时按钮文案为 "Apply Now"）；region、remote_policy、technologies分别渲染为三种视觉样式不同的 Tag，且每个 Tag 都链向对应的/browse/{value}/浏览页，形成跨档案的浏览网络；
3. 日期格式化：页脚通过 src/_config/filters/dates.js 中的formatDate过滤器（基于 dayjs）将updatedAt: 2019-10-28格式化为 "October 28, 2019" 这样的展示文案；
4. 全文检索：package.json中的build脚本在 Eleventy 构建完成后执行pagefind，对整个dist目录建立索引，因此 Graylog 档案会被 Pagefind 全文检索覆盖。

纵深原理：meta description 的自动生成算法

档案正文并未显式编写description字段，站点却能展示一段精炼的页面描述——这得益于 src/companies/companies.11tydata.js 中的eleventyComputed计算数据。其算法如下：

1. 若档案已显式设置description，直接采用，不做覆盖；
2. 否则用正则/##\s*Company\s*blurb\s*\n+([\s\S]*?)(?=\n##|$)/i从原始 Markdown 中抓取 "Company blurb" 小节之后的文本（Graylog 档案即命中此分支）；
3. 依次做清洗：把text链接剥离为纯文本、删除*、_、`等 Markdown 符号、把换行与多空格压平为单个空格；
4. 截断到约 155 字符：优先在句号处截断（若句号位置超过 155 的一半），否则在最后一个空格处截断并追加省略号，作为 SEO 友好的 meta description 输出。

以 Graylog 为例，blurb 文本 "Graylog is an open source, centralized log management alternative to Splunk." 长度不足 155 字符，因此会原样保留为完整描述——这条逻辑由data.page.rawInput提供输入，任何新增档案无需手工写 description 即可自动获得合规的元描述。

从档案到实站：Graylog 档案在目录中的角色

作为一份收录于 2018-04-24、最近更新于 2019-10-28 的档案，Graylog 在目录中承担三类作用：

• 可浏览节点：通过 region/remote_policy/technologies 三类 Tag 挂入浏览体系，用户可沿 "Fully Remote"、"Worldwide"、"Java" 等路径找到它；
• 可检索对象：被 Pagefind 索引后，用户可通过站内搜索直接命中；
• 可贡献模板：其结构与 CONTRIBUTING.md 给出的模板完全一致，是新增公司档案时可参照的规范样例。

实战：如何提交一份合规的 Graylog 同类档案

参照 CONTRIBUTING.md 与 Graylog 档案的既有形态，新增公司档案只需四步：

1. 在src/companies/下新建{slug}.md文件，slug必须与 frontmatter 中的slug值一致（如slug: graylog对应graylog.md）；
2. 按模板填充 frontmatter 与正文，正文必须包含## Company blurb、## Remote status、## How to apply三个小节，并按需补充## Company size、## Region、## Company technologies；
3. 运行npm run build（依赖 Node.js 22+，命令定义见 package.json）验证构建通过，build会依次执行清理、Eleventy 生产构建与 Pagefind 索引；
4. 提交 Pull Request，由 "Validate Company Profiles" GitHub Action 自动校验字段合法性与格式，机器人会在 PR 中列出问题并阻止合并直到修复。

需要特别留意：addedAt与updatedAt由维护者管理，贡献者不应在 PR 中自行包含；careers_url必须指向公司自己的招聘页而非售卖服务的页面；公司需提供真实的远程岗位且属于科技行业，否则档案可能被维护者拒绝。

小结

一份看似简单的 Graylog 档案，背后串联着 frontmatter 枚举约束、Eleventy 计算数据、Nunjucks 模板渲染、集合分组与全文索引的完整工程链路。理解 graylog.md 这份档案的写法，就等于掌握了 remote-jobs 目录中全部公司档案的数据结构与站点运行机制——无论你是想查阅一家公司是否适合远程求职，还是想为目录贡献新的公司档案，本文梳理的字段语义、渲染流程与构建验证步骤都能直接落地使用。

• 数据集