当前位置: 首页 > Web前端 > HTML5

Hexo+Next集成Algoliasearch

时间:2023-04-06 00:06:34 HTML5

集成Algoliasearch因为Swiftype现在收费,没有免费版。LocalSearch的搜索体验不好,微搜Next官网描述太少!所以选择Algolia。注意:Algolia搜索是在5.1.0版本中引入的。要使用该功能,请确保您使用的NexT版本在此之后先注册一个Algolia账号Algolia登录页面https://www.algolia.com/users/sign_in,即可登录直接使用您的GitHub或Google帐户,或者您可以注册一个新帐户。我直接使用我的Google帐户登录并在注册后的14天内拥有所有功能(包括付费功能)。之后如果不续费,会自动降级为免费账户。免费账户共有10000条记录,每月100000条可操作记录。注册完成后,新建Index。稍后将使用此索引名称。Index创建后,这个Index此时不包含任何数据。接下来,您需要安装HexoAlgolia扩展。这个扩展的功能是收集网站的内容并通过API发送给Algolia。进入站点根目录,执行命令安装:npminstallhexo-algolia--save#最新版本为1.2.4。以下操作均基于此版本文档获取Key,更新站点根目录配置,打开站点根目录_config.yml中添加如下代码#AlgoliaSearchAPIKeyalgolia:applicationID:'YourApplicationID'apiKey:'YourSearch-OnlyAPIKey'indexName:'Entertheindexnameyourjustcreated'修改AlgoliaSearchACL(AccessControlList)选择稍后保存。运行完成后,执行命令export(windowsisset)(Powershelluses$env:)HEXO_ALGOLIA_INDEXING_KEY=yourSearch-OnlyAPIkeyset(Macandgitbashareexport)(Powershelluses$env:)HEXO_ALGOLIA_INDEXING_KEY#检查是否设置成功如果没有值则设置hexoalgolia失败。成功后,修改Next主题配置文件。更改Nexttheme配置文件,找到AlgoliaSearch配置部分:#AlgoliaSearchalgolia_search:enable:truehits:per_page:10labels:input_placeholder:SearchforPostshits_empty:"WehavenoFindanysearchresults:${query}"hits_stats:"Findabout${hits}results(time${time}ms)"只需将enable改为true,即可根据需要调整labels中的文字。这是我修改的文本。总结一下集成遇到的BUGP。请在你的hexo_config.yml文件中提供一个Algolia索引名称原因:AlgoliaSearchAPIKeyindexName错误解决方法:查看之前创建的索引名称Notenoughrightstoupdateanobjectnear原因:没有修改AlgoliasearchACL(AccessControlList)解决办法:按1.4勾选,然后移动端的mask可以覆盖搜索原因:mask的z-index值太高,我下一个主题是5.1.3版本或者其他版本没有这个BUG的解决方法:找到themesnextsourcecss_commoncomponentstird-party下的algolia-search.styl文件在algolia-search.styl文件的第8行添加+mobile()z-index:1000我的博客和github地址http://blog。langpz.comhttps://github.com/lanpangzhi参考http://theme-next.iissnan.com/third-party-services.html#algolia-searchhttps://github.com/oncletom/hexo-algolia