Question

任何人都可以提供一些提示来提示如何使用 GatsbyJS 解决以下问题：我有一个页面，通过此GraphQL查询列出了项目的所有降价文件：

query ListQuery {
    allMarkdownRemark(sort: {fields: frontmatter___date, order: DESC}) {
        edges {
            node {
                id
                html
                frontmatter {
                    date(formatString: "DD.MM.YY")
                    docs
                    path
                    tag
                    title
                }
            } 
        }
    }
}

如果我是对的，则无法设置绑定到搜索输入字段的动态过滤器。

后来我发现：https://www.gatsbyjs.org/docs/adding-search-with-js-search/ 我以为 js-search 可能是解决方案，但是我需要一个大的.json文件。问题：使用markdown文件更舒适。因此，这也不像是正确的解决方案。

感谢您的帮助！

Answer 1

引用the docs

在完成将客户端搜索添加到您的盖茨比网站，您应该熟悉盖茨比的基础知识

Markdown和GraphQL在创建静态网站的构建阶段中使用。

在运行阶段期间，在客户端搜索期间，您无权访问GraphQL / Markdown。用户与您的网站互动期间，它们不存在。

因此，对于客户端搜索，您应该创建need a big .json file。如果您遵循该文档，那对您来说将不是问题。

Answer 2

看起来我回答这个问题很晚了，但这可能对其他寻求帮助的人有所帮助。

在将搜索添加到gatsbyjs网络应用程序之前，您应该了解gatsby如何构建应用程序。您可以在docs中进行检查。

要添加搜索，您首先需要为所有降价文件创建索引。要创建索引，您可以手动执行，也可以使用搜索引擎，例如aloglia，弹性搜索或lunr.js。如果您希望所有事情都易于管理，可以使用aloglia，它具有免费搜索的上限。如果您想不花钱去，可以选择lunrjs。

这些搜索引擎将要做的是，它们将在graphql数据层上方创建一个数据层，该数据层可在运行时使用。然后，您可以创建可用于查询应用程序中帖子的节点。This blogpost解释了在gatsby中设置搜索的详细信息。

GatsbyJS：基于降价文件进行搜索

2 个答案: