javascript - 在 Gatsby 中实现过滤器选项

Question

我是 Gatsby 和 React 的新手，我找不到问题的答案。我希望能够在我的网站主页上提供过滤选项，以允许用户仅显示与该过滤器相关的内容。

假设我的帖子是食谱，它们按类型分类:主菜、小吃和甜点。我想要一个过滤器，可以是一个按钮或一个下拉列表，这都没有关系，当用户选择它时，我将只显示相关的项目。理想情况下，我将有多个过滤器，大约 4-5 个过滤器用于我的帖子的 frontmatter 的不同属性。

据我所知，这并不是我可以用 graphql 做的事情，因为在构建之后我无法再访问它，所以我正在向更有经验的开发人员寻求一些建议。

Answer 1

如果你有一小部分帖子，我认为你可以制作一个搜索组件来获取所有帖子，然后使用类似 js-search 的东西或 flexsearch将它们编入索引。

在非页面组件中(不在 src/pages 文件夹中)，您可以使用 StaticQuery获取所有帖子的信息。

假设你有这个 graphql 查询结果:

data: {
  allMarkdownRemark: {
    edges: [{
      node: {
        id: '1234-1233...',
        fields: {
          slug: '/hello/'
        },
        frontmatter: {
          title: 'hello',
          tags: [ 'go', 'js' ]
        }
      }
    }, {
      node: {
        id: ...
      }
    }]
  }
}

然后你可以使用 js-search 索引和搜索帖子:

const posts = data.allMarkdownRemark.edges.map(({ node }) => node) // unwrap edges

const postIndex = new JsSearch.Search('id')
postIndex.addIndex(['frontmatter', 'tags']) // index node.frontmatter.tags
postIndex.addIndex(['frontmatter', 'title'])
postIndex.addDocuments(posts) // add data to array

const results = postIndex.search('go')
console.log(results) // [{ id: '1234-1233...', frontmatter: { title: 'hello', tags: [ 'go', 'js' ]}}]

然后您可以将此结果存储在组件的状态中，并将结果呈现为帖子。

---

Gatsby 的文档也有一个 guide关于向您的网站添加搜索，尽管我认为 js-search 部分有点让人不知所措。