本地搜索(@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
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2416710.html
如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!