From 6259ac8e98fc3a4001fb986185b9ef38e1fd636e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=98=9F=E6=97=A5=E8=AF=AD?= <xiabee@duck.com>
Date: Tue, 19 Nov 2024 15:43:35 +0800
Subject: [PATCH] [fix] algoliasearch is not defined (#542)

---
 _config.yml                               |   1 +
 layout/_plugins/search/algolia_search.ejs |  23 ++--
 source/js/search/algolia-search.js        | 130 +++++++++++-----------
 3 files changed, 78 insertions(+), 76 deletions(-)

diff --git a/_config.yml b/_config.yml
index b624220..f236417 100755
--- a/_config.yml
+++ b/_config.yml
@@ -202,6 +202,7 @@ search:
     appId: 
     apiKey: 
     indexName: 
+    js: https://gcore.jsdelivr.net/algoliasearch/3/algoliasearch.min.js
 
 
 ######## Comments ########
diff --git a/layout/_plugins/search/algolia_search.ejs b/layout/_plugins/search/algolia_search.ejs
index 91e7b2f..7a75434 100644
--- a/layout/_plugins/search/algolia_search.ejs
+++ b/layout/_plugins/search/algolia_search.ejs
@@ -1,13 +1,12 @@
 <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>
-  
\ No newline at end of file
+  window.addEventListener('DOMContentLoaded', (event) => {
+    window.searchConfig = {
+      appId: '<%- conf.appId %>', 
+      apiKey: '<%- conf.apiKey %>', 
+      indexName: '<%- conf.indexName %>', 
+      js: '<%- conf.js %>',
+      hitsPerPage: 100, 
+    };
+    utils.js('/js/search/algolia-search.js', { defer: true });
+  });
+</script>
diff --git a/source/js/search/algolia-search.js b/source/js/search/algolia-search.js
index 2398bf0..a81ff61 100644
--- a/source/js/search/algolia-search.js
+++ b/source/js/search/algolia-search.js
@@ -1,75 +1,77 @@
-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 filterResults(hits, filterPath) {
-    if (!filterPath || filterPath === '/') return hits;
-    var regex = new RegExp(filterPath);
-    return hits.filter(hit => regex.test(hit.url));
-  }
-
-  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();
-    var filterPath = $inputArea.data('filter');
-
-    if (query.length <= 0) {
-      $searchWrapper.attr('searching', 'false');
-      $resultArea.empty();
+utils.js(window.searchConfig.js).then(() => {
+  utils.jq(() => {
+    var $inputArea = $("input#search-input");
+    if ($inputArea.length === 0) {
       return;
     }
 
-    $searchWrapper.attr('searching', 'true');
+    var $resultArea = $("#search-result");
+    var $searchWrapper = $("#search-wrapper");
+    var client = algoliasearch(window.searchConfig.appId, window.searchConfig.apiKey);
+    var index = client.initIndex(window.searchConfig.indexName);
 
-    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(filterResults(responses.hits, filterPath));
-    });
-  });
-
-  $inputArea.on("keydown", function(e) {
-    if (e.which == 13) {
-      e.preventDefault();
+    function filterResults(hits, filterPath) {
+      if (!filterPath || filterPath === '/') return hits;
+      var regex = new RegExp(filterPath);
+      return hits.filter(hit => regex.test(hit.url));
     }
-  });
 
-  var observer = new MutationObserver(function(mutationsList) {
-    if (mutationsList.length === 1) {
-      if (mutationsList[0].addedNodes.length) {
-        $searchWrapper.removeClass('noresult');
-      } else if (mutationsList[0].removedNodes.length) {
+    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);
     }
-  });
 
-  observer.observe($resultArea[0], { childList: true });
+    $inputArea.on("input", function() {
+      var query = $(this).val().trim();
+      var filterPath = $inputArea.data('filter');
+
+      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(filterResults(responses.hits, filterPath));
+      });
+    });
+
+    $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 });
+  });
 });