✨ feat: 本地搜索支持顯示文章內容和高亮keyword

🐛 fix: 修復搜索結果在手機端無法滾動的bug
🐛 fix: 修復aside categories 查看更多跳轉到tags頁面的bug closes #188

source/js/search/local-search.js

@@ -1,7 +1,10 @@
 $(function () {
   var loadFlag = false
   $('a.social-icon.search').on('click', function () {
-    $('body').css({ width: '100%', overflow: 'hidden' })
+    $('body').css({
+      width: '100%',
+      overflow: 'hidden'
+    })
     $('.search-dialog').css('display', 'block')
     $('#local-search-input input').focus()
     $('.search-mask').fadeIn()
@@ -52,6 +55,7 @@ $(function () {
             url: $('url', this).text()
           }
         }).get()
+
         var $input = $('#local-search-input input')[0]
         var $resultContent = $('#local-hits')[0]
         $input.addEventListener('input', function () {
@@ -66,13 +70,17 @@ $(function () {
           // perform local searching
           datas.forEach(function (data) {
             var isMatch = true
+            if (!data.title || data.title.trim() === '') {
+              data.title = 'Untitled'
+            }
             var dataTitle = data.title.trim().toLowerCase()
             var dataContent = data.content.trim().replace(/<[^>]+>/g, '').toLowerCase()
             var dataUrl = data.url
             var indexTitle = -1
             var indexContent = -1
+            var firstOccur = -1
             // only match artiles with not empty titles and contents
-            if (dataTitle !== '' && dataContent !== '') {
+            if (dataTitle !== '' || dataContent !== '') {
               keywords.forEach(function (keyword, i) {
                 indexTitle = dataTitle.indexOf(keyword)
                 indexContent = dataContent.indexOf(keyword)
@@ -82,20 +90,60 @@ $(function () {
                   if (indexContent < 0) {
                     indexContent = 0
                   }
+                  if (i === 0) {
+                    firstOccur = indexContent
+                  }
                 }
               })
+            } else {
+              isMatch = false
             }
+
             // show search results
             if (isMatch) {
-              str += '<div class="local-search__hit-item"><a href="' + dataUrl + '" class="search-result-title">' + dataTitle + '</a>' + '</div>'
-              count += 1
-              $('.local-search-stats__hr').show()
+              var content = data.content.trim().replace(/<[^>]+>/g, '')
+              if (firstOccur >= 0) {
+                // cut out 130 characters
+                var start = firstOccur - 30
+                var end = firstOccur + 100
+
+                if (start < 0) {
+                  start = 0
+                }
+
+                if (start === 0) {
+                  end = 100
+                }
+
+                if (end > content.length) {
+                  end = content.length
+                }
+
+                var matchContent = content.substring(start, end)
+
+                // highlight all keywords
+                keywords.forEach(function (keyword) {
+                  var regS = new RegExp(keyword, 'gi')
+                  matchContent = matchContent.replace(regS, '<span class="search-keyword">' + keyword + '</span>')
+                  dataTitle = dataTitle.replace(regS, '<span class="search-keyword">' + keyword + '</span>')
+                })
+
+                str += '<div class="local-search__hit-item"><a href="' + dataUrl + '" class="search-result-title">' + dataTitle + '</a>'
+                count += 1
+                $('.local-search-stats__hr').show()
+
+                if (dataContent !== '') {
+                  str += '<p class="search-result">' + matchContent + '...</p>'
+                }
+              }
+              str += '</div>'
             }
           })
           if (count === 0) {
             str += '<div id="local-search__hits-empty">' + GLOBAL_CONFIG.localSearch.languages.hits_empty.replace(/\$\{query}/, this.value.trim()) +
               '</div>'
           }
+          str += '</div>'
           $resultContent.innerHTML = str
         })
       }