★ FEATURED ARTICLE 【免费下载链接】30-seconds-webWebsite infrastructure for 30-seconds projects.项目地址https://gitcode.com/gh_mirrors/30/30-seconds-web点击查看免费下载30-seconds-web 是 30-seconds 系列30s.js、30s.py 等的官网基础设施项目它用 Astro 实现了一条JSON 驱动动态路由的静态生成构建流水线先把 Markdown/YAML 内容提取成 JSON 数据集再让 Astro 动态路由从页面级 JSON 文件中读取路由参数最终批量生成成千上万个静态页面。本文带你快速看懂这条流水线的设计思路。流水线总览两阶段构建整个构建由package.json中的两个 npm script 组成理解它们就理解了全局阶段命令作用① 数据准备npm run prebuild→ build.js提取内容 → 生成页面 JSON 及附属文件② 页面生成npm run build→astro buildAstro 读取页面 JSON经动态路由渲染出静态 HTMLcontent/*.md、*.yaml │ ▼ Extractor 提取数据 │ ▼ jsiqle 数据集Snippet / Collection / Language / Author │ ▼ Writers 并行写出页面 JSON、资源、搜索索引、sitemap…… │ ▼ Astro 动态路由getStaticPaths 读取 JSON │ ▼ dist/ 静态站点关键点页面路由长什么样完全由 JSON 决定而不是在.astro模板里写死。第一步Extractor 把内容变成数据集extractor/index.js 负责扫描content/目录下的原始内容snippet代码片段snippets/**/s/*.md由 Markdown 提取 front-matter、标题、标签、正文与代码块collection集合collections/**/*.yaml中的配置支持按typeMatcher、languageMatcher、tagMatcher等条件匹配片段languages、authors来自languages/*.yaml与authors.yamlcollectionsHub来自hub.yaml定义集合列表页等枢纽页面。提取结果统一写成一个content.json数据集再装载进 jsiqle 内存数据集见 application.js 的populateDataset()。这一步的意义在于内容Markdown/YAML与结构数据集模型解耦模板层只消费结构化数据。其中模型层按职责分文件定义如 snippet.js、collection.js页面级模型放在 models/pages/ 目录下。第二步页面模型 序列化器生成页面 JSON这是JSON 驱动的核心。每个页面模型定义了params路由参数和props页面数据两个属性序列化器把它们打包成 JSON。以片段详情页为例snippetPage.js 中params: page { const segments page.slug.slice(1).split(/); return { lang: segments[0], snippet: segments.slice(-1)[0], }; }一个 slug 就能同时解析出lang和snippet两个路由参数。随后 pageSerializer.js 将记录序列化pageWriter.js 按动态路由同名规则落盘三个 JSON 文件.content/pages/index.json→ 首页.content/pages/[lang]/[...listing].json→ 所有集合列表页含分页.content/pages/[lang]/s/[snippet].json→ 所有片段详情页文件路径与src/pages/下的路由模板一一对应JSON 的 key 即路由参数值。第三步Astro 动态路由读取 JSON 生成页面到这一步才轮到 Astro 出场。动态路由文件 [lang]/s/[snippet].astro 通过getStaticPaths()读取同名 JSONexport async function getStaticPaths() { const pageData await fs .readFile(pagePath, utf8) .then(JSON.parse); return Object.values(pageData); }返回数组中每一项的params决定生成哪个 URLprops直接作为Astro.props渲染页面。列表路由 [...listing].astro 使用 Astro 的rest 参数listing: params.listing.join(/)一个模板即可匹配/js/p/2、/articles等任意深度的集合路径。也就是说数据层新增一条记录、重建 JSON Astro 侧零改动就会多出一个页面。附属 Writers一条 Promise.all 并行产出build.js 在初始化数据集后并行执行所有 writer定义在 writers/ 目录AssetWriterassetWriter.js用 sharp 压缩封面图、生成 webp 与多尺寸图标SearchIndexWritersearchIndexWriter.js输出public/search-data.json供站内搜索组件 Omnisearch 使用SitemapWritersitemapWriter.js汇总所有页面 slug用 Handlebars 模板生成sitemap.xmlFeedWriter / RedirectsWriterRSS 源与重定向文件。所有 writer 都从同一个 jsiqle 数据集读取数据天然保证 sitemap、搜索索引与页面 JSON 一致。小结这套模式值得借鉴数据与渲染分离prebuild 阶段产出页面 JSON 契约Astro 只负责渲染职责清晰JSON 文件名即路由规则.content/pages/[lang]/s/[snippet].json与路由模板同名一眼可查路由参数由模型推导params/props在模型层定义模板层无需关心 slug 如何拆分附属产物同源sitemap、搜索索引、重定向共用一个数据集避免数据漂移。想动手体验可按 CONTRIBUTING.md 克隆仓库后运行npm run dev开发模式或npm run build观察.content/目录下生成的 JSON 与最终dist/页面的对应关系。赞分享【免费下载链接】30-seconds-webWebsite infrastructure for 30-seconds projects.项目地址https://gitcode.com/gh_mirrors/30/30-seconds-web点击查看免费下载相关推荐Astro路由终极指南动态页面与静态生成的无缝实现Astro路由终极指南动态页面与静态生成的无缝实现 Astro是一个现代化的Web框架能够构建从简单内容站点到复杂Web应用的各种项目。Astro路由系统是前端Web框架SSR前端构建WinUtil重新思考Windows系统管理的技术解决方案WinUtil重新思考Windows系统管理的技术解决方案 你是否曾遇到新电脑到手后需要花费数小时安装必备软件是否在系统优化时因复杂的注册表操作而望而却步桌面应用运维从Markdown到README自动生成30 Seconds of Interviews构建流水线与CI部署指南从Markdown到README自动生成30 Seconds of Interviews构建流水线与CI部署指南 30 Seconds of Intervie教程前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
