本地搜索(@vuepress/plugin-slimsearch替换vuepress-plugin-search-pro)

要实现全局搜索标签Tag你需要使用slimsearch插件的customFields配置项。这个功能允许你将页面中的自定义数据比如标签、分类、作者等添加到搜索索引中。{vuepress/plugin-slimsearch:2.0.0-rc.121}️ 全局搜索Tag的配置方案基础配置搜索文章标签假设你在文章的 Frontmatter 中是这样定义标签的--- title: 我的文章 tags: - Vue.js - 前端开发 - JavaScript ---在.vuepress/config.ts中添加如下配置import{slimsearchPlugin}fromvuepress/plugin-slimsearchexportdefault{plugins:[slimsearchPlugin({// 确保启用了内容索引如果需要同时搜索正文indexContent:true,// 自定义字段添加标签搜索customFields:[{name:tags,getter:(page)page.frontmatter.tags,formatter:标签: $content,},],}),],}处理不同格式的Tag标签可能有不同的格式你可以通过getter函数灵活处理customFields:[{name:tags,getter:(page){consttagspage.frontmatter.tags// 处理字符串格式 Vue,Reactif(typeoftagsstring){returntags.split(,).map(tagtag.trim())}// 处理数组格式 [Vue, React]if(Array.isArray(tags)){returntags}// 处理单个标签 Vueif(typeoftagsstring){return[tags]}returnnull},formatter:标签: $content,},]多语言支持如果你的站点有多语言可以为不同语言设置不同的显示格式customFields:[{name:tags,getter:(page)page.frontmatter.tags,formatter:{/:Tags: $content,/zh/:标签: $content,/jp/:タグ: $content,},},]同时搜索多个字段如果你想同时搜索标签、分类和作者customFields:[{name:tags,getter:(page)page.frontmatter.tags,formatter:️ $content,},{name:category,getter:(page)page.frontmatter.category,formatter: $content,},{name:author,getter:(page)page.frontmatter.author,formatter: $content,},] 注意事项1. 确保索引生效添加customFields后需要删除.vuepress/.temp和.vuepress/dist并重新构建如果搜索不到检查 Frontmatter 中是否有search: false禁用索引2. 调试技巧在浏览器控制台查看索引是否包含标签数据// 查看搜索插件的内部状态window.__VUEPRESS__?.__plugins?.slimsearch?.index3. 版本兼容性确保vuepress/plugin-slimsearch的版本与你的 VuePress 核心版本兼容如果使用vuepress-theme-hope建议通过主题的plugins.slimsearch配置避免重复引入4. 搜索效果配置完成后当你搜索Vue.js时搜索结果中会出现标题包含Vue.js的文章正文包含Vue.js的文章如果开启indexContent标签包含Vue.js的文章会显示为标签: Vue.js