hexo+next添加algolia搜索 - 简书
hexo+next添加algolia搜索
1、为什么添加algolia搜索第一当然是可以方便的查找所需文章，第二点就是之前常用的swiftype插件不再免费。我的是这个月初搭建完成的，这时候swiftype已经不再免费，而且只开放企业邮箱注册。2、添加效果
3、开始添加下载最新的next主题（5.1.0），因为最新版的已经集成了algolia搜索，可以省去很多配置和修改。我的版本：
（themes\next_config.yml文件最下方查看） 去注册账号（我直接使用的github的账号）
参照下图新建index
打开API Keys页面，里面的信息等会需要写到hexo的配置文件中
在根目录的站点配置文件_config.yml中加入如下配置，参照上图的各种key值
appId: 'appid'
apiKey: 'apiKey'
adminApiKey: 'adminApiKey'
indexName: '上面填写的index名'
chunkSize: 5000
- content:strip
在git bash中执行hexo algolia。如下图
说明已经提交到了algolia。如下图
如果无法提交成功，先执行hexo clean即可。在\themes\next下找到_config.yml，找到如下内容，将enable修改为true，labels修改为自己需要的
在themes\next\layout_partials中找到header.swig，找到以下代码并修改
&nav class="site-nav"&
theme.algolia_search.enable --&
{% set hasSearch = theme.swiftype_key || theme.algolia_search.enable || theme.tinysou_Key || config.search %}
{% if theme.menu %}
&ul id="menu" class="menu"&
{% for name, path in theme.menu %}
{% set itemName = name.toLowerCase() %}
&li class="menu-item menu-item-{{ itemName }}"&
&a href="{{ url_for(path) }}" rel="section"&
{% if theme.menu_icons.enable %}
&i class="menu-item-icon fa fa-fw fa-{{theme.menu_icons[itemName] | default('question-circle') | lower }}"&&/i&
{% endif %}
{{ __('menu.' + itemName) }}
{% endfor %}
{% if hasSearch %}
&li class="menu-item menu-item-search"&
{% if theme.swiftype_key %}
&a href="javascript:;" class="st-search-show-outputs"&
{% elseif config.search %}
&a href="javascript:;" class="popup-trigger"&
&!-- 添加 开始 --&
{% elseif theme.algolia %}
&a href="javascript:;" class="popup-trigger"&
&!-- 添加 结束 --&
{% endif %}
{% if theme.menu_icons.enable %}
&i class="menu-item-icon fa fa-search fa-fw"&&/i& &br /&
{% endif %}
{{ __('menu.search') }}
{% endif %}
{% endif %}
{% if hasSearch %}
&div class="site-search"&
{% include 'search.swig' %}
{% endif %}&/nav&这样就完成了添加。
有问题可以在下面留言，欢迎大家讨论。
写程序的曼联球迷Swiftype搜索最近停了，开始收费，不想收费又想有这个站内搜索功能怎么办？
可以用Algolia免费版！不仅免费，感觉上要比Swiftype要快，下面简单说下集成步骤。
第一步：到官网注册帐号(可以用github登录)
官网地址 注册帐号
新建一个INDEX如图
来到 API-KEYS 页面，上面有后面需要的信息（记得还有上面的INDEX名）。
第二步：上传数据到 Algolia
在Hexo工程目录的根目录下执行
npm install hexo-algolia --save
在根目录的_config.yml中加入如下配置，注意改成前面第一步注册成果数据
algolia:applicationID:'your applicationID'apiKey:'your apiKey'adminApiKey:'your adminApiKey'indexName:'your indexName'chunkSize:5000
接着执行，确保得到提交成功提示
hexo algolia
第三步：修改Hexo主题集成Algolia
确保在head.swig文件中加入如下配置，注意改成自己的
&scripttype=&text/javascript&id=&hexo.configuration&& var CONFIG = { root: '/', algolia: { applicationID: 'your applicationID', apiKey: 'your apiKey', indexName: ''your indexName', hits: {&per_page&:10}, labels: {&input_placeholder&:&搜索...&,&hits_empty&:&未发现与 「${query}」相关的内容&,&hits_stats&:&${hits} 条相关条目，使用了 ${time} 毫秒&} } };&/script&
在要搜索的页面加入如下div
&divclass=&site-search&&&divclass=&algolia-popup popup&&&divclass=&algolia-search&&&divclass=&algolia-search-input-icon&&&iclass=&fa fa-search&&&/i&&/div&&divclass=&algolia-search-input&id=&algolia-search-input&&&/div&&/div&&divclass=&algolia-results&&&divid=&algolia-stats&&&/div&&divid=&algolia-hits&&&/div&&divid=&algolia-pagination&class=&algolia-pagination&&&/div&&/div&&spanclass=&popup-btn-close&&&iclass=&fa fa-times-circle&&&/i&&/span&&/div&&/div&
在要触发搜索的HTML节点加入一个CLASS名为popup-trigger，如图
&liclass=&menu-item menu-item-search&&&ahref=&#&class=&popup-trigger&&&iclass=&menu-item0icon fa fa-search fa-fw&&&/i&&br/& Search&/a&&/li&
确保要搜索页包含如下JS代码（可以单独建立一个.swig文件，然后在整体layout的swig文件中加入）
&script src=&/instantsearch.js/1.5.1/instantsearch.js&&&/script&&script type=&text/javascript&&$(document).ready(function(){varalgoliaSettings = CONFIG.varisAlgoliaSettingsValid = algoliaSettings.applicationID && algoliaSettings.apiKey && algoliaSettings.indexNif(!isAlgoliaSettingsValid) {window.console.error('Algolia Settings are invalid.'); }varsearch = instantsearch({ appId: algoliaSettings.applicationID, apiKey: algoliaSettings.apiKey, indexName: algoliaSettings.indexName, searchFunction: function(helper){varsearchInput = $('#algolia-search-input').find('input');if(searchInput.val()) { helper.search(); } } });// Registering Widgets [ instantsearch.widgets.searchBox({ container: '#algolia-search-input', placeholder: algoliaSettings.labels.input_placeholder }), instantsearch.widgets.hits({ container: '#algolia-hits', hitsPerPage: algoliaSettings.hits.per_page || 10, templates: { item: function(data){return('&a href=&'+ CONFIG.root + data.path +'& class=&algolia-hit-item-link&&'+ data._highlightResult.title.value +'&/a&' ); }, empty: function(data){return('&div id=&algolia-hits-empty&&'+ algoliaSettings.labels.hits_empty.replace(//$/{query}/, data.query) +'&/div&' ); } }, cssClasses: { item: 'algolia-hit-item' } }), instantsearch.widgets.stats({ container: '#algolia-stats', templates: { body: function(data){varstats = algoliaSettings.labels.hits_stats .replace(//$/{hits}/, data.nbHits) .replace(//$/{time}/, data.processingTimeMS);return( stats +'&span class=&algolia-powered&&'+' &img src=&'+ CONFIG.root +'images/algolia_logo.svg& alt=&Algolia& /&'+'&/span&'+'&hr /&' ); } } }), instantsearch.widgets.pagination({ container: '#algolia-pagination', scrollTo: false, showFirstLast: false, labels: { first: '&i class=&fa fa-angle-double-left&&&/i&', last: '&i class=&fa fa-angle-double-right&&&/i&', previous: '&i class=&fa fa-angle-left&&&/i&', next: '&i class=&fa fa-angle-right&&&/i&' }, cssClasses: { root: 'pagination', item: 'pagination-item', link: 'page-number', active: 'current', disabled: 'disabled-item' } }) ].forEach(search.addWidget, search); search.start(); $('.popup-trigger').on('click',function(e){ e.stopPropagation(); $('body').append('&div class=&popoverlay&&').css('overflow','hidden'); $('.popup').toggle(); $('#algolia-search-input').find('input').focus(); }); $('.popup-btn-close').click(function(){ $('.popup').hide(); $('.popoverlay').remove(); $('body').css('overflow',''); });});&/script&&script type=&text/javascript&& $(document).ready(function(){if( $('#local-search-input').size() ===0) { }// Popup Wvarisfetched =// Search DBvarsearch_path =&search.xml&;if(search_path.length ==0) { search_path = &search.xml&; }varpath =&/&+ search_// monfunctionproceedsearch(){ $(&body&).append('&div class=&popoverlay&&').css('overflow','hidden'); $('.popup').toggle(); }//varsearchFunc =function(path, search_id, content_id){ 'use strict'; $.ajax({ url: path, dataType: &xml&,async:true, success: function(xmlResponse){// get the contents from search data isfetched = $('.popup').detach().appendTo('.header-inner');vardatas = $(&entry&, xmlResponse ).map(function(){return{ title: $( &title&,this).text(), content: $(&content&,this).text(), url: $( &url&,this).text() }; }).get();var$input =document.getElementById(search_id);var$resultContent =document.getElementById(content_id); $input.addEventListener('input',function(){varmatchcounts =0;varstr='&ul class=/&search-result-list/&&';varkeywords =this.value.trim().toLowerCase().split(/[/s/-]+/); $resultContent.innerHTML = &&;if(this.value.trim().length &1) {// perform local searching datas.forEach(function(data){varisMatch =varcontent_index = [];vardata_title = data.title.trim().toLowerCase();vardata_content = data.content.trim().replace(/&[^&]+&/g,&&).toLowerCase();vardata_url = data.varindex_title =-1;varindex_content =-1;varfirst_occur =-1;// only match artiles with not empty titles and contentsif(data_title !=''&& data_content !='') { keywords.forEach(function(keyword, i){ index_title = data_title.indexOf(keyword); index_content = data_content.indexOf(keyword);if( index_title &0&& index_content &0){ isMatch = } else{if(index_content &0) { index_content = 0; }if(i ==0) { first_occur = index_ } } }); }// show search resultsif(isMatch) { matchcounts += 1; str += &&li&&a href='&+ data_url +&' class='search-result-title'&&+ data_title +&&/a&&;varcontent = data.content.trim().replace(/&[^&]+&/g,&&);if(first_occur &=0) {// cut out 100 charactersvarstart = first_occur -20;varend = first_occur +80;if(start &0){ start = 0; }if(start ==0){ end = 50; }if(end & content.length){ end = content. }varmatch_content = content.substring(start, end);// highlight all keywords keywords.forEach(function(keyword){varregS =newRegExp(keyword,&gi&); match_content = match_content.replace(regS, &&b class=/&search-keyword/&&&+keyword+&&/b&&); }); str += &&p class=/&search-result/&&&+ match_content +&...&/p&& } str += &&/li&&; } })}; str += &&/ul&&;if(matchcounts ==0) { str ='&div id=&no-result&&&i class=&fa fa-frown-o fa-5x& /&&/div&'}if(keywords ==&&) { str ='&div id=&no-result&&&i class=&fa fa-search fa-5x& /&&/div&'} $resultContent.innerHTML = }); proceedsearch(); } });}// handle and
$('.popup-trigger').mousedown(function(e){ e.stopPropagation();if(isfetched ==false) { searchFunc(path, 'local-search-input','local-search-result'); } else{ proceedsearch(); }; }); $('.popup-btn-close').click(function(e){ $('.popup').hide(); $(&.popoverlay&).remove(); $('body').css('overflow',''); }); $('.popup').click(function(e){ e.stopPropagation(); }); });&/script&
确保要搜索页包含如下CSS代码（可以单独建立一个 .styl 文件，然后在整体css的styl文件中加入，注意确保生成正确，必要时可以执行 hexo clean ）
ul.search-result-list{padding-left:0margin:0px5px0px8}p.search-result{border-bottom:1pxdashed#padding:5px0;}a.search-result-title{font-weight:}a.search-result{border-bottom:display:white-space:overflow:text-overflow:}.search-keyword{border-bottom:1pxdashed#4088b8;font-weight:}#local-search-result{height:90%;overflow:}.popup{display:position:top:10%;left:50%;width:700height:80%;margin-left: -350padding:3px0010background:#color:#333;z-index:9999;border-radius:5(max-width:767px) {.popup{padding:3top:0;left:0;margin:0;width:100%;height:100%;border-radius:0 }}.popoverlay{position:width:100%;height:100%;top:0left:0z-index:2080;background-color:rgba(0,0,0,0.3);}#local-search-input{margin-bottom:10width:50%;}.popup-btn-close{position:top:6right:14color:#4ebd79;font-size:14font-weight:text-transform:cursor:}#no-result{position:left:44%;top:42%;color:#}.busuanzi-count:before{content:& &;float:width:260min-height:25(min-width:768px) and (max-width:991px) {.busuanzi-count{width: }.busuanzi-count:before{display: (max-width:767px) {.busuanzi-count{width: }.busuanzi-count:before{display: }}.site-uv,.site-pv,.page-pv{display: inline-}.site-uv.busuanzi-value,.site-pv.busuanzi-value,.page-pv.busuanzi-value{margin:05}.site-uv{margin-right:10}.site-uv::after{content:&|&;padding-left:10}.algolia-popup{overflow:padding:0;}.algolia-popup.popup-btn-close{padding-left:15border-left:1pxsolid#top:10}.algolia-popup.popup-btn-close.fa{color:#999;font-size:18}.algolia-popup.popup-btn-close:hover.fa{color:#222;}.algolia-search{padding:10px15px5max-height:50border-bottom:1pxsolid#background:#f5f5f5;border-top-left-radius:5border-top-right-radius:5}.algolia-search-input-icon{display: inline-width:20}.algolia-search-input-icon.fa{font-size:18}.algolia-search-input{display: inline-width:calc(90% - 20px);}.algolia-search-inputinput{padding:5px0;width:100%;outline:border:background:}.algolia-powered{float:}.algolia-poweredimg{display: inline-height:18vertical-align:}.algolia-results{position:overflow:padding:10px30height:calc(100% - 50px);}.algolia-resultshr{margin:10px0;}.algolia-results.highlight{font-style:margin:0;padding:02font-size:color:#f00;}.algolia-hits{margin-top:20}.algolia-hit-item{margin:15px0;}.algolia-hit-item-link{display:border-bottom:1pxdashed#transition-duration:0.2s;transition-timing-function: ease-in-transition-delay:0s;}.algolia-pagination.pagination{margin-top:40border-top:padding:0;}.algolia-pagination.pagination-item{display: inline-}.algolia-pagination.page-number{border-top:}.algolia-pagination.page-number:hover{border-bottom:1pxsolid#222;}.algolia-pagination.disabled-item{visibility:}
将下面这张图片拷贝到你的source目录的images目录下
OK，终于完成了，样子可以参照本站的搜索功能！
最新教程周点击榜
微信扫一扫