前言在《一篇带你用 VuePress + Github Pages 搭建博客》中，我们使用VuePress搭建了一个博客，最终效果查看：TypeScript中文文档。由于VuePress内置的搜索只会对页面的title、h2、h3和标签建立搜索索引。如果需要全文搜索，可以使用Algolia搜索。本文介绍如何应用和配置Algolia搜索。AlgoliaAlgolia是一个实时数据库搜索服务，可以提供毫秒级的数据库搜索服务，其服务可以以API的形式方便地部署在网页、客户端、APP等各种场景中。例如，VuePress官方文档使用的是Algolia搜索。使用Algolia搜索的最大优势是方便。它会自动抓取网站的页面内容并建立索引。您只需要申请一个Algolia服务，在网站上添加一些代码，就像添加统计代码一样，即可实现全文搜索功能：申请搜索服务申请地址：https://docsearch.algolia.com/apply/打开后填写地址、邮箱、仓库地址等信息。这里注意网站需要公开可访问：填写完后，等一会（我等了三天），如果申请通过，我们会收到一封邮件：这时候需要回复邮件，告诉自己你是网站的维护者，你可以修改代码：然后第二天你会收到一封邮件，里面包含AppId等需要的信息：默认主题如果你使用的是VuePress默认主题，直接使用VuePress提供themeConfig.algolia选项，用Algolia搜索替换内置搜索框：//.vuepress/config.jsmodule.exports={themeConfig:{algolia:{apiKey:'',indexName:''//如果Algolia没有为你提供`appId`，使用`BH4D9OD16A`或者去掉这个配置ItemappId:'',}}}这么简单的配置就可以实现全文搜索：搜索为空如果搜索任何数据，显示找不到数据，很可能是爬取的data有Question，我们登录https://www.algolia.com/打开管理后台，点击左侧选项栏中的Search，查看对应的indexName数据。如果Browse没有显示数据，说明爬取的数据可能有问题。结果没有生成对应的Records：如果没有数据，那么我们会检查爬虫逻辑，打开爬虫后台：https://crawler.algolia.com/admin/crawlers/?sort=status&order=ASC&limit=20、点击对应的indexName进入后台：如果显示爬取成功，还有MonitoringSuccess数据，但Records为0，则可能是爬虫提取数据的逻辑有问题，点击左侧选项栏中的Editor查看具体的爬虫逻辑：如果是https://ts.yayujs，就点这里的pathsToMatch。com/docs/**，但是你的url都是以[https://ts.yayujs.com/learn-typescript/**](https://ts.yayujs.com/docs/**)开头的，所以这里大概是会提取错误，修改一下，然后点右边的数据测试一下：如果能像这样提取数据，说明没有问题，点右上角的保存，然后切换回来到Overview，点击右上角的Restartcrawling，我们重新爬取数据：如果Records里面有数据，搜索的时候就会有数据。column是自己实现的，所以加上上面的配置是没有效果的。这时候就需要按照邮件中的方法，手动添加CSS和JavaScript文件，加载完成后调用提供的API即可。我们需要先修改config.js：module.exports={head:[['link',{href:"https://cdn.jsdelivr.net/npm/@docsearch/css@alpha",rel:"stylesheet"}],['script',{src:"https://cdn.jsdelivr.net/npm/@docsearch/js@alpha"}]]}然后修改.vuepress/enhanceApp.js文件：exportdefault({router,Vue,isServer})=>{Vue.mixin({mounted(){//如果不加setTimeout会报错，但不影响效果setTimeout(()=>{try{docsearch({appId:"43GX903BPS",apiKey:"feff649032d8034cf2a636ef55d96054",indexName:"ts-yayujs",container:'.search-box',debug:false});}catch(e){console.log(e);}},100)},});};注意容器，参考docsearch官方仓库，这里提供的不是input输入框的选择器，而是挂载节点的选择器，比如div。此时显示效果如下：样式与现有主题有些不一致，不过没关系，我们可以修改.vuepress/styles/index.styl来覆盖当前样式，比如我修改的代码是：.search-box.DocSearch.DocSearch-Button{cursor:text;宽度：10rem；高度：2rem；颜色：#5b5b5b；border:1pxsolidvar(--border-color);边界半径：0.25rem；字体大小：0.9rem；填充：00.5rem00rem；大纲：无；过渡：所有0.2s缓和；背景：透明；背景大小：1rem;}.search-box.DocSearch-Button-Container{margin-left:0.4rem;}.search-box.DocSearch-Button.DocSearch-Search-Icon{width:16px;高度：16px；位置：相对；top:0.1rem;}.search-box.DocSearch-Button-Placeholder{字体大小:0.8rem;}.search-box.DocSearch-Button-Keys{position:absolute;right:0.1rem;}.search-box.DocSearch-Button-Key{字体大小：12px;line-height:20px;}最终效果如下：系列文章博客搭建系列是我目前为止写的唯一实用系列教程。预计会有20篇左右的文章，讲解如何使用VuePress搭建和优化博客，并部署到GitHub、Gitee、私服等平台。本文为第24篇，全系列文章地址：https://github.com/mqyqingfen...微信：“mqyqingfeng”，加我到SaeYu的唯一读者群。如有错误或不准确的地方，请务必指正，万分感谢。如果你喜欢或者有启发，欢迎star，这也是对作者的鼓励。
