数据集【免费下载链接】remote-jobsSource for remoteintech.company — a community-maintained directory of remote-friendly tech companies项目地址https://gitcode.com/GitHub_Trending/re/remote-jobs点击查看免费下载本文以 src/companies/stencil.md 这份公司档案为切入点系统讲解 remote-jobsRemote In Tech仓库中公司档案的 Frontmatter 字段体系、Markdown 正文规范以及从数据源到公司档案页面的完整渲染链路。读完本文你将掌握如何阅读、验证并新增一份符合社区规范的公司档案也能理解目录分类、标签聚合与 SEO 元描述背后的源码实现。一、档案主体Stencil 这家远程公司是谁stencil.md是 remote-jobs 目录中约 800 家远程友好科技公司档案之一其正文开篇即给出了这家公司的定位## Company blurbRidiculously simple image creation for social media marketers, bloggers and small businesses.Stencil 面向社交媒体营销人员、博主和小型企业提供简单到夸张的图片创作服务。从该档案其余小节可以完整还原这家公司的画像维度档案中的值含义公司规模## Company size0-5微型团队Frontmatter 中对应company_size: tiny即 1-10 人远程状态## Remote statusHQ 位于多伦多但全员远程日常靠 Slack 协作Frontmatter 中对应remote_policy: fully-remote招聘区域## Region优先考虑美国大陆和加拿大东部时区EST的雇员也开放国际申请Frontmatter 中对应region: other技术栈## Company technologiesJavascript, Canvas, HTML5, AWSFrontmatter 中映射为cloud、javascript、ml三个标签办公地点## Office locationsToronto, Canada与总部在多伦多呼应申请方式## How to apply邮件发送至 hellogetstencil.com主题注明 Remote Customer Support Specialist Position无独立 careers 页采用邮件直投值得注意的细节是档案的 Frontmatter 中addedAt: 2017-10-06、updatedAt: 2018-04-16记录了这条档案的录入与最后维护时间这也是后文将讲到的最近更新展示与近期公司聚合的数据来源。二、Frontmatter 字段体系档案的数据骨架Stencil 档案的 YAML Frontmatter 是理解整个目录数据模型的最佳样本--- title: Stencil slug: stencil website: https://getstencil.com region: other remote_policy: fully-remote company_size: tiny technologies: - cloud - javascript - ml addedAt: 2017-10-06 updatedAt: 2018-04-16 ---这份结构在 CONTRIBUTING.md 中有完整的官方模板与取值约束核心字段及其合法值如下字段作用合法取值title公司显示名任意字符串slug档案文件名与 URL 标识必须与src/companies/{slug}.md文件名一致website公司官网有效 URLcareers_url招聘页可选必须指向公司自己的招聘页而非卖服务页region招聘覆盖区域worldwide、americas、europe、americas-europe、asia-pacific、otherremote_policy远程政策fully-remote、remote-first、hybrid、remote-friendlycompany_size规模档位tiny(1-10)、small(11-50)、medium(51-200)、large(201-1000)、enterprise(1000)technologies技术标签列表javascript、typescript、react、nodejs、python、ruby、go、java、php、rust、dotnet、elixir、scala、swift、cloud、devops、docker、kubernetes、mobile、data、ml、sql、postgres、nosql、searchaddedAt/updatedAt录入与更新时间由维护者管理贡献者 PR 中不应包含从源码结构看这些枚举值的单一事实来源位于 src/_data/labels.js其中定义了region、remotePolicy、companySize、tech四组键值映射例如fully-remote: Fully Remote、tiny: 1-10 employees、ml: ML/AI。这套映射同时服务于两个消费方JavaScript 侧通过 src/_data/companyHelpers.js 重新导出供集合逻辑使用模板侧则通过全局数据级联以labels.*形式参与渲染。这意味着 Stencil 档案中的region: other、remote_policy: fully-remote、company_size: tiny最终会在页面上分别呈现为 Other、Fully Remote、1-10 employees 这样的可读标签。Markdown 正文的必备小节Frontmatter 之外正文必须包含三个##标题小节见 CONTRIBUTING.md## Company blurb—— 公司简介Stencil 档案即用一句话描述了产品定位## Remote status—— 远程工作方式Stencil 明确全员远程 Slack 协作## How to apply—— 申请入口Stencil 给出邮件主题约定。## Company size、## Region、## Company technologies、## Office locations为常见可选小节Stencil 档案全部覆盖是结构相当完整的范本。三、渲染链路一份 Markdown 如何变成公司档案页3.1 集合Collection层档案如何被聚合与分类src/_config/collections.js 是所有公司档案的汇聚点。核心集合getCompanies通过collection.getFilteredByGlob(./src/companies/**/*.md)一次性拾取全部公司档案该 glob 结果在构建时被缓存避免对约 800 条记录重复过滤并在此基础上派生出多个子视图getAllCompanies—— 按title字母序排序的全量列表getFeaturedCompanies—— 从手工精选的featuredCompanySlugssrc/_data/companyHelpers.js含 automattic、stripe、netlify、github 等中随机抽取 8 家展示在首页getRecentCompanies—— 按 Frontmatter 中的addedAt字段倒序取最近 12 家即最近新增板块的数据来源getCompaniesByRegion/getCompaniesByTech—— 分别按region与technologies字段分组。getCompanyTags进一步把每条档案的title、slug、website、region、remote_policy抽取成轻量对象按技术 / 区域 / 远程政策三种类型聚合成带count计数的标签数据。Stencil 的region: other、remote_policy: fully-remote、technologies: [cloud, javascript, ml]正是通过这些逻辑进入按区域浏览、按政策浏览、按技术浏览等聚合页面的。3.2 布局层company.njk 如何呈现档案每份公司档案使用layout: company实际模板为 src/_layouts/company.njkcompanies.json中统一指定。该模板按顺序渲染页头返回链接、公司名{{ title }}、主按钮 —— 若 Frontmatter 声明了careers_url则显示 Apply Now否则退化为 Visit WebsiteStencil 未提供 careers_url故按钮指向其官网三个分类标签 —— 区域标签链接到/browse/{region}/、远程政策标签链接到/browse/{remote_policy}/文案分别来自labels.region与labels.remotePolicyMarkdown 正文{{ content | safe }}Tech Stack 区块 —— 若technologies非空将每个技术渲染为链接到/browse/{tech}/的标签Stencil 会展示 Cloud、JavaScript、ML/AI 三个标签页脚 —— Back to All Companies 与 Edit on GitHub 按钮以及基于updatedAt的 Last updated 时间戳。这套模板印证了目录的核心理念档案作者只需维护 Markdown 数据所有导航、标签、聚合与页面结构均由模板层统一生成。3.3 元数据层SEO 描述自动生成src/companies/companies.11tydata.js 为每份档案计算description元描述优先使用已有description否则从正文中正则匹配## Company blurb之后的段落剥离 Markdown 语法链接转为纯文本、去除 *_、换行与多余空格合并再按约 155 字符截断优先在句号处断句其次在空格处并补省略号。Stencil 的 blurb 恰好一句话且长度适中因此其元描述会直接采用该句原文——这是档案内容直接驱动 SEO 元信息的典型例子。四、实战验证档案的构建与合规检查4.1 本地构建验证根据 README.md在 Node.js 22 环境下可以这样验证档案可正常构建npm install # 安装依赖 npm run build # 生产构建验证全部档案可编译 npm run start # 本地开发服务器热更新用于预览单份档案页面4.2 贡献者视角新增一份档案的完整流程如果你要仿照 Stencil 档案为另一家公司提交条目CONTRIBUTING.md 给出的流程是在src/companies/{slug}.md新建文件slug必须与 Frontmatter 中的slug值一致填写 Frontmatter沿用上文模板并撰写正文必需小节本地运行npm run build确认构建通过提交 Pull Request —— 触碰公司档案的 PR 会被 Validate Company Profiles GitHub Action 自动校验机器人会在 PR 评论区指出字段取值、格式或内容问题未解决前合并会被阻断。同时需要注意目录的收录边界只收录半远程到全远程的技术公司要求贡献者能核实信息、公司直接雇佣员工、提供真实的远程岗位佣金制或纯独立承包销售的岗位不算、careers_url必须指向公司自己的招聘页。Stencil 档案符合直接雇佣 完全远程 邮件申请的收录形态是一份合规样本。五、小结一份档案承载的完整信息流回顾 Stencil 这份档案可以梳理出一条从数据到页面的完整链路src/companies/stencil.md │ Frontmattertitle/slug/website/region/remote_policy/company_size/technologies/addedAt/updatedAt │ Markdown 正文blurb / size / remote status / region / technologies / office locations / how to apply ▼ collections.jsglob 拾取、分组、排序、标签聚合 ▼ companyHelpers.js / labels.js枚举值 → 可读文案 ▼ companies.11tydata.js自动生成 155 字 meta description ▼ company.njk页面结构 导航 分类标签 Tech Stack 区块 ▼ 公司档案页 / 浏览聚合页 / 首页推荐 / sitemap对读者而言掌握这份字段体系即可快速读懂目录中任意一家公司的档案对贡献者而言它则是一份可直接对照复用的数据建模范本。如果你想继续深入可以查看 src/_config/collections.js 的聚合逻辑、src/_data/labels.js 的标签映射或 src/_layouts/company.njk 的页面模板验证本文所述的每一处实现细节。赞分享数据集【免费下载链接】remote-jobsSource for remoteintech.company — a community-maintained directory of remote-friendly tech companies项目地址https://gitcode.com/GitHub_Trending/re/remote-jobs点击查看免费下载相关推荐Intellum 公司档案全解remote-jobs 目录中远程友好公司的数据字段与渲染链路剖析Intellum 公司档案全解remote jobs 目录中远程友好公司的数据字段与渲染链路剖析 导读 本文以开源远程职位目录 remote jobs 中的数据集解析 Andela 远程公司档案remote-jobs 目录中 fully-remote 公司条目的数据模型与渲染链路解析 Andela 远程公司档案remote jobs 目录中 fully remote 公司条目的数据模型与渲染链路 Andela 是 remoteinte数据集remote-jobs 公司档案深度解析以 Marketade 为例解读远程友好公司的数据建模与渲染链路remote jobs 公司档案深度解析以 Marketade 为例解读远程友好公司的数据建模与渲染链路 导读 本文以 Marketade 公司档案 http数据集上一篇猫抓浏览器扩展终极指南三步轻松提取任何网页视频音频下一篇Gogh项目文档版本历史跟踪内容更新记录创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考