Gatsby 学习 - 04 Gatsby 插件 - 从 CMS 内容管理系统(Strapi 搭建)获取数据_皮蛋很白的博客-程序员宝宝

技术标签: react  

Strapi 创建 CMS 内容管理系统

Strapi 是基于 Node.js 的开源免费的 CMS 内容管理系统。

创建项目

npx create-strapi-app <project-name>

本例选择 quickstart 快速创建项目,并且不使用模板。

项目创建完成后会自动启动项目,并且在浏览器打开。

首次访问需要注册用户,注册后登录。

创建内容类型

打开 内容类型生成器,创建 Post 分类,并添加三个字段:

  • title:文章标题
  • date:文章日期
  • content:文章内容

在这里插入图片描述

在这里插入图片描述

在创建 Post 内容类型后,就会在左侧出现一个集合菜单 Posts,可以添加发布文章内容:

在这里插入图片描述

配置权限

默认添加的数据都是受保护的,需要配置权限才能查询。

角色和权限中配置 Public(普通访问者) 权限

在这里插入图片描述

在这里插入图片描述

查询数据

在勾选权限选项时右侧高级设置可以看到查询接口地址,使用 Postman 测试:

在这里插入图片描述

从 Strapi 获取数据

安装插件

要把 Strapi 的数据添加到数据层,需要用到插件 gatsby-source-strapi

配置插件

// gatsby-config.js
{
    
  resolve: "gatsby-source-strapi",
  options: {
    
    apiURL: "http://localhost:1337", // api 访问地址
    collectionTypes: ["Post"], // 允许访问的内容类型
  },
},

查看 GraphQL

重启 Gatsby 后,GraphQL 左侧会增加 allStrapiPoststrapiPost 查询数据。

query MyQuery {
    
  allStrapiPost {
    
    nodes {
    
      id
      title
      date
      content
    }
  }
}

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/u012961419/article/details/119041702

智能推荐

[JavaScript] 本地存储(sessionStorage与localStorage)_YinJie…的博客-程序员宝宝

小案例:在这个登录注册页面案例里,我们并没有连接数据库而是用到了本地存储这个知识点完成的,我们看看本地存储究竟是什么:本地存储特性数据存储在用户浏览器中设置、读取方便、甚至页面刷新不丢失数据容量较大, sessionStorage约5M、localStorage约20M .只能存储字符串,可以将对象JSON.stringify()编码后存储window.sessionStorage特点生命周期为关闭浏览器窗口在同一个窗口(页面)下数据可以共享以键值对的形式存储使用使用存储

西北农林科技大学2020年算法分析与设计实验一——贪心法求解会场安排问题 & 基于分治法的循环日程表算法_努力的算算的博客-程序员宝宝

实验1 贪心法求解会场安排问题 &amp; 基于分治法的循环日程表算法实验内容本实验要求基于算法设计与分析的一般过程(即待求解问题的描述、算法设计、算法描述、算法正确性证明、算法分析、算法实现与测试),使用贪心法求解会场安排问题以及利用分治法的循环日程表算法,以期从实践中理解分治法的思想、求解策略及步骤。(有余力者,鼓励挑战n≠2k的情形的循环日程表问题,以及贪心法与分治法的其它应用实例)实验目的理解贪心法的核心思想以及分治法求解过程;理解分治法的核心思想以及分治法求解过程。环境要.

SysUtils.StrCopy、SysUtils.StrECopy_weixin_30883311的博客-程序员宝宝

StrCopy 和 StrECopy 都是复制源 PChar 串到目标 PChar 串, 只是返回值不同; StrCopy 返回结果的首地址, StrECopy 返回结果的尾(#0)地址.unit Unit1;interfaceuses Windows, Messages, SysUtils, Variants, Classes, Graphics, Contro...

jquery 本地存储 sessionStorage_海洋的渔夫的博客-程序员宝宝

上一篇写到jquery 本地存储 localStorage, localStorage在浏览器关闭后,只要不主动删除就一直存在。但是下面讲的sessionStorage就不一样,只会在关闭前有效,只要窗口关闭,那么数据就会立即删除,起到一定的安全性作用。sessionStorage3、sessionStorage 存储在本地,容量为5M或者更大,不会在请求时候携带传递,在同...

本地存储sessionStorage 和 localStorage_一个热爱干饭的菜菜的博客-程序员宝宝

本地存储随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据,HTML5规范提出了相关解决方案。本地存储的特性1、数据存储在用户浏览器中2、设置、读取方便、甚至页面刷新不丢失数据3、容量较大,sessionStorage约5M、localStorage约20M4、只能存储字符串,可以将对象JSON.stringify() 编码后存储window.sessionStorage1、生命周期为关闭浏览器窗口2、在同一个窗口(页

随便推点

【Jquery】------- Jquery 监听本地存储 sessionStorage,localStorage 的键值 示例代码_皮皮冰要做大神的博客-程序员宝宝

//监听本地存储 RISKID 键 值 window.addEventListener('storage',function (e) { //获取被修改的键值 if (e.key == 'RISKID') { console.log(e); } },false); 提示:自己测试 就能明白怎么使用了...

Leetcode图专题_三笔竹林的博客-程序员宝宝_leetcode图

要明白的基础知识node1=UndirectedGraphNode(1)node2=UndirectedGraphNode(2)nodeMap={}nodeMap[node1]=&amp;quot;hello&amp;quot;nodeMap[node2]=&amp;quot;world&amp;quot;#这样是合法的,打印nodeMap看看nodeMapOut[8]: {&amp;amp;lt;__main__.UndirectedGraphNode at 0x...

开放封闭原则_qq_39860799的博客-程序员宝宝

文章目录开放封闭原则(Open Closed Principle)描述符合开放封闭原则的模块都有两个主要特性:它们 “面向扩展开放(Open For Extension)”。也就是说模块的行为是能够被扩展的。当应用程序的需求变化时,我们可以使模块表现出全新的或与以往不同的行为,以满足新的需求。它们 “面向修改封闭(Closed For Modification)”。模块的源代码是不...

2021-04-22_墨尘246的博客-程序员宝宝

ERROR(stdcmds.ael line 290, column 5) Unable to start status server. could not invoke program链接: link.很多人ADS2021版安装好了,也破解好了,可是仿真的时候就会出现这样的问题,其实原因很简单,保存的文件路径有中文名。图片: 带尺寸的图片: 居中的图片: 居中并且带尺寸的图片: 当然,我们为了让用户更加便捷,我们增加了图片拖拽功能。如何插入一段漂亮的代码片去博客设置页面,选择一款你喜欢

LightOJ1236 - Pairs Forming LCM (LCM·唯一分解)_Rain722的博客-程序员宝宝

题意 :给你一个数n  求满足lcm(a, b) == n, a 唯一分解定理内容:对于任意一个大于1的数都可以唯一分解为若干个素数的乘积,即n=a1^b1*a2^b2*......an^bn;容易知道 n 是由a和b的所有素因子构成的,n的中的素因子指数等于a,b中相同素因子指数较大的指数。先将n分解为素数指数积的形式  n = π(pi^ei)    那么对于每个素因子pi

推荐文章

热门文章

相关标签