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

🐛 fix: 修復搜索結果在手機端無法滾動的bug 🐛 fix: 修復aside categories 查看更多跳轉到tags頁面的bug closes jerryc127#188
xinyiZN · Apr 7, 2020 · e81a81c · e81a81c
1 parent 6c68ce1
commit e81a81c
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 10 deletions.
diff --git a/scripts/helpers/aside_categories.js b/scripts/helpers/aside_categories.js
@@ -18,7 +18,7 @@ hexo.extend.helper.register('aside_categories', function (categories, options) {
   const depth = options.depth ? parseInt(options.depth, 10) : 0
   const orderby = options.orderby || 'name'
   const order = options.order || 1
-  const tagDir = this.url_for(config.tag_dir)
+  const categoryDir = this.url_for(config.category_dir)
   const limit = options.limit === 0 ? categories.length : options.limit
   const buttonLabel = this._p('aside.more_button')
   const prepareQuery = parent => {
@@ -74,7 +74,7 @@ hexo.extend.helper.register('aside_categories', function (categories, options) {
     var moreHtml = ''
     if (categories.length <= limit) return ''
     moreHtml += '<li class="aside-category-list-item is-center">'
-    moreHtml += `<a class="aside-category-list-item-more" href="${tagDir}" >`
+    moreHtml += `<a class="aside-category-list-item-more" href="${categoryDir}" >`
     moreHtml += buttonLabel
     moreHtml += '</a></li>'
     return moreHtml

diff --git a/source/css/_search/index.styl b/source/css/_search/index.styl
@@ -50,4 +50,5 @@
     height: 100%
 
   .search-result-list
-    max-height: 100% !important
+    max-height: 75vh !important
+    padding-bottom: 2rem
diff --git a/source/css/_search/local-search.styl b/source/css/_search/local-search.styl
@@ -18,7 +18,8 @@
 
   .local-search__hit-item
     position: relative
-    padding-left: 1.5rem
+    padding-left: 1.3rem
+    line-height: 1.7
 
     &:hover
       &:before
@@ -27,7 +28,7 @@
     &:before
       $w = .3rem
       position: absolute
-      top: .4rem
+      top: .3rem
       left: 0
       width: w = $w
       height: h = w
@@ -41,12 +42,20 @@
     a
       display: block
       color: $font-black
+      font-weight: 600
       font-size: 14px
       cursor: pointer
 
       &:hover
         color: $search-color
 
+    .search-result
+      margin: 0 0 .4rem
+
+    .search-keyword
+      color: $search-keyword-highlight
+      font-weight: bold
+
   .local-search-stats__hr
     display: none !important
 

diff --git a/source/css/var.styl b/source/css/var.styl
@@ -79,6 +79,7 @@ $reward-pop-up-color = #858585
 // search
 $search-bg = #f6f8fa
 $search-color = $theme-color
+$search-keyword-highlight = #F47466
 //gallery
 $gallery-color = #fff
 // tag-hide

diff --git a/source/js/search/local-search.js b/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
         })
       }