9、Gatsby网站开发：模板创建与图像使用指南

Gatsby网站开发：模板创建与图像使用指南

1. 创建可复用模板与搜索功能实现

在开发中，有时我们会遇到像 Header.js 这样并非页面组件的情况，此时无法像普通页面组件那样在页面末尾追加 GraphQL 查询。不过，我们可以借助 StaticQuery 来定位组件的数据。

StaticQuery 与页面查询有所不同，它不能像页面查询那样通过页面上下文接受变量。但在搜索索引始终为静态的场景下，这并不是限制。 StaticQuery 有两个重要的属性： query 和 render 。 query 用于接受 GraphQL 查询， render 则告知组件如何使用查询得到的数据进行渲染。

以下是一个示例代码：

render={data => (
  <Search
   searchIndex={data.siteSearchIndex.index}/>
)} />
</header>
);
export default Header;

完成搜索功能后，重启开发服务器，你会发现网站的头部已经包含了搜索组件。输入一些字符并点击搜索结果，你将被导航到相应的页面。通过调整解析器并运用相同的方法和工具，我们还能将不同类型的页面添加到搜索结果中，实现真正的全站搜索。