CloudCannon/Pagefind 的 JavaScript API 过滤功能详解-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00337/article/details/148548652

CloudCannon/Pagefind 的 JavaScript API 过滤功能详解

pagefind Static low-bandwidth search at scale 项目地址: https://gitcode.com/gh_mirrors/pa/pagefind

前言

在现代网站建设中，搜索功能已经成为标配。但对于内容丰富的网站来说，单纯的全文搜索往往不能满足用户需求。CloudCannon/Pagefind 作为一个静态站点搜索解决方案，提供了强大的 JavaScript API 过滤功能，让用户能够通过多种维度精确查找内容。

过滤功能概述

Pagefind 的过滤功能主要应用于两种场景：

结合搜索关键词使用，缩小结果范围
作为独立功能使用，不依赖搜索关键词

这种设计特别适合知识库、大型博客等场景，用户可能希望通过分类、标签或作者等属性来筛选内容，而不仅仅是依赖关键词搜索。

基础过滤操作

获取可用过滤器

在使用过滤功能前，我们需要先了解索引中有哪些可用的过滤器及其取值：

const filters = await pagefind.filters();

这个方法会返回一个结构化对象，展示每个过滤器类别及其可能的取值，以及每个取值对应的结果数量。例如：

{
    "category": {
        "技术文章": 15,
        "产品文档": 8
    },
    "author": {
        "张三": 5,
        "李四": 10
    }
}

结合搜索使用过滤器

在搜索时添加过滤条件：

const search = await pagefind.search("静态站点", {
    filters: { author: "张三" }
});

这将返回同时满足以下条件的结果：

内容中包含"静态站点"关键词
作者为"张三"

独立使用过滤器

如果不需要关键词搜索，可以传递 null 作为搜索词：

const search = await pagefind.search(null, {
    filters: { category: "技术文章" }
});

这将返回所有分类为"技术文章"的页面。

过滤器结果分析

执行过滤搜索后，返回的对象包含丰富的过滤信息：

{
    "results": [...],
    "unfilteredResultCount": 100,
    "filters": {
        "category": {
            "技术文章": 15,
            "产品文档": 8
        }
    },
    "totalFilters": {
        "category": {
            "技术文章": 20,
            "产品文档": 10
        }
    }
}

关键字段说明：

unfilteredResultCount: 仅基于搜索词的结果总数（不考虑过滤条件）
filters: 显示在当前过滤条件下，再添加各过滤器值会得到多少结果
totalFilters: 显示单独使用各过滤器值会得到多少结果

高级过滤技巧

Pagefind 提供了强大的复合过滤功能，支持多种逻辑组合。

默认 AND 逻辑

默认情况下，多个过滤条件使用 AND 逻辑：

filters: {
    author: ["张三", "李四"],
    category: "技术文章"
}

这表示查找同时满足以下条件的页面：

作者包含"张三"和"李四"
分类为"技术文章"

逻辑操作符

Pagefind 支持四种逻辑操作符：

any: 满足任意一个条件即可
all: 满足所有条件（默认）
none: 不满足任何条件
not: 不满足所有条件

示例1：OR 逻辑

filters: {
    author: {
        any: ["张三", "李四"]
    }
}

查找作者为"张三"或"李四"的页面。

示例2：复杂组合

filters: {
    any: {
        author: ["张三", "李四"],
        category: "技术文章"
    }
}

查找满足以下任一条件的页面：

作者为"张三"或"李四"
分类为"技术文章"

示例3：嵌套逻辑

filters: {
    any: [{
        author: "张三",
        category: "技术文章"
    }, {
        author: "李四",
        category: "产品文档"
    }],
    not: {
        year: "2020"
    }
}

查找满足以下条件的页面：