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

Gatsby和Graphql -如何按文件夹过滤allMarkdownRemark

Gatsby是一个基于React的静态网站生成器,它可以帮助开发者快速构建高性能的静态网站。而GraphQL是一种用于API的查询语言和运行时环境,它可以让客户端精确地获取需要的数据,避免了传统RESTful API中的过度获取或不足获取的问题。

在Gatsby中,可以使用GraphQL来查询和过滤数据。针对问题中的需求,按文件夹过滤allMarkdownRemark,可以通过使用filter参数来实现。具体步骤如下:

  1. 在Gatsby项目中,首先需要安装并配置gatsby-source-filesystem插件,该插件可以将文件系统中的数据源导入到Gatsby中。
  2. gatsby-config.js文件中,配置gatsby-source-filesystem插件,指定需要导入的文件夹路径,例如:
代码语言:txt
复制
module.exports = {
  plugins: [
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "markdown-pages",
        path: `${__dirname}/src/markdown-pages`,
      },
    },
  ],
};

上述配置中,path指定了需要导入的文件夹路径为src/markdown-pages

  1. 在需要过滤的页面或组件中,使用GraphQL查询语句来获取allMarkdownRemark数据,并通过filter参数按文件夹进行过滤。例如:
代码语言:txt
复制
import React from "react";
import { graphql } from "gatsby";

export const query = graphql`
  query($folder: String!) {
    allMarkdownRemark(filter: { fileAbsolutePath: { regex: $folder } }) {
      edges {
        node {
          frontmatter {
            title
          }
          html
        }
      }
    }
  }
`;

const MyComponent = ({ data }) => {
  // 使用过滤后的数据进行渲染
  return (
    <div>
      {data.allMarkdownRemark.edges.map(({ node }) => (
        <div key={node.frontmatter.title}>
          <h2>{node.frontmatter.title}</h2>
          <div dangerouslySetInnerHTML={{ __html: node.html }} />
        </div>
      ))}
    </div>
  );
};

export default MyComponent;

上述代码中,$folder是GraphQL变量,用于传递文件夹路径。filter参数中的fileAbsolutePath可以使用正则表达式来匹配文件夹路径,实现按文件夹过滤。

这样,通过以上步骤,就可以在Gatsby中按文件夹过滤allMarkdownRemark数据了。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)、腾讯云对象存储(COS)。

  • 腾讯云云服务器(CVM):提供弹性计算能力,可根据业务需求灵活选择配置,支持多种操作系统,适用于各类应用场景。产品介绍链接:腾讯云云服务器
  • 腾讯云对象存储(COS):提供安全、稳定、低成本的云端存储服务,适用于图片、音视频、文档等各类文件的存储和管理。产品介绍链接:腾讯云对象存储
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

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

基本上,Gatsby.js将帮你创建一个有完整的骨架的网站,你可以调整重新配置,而不是从头开始构建整个东西。...当我查看驱动器上的文章文件夹时,我会看到一堆包含假文章的markdown 文件。 ? 我们可以使用名为Gatsby -source-drive的插件将文件直接导入到Gatsby的本地文件系统中。...然后需要将其添加到gatsby-config.js中,并从谷歌驱动器文件夹中获得唯一的ID。...创建页面的两个大步骤是: 1)为本地文件系统中的每个标记文件创建slugs(或唯一的url) 2)使用页面模板使用slugs通过GraphQL获取的其他信息创建实际的web页面。...' import { graphql } from 'gatsby' import Layout from "..

4.5K60

学习gatsby,从这里开始!

轻松发布:只需执行 gatsby build 命令,所有网站数据都被打包到 public 文件夹中,拷贝此文件夹到 nginx 即可完成网站发布。...--- 二、Gatsby 简介 1、图解系统结构 数据统一:从 不同数据源(下图中 CMS、Private API 等) 获取数据,形成统一的数据结构( GraphQL Data Layer) 数据查询...:通过 GraphQL 查询 GraphQL Data Layer 中的数据 展示数据:通过React 编写HTML页面,把数据展示出来。...--- 七、部署 怎么部署发布gatsby项目? 第一步:有一个备案过的域名。可以在阿里云上进行域名注册备案; 第二步:需要一个服务器。...build # 项目目录下会生成 public 文件夹 第六步:把第五步中 public 文件夹 下所有内容拷贝至 第四步中的nginx下,并设置好ngingx 配置文件; 第七步:可以通过域名访问网站了

2.1K20

进击的JAMStack

了解了这三个概念的具体内容后,我们再通过一个Gatsby的小demo来体会一下JAMStack的应用是如何工作的。...Gatsby Demo 由于文章篇幅的限制,我将不在这里为大家讲述Gatsby的具体用法,不过我后面会写一系列文章来教大家如何Gatsby来免费构建一个比较大的内容网站(CMS),大家可以留意一下。...简单来说,Gatsby是一个可以让开发者使用React,GraphQL等现代技术快速开发网站的静态网站生成器(static-site generator)。...接着我们可以看一下Gatsby打包会生成哪些文件: 由上图可以看出,Gatsby会为每一个pages文件夹底下的文件生成一个对应的html文件,以及为每一个blogs文件夹底下的博客生成一个静态的HTML...更好的开发者体验 拿我们前面提到的Gatsby来举例,它就允许我们使用一些现代的前端技术来进行开发,例如React,Styled-componentsGraphQL等,这些都是我们前端开发者十分熟悉的技术了

2.8K30

2018 年前端开发五大趋势

如何优于同行?...与 Jekyll,Hugo 或 Hexo 等流行解决方案不同,这个静态生成器不使用模板,而是信赖于 Webpack React 组件(注意 React 官网本身也是在 Gatsby 的帮助下编写的)...从1.0版本开始,Gatsby 使用了上面提到的 GraphQL。因此,在构建过程,它可以从多个 GraphQL API 中获得数据,然后使用它们创建一个完全静态的 React 客户端应用程序。...静态网站生成器专门用于解决此问题,Gatsby 是其中最好的,感谢 GraphQL。我们坚持认为,任何在职的前端工程师在 2018 年至少都能掌握这个流行工具的基本知识。...Storybook 如何在这里提供帮助? 如前所述,React Storybook允许您在应用程序之外开发测试UI组件,并允许团队中的其他开发人员继续使用它们。

2.9K40

你的博客用不着什么JavaScript框架

当我决定使用静态站点生成器 JavaScript(排除了 Jekyll Hugo)后,就只剩下两个差别颇大的选项了: “我听说 Gatsby 很好用” 根据官方网站的说法,“Gatsby 是一个基于...它有一个由 GraphQL 支持的数据层,并将所有内容输出到静态文件,使你可以在几乎任何地方托管它。...那么如何在构建 Gatsby 网站时避免那些因为大量使用 JS 而带来的固有问题呢?当然,我们应该尽量删掉那些 JavaScript。...https://www.gatsbyjs.org/packages/gatsby-plugin-no-javascript/ 你可以继续编写 react 组件 GraphQL,甚至可以使用 CSS-in-JS...用不着针对什么新的打包器来调整前端构建流程,我只需放入现有的 webpack 文件 src 文件夹即可。使用并发包,我可以在 Eleventy 的 serve 过程中同时运行构建脚本。

4.1K10

创建 React 应用的 7 种方式,你用过几种?

如果说对于上面的配置你不知所措,我想你有必要了解下,如何从零创建一个 webpack react 工程,这将帮你修改 webpack 工程更加得心应手。.../title> 新建一个 index.js 文件 创建一个名为 src 的文件夹...:8000/ 看下效果 打开 http://localhost:8000/___graphql 运行 graphql 语言查询 比如创建一个博客列表,可以在代码中直接导出一个 graphql 查询语言...import * as React from 'react' import { graphql } from 'gatsby' import Layout from '.....更为复杂 ⛔️ 需要了解 GraphQL Node.Js 的相关知识 ⛔️ 配置繁重 ⛔️ 构建时间会随着内容的增加而变长 ⛔️ 云服务需要付费 值得强调的是,丰富的插件系统是选择 Gatsby 的重要原因

6.5K10

JavaScript前端学习有哪些项目可以练习

how-to-build-a-movie-search-app-using-react-hooks-24eb72ddfaf7/ 02 使用Vue构建聊天应用 你将学到什么内容: 在这个教程中,你将学习如何从头开始设置一款...教程: https://www.sitepoint.com/pusher-vue-real-time-chat-app/ 03 使用Svelte构建待办事项应用 你将学到什么内容: 本教程将向你展示如何从头到尾使用...04 使用Next.js构建电子商务购物车 你将学到什么: 在这个项目中,你将学习如何设置Next.js开发环境、创建新页面组件、获取数据样式并部署一个next应用程序。...06 使用Gatsby建立博客 你将学到什么内容: 在本教程中,你将学习如何利用Gatsby构建出色的博客,可以很好地用来撰写自己的文章,同时利用ReactGraphQL的能力。...技术栈功能: Gatsby React GraphQL 插件主题 MDX/Markdown 引导CSS 教程:https://blog.bitsrc.io/how-to-build-a-blog-with-gatsby-and-boostrap-d1270212b3dc

2.9K20

塔荐 | 2018 年最值得关注的 JavaScript 趋势

我们现在有了 Relay Modern (Facebook开发)Apollo,让你可以比Redux更高效地抓取并传递GraphQL数据到React应用的GraphQL客户端框架。...Gatsby Gatsby 是Kyle Mathews开发的用于React的静态网站生成器。 自从Kyle去年全职开发Gatsby以来,这个东西开始真正获得发展势头。...React网站本身就是用Gatsby开发的,再也有没有比这更有力的证明了。 Gatsby的全部关切都在于性能给React提供尽可能快的web体验。...Gatsby还利用先进的web技术替其他网页预抓取资源,使得浏览起来快如闪电。 尽管Gatsby无论如何也不会统治这个行业,但却是开发快速静态网站非常出色的解决方案,会不断流行下去。...无论如何现在都是JavaScript开发者的好时光,考虑现在你开发桌面移动app已经比过去容易多了。

1.5K80

大势 | 2018最值得关注的JavaScript趋势

我们现在有了Relay Modern (Facebook开发)Apollo,让你可以比Redux更高效地抓取并传递GraphQL数据到React应用的GraphQL客户端框架。...这是一个极其激励人的故事,展现出了开源工作应该如何演进,它的故事真的值得一读。 Storybook太有用了(而且用起来也很有趣),你可以单独地开放测试UI。...React网站本身就是用Gatsby开发的,再也有没有比这更有力的证明了。 Gatsby的全部关切都在于性能给React提供尽可能快的web体验。...尽管Gatsby无论如何也不会统治这个行业,但却是开发快速静态网站非常出色的解决方案,会不断流行下去。 Babel 到现在Babel已经没有介绍的必要了,大体上它仍将成为趋势延续下去。...无论如何现在都是JavaScript开发者的好时光,考虑现在你开发桌面移动app已经比过去容易多了。

78820

React服务器组件入门

Paul Scanlon 使用 Waku 展示了 RSC 如何让 React 开发人员在组件级别访问异步服务器端请求和数据。...在 RSC 之前,Next.js、Gatsby、Remix Astro 等框架要求你在路由级别进行服务器端请求。 以下是一些示例,说明你如何在上述每个框架中实现此目的。...// src/components/child-component.js import { useStaticQuery, graphql } from 'gatsby'; const ChildComponent...中,你从未使用 GraphQL(一个普遍的误解)获取数据;相反,你正在查询它。...使用 RSC,数据获取发生在运行时,因此虽然 RSC Gatsby 的 useStaticQuery 钩子之间获取数据的方法不同,但当你能够从任何组件内部访问数据时,对架构选择有一些值得称道的地方。

10610

为什么我使用 GraphQL 而放弃 REST API?

那么两个值过滤呢?这应该很简单,对吧?使用 URL 编码,查询看起来是这个样子:/todos?filterKeys=key1%2Ckey2&filterValue=value。...但通常,我们没有办法阻止特性蔓延,可能会出现使用AND/OR操作符进行高级过滤的需求。或者复杂的全文搜索查询复杂的过滤。迟早你会看到一些 API 发明了自己的过滤 DSL。...如果开发团队不是全栈的,那么服务器客户端团队之间的沟通就至关重要,在没有机器可读的 API 规范的情况下更是如此。 GraphQL 如何做得更好?...有很多流行的开源项目都在使用 GraphQL:这个博客是基于静态站点生成器 Gatsby,它将 GraphQL 查询的结果转换成数据,然后呈现到 HTML 文件中。...你可以将所有常见的 CRUD 操作暴露为所有表的查询修改。它可能看起来像 ORM,但它不是:你可以完全控制如何设计数据库模式,以及使用什么索引。

2.3K30

【前端必看】2017 年 JavaScript 全面崛起大运势

与 Vue.js 相对应的,React 方面却依然处于碎片化的状态,开发者需要根据自身项目的情况,进行技术选型: 在页面间的路由切换问题; 如何获取数据; 如何把数据绑定到表单; 如何存储应用的状态;...目前有许多项目使用了它,包括今年最流行的两个项目:Create React App Gatsby。...像 the New York Times 这样的大公司开始使用 GraphQL,Relay Apollo (两个主要的 GraphQL 客户端框架) 也在今年发布了两个重要的版本更新。...在这两大库的身后,像 Graphcool 这样的公司也提供了大量的工具库,而 Vulcan 这样的全栈框架也开始采用 GraphQL 。...值得注意的是今年最有人气的静态网站生成器 Gatsby 也在数据处理中使用了 GraphQL

2.6K50

10 款 Web 开发最佳的 Python 框架

将代码粘贴到文本区域并自定义颜色主题,背景窗口框架。一旦准备好,您就可以下载照片并感觉像摇滚明星。至少那是我们书呆子想象的方式。 ?...https://medium.com/rethought/backspace-rethought-aa343485513f Gatsby.js WordPress是如此2010年。...如今制作网站的酷炫方式是ReactNode。这就是Gatsby的用武之地。它是一个使用React,WebpackGraphQL构建静态网站的生成器。它有适用于不同数据源的插件,并且速度很快。 ?...https://www.gatsbyjs.org/ Gatsby.js 如果您是设计师类型或希望改进它,您必须查看此网站。...它具有流行的iOS移动应用程序的截图集,因此您可以从最好的专业人士那里学习如何设计。 ?

1.2K30
领券