Гэтсби Содержательный поиск

Question

У меня есть проект Gatsby, который использует Contentful. Все хорошо - я могу получить блоги, например и показать их.

Но если я хочу предоставить средство поиска для поиска по потенциально тысячам сообщений и отображения соответствующих результатов - как я могу это сделать?

Я даже не уверен, как начать это - предположительно, «страница результатов» будет другим маршрутом, поскольку текущий маршрут уже разрешен как статический файл, - но я не уверен, как бы я все это направил, когда Гэтсби уже есть маршрутизация.

Кто-нибудь получил стартовый шаблон для этого? Было бы хорошо иметь один!

спасибо

Answer 1

Есть несколько способов подойти к этому;

1. Использование библиотек, таких как elesticlunr , для автономного поиска, но для этого потребуется создать индекс во время сборки.

К счастью, этого можно добиться с помощью плагина gatsby-plugin -asticlunr-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 docs .

Agolia очистит DOM и автоматически создаст поисковый индекс, и все, что вам осталось сделать, - это создать интерфейс для отображения результатов поиска .

3. Используя Algolia, соберите поисковый индекс во время сборки и загрузите его в Algolia и угадайте, что: для этого есть плагин .