[feat] algolia_search (#423)

_config.yml

@@ -145,11 +145,15 @@ article:
     max_count: 5
 
 search:
-  service: local_search # local_search, todo...
+  service: local_search # local_search, algolia_search, todo...
   local_search: # 在 front-matter 中设置 indexing:false 来避免被搜索索引
     field: all # post, page, all
     path: /search.json # 搜索文件存放位置
     content: true # 是否搜索内容
+  algolia_search: # Docsearch https://docsearch.algolia.com/apply/ 申请
+    appId: 
+    apiKey: 
+    indexName: 
 
 
 ######## Comments ########

layout/_plugins/search/algolia_search.ejs

@@ -0,0 +1,13 @@
+<script>
+    window.addEventListener('DOMContentLoaded', (event) => {
+      window.searchConfig = {
+        appId: '<%- conf.appId %>', 
+        apiKey: '<%- conf.apiKey %>', 
+        indexName: '<%- conf.indexName %>', 
+        hitsPerPage: 100, 
+      };
+      utils.js('https://gcore.jsdelivr.net/algoliasearch/3/algoliasearch.min.js', { defer: true });
+      utils.js('/js/search/algolia-search.js', { defer: true });
+    });
+  </script>
+

source/js/search/algolia-search.js

@@ -0,0 +1,69 @@
+utils.jq(() => {
+    var $inputArea = $("input#search-input");
+    if ($inputArea.length === 0) {
+      return;
+    }
+
+    var $resultArea = $("#search-result");
+    var $searchWrapper = $("#search-wrapper");
+    var client = algoliasearch(window.searchConfig.appId, window.searchConfig.apiKey);
+    var index = client.initIndex(window.searchConfig.indexName);
+
+    function displayResults(hits) {
+      var $resultList = $("<ul>").addClass("search-result-list");
+      if (hits.length === 0) {
+        $searchWrapper.addClass('noresult');
+      } else {
+        $searchWrapper.removeClass('noresult');
+        hits.forEach(function(hit) {
+          var contentSnippet = hit._snippetResult.content.value;
+          var title = hit.hierarchy.lvl1 || 'Untitled';
+          var $item = $("<li>").html(`<a href="${hit.url}"><span class='search-result-title'>${title}</span><p class="search-result-content">${contentSnippet}</p></a>`);
+          $resultList.append($item);
+        });
+      }
+      $resultArea.html($resultList);
+    }
+
+    $inputArea.on("input", function() {
+      var query = $(this).val().trim();
+
+      if (query.length <= 0) {
+        $searchWrapper.attr('searching', 'false');
+        $resultArea.empty();
+        return;
+      }
+
+      $searchWrapper.attr('searching', 'true');
+
+      index.search(query, {
+        hitsPerPage: window.searchConfig.hitsPerPage,
+        attributesToHighlight: ['content'],
+        attributesToSnippet: ['content:30'],
+        highlightPreTag: '<span class="search-keyword">',
+        highlightPostTag: '</span>',
+        restrictSearchableAttributes: ['content']
+      }).then(function(responses) {
+        displayResults(responses.hits);
+      });
+    });
+
+    $inputArea.on("keydown", function(e) {
+      if (e.which == 13) {
+        e.preventDefault();
+      }
+    });
+
+    var observer = new MutationObserver(function(mutationsList) {
+      if (mutationsList.length === 1) {
+        if (mutationsList[0].addedNodes.length) {
+          $searchWrapper.removeClass('noresult');
+        } else if (mutationsList[0].removedNodes.length) {
+          $searchWrapper.addClass('noresult');
+        }
+      }
+    });
+
+    observer.observe($resultArea[0], { childList: true });
+  });
+