From fdd49ab3cbf345d83d1d8c78620452c98568e4aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=87=A1=E6=A2=A6=E6=98=9F=E5=B0=98?= <elkan1788@139.com>
Date: Tue, 2 Aug 2022 15:12:49 +0800
Subject: [PATCH] :lipstick: Mark the search result of algolia search.

---
 .../_common/components/third-party/search.scss   | 14 +++++++-------
 assets/js/third-party/search/algolia.js          | 16 ++++++++++------
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/assets/css/_common/components/third-party/search.scss b/assets/css/_common/components/third-party/search.scss
index ca5e9a5..e88eec0 100644
--- a/assets/css/_common/components/third-party/search.scss
+++ b/assets/css/_common/components/third-party/search.scss
@@ -106,6 +106,13 @@
       padding: 5px 0;
     }
   }
+
+  mark.search-keyword {
+    background: transparent;
+    border-bottom: 1px dashed $red;
+    color: $red;
+    font-weight: bold;
+  }
 }
 
 @if $algolia_search_enable {
@@ -169,11 +176,4 @@
       margin: auto;
     }
   }
-
-  mark.search-keyword {
-    background: transparent;
-    border-bottom: 1px dashed $red;
-    color: $red;
-    font-weight: bold;
-  }
 }
diff --git a/assets/js/third-party/search/algolia.js b/assets/js/third-party/search/algolia.js
index edcd5d6..dcdb0e7 100644
--- a/assets/js/third-party/search/algolia.js
+++ b/assets/js/third-party/search/algolia.js
@@ -21,6 +21,10 @@ document.addEventListener('DOMContentLoaded', () => {
       }
     });
 
+    const markKeyWords = function(content) {
+      return content.replaceAll("<mark>", '<mark class="search-keyword">');
+    };
+
     if (typeof pjax === 'object') {
       search.on('render', () => {
         pjax.refresh(document.querySelector('.algolia-hits'));
@@ -62,16 +66,16 @@ document.addEventListener('DOMContentLoaded', () => {
 
       instantsearch.widgets.hits({
         container: '.algolia-hits',
-        escapeHTML: false,
+        escapeHTML: true,
         templates: {
           item: data => {
-            const { title, excerpt, excerptStrip, content } = data._highlightResult;
-            let result = `<a href="${data.permalink}" class="search-result-title">${title.value}</a>`;
-            const content = excerpt || excerptStrip || content;
+            const { title, content } = data._highlightResult;
+            let result = `<a href="${data.permalink}" class="search-result-title">${markKeyWords(title.value)}</a>`;
+            //const content = excerpt || excerptStrip || content;
             if (content && content.value) {
               const div = document.createElement('div');
-              div.innerHTML = content.value;
-              result += `<a href="${data.permalink}"><p class="search-result">${div.textContent.substring(0, 200)}...</p></a>`;
+              div.innerHTML = markKeyWords(content.value);
+              result += `<a href="${data.permalink}"><p class="search-result">${div.innerHTML.substring(0, 200)}...</p></a>`;
             }
             return result;
           },