Infinite Red 公司档案解读：remoteintech/remote-jobs 中远程公司目录的数据结构与站点渲染

数据集【免费下载链接】remote-jobsSource for remoteintech.company — a community-maintained directory of remote-friendly tech companies项目地址https://gitcode.com/GitHub_Trending/re/remote-jobs点击查看免费下载remoteintech/remote-jobsRemote In Tech是一个社区维护的远程友好型科技公司目录它以 Markdown 公司档案文件为数据源经 Eleventy 静态站点生成器渲染为可浏览、可检索的公司页面。本文以 Infinite Red 档案 为完整实例拆解一份公司档案的 frontmatter 字段与正文章节的语义、合法取值与底层处理逻辑并结合 labels.js、collections.js、company.njk 等源码说明这些字段如何被解析、归类、渲染与索引。读完本文你将掌握该仓库公司档案的完整数据模型、如何解读任意一份.md档案以及如何按规范为目录新增或修正公司条目。档案文件概览一份公司档案长什么样在src/companies/目录下每一家公司对应一个slug.md文件slug 必须与 frontmatter 中的slug字段一致。Infinite Red 的档案文件位于 src/companies/infinite-red.md其结构分为两部分YAML frontmatter元数据区由---包裹存放结构化字段供站点程序化消费Markdown 正文以##二级标题组织的人类可读章节包括Company blurb、Company size、Remote status、Region、Company technologies、Office locations、How to apply。这种结构化元数据 自由正文的双层设计是理解整个仓库的关键frontmatter 决定公司如何被排序、筛选、打标签和生成 meta 描述正文则决定页面上展示给访客的具体内容。Frontmatter 字段逐项拆解语义与合法取值以 Infinite Red 档案的 frontmatter 为例--- title: Infinite Red slug: infinite-red website: https://infinite.red region: americas remote_policy: fully-remote company_size: small technologies: - dotnet - elixir - javascript - ml - mobile - ruby addedAt: 2019-06-11 updatedAt: 2019-06-11 ---各字段的含义与约束如下合法值以 labels.js 为单一事实来源字段作用Infinite Red 取值合法取值来自 labels.jstitle公司显示名称用于页面标题与排序Infinite Red任意字符串slug公司唯一标识决定文件名与 URLinfinite-red须与文件名slug.md一致website官网地址作为Visit Website按钮与 schema.org 的urlhttps://infinite.red任意合法 URLregion招聘覆盖地区生成地区标签并用于按地区分组americasworldwide、americas、europe、americas-europe、asia-pacific、otherremote_policy远程工作政策生成政策标签fully-remotefully-remote、remote-first、hybrid、remote-friendlycompany_size员工规模区间smalltiny(1-10)、small(11-50)、medium(51-200)、large(201-1000)、enterprise(1000)technologies技术栈标签列表驱动按技术浏览6 项见下见 CONTRIBUTING.md 中列出的 24 个受支持标签addedAt/updatedAt收录与更新时间驱动最近新增排序与页脚展示2019-06-11由维护者管理贡献者提交 PR 时无需填写需要特别注意的是technologies字段与正文Company technologies章节的区别前者必须是 labels.js 中定义的标准标签javascript、dotnet、elixir、ml、mobile、ruby等用于被 collections.js 的getCompaniesByTech归类而正文中的技术列表是自由文本供人类阅读Infinite Red 正文还列出了 Rails、Phoenix、React、React Native、Web Assembly、C# 等未进入标准标签体系的更细粒度技术。正文章节解读七段式公司介绍模板Infinite Red 档案正文完整覆盖了仓库约定的必要章节Company blurb公司简介必填一行概括——Were an app design and development team for mobile and web。这段文本不只是展示用还会被自动提取为页面 meta description见下节。Company size公司规模30ish与 frontmatter 的small11-50 人区间标签相互印证——frontmatter 提供可枚举区间用于筛选正文提供精确描述。Remote status远程政策说明必填明确宣称100% Remote并给出公司关于远程实践的博客订阅入口佐证 frontmatter 中remote_policy: fully-remote的判定依据。Region地区说明面向 US and Canada freelancers and employees与region: americas对应同时明确表达不接受外包分包NO SOLICITING但欢迎双向合作的边界立场。Company technologies技术栈列出 JavaScript、Rails、Elixir、Phoenix、React、React Native、ML、Web Assembly、C# 九项。Office locations办公地点100% Remote重申无实体办公室。How to apply申请方式必填通过社区 Slackcommunity.infinite.red联系 CEO。按照 CONTRIBUTING.md 的约定Company blurb、Remote status、How to apply是必要章节其余为常用可选章节——Infinite Red 档案是模板的完整示范。从 Markdown 到页面渲染管线中的三个关键环节1. 自动生成 meta descriptioncompanies.11tydata.jssrc/companies/companies.11tydata.js 定义了公司页面的eleventyComputed数据其中description逻辑会若 frontmatter 未显式设置description则用正则/##\s*Company\s*blurb\s*\n([\s\S]*?)(?\n##|$)/i从原始 Markdown 中截取## Company blurb标题后的段落剥离 Markdown 链接语法text、*、_、等标记将换行与多余空格压缩为单个空格截断至 155 字符左右优先在句号处断句否则在空格处断并追加...。对 Infinite Red 而言其 blurb 很短33 字符因此整句 Were an app design and development team for mobile and web 会原样成为该页面的 meta description。这意味着## Company blurb章节的文案质量直接影响搜索引擎结果页SERP的摘要属于档案中兼具人读与机读的关键字段。2. 页面骨架与标签渲染company.njk 与 companies.jsonsrc/companies/companies.json 仅声明layout: company使所有公司档案统一套用 src/_layouts/company.njk 布局。该布局将 frontmatter 字段映射为页面 UI存在careers_url时按钮文案为 Apply Now否则为 Visit Website链接指向website并带relnoopener noreferrer与data-track-outbound外链追踪属性region渲染为地区标签指向/browse/region/标签文案取自 labels.js 的region映射americas→ Americasremote_policy渲染为政策标签指向/browse/remote_policy/fully-remote→ Fully Remotetechnologies非空时输出## Tech Stack区块每个标签链接到/browse/tech/文案取自labels.tech如dotnet→ .NET、ml→ ML/AI页脚显示Last updated: {{ updatedAt | formatDate(MMMM D, YYYY) }}因此updatedAt字段驱动页面上最后更新时间的呈现。同时src/_includes/schemas/Organization.njk 会基于title、website、careers_url输出 schema.org 的OrganizationJSON-LD 结构化数据帮助搜索引擎理解公司实体。对 Infinite Red 而言即生成name: Infinite Red、url: https://infinite.red的机构标记。3. 集合归类与浏览页检索collections.js 与 companies.njksrc/_config/collections.js 从./src/companies/**/*.md一次性加载全部公司档案并带缓存再派生出多种视图getAllCompanies按title的 localeCompare 字典序排序供All Companies列表使用getCompaniesByRegion按region字段将公司分组Infinite Red 落在americas组getCompaniesByTech遍历每家公司的technologies数组进行归类Infinite Red 会同时出现在 dotnet、elixir、javascript、ml、mobile、ruby 六个技术分组中getCompanyTags汇总三类标签technology/region/remote-policy并附带每组的公司明细与数量getRecentCompanies按addedAt降序取最近 12 家用于首页最近收录模块——addedAt缺失的公司不会出现在该列表。在 src/pages/companies.njk 的浏览页中data-region{{ company.data.region | default(other) }}把region写进 DOM 属性供前端按地区下拉筛选同时集成 Pagefind 对页面全文做静态搜索。可以看到region与technologies两个字段共同构成了目录最核心的两条浏览维度。依样画葫芦如何为目录新增一份档案按照 CONTRIBUTING.md 的流程新增公司只需四步在src/companies/创建slug.md→ 填写 frontmatter 与正文 → 运行npm run build验证构建 → 提交 PR。其中需要遵守的规则包括frontmatter 采用 CONTRIBUTING.md 提供的模板slug与文件名严格一致目录只收录半远程到全远程、且直接雇佣员工的科技公司careers_url必须指向公司自有招聘页而非服务销售页addedAt/updatedAt由维护者管理贡献者不要自行添加PR 会自动触发 Validate Company Profiles 工作流校验不合规条目会被机器人拒绝合并。Infinite Red 档案2019-06-11 收录正是这套规范下的完整产物frontmatter 字段全部落在合法取值内七个正文章节齐全远程政策、地区、规模、技术栈均与正文描述相互印证。总结一份档案 结构化数据 可读叙事通过 Infinite Red 这条实例可以清晰地看到 remoteintech/remote-jobs 的档案设计哲学frontmatter 是机器的接口承载可枚举、可归类、可排序的规范字段region、remote_policy、company_size、technologies经由 labels.js 的标签映射、collections.js 的集合派生和 company.njk 的布局渲染自动生成带标签、带结构化数据、可被 Pagefind 检索的公司页面正文则是人的接口用 Company blurb、Remote status、How to apply 等章节承载自由叙述其中 blurb 还会被 companies.11tydata.js 自动加工为搜索引擎摘要。理解这套双层模型后无论是解读目录中任意一家公司如 Infinite Red 的全远程、美洲地区、小型团队、跨多技术栈画像还是按 CONTRIBUTING.md 提交新公司条目都能做到准确、规范、一次通过。赞分享数据集【免费下载链接】remote-jobsSource for remoteintech.company — a community-maintained directory of remote-friendly tech companies项目地址https://gitcode.com/GitHub_Trending/re/remote-jobs点击查看免费下载相关推荐从 GitPrime 档案看 remote-jobs 远程公司档案的数据结构与站点渲染从 GitPrime 档案看 remote jobs 远程公司档案的数据结构与站点渲染 src/companies/gitprime.md 是 Remote I数据集解析 Andela 远程公司档案remote-jobs 目录中 fully-remote 公司条目的数据模型与渲染链路解析 Andela 远程公司档案remote jobs 目录中 fully remote 公司条目的数据模型与渲染链路 Andela 是 remoteinte数据集解读 Fyle 远程公司档案remote-jobs 仓库中 remote-first 公司资料的结构、字段与渲染原理解读 Fyle 远程公司档案remote jobs 仓库中 remote first 公司资料的结构、字段与渲染原理 Fyle 是一家以远程优先remote数据集上一篇一文读懂DeepSeek R1革命性推理模型的工作原理与创新点下一篇virtual-dom 版本演进与关键机制解析从 keyed 节点重排到 Patch 格式的完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考