From 92bdb32a294d3e16119099832932e7769509bb48 Mon Sep 17 00:00:00 2001
From: Mimi <1119186082@qq.com>
Date: Mon, 10 Aug 2020 23:14:44 +0800
Subject: [PATCH] Optimize Algolia Search

---
 _vendors.yml                                  |  3 +
 layout/_partials/search/algolia-search.njk    |  2 +-
 layout/_partials/search/localsearch.njk       |  2 +-
 scripts/events/lib/utils.js                   |  1 +
 .../components/third-party/search.styl        | 67 ++++++++-----------
 source/js/algolia-search.js                   | 18 +++--
 source/js/local-search.js                     |  2 +-
 7 files changed, 49 insertions(+), 46 deletions(-)

diff --git a/_vendors.yml b/_vendors.yml
index 20a774b..7998f04 100644
--- a/_vendors.yml
+++ b/_vendors.yml
@@ -1,3 +1,6 @@
+# This file is automatically generated
+# See https://github.com/next-theme/plugins
+
 anime:
   name: animejs
   version: 3.2.0
diff --git a/layout/_partials/search/algolia-search.njk b/layout/_partials/search/algolia-search.njk
index 13f087b..47efb28 100644
--- a/layout/_partials/search/algolia-search.njk
+++ b/layout/_partials/search/algolia-search.njk
@@ -7,7 +7,7 @@
     <i class="fa fa-times-circle"></i>
   </span>
 </div>
-<div class="algolia-results">
+<div class="search-result-container">
   <div id="algolia-stats"></div>
   <div id="algolia-hits"></div>
   <div id="algolia-pagination"></div>
diff --git a/layout/_partials/search/localsearch.njk b/layout/_partials/search/localsearch.njk
index 26931e6..7ee3859 100644
--- a/layout/_partials/search/localsearch.njk
+++ b/layout/_partials/search/localsearch.njk
@@ -11,7 +11,7 @@
     <i class="fa fa-times-circle"></i>
   </span>
 </div>
-<div id="search-result">
+<div class="search-result-container">
   <div id="no-result">
     <i class="fa fa-spinner fa-pulse fa-5x"></i>
   </div>
diff --git a/scripts/events/lib/utils.js b/scripts/events/lib/utils.js
index e34613c..8522135 100644
--- a/scripts/events/lib/utils.js
+++ b/scripts/events/lib/utils.js
@@ -53,6 +53,7 @@ const points = {
   ]
 };
 
+// Required by theme-next-docs
 module.exports = {
   resolve,
   highlightTheme,
diff --git a/source/css/_common/components/third-party/search.styl b/source/css/_common/components/third-party/search.styl
index 0673cbb..435a46a 100644
--- a/source/css/_common/components/third-party/search.styl
+++ b/source/css/_common/components/third-party/search.styl
@@ -71,6 +71,30 @@
       display: none;
     }
   }
+
+  .search-result-container {
+    height: calc(100% - 55px);
+    overflow: auto;
+    padding: 5px 25px;
+
+    hr {
+      margin: 10px 0;
+    }
+  }
+
+  .search-result-list {
+    margin: 0 5px;
+    padding: 0;
+  }
+
+  a.search-result-title {
+    font-weight: bold;
+  }
+
+  p.search-result {
+    border-bottom: 1px dashed $grey-light;
+    padding: 5px 0;
+  }
 }
 
 if (hexo-config('algolia_search.enable')) {
@@ -92,25 +116,6 @@ if (hexo-config('algolia_search.enable')) {
     }
   }
 
-  .algolia-results {
-    height: calc(100% - 55px);
-    overflow: auto;
-    padding: 5px 30px;
-
-    hr {
-      margin: 10px 0;
-    }
-  }
-
-  .algolia-hit-item {
-    margin: 15px 0;
-  }
-
-  .algolia-hit-item-link {
-    border-bottom: 1px dashed $grey-light;
-    display: block;
-  }
-
   .algolia-pagination {
     // Override default style of ul
     margin: 40px 0;
@@ -139,26 +144,12 @@ if (hexo-config('local_search.enable')) {
       padding: 2px;
     }
 
-    ul.search-result-list {
-      margin: 0 5px;
-      padding: 0;
-      width: 100%;
-    }
-
-    p.search-result {
-      border-bottom: 1px dashed $grey-light;
-      padding: 5px 0;
-    }
-
-    a.search-result-title {
-      font-weight: bold;
-    }
-
-    #search-result {
+    .search-result-container {
       display: flex;
-      height: calc(100% - 55px);
-      overflow: auto;
-      padding: 5px 25px;
+    }
+
+    .search-result-list {
+      width: 100%;
     }
 
     #no-result {
diff --git a/source/js/algolia-search.js b/source/js/algolia-search.js
index 9ad8151..630bad0 100644
--- a/source/js/algolia-search.js
+++ b/source/js/algolia-search.js
@@ -53,11 +53,19 @@ document.addEventListener('DOMContentLoaded', () => {
     }),
 
     instantsearch.widgets.hits({
-      container: '#algolia-hits',
-      templates: {
+      container : '#algolia-hits',
+      escapeHTML: false,
+      templates : {
         item: data => {
-          const link = data.permalink ? data.permalink : CONFIG.root + data.path;
-          return `<a href="${link}" class="algolia-hit-item-link">${data._highlightResult.title.value}</a>`;
+          const { title, excerpt, excerptStrip, contentStripTruncate } = data._highlightResult;
+          let result = `<a href="${data.permalink}" class="search-result-title">${title.value}</a>`;
+          const content = excerpt || excerptStrip || contentStripTruncate;
+          if (content && content.value) {
+            const div = document.createElement('div');
+            div.innerHTML = content.value;
+            result += `<a href="${data.permalink}"><p class="search-result">${div.textContent.substr(0, 100)}...</p></a>`;
+          }
+          return result;
         },
         empty: data => {
           return `<div id="algolia-hits-empty">
@@ -66,7 +74,7 @@ document.addEventListener('DOMContentLoaded', () => {
         }
       },
       cssClasses: {
-        item: 'algolia-hit-item'
+        list: 'search-result-list'
       }
     }),
 
diff --git a/source/js/local-search.js b/source/js/local-search.js
index cb0efde..d47dc9e 100644
--- a/source/js/local-search.js
+++ b/source/js/local-search.js
@@ -164,7 +164,7 @@ document.addEventListener('DOMContentLoaded', () => {
     if (!isfetched) return;
     const searchText = input.value.trim().toLowerCase();
     const keywords = searchText.split(/[-\s]+/);
-    const resultContent = document.getElementById('search-result');
+    const resultContent = document.querySelector('.search-result-container');
     let resultItems = [];
     if (searchText.length > 0) {
       // Perform local searching