breaking changes: cover 的顯示優化 #1101

feature: default_cover 可配置顏色
fix: 修復使用本地搜索時，輸入特殊符號沒有顯示結果的 bug closed #1110
fix: 修復 頂部圖和 footer 配置帶有/的顏色參數時，無法顯示顏色的 bug
improvement: 鼠標移動到分頁時，文章分頁按鈕增加説明文字
improvement: 文章頁的頂部圖顯示次序為 top_img > cover > default_top_img
improvement: canonical 的鏈接根據配置生成 #1111

source/css/_global/function.styl

@@ -36,11 +36,11 @@
 
 .postImgHover
   &:hover
-    img
+    .cover
       opacity: .8
       transform: scale(1.1)
 
-  img
+  .cover
     position: absolute
     width: 100%
     height: 100%

source/css/_global/index.styl

@@ -33,6 +33,7 @@
   --pseudo-hover: $pseudo-hover
   --headline-presudo: #a0a0a0
   --scrollbar-color: $scrollbar-color
+  --default-bg-color: $theme-color
 
 body
   position: relative

source/css/_layout/aside.styl

@@ -115,7 +115,7 @@
         width: w = 4.2em
         height: w
 
-        & > img
+        :first-child
           @extend .imgHover
 
       .content

source/css/_layout/footer.styl

@@ -1,6 +1,6 @@
 #footer
   position: relative
-  background: $light-blue
+  background-color: $light-blue
   background-attachment: scroll
   background-position: bottom
   background-size: cover

source/css/_page/archives.styl

@@ -101,7 +101,7 @@
       width: 80px
       height: 80px
 
-      img
+      :first-child
         @extend .imgHover
 
     &-info

source/css/_page/homepage.styl

@@ -15,7 +15,7 @@
       height: auto
 
     &:hover
-      img.post_bg
+      img.post-bg
         transform: scale(1.1)
 
     &.ads-wrap
@@ -31,7 +31,7 @@
         width: 100%
         height: 230px
 
-      img.post_bg
+      .post-bg
         @extend .imgHover
 
       &.right

source/js/search/local-search.js

@@ -84,8 +84,11 @@ window.addEventListener('load', () => {
     $input.addEventListener('input', function () {
       const keywords = this.value.trim().toLowerCase().split(/[\s]+/)
       if (keywords[0] !== '') $loadingStatus.innerHTML = '<i class="fas fa-spinner fa-pulse"></i>'
+      else {
+        $resultContent.innerHTML = ''
+        return
+      }
 
-      $resultContent.innerHTML = ''
       let str = '<div class="search-result-list">'
       if (keywords.length <= 0) return
       let count = 0
@@ -150,7 +153,12 @@ window.addEventListener('load', () => {
 
               // highlight all keywords
               keywords.forEach(keyword => {
-                const regS = new RegExp(keyword, 'gi')
+                let regexStr = keyword
+                const specialRegex = new RegExp("[^\\w\\s]+") // match special characters
+                if (keyword.length === 1 && specialRegex.test(keyword)) {
+                  regexStr = `\\${keyword}`
+                }
+                const regS = new RegExp(regexStr, 'gi')
                 matchContent = matchContent.replace(regS, '<span class="search-keyword">' + keyword + '</span>')
                 dataTitle = dataTitle.replace(regS, '<span class="search-keyword">' + keyword + '</span>')
               })