如何在 graphQL 中获取 Gatsby 页面 HTML

Posted 2023-03-08

【中文标题】如何在 graphQL 中获取 Gatsby 页面 HTML

【英文标题】：How to get Gatsby page HTML in graphQL

【发布时间】：2021-02-11 11:33:21

【问题描述】：

我正在尝试使用 elasticlunr 实现站点搜索，并按照 gatsby-plugin-elasticlunr-search 的说明进行操作。我一直在尝试建立搜索索引，因为我无法提出包含我的任何内容的 graphql 查询。

我找到的每个示例都显示了如何编辑 gatsby-config.js 以使用 markdown 内容填充 graphql：

resolvers: 
      // For any node of type MarkdownRemark, list how to resolve the fields` values
      MarkdownRemark: 
        title: node => node.frontmatter.title,
        tags: node => node.frontmatter.tags,
        path: node => node.frontmatter.path,
      ,
    ,

我没有任何降价，我的内容完全是 html 和一些 JSON 文件。有什么方法可以将 HTML 内容提取到 graphql 中，以便将其包含在搜索索引中？

我是不是走错了路？

【参考方案1】：

您可以像指南使用 markdown 一样检索 JSON 文件/内容（您可以在 Gatsby's docs 或 this article 中看到），但是，您可能需要创建一个数据结构来填充您的HTML，因为您无法直接从 HTML 文件中获取数据，因为它不在 Gatsby 文件系统中，因此 Gatsby 不知道如何从该内容创建节点或 GraphQL 架构。

最简单的方法是创建一个自定义数据文件系统（JSON、YAML 或 markdown 文件）来填充您的 HTML 并使其动态化，而不是像实际（显然）那样“硬编码”。一旦您设置了文件系统并且您能够创建查询以收集数据并填充您的页面/组件，您将能够创建查询以使用elasticlunr。

资源：

https://itnext.io/reading-data-from-a-json-file-with-gatsby-graphql-572b18ab98a https://github.com/gatsbyjs/gatsby/issues/20734 GraphQL Query access all transformed json files within a folder located in subdirectories

【讨论】：

感谢您的建议，听起来好像根本不可能将 HTML 内容导入 GraphQL。我们现在将使用 Algolia 或 Google 搜索之类的东西，稍后将这些内容移动到 JSON 或 Markdown 文件中。

如果您与 Algolia 打交道，您将面临同样的问题，您需要一个查询以允许该服务进行某些查询（自我体验）。

你完全正确，我认为 Algolia 会爬取生成的 HTML 以生成索引，但他们没有。谷歌似乎是我们短期内的唯一选择。再次感谢费兰！

您可以使用 Netlify。他们有一个在每个构建上运行的 Algolia 插件。所以该索引将代表 netlify 创建。

它仍然基于您需要提供的查询以创建索引。你总是需要在爬虫和搜索引擎后面添加逻辑。