feat: modify search.js and add example search.json

docs/features/search.md

@@ -13,11 +13,26 @@ Search features are enabled by default, but requires a few steps to make it avai
     path: search.json
     content: false
   ```
-3. Add new search page so that Hexo will generate it.
+3. Add the search.json file to blog root directory, the following is an example:
+  ```json
+  [
+    {
+        "url": "/articles/Article-1-Title",
+        "title": "Article-1-Title",
+        "tags": ["tag1", "tag2"]
+    },
+    {
+        "url": "/articles/Article-2-Title",
+        "title": "Article-2-Title",
+        "tags": ["tag1", "tag2"]
+    },
+  ]
+  ```
+4. Add new search page so that Hexo will generate it.
   ```sh
   $ hexo new page 'search'
   ```
-4. Replace all its content with:
+1. Replace all its content with:
   ```markdown
   ---
   type: search

layout/_partial/head.ejs

@@ -111,4 +111,9 @@
       href="https://unpkg.com/@waline/client@v2/dist/waline.css"
     />
   <% } %>
+
+  <% if (theme.search == true && page.type == 'search') { %>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/fuse.js/6.4.6/fuse.basic.min.js"></script>
+  <% } %>
+
 </head>

source/js/search.js

@@ -1,74 +1,86 @@
-(() => {
+;(() => {
     var searchIndex = []
     const searchForm = document.getElementById('search-form')
     const searchBox = document.getElementById('searchbox')
     const searchResults = document.getElementById('search-results')
-
+  
     searchBox.select()
-
-    const doSearch = (keyword) => {
-        var results = []
-        var resultsEl = []
-
-        for (let i = 0; i < searchIndex.length; i++) {
-            const currentItem = searchIndex[i];
-
-            if (JSON.stringify(currentItem).search(keyword) !== -1) {
-                results.push(currentItem)
-            }
-        }
-
-        if (results.length > 0) {
-            for (let i = 0; i < results.length; i++) {
-                const currentResult = results[i];
-                const currentResultEl = document.createElement('article')
-                currentResultEl.classList.add('post-list-item')
-                currentResultEl.innerHTML = `
-<a href="${currentResult.url}">
+
+    const doSearch = keyword => {
+      var results = []
+      var resultsEl = []
+
+      const options = {
+        keys: ['title', 'tags', 'categories'],
+        caseSensitive: false,
+        threshold: 0.3
+      };
+
+      const fuse = new Fuse(searchIndex, options);
+      results = fuse.search(keyword).map(result => result.item)
+      console.log(searchIndex)
+
+      if (results.length > 0) {
+        for (let i = 0; i < results.length; i++) {
+          const currentResult = results[i]
+          const currentResultEl = document.createElement('article')
+          currentResultEl.classList.add('post-list-item')
+          currentResultEl.innerHTML = `
+  <a href="${currentResult.url}">
     <div class="content">
-        ${(() => {
-                        if (currentResult.categories) {
-                            return `<div class="categories${document.body.attributes['data-uppercase-categories'].value ? ' text-uppercase' : ''}">${(() => {
-                                let categories = ''
-                                for (let i = 0; i < currentResult.categories.length; i++) {
-                                    const currentCategory = currentResult.categories[i]
-                                    categories += `<span>${currentCategory}</span>`
-                                }
-                                return categories
-                            })()}</div>`
-                        } else {
-                            return ''
-                        }
-                    })()}
-        <div class="title">${currentResult.title}</div>
-    </div>
-</a>
-                `
-                resultsEl.push(currentResultEl)
+      ${(() => {
+        if (currentResult.categories && Array.isArray(currentResult.categories)) {
+          return `<div class="categories${
+            document.body.attributes['data-uppercase-categories'].value
+              ? ' text-uppercase'
+              : ''
+          }">${(() => {
+            let categories = ''
+            for (let i = 0; i < currentResult.categories.length; i++) {
+              const currentCategory = currentResult.categories[i]
+              categories += `<span>${currentCategory}</span>`
             }
+            return categories
+          })()}</div>`
         } else {
-            const el = document.createElement('div')
-            el.className = 'no-results'
-            el.innerHTML = 'No results found.'
-            resultsEl.push(el)
+          return ''
         }
-
-        searchResults.innerHTML = ''
-        for (let i = 0; i < resultsEl.length; i++) {
-            const element = resultsEl[i];
-            searchResults.appendChild(element)
+      })()}
+      <div class="title">${currentResult.title}</div>
+    </div>
+  </a>
+  `
+          resultsEl.push(currentResultEl)
         }
+      } else {
+        const el = document.createElement('div')
+        el.className = 'no-results'
+        el.innerHTML = 'No results found.'
+        resultsEl.push(el)
+      }
+
+      searchResults.innerHTML = ''
+      for (let i = 0; i < resultsEl.length; i++) {
+        const element = resultsEl[i]
+        searchResults.appendChild(element)
+      }
     }
-
-    searchForm.addEventListener('submit', (ev) => {
-        ev.preventDefault()
-        if (searchIndex != '') {
+
+    searchForm.addEventListener('submit', ev => {
+      ev.preventDefault()
+      if (searchIndex.length > 0) {
+        doSearch(searchBox.value)
+      } else {
+        fetch(
+          document.body.attributes['data-config-root'].value +
+            document.body.attributes['data-search-path'].value,
+        )
+          .then(res => res.json())
+          .then(data => {
+            searchIndex = data
             doSearch(searchBox.value)
-        } else {
-            fetch(document.body.attributes['data-config-root'].value + document.body.attributes['data-search-path'].value).then(res => res.json()).then(data => {
-                searchIndex = data
-                doSearch(searchBox.value)
-            })
-        }
+          })
+      }
     })
-})()
+  })()
+