breaking changes: algolia 升級至 v4

feat:  本地搜索增加數據庫加載中和搜索中 loading 顯示
feat: 更改文章美化後,列表的顯示效果 closed #693 closed #686
improvement: UI 微調

source/css/_search/algolia.styl

@@ -1,69 +1,52 @@
 #algolia-search
   .search-dialog
-    .ais-search-box
-      margin: 0 auto
-      max-width: 100%
-      width: 100%
-
+    .ais-SearchBox
       input
         padding: 5px 14px
+        width: 100%
         outline: none
         border: 2px solid $search-color
         border-radius: 40px
         background: var(--search-bg)
         color: var(--search-input-color)
 
-    .ais-hits--item.algolia-hit-item
-      position: relative
+    .ais-Hits-list
       padding-left: 24px
-
-      &:hover
-        &:before
-          border-color: var(--pseudo-hover)
-
-      &:before
-        $w = .5em
-        position: absolute
-        top: .53em
-        left: 0
-        width: w = $w
-        height: h = w
-        border: 3px solid $search-color
-        border-radius: w
-        background: transparent
-        content: ''
-        line-height: h
-        transition: all .2s ease-in-out
+      @extend .list-beauty
 
       a
-        display: block
         color: var(--search-result-title)
-        cursor: pointer
 
         &:hover
           color: $search-color
 
-      em
+      mark
+        background: transparent
         color: $search-keyword-highlight
         font-weight: bold
 
-    .ais-pagination.pagination
+    .ais-Pagination
       margin: 16px 0 0
       padding: 0
       text-align: center
 
-      .ais-pagination--item
+      .ais-Pagination-list
+        padding: 0
+        list-style: none
+
+      .ais-Pagination-item
+        display: inline
         margin: 0 4px
         padding: 0
 
-        a
+        .ais-Pagination-link
           display: inline-block
           min-width: 24px
           height: 24px
           text-align: center
           line-height: 24px
 
-      .ais-pagination--item.current
+      .ais-Pagination-item--selected
         a
           background: $theme-paginator-color
           color: #eee

source/css/_search/index.styl

@@ -22,25 +22,23 @@
   hr
     margin: 20px auto
 
-  span.search-close-button
-    position: absolute
-    top: 16px
-    right: 20px
-    color: $grey
-    font-size: 1.4em
-    line-height: 1
-    cursor: pointer
-    transition: color .2s ease-in-out
-
-    &:hover
-      color: $search-color
-
-  &__title
-    padding: 0 0 14px
+  .search-nav
+    margin: 0 0 14px
     color: $search-color
     font-size: 1.4em
     line-height: 1
 
+    .search-dialog-title
+      margin-right: 10px
+
+    .search-close-button
+      float: right
+      color: $grey
+      transition: color .2s ease-in-out
+
+      &:hover
+        color: $search-color
+
 #search-mask
   position: fixed
   top: 0

source/css/_search/local-search.styl

@@ -15,6 +15,9 @@
         color: var(--search-input-color)
         -webkit-appearance: none
 
+    .search-wrap
+      display: none
+
     .local-search__hit-item
       position: relative
       padding-left: 24px