首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在Gatsby.js中使用GraphQL从WP中获取ACF灵活内容

在Gatsby.js中使用GraphQL从WordPress中获取ACF(Advanced Custom Fields)灵活内容,可以通过以下步骤实现:

  1. 首先,确保已经安装了Gatsby.js和相关插件。可以使用以下命令安装Gatsby.js:
代码语言:txt
复制
npm install -g gatsby-cli

然后,创建一个新的Gatsby.js项目:

代码语言:txt
复制
gatsby new my-project

进入项目目录:

代码语言:txt
复制
cd my-project

安装gatsby-source-wordpress插件,该插件允许从WordPress中获取数据:

代码语言:txt
复制
npm install gatsby-source-wordpress
  1. 在Gatsby.js项目的根目录中,创建一个gatsby-config.js文件,并添加以下配置:
代码语言:javascript
复制
module.exports = {
  plugins: [
    {
      resolve: "gatsby-source-wordpress",
      options: {
        baseUrl: "your-wordpress-site-url",
        protocol: "https",
        hostingWPCOM: false,
        useACF: true,
        acfOptionPageIds: [],
        verboseOutput: false,
        perPage: 100,
        searchAndReplaceContentUrls: {
          sourceUrl: "https://your-wordpress-site-url",
          replacementUrl: "",
        },
        concurrentRequests: 10,
        includedRoutes: [
          "**/categories",
          "**/posts",
          "**/pages",
          "**/media",
          "**/tags",
          "**/taxonomies",
          "**/users",
        ],
        excludedRoutes: [],
        normalizer: function ({ entities }) {
          return entities
        },
      },
    },
  ],
}

请将"your-wordpress-site-url"替换为您的WordPress网站的URL。

  1. 运行以下命令启动Gatsby.js开发服务器:
代码语言:txt
复制
gatsby develop
  1. 在Gatsby.js项目中,可以使用GraphQL查询语言从WordPress中获取ACF灵活内容。在浏览器中打开http://localhost:8000/___graphql,可以访问Gatsby.js的GraphQL控制台。

以下是一个示例查询,用于从WordPress中获取ACF灵活内容:

代码语言:graphql
复制
query {
  allWordpressPost {
    edges {
      node {
        id
        title
        acf {
          field_name
        }
      }
    }
  }
}

在上面的示例中,我们查询了所有WordPress的文章,并获取了每篇文章的标题和ACF字段的内容。

  1. 推荐的腾讯云相关产品和产品介绍链接地址:

请注意,以上链接仅供参考,具体的产品选择应根据实际需求和项目要求进行评估和决策。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

2020 年你应该知道的 React 库

例如,gatsby-Firebase-authentication 样板文件只 Gatsby.js 为您提供了完整的 Firebase 身份验证机制,但是其他所有内容都被省略了。...建议: Formik React Hook Form React 的数据获取库 很快,您就必须向远程 API 发出请求,以便在 React 获取数据。...当您的应用程序增大时,可以使用它来代替本地获取 API。 如果您有足够的时间来处理 GraphQL API,我建议您使用 Apollo Client。...,我只能想到以下内容,因为我没有 React 中使用任何其他内容: Draft.js Slate React 的支付 和其他网络应用一样,最常见的支付提供商是 Stripe 和 PayPal。...REACT VR/AR 实话说,我们很有可能用 React 深入虚拟现实或者增强现实,我没有使用过这些库的任何一个,但是它们是我在谈到 React AR/VR 时大脑闪过的就是: React 360

14.4K40

如何利用机器学习和Gatsby.js创建假新闻网站​

Gatsby.js之前,首先需要安装Node。这是一个开源的JavaScript运行时环境,用于浏览器之外执行JavaScript代码。使用Node还可以得到npm,它表示“包管理器”。...一个重要的插件是Gatsby -source-filesystem,它允许Gatsby存储本地文件系统的文件中提取数据。...稍后,我们将使用GitGitHub中提取必要的文件,这样本地文件系统的所有文件都能与云服务器的资源相匹配,并且可以进行自动部署。...这些api可以使用GraphQL数据层获取数据。处理程序化页面生成时,我们将更深入地研究这个文件的内容。 gatsby-ssr.js 此文件用于实现服务器端选然的api。...创建页面的两个大步骤是: 1)为本地文件系统的每个标记文件创建slugs(或唯一的url) 2)使用页面模板使用slugs和通过GraphQL获取的其他信息创建实际的web页面。

4.5K60
  • 10 款 Web 开发最佳的 Python 框架

    “Browsh”是一款现代网络浏览器,可在您的终端呈现。它由无头Firefox支持,因此它支持最新的Web标准。创建者的想法是你可以服务器上运行它并通过SSH连接到它,但我们认为它很酷。 ?...它被称为测量,它可以让您使用手机的相机来测量现实世界的事物。它使用他们的Android ARCore框架。如果您的手机支持此功能,请尝试一下。这令人惊讶的准确。 ?...这是一个网站,为您提供git到JavaScript的所有内容的示例和快速文档。您可以终端请求文档,所有内容都包含大量示例。 ?...它是一个使用React,Webpack和GraphQL构建静态网站的生成器。它有适用于不同数据源的插件,并且速度很快。 ?...只需设置背景颜色,其中一部手机中选择,上传您的应用程序屏幕截图,然后获取图像。不需要photoshop技能。 https://shotsnapp.com ?

    1.3K30

    WP Engine推出AI驱动的WordPress网站搜索

    WP Engine 的一个测试工具允许用户几毫秒内对使用 WordPress 构建的网站执行语义搜索。...专有工具本周的 WP Engine 虚拟 De{Code} 会议 向开发者和其他 WordPress 用户展示。...这出于很多原因而存在问题,其中最主要的原因是使用搜索的用户是“高意向访问者”——他们实际上输入了他们想要的确切内容,Patterson 解释说。...“我们所做的是索引和映射你的 ACF 字段,开箱即用,点击一个按钮,无需自定义映射,无需简码,无需任何代码,你只需智能搜索默认索引所有 ACF 和所有自定义帖子类型,”他说。...将搜索 WordPress 数据库卸载,并自动索引 ACF 字段的所有自定义帖子类型——我们认为这是我们在此处 […] 独一无二的地方;再次希望以 WordPress 开发人员工作的方式工作,”他说

    12410

    如何将Web主页性能提升十倍以上?

    SEO: 2019 年 7 月 1 日开始,谷歌公司开始全部新网站上默认启用移动优先索引。如果网站在移动设备上运行缓慢,且没有针对移动设备进行内容格式调整,那么网站的搜索排名将会降低。...因此决定使用 React 之后,我们开始尝试其它潜在的渲染选项,以确保浏览器能够更快地完成内容渲染。 ?...使用 React 时的常规渲染选项 Gatsby.js 允许我们利用 React 与 GraphQL 构建预渲染页面。Gatsby.js 是一款强大的工具,能够直接提供多种性能优化方案。...混合渲染方法 在运行时中使用 Puppeteer 并非易事。正因为如此,我们才决定在构建时中加以使用,同时配合一款工具用于在运行时内服务器端获取用户生成的实际内容。...资源提示 资源提示(Resource hints) 允许我们优化资源交付、降低往返次数,同时获取资源以实现页面浏览过程内容交付提速。 ?

    3.9K40

    GraphQL 和 REST 优缺点对比,附上代码示例

    例如, REST ,您需要向 /api/posts 发送 GET 请求来获取帖子,该请求可能会返回一个 JSON 对象,其中包含帖子标题、内容、标记、日期,可能还有用户 ID。...另一端,您可能会出现抓取不足的情况,这就需要返回到服务器以获取更多信息。 要显示单个用户的帖子,我们需要用户信息和帖子的内容。...如果我用户端点获取用户,我仍然需要点击 posts 端点,并使用 userid 检索 posts。...,只获取他们需要的内容。...缓存问题 缓存是 REST 内置的功能,但你必须使用 GraphQL 来管理缓存。如果你没有适当的地方构建缓存,那么你 GraphQL 更有针对性的获取获得的所有提高的效率都可能被抹去。

    1K30

    GraphQL详解

    它是数据库无关的,而且可以使用API的任何环境中有效使用,我们可以理解为GraphQL是基于API之上的一层封装,目的是为了更好,更灵活的适用于业务的需求变化。...REST API 的接口灵活性差、接口操作流程繁琐,GraphQL 的声明式数据获取,使得接口数据精确返回,数据查询流程简洁,照顾了客户端的灵活性。...总结它的好处: 它的设计思想GraphQL 以图的形式将整个 Web 服务的资源展示出来,客户端可以按照其需求自行调用,类似添加字段的需求其实就不再需要后端多次修改了。...非空列表,列表内容类型非空:Type!! 描述数据模型(模式Schema)时,就可以对字段施加限制条件。...Tipe (github): 一个 SaaS(软件即服务)内容管理系统,允许你使用强大的编辑工具创建你 的内容,并通过 GraphQL 或 REST API 任何地方访问它。

    2.6K00

    我为什么要放弃RESTful,选择拥抱GraphQL

    它是数据库无关的,而且可以使用API的任何环境中有效使用,我们可以理解为GraphQL是基于API之上的一层封装,目的是为了更好,更灵活的适用于业务的需求变化。...REST API 的接口灵活性差、接口操作流程繁琐,GraphQL 的声明式数据获取,使得接口数据精确返回,数据查询流程简洁,照顾了客户端的灵活性。...总结它的好处: 它的设计思想GraphQL 以图的形式将整个 Web 服务的资源展示出来,客户端可以按照其需求自行调用,类似添加字段的需求其实就不再需要后端多次修改了。...非空列表,列表内容类型非空:[Type!]! 描述数据模型(模式Schema)时,就可以对字段施加限制条件。...Tipe (github): 一个 SaaS(软件即服务)内容管理系统,允许你使用强大的编辑工具创建你 的内容,并通过 GraphQL 或 REST API 任何地方访问它。

    2.4K40

    GraphQL

    它是数据库无关的,而且可以使用API的任何环境中有效使用,我们可以理解为GraphQL是基于API之上的一层封装,目的是为了更好,更灵活的适用于业务的需求变化。...REST API 的接口灵活性差、接口操作流程繁琐,GraphQL 的声明式数据获取,使得接口数据精确返回,数据查询流程简洁,照顾了客户端的灵活性。...总结它的好处: 它的设计思想GraphQL 以图的形式将整个 Web 服务的资源展示出来,客户端可以按照其需求自行调用,类似添加字段的需求其实就不再需要后端多次修改了。...非空列表,列表内容类型非空:Type!! 描述数据模型(模式Schema)时,就可以对字段施加限制条件。...Tipe (github): 一个 SaaS(软件即服务)内容管理系统,允许你使用强大的编辑工具创建你 的内容,并通过 GraphQL 或 REST API 任何地方访问它。

    2.6K65

    为什么我劝你放弃了Restful API?

    它是数据库无关的,而且可以使用API的任何环境中有效使用,我们可以理解为GraphQL是基于API之上的一层封装,目的是为了更好,更灵活的适用于业务的需求变化。...REST API 的接口灵活性差、接口操作流程繁琐,GraphQL 的声明式数据获取,使得接口数据精确返回,数据查询流程简洁,照顾了客户端的灵活性。...总结它的好处: 它的设计思想GraphQL 以图的形式将整个 Web 服务的资源展示出来,客户端可以按照其需求自行调用,类似添加字段的需求其实就不再需要后端多次修改了。...非空列表,列表内容类型非空:[Type!]! 描述数据模型(模式Schema)时,就可以对字段施加限制条件。...Tipe (github): 一个 SaaS(软件即服务)内容管理系统,允许你使用强大的编辑工具创建你 的内容,并通过 GraphQL 或 REST API 任何地方访问它。

    2.9K20

    「首席架构师推荐」React生态系统大集合

    钩子 React钩子 用React Hooks和Context替换Redux React Hooks备忘单:解锁常见问题的解决方案 如何使用React Hooks获取数据?...CoffeeScript实现Flux React:Flux Architecture 了解Flux Flux哟 React.js架构 - Flux VS Reflux 避免单页应用程序的事件链...MobX教程 10分钟介绍MobX和React 使用MobX管理React应用程序的复杂状态 将您的应用程序Redux重构为MobX Redux或MobX:尝试解散混乱 GraphQL 查询语言...的第一个想法 以类似的方式GraphQL建模查询 Thin and Graphy GraphQL概述 - GraphQL和Node.js入门 使用GraphQL编写基本API 使用Node.js和SQL...Postgres上的即时实时GraphQL Prisma - 一个高性能的开源GraphQL ORM-like层,可以GraphQL服务器完成繁重的任务。

    12.4K30

    Github 为什么开放了一套 GraphQL 版本的 API?

    ,如 name,headimage,却必须得到所有的用户信息,然后从中提取自己想要的 这个情况会增加网络传输量,并且不便于client处理数据 还有一个不方便的地方,例如client某个需求,可能需要调用多个独立的...API 才能获取到足够的数据 例如client要显示一篇文章的内容,同时要显示评论、作者信息,那么就可能需要调用文章接口、评论接口、用户接口 这种方式非常不灵活 GitHub 还遇到其他一些 REST...GraphQL 简单来说就是:取哪些数据是由client来决定 REST ,给哪些数据是server决定的,client只能从中挑选,如果A接口中的数据不够,再请求B接口,然后他们返回的数据挑出自己需要的...GraphQL ,client 直接对 server说想要什么数据,server负责精确的返回目标数据 例如,你想要获取用户的几个属性信息,你的 GraphQL 请求就是这样的 { viewer...,还有很多大公司已经使用 GraphQL,例如 Pinterest, Coursera, Shopify Github 也表达了对 GraphQL API 的重视,接下来会持续完善,使其更加灵活

    1.2K100

    安息吧 REST API,GraphQL 长存

    因此,当客户端需要获取多个资源的数据时,需要对 REST API 进行多次往返,以将其所需的数据放在一起。 REST API ,没有客户端请求语言。客户端无法控制服务器返回的数据。...例如,READ REST API 端点可能是 GET /ResouceName - 该资源获取所有记录的列表; GET /ResourceName/ResourceID - 获取该 ID 标识的单条记录...它们可以明确地请求它们需要什么,服务器将会正确应答它们请求的内容。这解决了超量获取的问题。 对于版本控制,GraphQL 的做法很有趣。我们可以完全避免版本控制。...现在,将 GraphQL 查询与我们为数据定义的声明式的 React UI 进行比较。GraphQL 查询的所有内容都在 UI 中被用到,UI 的所有内容都会显示 GraphQL 查询。...我们可以使用 DataLoader 而不是直接使用 SQL 查询数据库读取数据,而 DataLoader 将作为我们的代理,以减少我们发送到数据库的实际 SQL 查询。

    2.7K30

    GraphQL 查询你的 Django 应用

    ,欢迎评论区斧正 什么是 GraphQL ?...TLDR REST 更多是 HTTP 协议出发的一种约定协议,因为受制于 HTTP 协议本身的设计,表达能力上是弱于作为查询语言的 GraphQL 的。...作为后端开发,学习和使用 GraphQL 的动力,更多是想将自己 CRUD 的泥沼拯救出来,将更多的精力放在其他更重要的技术上。...但是也许某一天,我们需要一个评论的精简列表的 API,当前返回内容,除了 content 以外的其他字段都变成多余了,那么后端开发需要重新定一个 MinimalCommentSerializer 来满足新的需求...传统的 REST 协议 假如我们需要获取所有用户维度的评论,我们需要先获取通过 /users 所有用户 id,再使用 id 列表遍历查询 /users//comments 来获取相关的列表。

    2K60

    Genesis主题中手动添加WordPress相关文章

    因为我一直使用强大Wordpress插件ACF(Advanced Custom Fields )来满足我的大部分需求,如果我能用手上现有的东西来实现“相关文章”的功能,为什么还要安装别的东西呢?...所以,让我们开始吧 第一步:使用ACF创建自定义字段 首先,我们需要创建所需的自定义字段,以帮助我们获取所需的数据,即关系字段类型。请按照下图进行正确设置。...还有一个更简单的方法,你可以在这里下载我导出的ACF配置文件,并将文件导入ACF。 related-posts.zipDownload ?...''; echo wp_trim_words( get_the_content( $relatedPost->ID ), 20, null ); echo...可以从下面的图中看到,你可以完全控制要显示的内容。我们已限制3个帖子,因此你将无法添加超过3个帖子。选择的时候,你可以使用目录进行过滤。 ? 这样就可以了。

    1.3K30

    GraphQL 到底有什么魔力?

    他们这样做了, 并且很好用, 这项技术 facebook 内部沉淀了三年, 2015年, facebook 公开发布了 GraphQL。...查询能力 向后端 API 发送 GraphQL 查询,它会准确的返回所需要的内容, 不多也不少!...聚合能力 rest api 上获取多个资源时, 通常要进行多次url请求, 而使用 GraphQL 的查询功能, 一次请求就可以获取多个资源, 这正是 GraphQL 的数据聚合能力。...•文件上传 上传文件对于 GraphQL 确实是个大难题, 规范并没有提到这个, 一种方式是一些 GraphQL 的库自己实现了上传功能,另一个方法就是用单独的程序使用Http的方式提供上传功能。...•缓存 和 rest api 相比, 由于 GraphQL 的查询功能很灵活, 动态查询, 不是固定的资源, 所以它的缓存不太好做。

    54030

    GraphQL,你准备好了么?

    假设 TubiTV 有一个 API,要获取系统的某个用户,就 REST API 而言,其接口大概会是这样: GET /v1/users/1 然后其返回结果是: { "first": "Tyr",...作为一个 API 的查询语言,GraphQL 产品的角度出发,希望 API 足够灵活能处理复杂多变的用户场景。...前面讲到 GraphQL 的客户端可以很灵活服务器能力范围内进行各种查询的组合,这种能力对向后兼容和版本控制很有好处。...REST API 进化的过程往往随着 API 版本的变迁,而 GraphQL API 基本没这个必要。...使用 GraphQL 可能会增加实现的复杂度 对于序员来说,使用 GraphQL 意味着她又要学习一门新的东东。原本的一些简单的 CRUD 的 API, GraphQL 下,变得复杂起来。

    85260

    你还在用 REST API 吗?

    因此,客户端必须发出多个请求才能获取应用程序所需的全部内容。 什么是 GraphQL?...这也意味着我们可以定制我们的请求,这样我们就可以端点发出任何请求,并且能获得我们所请求的任何内容,仅此而已,无需更多操作。我们传递查询并得到响应。...除此之外,它还允许我们将不同的实体组合到单个查询GraphQL 的优势 检索精确的数据,无任何多余数据。 GraphQL ,可以得到我们所请求的内容,这是一个很大的优势。...例如,第一个请求,我们只需要名称,但是当我们使用这种方法时,我们将会获取该用户相关的所有详细信息。 此时就是 GraphQL 显示其强大功能的时候了。我们需要指定查询,然后才能获得所需的输出。... GraphQL ,我们得到的就是我们所要求的。 对象定义(JSON 响应) REST ,我们可以在后端定义对象,而在 GraphQL ,我们则要在前端定义该对象。

    1.5K10

    干货 | 携程基于 GraphQL 的前端 BFF 服务开发实践

    我们一次 GraphQL 查询,通过这些关联字段,获取到所需的数据,而不必再次发起请求。...其实, GraphQL 处理错误类型,有更好的方式——union type。...3.4 最佳实践小结  GraphQL ,还有很多实践和优化技巧可以展开,大部分可以官方文档或社区技术文章里可以找到的。...而未来即使需要做契约的剪切或者增加自定义字段,也只需要将 query 内容 {json} 改成 {ProductId, ProductName, etc....} 即可。...很多优化首屏的实践,利用 GQL 动态查询,灵活剪切契约等是非常有效的手段。并且在过程,服务端并不需要跟随前端调整代码。降低工作量的同时,也保证了其他平台的稳定性。

    2.6K20
    领券