Question

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

假设我的帖子是食谱，并且按类型分类：主要，小吃和甜点。我想要一个过滤器，可以是按钮还是下拉列表都没有关系，当用户选择它时，我将仅显示相关的项目。理想情况下，我将使用多个过滤器，大约4-5个过滤器，以适应帖子前题的不同属性。

据我所知，使用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部分有点让人不知所措。

在盖茨比中实施过滤器选项

1 个答案: