Merge branch 'develop'

exampleSite/config.toml

@@ -121,6 +121,8 @@ enableEmoji = true
         placeholder = ""
         # max number of results length
         maxResultLength = 10
+        # snippet length of the result
+        snippetLength = 30
         # HTML tag name of the highlight part in results
         highlightTag = "em"
         [languages.en.params.search.algolia]
@@ -315,6 +317,8 @@ enableEmoji = true
         placeholder = ""
         # 最大结果数目
         maxResultLength = 10
+        # 结果内容片段长度
+        snippetLength = 50
         # 搜索结果中高亮部分的 HTML 标签
         highlightTag = "em"
         [languages.zh-cn.params.search.algolia]
@@ -505,6 +509,8 @@ enableEmoji = true
         placeholder = ""
         # max number of results length
         maxResultLength = 10
+        # snippet length of the result
+        snippetLength = 30
         # HTML tag name of the highlight part in results
         highlightTag = "em"
         [languages.fr.params.search.algolia]

exampleSite/content/posts/theme-documentation-basics.en.md

@@ -227,6 +227,8 @@ Please open the code block below to view the complete sample configuration :(far
     placeholder = ""
     # {{< version 0.2.1 >}} max number of results length
     maxResultLength = 10
+    # {{< version 0.2.3 >}} snippet length of the result
+    snippetLength = 30
     # {{< version 0.2.1 >}} HTML tag name of the highlight part in results
     highlightTag = "em"
     [params.search.algolia]
@@ -979,6 +981,8 @@ Here is the search configuration in your [site configuration](#site-configuratio
   placeholder = ""
   # {{< version 0.2.1 >}} max number of results length
   maxResultLength = 10
+  # {{< version 0.2.3 >}} snippet length of the result
+  snippetLength = 30
   # {{< version 0.2.1 >}} HTML tag name of the highlight part in results
   highlightTag = "em"
   [params.search.algolia]

exampleSite/content/posts/theme-documentation-basics.fr.md

@@ -232,6 +232,8 @@ Please open the code block below to view the complete sample configuration :(far
     placeholder = ""
     # {{< version 0.2.1 >}} max number of results length
     maxResultLength = 10
+    # {{< version 0.2.3 >}} snippet length of the result
+    snippetLength = 30
     # {{< version 0.2.1 >}} HTML tag name of the highlight part in results
     highlightTag = "em"
     [params.search.algolia]
@@ -984,6 +986,8 @@ Here is the search configuration in your [site configuration](#site-configuratio
   placeholder = ""
   # {{< version 0.2.1 >}} max number of results length
   maxResultLength = 10
+  # {{< version 0.2.3 >}} snippet length of the result
+  snippetLength = 30
   # {{< version 0.2.1 >}} HTML tag name of the highlight part in results
   highlightTag = "em"
   [params.search.algolia]

exampleSite/content/posts/theme-documentation-basics.zh-cn.md

@@ -228,9 +228,11 @@ hugo
     contentLength = 4000
     # 搜索框的占位提示语
     placeholder = ""
-    # 最大结果数目
+    # {{< version 0.2.1 >}} 最大结果数目
     maxResultLength = 10
-    # 搜索结果中高亮部分的 HTML 标签
+    # {{< version 0.2.3 >}} 结果内容片段长度
+    snippetLength = 50
+    # {{< version 0.2.1 >}} 搜索结果中高亮部分的 HTML 标签
     highlightTag = "em"
     [params.search.algolia]
       index = ""
@@ -982,9 +984,11 @@ defaultContentLanguage = "zh-cn"
   contentLength = 4000
   # 搜索框的占位提示语
   placeholder = ""
-  # 最大结果数目
+  # {{< version 0.2.1 >}} 最大结果数目
   maxResultLength = 10
-  # 搜索结果中高亮部分的 HTML 标签
+  # {{< version 0.2.3 >}} 结果内容片段长度
+  snippetLength = 50
+  # {{< version 0.2.1 >}} 搜索结果中高亮部分的 HTML 标签
   highlightTag = "em"
   [params.search.algolia]
     index = ""

src/js/theme.js

@@ -95,6 +95,7 @@ class Theme {
     initSearch() {
         const searchConfig = this.config.search;
         if (!searchConfig.maxResultLength) searchConfig.maxResultLength = 10;
+        if (!searchConfig.snippetLength) searchConfig.snippetLength = 50;
         if (!searchConfig.highlightTag) searchConfig.highlightTag = 'em';
         const isMobile = this.util.isMobile();
         if (!searchConfig || isMobile && this._searchMobileOnce || !isMobile && this._searchDesktopOnce) return;
@@ -154,7 +155,6 @@ class Theme {
             else $searchClear.style.display = 'inline';
         }, false);
 
-        const CONTEXT_LENGTH = 200;
         const initAutosearch = () => {
             const autosearch = autocomplete(`#search-input-${classSuffix}`, {
                 hint: false,
@@ -188,12 +188,12 @@ class Theme {
                                         if (matchPosition < position || position === 0) position = matchPosition;
                                     }
                                 });
-                                position -= CONTEXT_LENGTH / 5;
+                                position -= searchConfig.snippetLength / 5;
                                 if (position > 0) {
-                                    position += context.substr(position, 25).lastIndexOf(' ') + 1;
+                                    position += context.substr(position, 20).lastIndexOf(' ') + 1;
-                                    context = '...' + context.substr(position, CONTEXT_LENGTH);
+                                    context = '...' + context.substr(position, searchConfig.snippetLength);
                                 } else {
-                                    context = context.substr(0, CONTEXT_LENGTH);
+                                    context = context.substr(0, searchConfig.snippetLength);
                                 }
                                 Object.keys(metadata).forEach(key => {
                                     title = title.replace(new RegExp(`(${key})`, 'gi'), `<${searchConfig.highlightTag}>$1</${searchConfig.highlightTag}>`);
@@ -238,16 +238,16 @@ class Theme {
                         this._algoliaIndex
                             .search(query, {
                                 offset: 0,
-                                length: searchConfig.maxResultLength * 5,
+                                length: searchConfig.maxResultLength * 8,
                                 attributesToHighlight: ['title'],
-                                attributesToSnippet: ['content:30'],
+                                attributesToSnippet: [`content:${searchConfig.snippetLength}`],
                                 highlightPreTag: `<${searchConfig.highlightTag}>`,
                                 highlightPostTag: `</${searchConfig.highlightTag}>`,
                             })
                             .then(({ hits }) => {
                                 const results = {};
                                 hits.forEach(({ uri, date, _highlightResult: { title }, _snippetResult: { content } }) => {
-                                    if (results[uri]) return;
+                                    if (results[uri] && results[uri].context.length > content.value) return;
                                     results[uri] = {
                                         uri: uri,
                                         title: title.value,
@@ -255,7 +255,7 @@ class Theme {
                                         context: content.value,
                                     };
                                 });
-                                finish(Object.values(results));
+                                finish(Object.values(results).slice(0, searchConfig.maxResultLength));
                             })
                             .catch(err => {
                                 console.error(err);