Gatsby Contentful搜索

Question

我有一个使用Contentful的Gatsby项目，可以检索博客并将其显示出来。但是，如果我想提供一个搜索功能来搜索数千个帖子并显示相关结果，该怎么办呢？

我甚至不知道如何开始这个过程 - 推测“结果页面”将成为另一条路线，因为当前路线已经被解析为静态文件 - 但是我不确定在Gatsby已经具有路由时如何进行路由。

是否有人有一个这方面的入门模板？拥有一个会很好！

谢谢。

- user2047485

Answer 1

有几种方法可以解决这个问题：

1. 使用类似于elesticlunr的库进行离线搜索，但需要在构建时创建索引。

幸运的是，可以使用gatsby-plugin-elasticlunr-search插件来实现。

在您的gatsby-config.js中：

module.exports = {
    plugins: [
        {
            resolve: `@andrew-codes/gatsby-plugin-elasticlunr-search`,
            options: {
                // Fields to index
                fields: [
                    'title',
                    'description',
                ],
                // How to resolve each field's value for a supported node type
                resolvers: {
                    // For any node of type MarkdownRemark,
                    // list how to resolve the fields' values
                    ContentProduct: {
                        title: node => node.title,
                        description: node => node.description,
                    },
                },
            },
        },
    ],
};

2. 如果您的网站类型是在线文档，则可以使用Algolia文档功能。 Agolia将自动抓取DOM并构建搜索索引，您只需编写界面以呈现搜索结果。

3. 使用Algolia并在构建时收集搜索索引并将其上传到Algolia，猜猜怎么着？有插件可以做到这一点。

- Khaled Garbaya

---

您可以完全控制代码中要索引和不要索引的内容。至于下载整个网站数据，当您选择静态网站生成器作为堆栈时，您已经在执行此操作 :) 但是，如果您担心索引变得非常大，我建议您使用Algolia解决方案。您绝对可以限制路由，这里有一份详细的文档 https://www.gatsbyjs.org/docs/building-apps-with-gatsby/。 - Khaled Garbaya

我认为其他一些问题可以在不同的问题中发布，因为最初的问题是如何为使用 Gatsby 的网站添加搜索功能。 - Khaled Garbaya

Gatsby serve仅用于开发目的，您不应该在生产服务器上使用它。您需要构建您的网站并托管公共目录中的内容。至于懒加载，让Gatsby来担心吧，它会确保为您的组件加载所有必要的代码。 - Khaled Garbaya

我之前认为 Gatsby Develop 是用来开发的？但是使用 Gatsby Build 后，我的 public 目录中包含了多个 JS 文件，因此当我访问特定博客时，它似乎只会加载该博客的文本。因此，在搜索页面传递所有博客的完整数据确实比仅在必要时加载帖子的标准构建更加繁琐。 - user2047485

@KhaledGarbaya 非常感谢您的Gatsbyjs+Contentful YouTube视频系列。我从中学到了很多，非常感谢您的努力。您是否考虑过发布有关如何在使用GatsbyJS和Contentful时实现搜索的视频？我对您上面提到的第三个选项特别感兴趣。由于目前还没有Gatsby Algolia插件的文档，我不确定如何使用它。 - Janosh