尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

remote-jobs 仓库公司档案解析:以 Quantify 为例看远程友好公司目录的完整数据模型

remote-jobs 仓库公司档案解析:以 Quantify 为例看远程友好公司目录的完整数据模型 数据集【免费下载链接】remote-jobsSource for remoteintech.company — a community-maintained directory of remote-friendly tech companies项目地址https://gitcode.com/GitHub_Trending/re/remote-jobs点击查看免费下载导读本文以remote-jobs开源仓库中 Quantify 公司档案 为切入点逐字段拆解公司档案的 YAML frontmatter 数据模型并深入源码验证这些字段如何被 Eleventy 收集、索引、分组和渲染成可浏览的公司页面。读完本文你将掌握该公司目录的字段规范、合法取值、浏览页生成机制以及如何为自己的公司或开源项目复刻一套远程友好公司目录的数据层设计。一、档案全貌一份最小但完整的公司档案Quantify 档案 是remote-jobs仓库 800 份公司档案中典型的极简但完整示例。它的 Markdown 正文由五个##小节构成与仓库规定的档案正文结构完全一致## Company blurb—— 公司简介必填## Company size—— 公司规模可选## Remote status—— 远程工作政策说明必填## Region—— 招聘区域可选## How to apply—— 申请方式必填按照 CONTRIBUTING.md 的约定只有Company blurb、Remote status、How to apply三个小节是必填项其余如Company size、Region、Company technologies为常用可选小节。Quantify 档案恰好覆盖了全部六个小节是校验模板与真实提交完全对齐的样例。档案对应的实体信息Quantify 是一款面向使用 Jira 的 Agile 团队的全自动工时追踪time tracking解决方案同时提供 Kanban 指标如交付吞吐能力相关度量帮助团队改进服务交付能力产品通过 Atlassian Marketplace 分发。团队规模 1-10 人员工分布在加拿大和巴西当前处于 fully remote 状态。二、Frontmatter 数据模型每个字段的含义与合法取值档案头部是驱动整个站点数据层的关键。对照 CONTRIBUTING.md 中的字段规范表Quantify 档案的每个字段都可以在合法取值集合中找到归属字段Quantify 取值合法取值说明titleQuantify任意公司名页面 H1 与排序键slugquantify需与文件名一致决定生成路径与集合匹配websitehttps://quantifyhq.com任意 URL无careers_url时的 CTA 按钮地址careers_urlangel.co 公司页公司自有招聘页有值时按钮显示 Apply Nowregionworldwideworldwide/americas/europe/americas-europe/asia-pacific/other用于区域分组与标签remote_policyfully-remotefully-remote/remote-first/hybrid/remote-friendly决定远程政策标签company_sizetinytiny(1-10) /small(11-50) /medium(51-200) /large(201-1000) /enterprise(1000)按人数区间归档technologiescloud/javascript/ml见 labels.js 的 25 个枚举值支持多值数组addedAt/updatedAt2020-09-30由维护者管理驱动最近添加排序几个值得注意的细节technologies是严格的枚举Quantify 的cloud、javascript、ml三个值都落在 labels.js 的 25 个合法值之内。枚举之外的自定义值虽然在构建时不会报错但无法获得对应标签的规范化显示名会直接回退为原始值。region与remote_policy均使用枚举。worldwide在 labels.js 中映射为Worldwidefully-remote映射为Fully Remote见 labels.js这两个标签会同时出现在公司页头部与浏览browse页面。addedAt/updatedAt不要求贡献者提供。按 CONTRIBUTING.md 的说明这两个日期字段由维护者管理PR 中不应包含。Quantify 档案中二者取值相同2020-09-30即添加时同步记录更新。三、字段如何被消费从 frontmatter 到 HTML 页面3.1 元描述自动生成打开公司页面时浏览器标题栏下方的meta namedescription并不是手工维护的而是由 companies.11tydata.js 中的eleventyComputed.description自动生成。其流程是读取原始 Markdown 内容用正则/##\s*Company\s*blurb\s*\n([\s\S]*?)(?\n##|$)/i定位## Company blurb小节剥离 Markdown 链接语法text - text、清除*、_、反引号等标记压缩空白后截断到约 155 字符优先在句号处断句。对 Quantify 而言生成的 description 即来自 blurb 第一段——a fully automatic time tracking solution for Agile teams using Jira...这也是搜索引擎与 LLM 检索该档案时拿到的最核心元信息。3.2 集合与浏览页collections.js 是档案数据的中枢。它通过collection.getFilteredByGlob(./src/companies/**/*.md)collections.js一次性加载全部公司档案并从中派生出多套集合getAllCompanies按title字典序排序形成/companies/总目录页collections.jsgetCompaniesByRegion按region字段分组。Quantify 的worldwide会落入worldwide分组collections.jsgetCompaniesByTech遍历technologies数组做多对多分组Quantify 的cloud、javascript、ml三个值会同时出现在三个技术浏览页collections.jsgetRecentCompanies按addedAt降序取前 12 家用于首页最近添加区块collections.jsgetFeaturedCompanies从featuredCompanySlugs策展列表companyHelpers.js中随机抽取 8 家展示。也就是说region、remote_policy、technologies三个字段不仅是页面展示信息更是站点导航的索引键——修改任一字段浏览页分组会同步变化。3.3 页面渲染与标签公司页由 company.njk 布局渲染。模板逻辑清晰地展示了字段与 UI 的映射关系CTA 按钮careers_url优先否则回退websitecompany.njk。Quantify 档案有careers_url因此按钮文案为 Apply Now区域标签region映射为/browse/{region}/链接company.njk远程政策标签remote_policy映射为/browse/{remote_policy}/链接company.njk技术栈标签technologies数组逐个渲染为/browse/{tech}/标签company.njk。标签文案统一由 labels.js 提供并通过全局数据级联以labels.*形式注入模板JS 侧则经由 companyHelpers.js 重新导出同一份映射保证模板与逻辑层使用同一数据源single source of truth。四、从 Quantify 档案反推目录的设计原则4.1 枚举约束 vs 开放字段通过 Quantify 档案可以看出该目录的取舍凡是用于分组、筛选、SEO 标签的字段region、remote_policy、company_size、technologies全部使用枚举这样浏览页的分组有限且稳定而website、careers_url、title保持开放。设计上既保证了导航可用性又不限制内容的丰富度。4.2 远程政策分级remote_policy四档fully-remote/remote-first/hybrid/remote-friendly提供了一种可比较的远程程度刻度。Quantify 被标记为fully-remote与 GitHub 档案 的fully-remote同档但二者规模差异巨大tiny vs large说明远程政策与公司规模是两个正交维度浏览页允许用户按任一维度筛选。4.3 数据即导航Quantify 档案总行数仅 40 行却支撑起了公司详情页、区域浏览页worldwide、远程政策浏览页fully-remote、三个技术浏览页cloud / javascript / ml、首页最近添加列表、站点 sitemap。这正是本仓库数据驱动导航设计的精髓——一份档案 一次发布多处索引。五、如何为本仓库贡献一份 Quantify 式的档案若想参考 Quantify 档案向目录提交新公司遵循 CONTRIBUTING.md 的流程在src/companies/下新建{slug}.mdslug必须与 frontmatter 中的slug一致按模板填写 frontmatter正文必须包含## Company blurb、## Remote status、## How to apply三个小节本地运行npm run build验证构建通过提交 PR由 Validate Company Profiles GitHub Action 自动校验格式并给出问题反馈。开发环境要求 Node.js 22常用命令见 README.mdnpm run start启动带热重载的开发服务器npm run build执行生产构建。六、小结以 Quantify 为样本本文完整走通了一条公司档案从YAML frontmatter Markdown 正文到页面渲染 多维浏览索引的完整链路。核心要点可归纳为frontmatter 是数据模型的载体枚举字段region / remote_policy / company_size / technologies承担全部分组与检索职责companies.11tydata.js 自动从 blurb 生成 meta description降低内容维护成本collections.js 单次扫描所有档案派生区域、技术、最近添加、精选等多套集合company.njk 与 labels.js 共同完成标签化渲染保证展示与数据一致。无论你是想借鉴其数据模型搭建自己的远程岗位目录还是想以 Quantify 为模板提交一份新档案这份仓库都提供了从规范、校验到渲染的完整参照。赞分享数据集【免费下载链接】remote-jobsSource for remoteintech.company — a community-maintained directory of remote-friendly tech companies项目地址https://gitcode.com/GitHub_Trending/re/remote-jobs点击查看免费下载相关推荐remote-jobs 仓库公司档案深度解析以 IDoneThis 档案为例看远程友好公司的目录数据结构remote jobs 仓库公司档案深度解析以 IDoneThis 档案为例看远程友好公司的目录数据结构 remote jobsRemote In Tech数据集gogcli 实战使用 gog drive changes start-token 获取 Drive 变更起始页令牌gogcli 实战使用 gog drive changes start token 获取 Drive 变更起始页令牌 gog drive changes st数据集remote-jobs 公司档案解析以 Got SoccerGotPro为例的远程友好公司条目完整拆解remote jobs 公司档案解析以 Got SoccerGotPro为例的远程友好公司条目完整拆解 本篇技术指南以 src/companies/got数据集创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表