搜索引擎前端开发工具【免费下载链接】pagefindStatic low-bandwidth search at scale项目地址https://gitcode.com/gh_mirrors/pa/pagefind点击查看免费下载Pagefind 的 Default UI默认 UI原生支持基于索引的过滤器Filter交互只要页面索引中包含过滤器数据搜索结果旁就会自动渲染出侧边栏过滤器面板并在每个过滤值旁显示实时计数。本指南以docs/content/docs/default-ui-filtering.md为骨架结合pagefind_ui源码与pagefind_web的过滤实现完整讲解从页面标记过滤器到 UI 展示、计数计算、空过滤器隐藏以及 Default UI 的 AND 过滤语义帮助你为知识库、文档站或博客快速搭建可用的分类/标签筛选体验。一、前置准备让索引“拥有”过滤器Default UI 展示过滤器的前提是索引中存在过滤器数据。过滤器是通过在 HTML 元素上声明data-pagefind-filter属性建立的完整语法见 设置过滤器这里归纳四种最常用的写法。1. 从元素内容捕获h1My Blog Post/h1 p Author: span>p Authors: span>head meta >h1>h1 >{ heading: [Hello World], tag: [Documentation, Article], author: [Freeform text, captured to the end] }三个重要注意事项data-pagefind-filter不必位于body或data-pagefind-body内部该属性位于data-pagefind-ignore元素上或其内部时仍然生效any、all、none、not是保留关键字不能用作过滤器键名——它们在搜索 API 层承担复合过滤语义后文详述。二、Default UI 的过滤器面板展示逻辑索引一旦包含过滤器Default UI 就会在搜索结果旁渲染侧边栏。侧边栏由pagefind_ui/default/svelte/filters.svelte组件驱动其核心结构是一个fieldset classpagefind-ui__filter-panel内部按过滤器键分组渲染为可折叠的details块每个值渲染为一个带复选框的条目并显示value (count)形式的计数见 filters.svelte。面板默认的展开策略从源码看过滤器面板并非默认全部展开而是遵循“默认打开”判断逻辑// filters.svelte 初始化逻辑 $: if (available_filters !initialized) { initialized true; let filters Object.entries(available_filters || {}); if (filters.length 1) { let values Object.entries(filters[0][1]); if (values?.length 6) { // No need to hide a single filter group with only a few options default_open true; } } }即当索引中只有一个过滤器组、且该组的值不超过 6 个时面板默认展开否则分组折叠用户可点击分组标题展开查看。如果你想强制某个过滤器组默认展开可以传入openFilters配置new PagefindUI({ element: #search, openFilters: [Tags, Type] });openFilters会无视分组数量与值数量让列出的过滤器名默认处于展开状态源码中通过open_filters.map(f f.toLowerCase())与过滤器名做大小写不敏感比较见 filters.svelte。过滤器数据从哪来初始加载与搜索联动pagefind_ui/default/svelte/ui.svelte中的loadFilters()在初始化时会调用pagefind.filters()拉取全量过滤器及其计数作为available_filtersui.svelte而在每次搜索返回后又会用results.filters覆盖available_filtersui.svelte这正是“计数随搜索词与已选过滤器动态变化”的实现基础。三、过滤器计数随搜索词与已选过滤器实时变化每个过滤值旁的计数代表在当前搜索词、以及当前已勾选的过滤器组合之下该过滤值还能命中多少结果。它由pagefind_web的SearchIndex::get_filters计算传入当前命中的页面集合作为intersect_pages对每个filter: value求其页面位集合与当前结果集合的交集大小filter.rs。例如搜索词为static且已勾选author CloudCannon时tag: Documentation的计数表示“在static与CloudCannon双重条件下再叠加Documentation过滤后剩余的结果数”。这种联动机制在 JS API 层同样存在pagefind.search()返回的filters字段是“在当前过滤基础上再叠加某个过滤值的剩余数量”totalFilters是“替换当前过滤后的数量”unfilteredResultCount则是“不应用任何过滤时的结果数”完整示例见 js-api-filtering.md。四、空过滤器默认显示与 showEmptyFilters 隐藏原文档明确指出默认情况下即使某个过滤值在当前条件下剩余结果数为 0它依然会显示在侧边栏中。这是有意为之的避免用户误以为某个分类不存在也便于用户取消勾选已选的过滤值。new PagefindUI({ element: #search, showEmptyFilters: false });传入showEmptyFilters: false即可隐藏当前无剩余结果的过滤值。这一行为在源码中有两处印证配置默认值ui-core.js中let showEmptyFilters opts.showEmptyFilters ?? true;ui-core.js确认默认开启“显示空过滤器”渲染条件filters.svelte中每个值条目的渲染条件为{#if show_empty_filters || count || selected_filters[${filter}:${value}]}filters.svelte——当showEmptyFilters为false时只有计数大于 0、或该值已被用户勾选的值才会继续渲染保证用户已选中的空过滤值不会被隐藏从而避免出现“复选框还在但选项消失”的交互断裂。五、AND 过滤语义所有已勾选过滤器必须同时满足原文档特别强调目前 Default UI 将所有过滤器视为 AND 过滤——页面只有匹配全部已勾选过滤器时才会展示。这在 UI 到搜索层的调用链中体现得非常清晰filters.svelte将每个被勾选的复选框以filter:value形式存入selected_filtersui.svelte的parseSelectedFilters再将其解析为搜索 API 需要的结构const parseSelectedFilters (filters) { let filter {}; Object.entries(filters) .filter(([, selected]) selected) .forEach(([selection]) { let [key, value] selection.split(/:(.*)$/); filter[key] filter[key] || []; filter[key].push(value); }); return filter; };ui.svelte解析结果如{ author: [CloudCannon, Pagefind], tag: [Article] }会作为filters选项传给pagefind.search()。在底层pagefind_web的过滤求值器对同一过滤器键下的数组默认以FilterBehaviour::All语义做位集合交集collapse时对Any求并集、对All求交集见 filter.rs因此勾选多个不同过滤器键如authortag页面必须同时满足两者AND勾选同一过滤器键下的多个值如author同时勾选CloudCannon与Pagefind页面必须同时拥有这两个值同样是 AND。这解释了原文档中的表述勾选越多结果越少。六、与 JS API 复合过滤的边界Default UI 暂不支持 any/none/not需要明确的是上述 AND 语义是 Default UI 的当前固定行为。如果你需要“或”OR、“排除”NOT等更复杂的组合过滤Default UI 目前不直接提供勾选层面的支持但底层搜索 API 是支持的——这也是any、all、none、not被列为保留字的原因。在 js-api-filtering.md 中你可以通过 JS API 实现任意嵌套的复合过滤例如“作者是 CloudCannon 或 Pagefind且标签为 Article”const search await pagefind.search(static, { filters: { author: { any: [CloudCannon, Pagefind] }, tag: Article }, });由于PagefindUI构造器会把 UI 专属配置键从选项中剔除后将剩余键原样透传给搜索 APIui-core.js你可以在初始化时通过额外键为 Default UI 注入部分搜索 API 配置如sort、baseUrl等。不过对于页面级的复合过滤语义更合适的做法是直接调用pagefind.search()自行实现定制 UI或将过滤作为主交互场景如知识库分类浏览交由 js-api-filtering.md 中的pagefind.search(null, { filters })独立过滤模式完成。七、组件时代的新选择pagefind-filter-pane值得一提的是项目正在演进中的新版 Component UIWeb Components已将过滤面板独立为pagefind-filter-pane组件并提供了比 Default UI 更丰富的面板行为支持expanded属性强制展开、open指定默认打开的过滤器组、sort对过滤值按字母序排列等。仓库中的集成测试 filter-pane-options.toolproof.yml 完整演示了在同一页面并排使用默认折叠、强制展开、指定opencategory与sortalphabetical四种过滤面板的 HTML 写法与预期行为可作为迁移或选型的参考。相关组件文档见 filter-pane 组件参考。小结围绕 Default UI 的过滤功能本指南覆盖了完整链路数据来源用data-pagefind-filter的四种语法内容捕获、属性捕获、内联指定、逗号合并为页面打上过滤器标记面板展示索引有过滤器时自动渲染侧边栏单一过滤器组且值不超过 6 个时默认展开可用openFilters强制展开指定分组实时计数每个过滤值的计数随当前搜索词与已勾选过滤器动态变化由pagefind_web的位集合交集计算得出空过滤值默认继续显示计数为 0showEmptyFilters: false可隐藏但已勾选的值始终保留AND 语义所有勾选的过滤器按 AND 组合跨键与同键多值均需全部满足如需 any/none/not 复合过滤请使用 JS API。上述配置项在 ui.md 的 showEmptyFilters 小节 有同样完整的说明可作为参数速查表随时回查。赞分享搜索引擎前端开发工具【免费下载链接】pagefindStatic low-bandwidth search at scale项目地址https://gitcode.com/gh_mirrors/pa/pagefind点击查看免费下载相关推荐使用 AWS SDK for C 操作 Amazon RDS从 Hello World 到 DB 实例全生命周期管理使用 AWS SDK for C 操作 Amazon RDS从 Hello World 到 DB 实例全生命周期管理 本文基于 cpp/example_c移动开发mdBook 侧边栏标题导航的过滤机制搜索结果高亮?highlight与 filterHeader 源码解析mdBook 侧边栏标题导航的过滤机制搜索结果高亮 ?highlight 与 filterHeader 源码解析 导读 本文以 mdBook 仓库中 G开发工具文档Botasaurus 结果页过滤与排序Filtering and Sorting完全指南12 种过滤器与 13 种排序器实战详解Botasaurus 结果页过滤与排序Filtering and Sorting完全指南12 种过滤器与 13 种排序器实战详解 Botasaurus 是网页爬虫上一篇Windows文件资源管理器美化焕新体验背景效果视觉革命下一篇3分钟免费激活Unity全版本UniHacker跨平台破解工具终极指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考