前端静态站点Web框架【免费下载链接】gatsbyReact-based framework with performance, scalability, and security built in.项目地址https://gitcode.com/gh_mirrors/ga/gatsby点击查看免费下载Gatsby 是构建在以 React 为底层的静态站点框架而从 Headless CMS 接入内容是它最核心的数据来源方式之一内容团队在熟悉的 CMS 后台写稿构建时由 source 插件把结构化数据拉入 Gatsby 的 GraphQL 数据层最终渲染成静态页面。本文以仓库中的 headless-cms.md 为主线系统讲解 Headless CMS 的概念、Gatsby 的 source 插件机制、主流与长尾 CMS 的集成矩阵并给出 Contentful、WordPress、Drupal、Netlify CMS、Kontent.ai 五个可复制、可运行的接入实战。Headless CMS 是什么与单体 CMS 的架构分野Headless CMS 是一类内容管理软件它让作者可以生产、组织和维护内容同时把结构化数据交给开发者由网站或 App 的前端系统去呈现这些数据。它与传统单体monolithicCMS的根本区别在于职责边界单体 CMS既负责内容的后台管理又负责把内容直接渲染并推送给终端用户前后端耦合在一个系统里通常还绑定具体模板与主题。Headless CMS与前端呈现完全解耦decoupled。内容以 API 形式对外提供前端可以用任何技术栈自由构建用户体验。很多传统 CMS 如今也支持headless / decoupled模式最典型的就是 WordPress 和 Drupal——它们依然是内容团队熟悉的后台但内容可以被 Gatsby 这类 JAMstack 站点消费。这正是 Gatsby 站点最常见的落地形态内容团队获得熟悉的编辑后台开发者获得构建静态站的性能、可扩展性与安全性。Gatsby 中headless的接入形态在 Gatsby 中接入一个无头 CMS 的标准方式是通过source 插件如gatsby-source-contentful、gatsby-source-wordpress等。仓库文档明确说明Gatsby 对几十种无头 CMS 提供开箱即用的支持接入后内容团队可以继续使用其偏好的后台界面。为什么 Headless CMS 与 Gatsby 是天然搭档Gatsby 的核心数据模型是构建时build time获取数据站点构建时一次性抓取所有内容编译为静态 HTML/JSON用户访问时不再需要向后端 CMS 发请求。这一机制在仓库的>exports.sourceNodes async ({ actions: { createNode }, createContentDigest, }) { // 构建时从外部 API 获取数据 const result await fetch(https://api.github.com/repos/gatsbyjs/gatsby) const resultData await result.json() // 创建节点使其进入 GraphQL 层 createNode({ nameWithOwner: resultData.full_name, url: resultData.html_url, // 以下是节点必填字段 id: example-build-time-data, parent: null, children: [], internal: { type: Example, contentDigest: createContentDigest(resultData), }, }) }创建完成后即可在页面查询query { example { nameWithOwner url } }理解这条链路后再看下面所有 CMS 的实战配置本质都是在配置用什么参数去拉数据 数据以什么类型名进入 GraphQL。主流 CMS 集成一览Gatsby 社区的一线选择以下是原文档列出的在 Gatsby 用户中流行度最高的一批 CMS。它们普遍支持**内容预览previews与增量构建incremental builds**等关键能力。若正在多选一建议先阅读仓库中的选型文档 choosing-a-cms.md。CMS指南插件文档 / 仓库参考官方 StarterContentful指南插件文档—WordPress指南插件文档仓库内 StarterShopify电商接入指南插件文档—Sanity指南仓库基准测试站点 source-sanity—Strapi—仓库基准测试站点 source-strapi—Contentstack指南——DatoCMS—仓库基准测试站点 source-datocms—Drupal指南插件文档—Prismic指南——NetlifyCMS指南插件文档—上表仓库参考列中标注基准测试站点的路径是 Gatsby 仓库 benchmarks 下为验证各 CMS 集成构建性能而维护的真实可构建站点可作为对应 CMS 接入方式的最直接代码样本。其他 CMS 集成一览长尾生态同样丰富除主流选择外Gatsby 的 source 插件生态还覆盖了大量垂直或区域性 CMS。下表为原文档完整清单链接均指向本仓库内实际存在的指南文件或基准测试站点CMS指南插件文档 / 仓库参考Agility CMS指南仓库基准测试站点 source-agilitycmsBuilder.io指南—ButterCMS指南—Cockpit——Cosmic—仓库基准测试站点 source-cosmicjsCraftCMS——Dialoguewise——Directus——Flotiq指南仓库基准测试站点 source-flotiqForestry指南—Gentics Mesh指南—Ghost指南—GraphCMS指南插件文档Kontent by Kentico指南仓库基准测试站点 source-kontentPrepr CMS——Storyblok——Webiny——如何选择你的 CMS三个决策维度仓库的 choosing-a-cms.md 给出了可操作的选型框架大多数中大型 Gatsby 站点都由某种 headless CMS 支撑其价值在于让内容编辑者灵活地构建相互关联的内容模型content models。维度一优先考虑first-class 集成的流行 CMS。first-class意味着该集成能支持 Gatsby 的核心云端能力——预览previews与增量构建incremental builds并被 Gatsby 团队认定为高质量。文档列举了使用率较高的八类集成数据截至 2021 年 11 月纯 Headless CMSContentful、DatoCMS、Prismic、Contentstack、Sanity、Strapi全栈 CMSheadless 模式Drupal、WordPress电商平台Shopify。维度二结合预算分层。个人项目 / 原型免费额度充裕Contentful、DatoCMS、Prismic、Sanity、Strapi团队 / Pro / 商业级约 50–250 美元/月上述五者外加 Drupal、WordPress企业级约 1000 美元/月起Contentful、Contentstack、Sanity、Strapi。维度三专门化需求。不同团队选择不同 CMS 通常有具体理由例如Contentstack 适合喜欢其编辑界面且有企业预算的团队DatoCMS 适合会触达 Contentful 模型上限、想要更低价格替代方案的团队Drupal 适合重视开源、可配置性与自定义代码的场景Prismic 的优势在于内容编辑 UISanity 与 Strapi 更受开发者欢迎且可本地化部署其中 Sanity 的构建时间通常明显更短对大体量站点是重要的可用性考量WordPress 则适合客户或内容团队已熟悉其界面的场景。多 CMS 组合content mesh也是常见架构。典型的两种组合是用 Shopify 专营电商、用通用 CMS如 Contentful支撑其余站点内容或用 WordPress 专营博客、用灵活建模的 CMS 支撑网站其余部分Gatsby 官方博客自身即如此实践。跨 CMS 建立关联的最简单方式是让一个 CMS 的模型中存储另一个 CMS 内容的唯一 ID 字段然后在gatsby-node.js中通过查询把对应数据拉齐。实战一Contentful —— Delivery API 与 Preview API 双通道Contentful 是最常与 Gatsby 搭配的 headless CMS。接入前需准备两个凭证spaceId空间 ID与accessToken访问令牌。安装与基础配置npm install gatsby-source-contentful在 gatsby-config.js 中注册插件plugins: [ { resolve: gatsby-source-contentful, options: { spaceId: your_space_id_grab_it_from_contentful, accessToken: your_token_id_grab_it_from_contentful, }, }, ]接入 Preview API内容预览若想让编辑在正式发布前于 Gatsby 中预览未发布内容将host指向 Contentful 的预览主机即可plugins: [ { resolve: gatsby-source-contentful, options: { spaceId: your_space_id_grab_it_from_contentful, accessToken: your_token_id_grab_it_from_contentful, host: preview.contentful.com, }, }, ]默认情况下插件使用cdn.contentful.comDelivery API作为主机指定host: preview.contentful.com即切换为 Preview API。源码视角默认选项与凭证校验从插件源码 plugin-options.js 可以看到一组值得了解的默认值const defaultOptions { host: cdn.contentful.com, environment: master, downloadLocal: false, localeFilter: () true, contentTypeFilter: () true, pageLimit: 1000, useNameForId: true, enableTags: false, typePrefix: Contentful, }要点解读environment默认指向master环境pageLimit默认每页拉取 1000 条内容typePrefix默认Contentful意味着 GraphQL 中内容类型会以ContentfulXxx形式出现downloadLocal为false时图片走 CDN 地址而非下载到本地。凭证处理上源码 gatsby-node.js 在初始化阶段会请求{host}/spaces/{spaceId}/environments/{environment}/content_types校验凭据有效性失败时报错提示检查spaceId与accessToken——这也解释了为何错误配置会在构建一开始就被快速发现。同时 plugin-options.js 中的maskText会对令牌做脱敏处理避免敏感信息泄露到日志。仓库 examples/using-contentful 提供了一个完整的 Contentful Gatsby 示例站点字段命名、查询写法均可直接参考建议给字段起清晰、可记忆的名字GraphiQL 才能更好地提示字段。实战二WordPress —— 基于 WPGraphQL 的完整接线WordPress 作为传统 CMS 的代表其 headless 模式依靠WPGraphQL把 WordPress 变成 GraphQL 服务器与WPGatsby为 Gatsby 定制 schema、记录内容变更以支持增量构建与预览两个 WordPress 插件实现。接入前需在 WordPress 实例中安装并激活它们详见 gatsby-source-wordpress 的 getting-started 文档。安装与配置npm install gatsby-source-wordpress在 gatsby-config.js 中注册插件url指向 WordPress 的 GraphQL 端点其余配置按需可选module.exports { ... plugins: [ ..., { resolve: gatsby-source-wordpress, options: { url: // 允许在环境变量 WPGRAPHQL_URL 未设置时回退到本地或远程 WP 实例 process.env.WPGRAPHQL_URL || https://localhost/graphql, schema: { // 为所有 WP 类型加 Wp 前缀使 Post 变成 WpPost typePrefix: Wp, }, develop: { // 将媒体文件缓存在 Gatsby 默认缓存之外缓存重置后依然保留 hardCacheMediaFiles: true, }, type: { Post: { limit: process.env.NODE_ENV development ? // 开发环境只拉 50 篇加速本地迭代 50 : // 生产环境本示例最多拉 5000 篇 5000, }, }, }, }, ] }注意若你的 WordPress 实例启用了 Basic Auth 等额外安全措施需要按插件文档补充对应配置项。用 createPages 把文章变成页面数据拉取完成后在 gatsby-node.js 中实现createPages此时数据已就绪可通过 GraphQL 查询。构建期 Gatsby 会依据拉取到的数据自动推断出可查询的 schemaconst path require(path) const { slash } require(gatsby-core-utils) exports.createPages async ({ graphql, actions }) { const { createPage } actions // 查询 WordPress 文章 const { data: { allWpPost: { nodes: allPosts }, }, } await graphql( query { allWpPost { nodes { id uri } } } ) const postTemplate path.resolve(./src/templates/post.js) allPosts.forEach(post { createPage({ // 页面 URL path: post.uri, // 页面模板组件 component: slash(postTemplate), // 模板内的 GraphQL 查询可通过 id 变量定位单篇文章 context: { id: post.id, }, }) }) }重启gatsby develop后每篇文章都会出现在各自的路径上在 GraphiQLhttp://localhost:8000/__graphql的文档或资源管理器中可以看到allWpPost等可查询字段。仓库内 starters/gatsby-starter-wordpress-blog 与 examples/using-wordpress 提供了开箱即用的完整实现。实战三Drupal —— 免费的企业级无头 CMSDrupal 以decoupled Drupal模式与 Gatsby 搭配可以在不付费的前提下获得企业级 CMS 的内容建模与工作流能力同时享受 Gatsby 的现代开发体验与 JAMstack 的性能、可扩展性、安全性。接入配置按插件安装说明加入gatsby-source-drupal后在 gatsby-config.js 中配置module.exports { siteMetadata: { title: Gatsby with Drupal, }, plugins: [ { resolve: gatsby-source-drupal, options: { baseUrl: https://live-contentacms.pantheonsite.io/, apiBase: api, }, }, // 其余插件analytics、offline、sharp、typography 等 ], }baseUrl是 Drupal 站点根地址apiBase对应 Drupal JSON:API 的路径前缀通常为api。多语言配置源码视角从 gatsby-source-drupal 的 plugin-options.ts 可见插件支持languageConfig配置块包含enabledLanguages启用语言列表、defaultLanguage、translatableEntities等字段用于处理多语言站点的内容过滤配置时会自动把{ langCode, as }形式的复杂语言代码拆分为重命名映射与启用列表两份内部数据。预览能力Drupal 侧的Gatsby Drupal Module可为内容编辑者提供实时预览基于 Gatsby Cloud 或本地开发服务器的 Preview 服务。它不是构建站点所必需的但官方推荐启用以持续改进 Gatsby 与 Drupal 的集成体验。实战四Netlify CMS —— Git 即内容仓库Netlify CMS 是一类特殊的git-based CMS它是用 React 编写的开源单页应用让编辑直接在静态站仓库的 Git 上编辑内容与数据文件。核心价值在于代码与内容放在同一仓库、一起版本化而非技术背景的编辑者无需直接操作 Git每次保存都会由 CMS 通过托管平台 API 产生一次 commit。安装与注册gatsby new netlify-cms-tutorial https://github.com/gatsbyjs/gatsby-starter-hello-world cd netlify-cms-tutorial npm install netlify-cms-app gatsby-plugin-netlify-cms在 gatsby-config.js 中注册module.exports { plugins: [gatsby-plugin-netlify-cms], }插件会自动生成 CMS 应用并输出到/admin/index.html因此 CMS 配置文件需放在static/admin/config.ymlGatsby 会把static目录内容原样复制到输出。测试用配置如下backend: name: test-repo media_folder: static/assets public_folder: /assets collections: - name: blog label: Blog folder: blog create: true fields: - { name: path, label: Path } - { name: date, label: Date, widget: datetime } - { name: title, label: Title } - { name: body, label: Body, widget: markdown }运行gatsby develop后访问http://localhost:8000/admin/注意必须带尾部斜杠即可看到 CMS 界面。test-repo后端只把内容保存在内存中刷新即丢失要持久化必须接入真实 Git 后端。接入 GitHub 后端将站点推送至 GitHub 并部署到 Netlify 后把backend替换为 GitHub 后端backend: name: github repo: your-username/your-repo-name branch: your-main-branchrepo必须是用户名/仓库名格式。随后在 GitHub 设置中把已部署站点登记为 OAuth 应用即可让 CMS 通过 API 把每次编辑写入仓库。使用 GitLab 的 Client-Side Implicit Grant 方式时需在插件选项中关闭 Netlify Identity{ resolve: gatsby-plugin-netlify-cms, options: { enableIdentityWidget: false, } }把 CMS 产物变成页面Netlify CMS 只负责产出 Markdown 等原始内容文件如何渲染由生成器决定。按仓库指南 adding-markdown-pages.md 配置 Gatsby 处理 Markdown 即可注意配置gatsby-source-filesystem时文件路径应指向${__dirname}/blog即 CMS 输出目录。之后编辑在 CMS 中发布文章就会在仓库中生成新的 Markdown 文件并在触发重建后出现在站点对应路径上。实战五Kontent.ai —— Content-as-a-Service 的自动建页Kontent.ai 是提供 Content-as-a-ServiceCaaS的托管 CMS内容可被多个渠道网站、App复用支持多语言与 linked items 内容关系。接入前需在 Kontent.ai 获取Project ID位于 Project settings → API keys并准备内容类型与内容条目可使用官方 Sample Project 快速获得示例内容。安装与配置gatsby new kontent-guide cd kontent-guide npm install kontent-ai/gatsby-source在 gatsby-config.js 中注册module.exports { siteMetadata: { // ... }, plugins: [ // ... { resolve: kontent-ai/gatsby-source, options: { projectId: YourProjectID, // 填写你的 Project ID // Sample Project 的默认语言是 en-US空白项目需改为 default languageCodenames: [ en-US, // 或你项目中的其他语言Project settings - Localization ], }, }, // ... ], }启动gatsby develop后Kontent.ai 内容即进入 GraphQL 层查询以kontentItem单条或allKontentItem集合为前缀可在http://localhost:8000/___graphql中试验。用 onCreateNode 生成 slug 并自动建页利用内容类型的 URL pattern 字段生成 slug再在createPages中批量建页const path require(path) exports.onCreateNode ({ node, actions: { createNodeField } }) { if (node.internal.type kontent_item_article) { createNodeField({ node, name: slug, value: node.elements.url_pattern.value, }) } } exports.createPages async ({ graphql, actions }) { const { createPage } actions const result await graphql( { allKontentItemArticle { nodes { fields { slug } } } } ) result.data.allKontentItemArticle.nodes.forEach((node) { createPage({ path: node.fields.slug, component: path.resolve(src/templates/article.js), context: { slug: node.fields.slug, }, }) }) }模板组件通过查询变量按 slug 取回文章内容import React from react import { graphql } from gatsby import Layout from ../components/layout const Article ({ data }) { const item data.kontentItemArticle.elements return ( Layout h1{item.title.value}/h1 div dangerouslySetInnerHTML{{ __html: item.body_copy.value }} / /Layout ) } export default Article export const query graphql query articleQuery($slug: String!) { kontentItemArticle(fields: { slug: { eq: $slug } }) { fields { slug } elements { body_copy { value } title { value } } } } 需要注意富文本元素中的链接与内嵌 linked items如视频默认不会被解析如需解析要查询结构化数据并自行构建 React 组件。Kontent.ai 源插件会定义 GraphQL schema你可以在其基础上按需扩展。列表之外其他 CMS 与自建 source 插件如果首选 CMS 不在上述两张表内还有三条路径检索插件目录仓库的 packages 与 deprecated-packages 目录中维护了大量gatsby-source-*插件包例如gatsby-source-graphql通用 GraphQL 接入适用于 GraphCMS 等、gatsby-source-filesystem文件系统接入等先确认是否已有现成集成。为已有集成补录清单若你的 CMS 已与 Gatsby 集成但不在本页清单中可按 CONTRIBUTING.md 的指引提交 Pull Request 将其加入文档。编写自己的 source 插件当目标服务尚无现成插件时可在自己的gatsby-node.js中利用sourceNodesAPI 与createNodeaction 手动拉取数据并创建节点见本文第三节的代码示例这是所有 source 插件的底层实现方式若要打包成可复用插件可参考仓库中的 creating-a-generic-plugin.md 与 creating-a-transformer-plugin.md。仓库中的集成证据基准测试、示例与 Starter除了指南文档本仓库还提供了大量可供深入研读的实证材料基准测试站点benchmarks 下的source-contentful、source-wordpress、source-drupal、source-sanity、source-strapi、source-datocms、source-flotiq、source-kontent、source-agilitycms、source-cosmicjs等目录是用于度量各 CMS 源构建性能的可运行站点包含各自的gatsby-config.js、gatsby-node.js与数据生成脚本示例站点examples/using-contentful、examples/using-drupal 等展示了查询与渲染的完整写法官方 Starterstarters/gatsby-starter-wordpress-blog 是 WordPress 接入的开箱即用模板插件实现源码packages/gatsby-source-contentful、packages/gatsby-source-wordpress、packages/gatsby-source-drupal、packages/gatsby-source-shopify等目录内的src/与docs/提供了各插件的参数表、架构说明与测试用例如gatsby-source-wordpress/docs/下的 plugin-options、getting-started 等文档。阅读这些材料时可沿着CMS API → 插件拉取 → 节点创建 → GraphQL 查询 → 模板渲染的链路逐一对照即可彻底掌握从 Headless CMS 向 Gatsby 站点注入内容的完整原理与全部实操要点。赞分享前端静态站点Web框架【免费下载链接】gatsbyReact-based framework with performance, scalability, and security built in.项目地址https://gitcode.com/gh_mirrors/ga/gatsby点击查看免费下载相关推荐Gatsby 与 Headless CMS无头内容管理系统架构、优势与数据接入实战指南Gatsby 与 Headless CMS无头内容管理系统架构、优势与数据接入实战指南 导读 本文基于 Gatsby 官方术语表文档 headless cm前端静态站点Web框架抖音批量下载完整指南5分钟掌握免费开源神器抖音批量下载完整指南5分钟掌握免费开源神器 你是否经常需要收集抖音上的精彩内容无论是音乐素材、创意视频还是教学资源手动一个个下载不仅耗时费力还容易出错。前端静态站点Web框架Gatsby 站点数据分析接入指南分析插件选型、Gatsby Script 性能加载策略与实战配置Gatsby 站点数据分析接入指南分析插件选型、Gatsby Script 性能加载策略与实战配置 导读 本篇技术指南以 Gatsby 官方文档《Adding前端静态站点Web框架创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考