如何使用Nuxt.js和Nuxt Content无头CMS为静态站点添加搜索功能

完全可以在纯静态站点上实现该搜索筛选功能，不需要单独托管CMS或发起后端动态请求，基于Nuxt Content的预生成内容索引即可完成客户端侧的全量筛选。

• 小体量博客（文章数<1000篇）：直接使用Nuxt Content自带的客户端查询API
  Nuxt在执行nuxt generate静态构建时，会自动把所有Nuxt Content管理的文章元数据、全文内容序列化打包到静态资源目录的JSON索引文件中。你在搜索页面可以直接调用queryContent()方法传入筛选条件，所有查询都会在客户端读取本地预生成的索引完成，不需要任何后端请求，支持的筛选维度完全覆盖你提到的标题、全文、作者、发布日期等。
  简单的示例代码如下：

  const searchQuery = ref('')
  const authorFilter = ref('')
  const dateRange = ref<[Date | null, Date | null]>([null, null])
  const articles = ref([])
  
  async function handleSearch() {
    const query = queryContent('posts')
    // 标题/全文模糊匹配
    if (searchQuery.value) {
      query.where({
        $or: [
          { title: { $contains: searchQuery.value } },
          { body: { $contains: searchQuery.value } }
        ]
      })
    }
    // 作者精准筛选
    if (authorFilter.value) {
      query.where({ author: authorFilter.value })
    }
    // 发布日期区间筛选
    if (dateRange.value[0] && dateRange.value[1]) {
      query.where({
        publishedAt: {
          $gte: dateRange.value[0].toISOString(),
          $lte: dateRange.value[1].toISOString()
        }
      })
    }
    articles.value = await query.find()
  }
  

• 大体量博客（文章数>1000篇）：构建阶段预生成轻量搜索索引
  如果文章量过大全量索引加载较慢，可以在构建钩子中遍历所有文章，提取需要的搜索字段，用fuse.js、lunr.js这类轻量客户端搜索库生成压缩后的专用搜索索引，和其他静态资源一起打包。用户进入搜索页时仅加载这个小体积索引，所有筛选操作都在本地内存中完成，性能更好。

只有当你的博客文章量级达到十万级以上，客户端索引体积大到影响加载体验时，才需要考虑单独部署CMS后端提供搜索接口，普通个人博客/小型站点完全不需要额外的后端服务。

内容的提问来源于stack exchange，提问作者DaDo