feat: 重構本地搜索

feat: Algolia 搜索，點擊文章內容也會跳轉到相應頁面
fix: 修復 fullpage loading 顯示滾動條的 bug close #1235
fix: 修復 safari 下，搜索內容被系統搜索框遮擋的 bug
improvement: 手機 safari 橫屏時，網頁全屏幕顯示
improvement: 當沒有開啟 beautify 時， hr 顯示默認的樣式

source/js/search/algolia.js

@@ -1,10 +1,13 @@
 window.addEventListener('load', () => {
+  const $searchMask = document.getElementById('search-mask')
+  const $searchDialog = document.querySelector('#algolia-search .search-dialog')
+
   const openSearch = () => {
     const bodyStyle = document.body.style
     bodyStyle.width = '100%'
     bodyStyle.overflow = 'hidden'
-    btf.animateIn(document.getElementById('search-mask'), 'to_show 0.5s')
-    btf.animateIn(document.querySelector('#algolia-search .search-dialog'), 'titleScale 0.5s')
+    btf.animateIn($searchMask, 'to_show 0.5s')
+    btf.animateIn($searchDialog, 'titleScale 0.5s')
     setTimeout(() => { document.querySelector('#algolia-search .ais-SearchBox-input').focus() }, 100)
 
     // shortcut: ESC
@@ -14,22 +17,33 @@ window.addEventListener('load', () => {
         document.removeEventListener('keydown', f)
       }
     })
+
+    fixSafariHeight()
+    window.addEventListener('resize', fixSafariHeight)
   }
 
   const closeSearch = () => {
     const bodyStyle = document.body.style
     bodyStyle.width = ''
     bodyStyle.overflow = ''
-    btf.animateOut(document.querySelector('#algolia-search .search-dialog'), 'search_close .5s')
-    btf.animateOut(document.getElementById('search-mask'), 'to_hide 0.5s')
+    btf.animateOut($searchDialog, 'search_close .5s')
+    btf.animateOut($searchMask, 'to_hide 0.5s')
+    window.removeEventListener('resize', fixSafariHeight)
+  }
+
+  // fix safari
+  const fixSafariHeight = () => {
+    if (window.innerWidth < 768) {
+      $searchDialog.style.setProperty('--search-height', window.innerHeight + 'px')
+    }
   }
 
   const searchClickFn = () => {
     document.querySelector('#search-button > .search').addEventListener('click', openSearch)
   }
 
-  const searchClickFnOnce = () => {
-    document.getElementById('search-mask').addEventListener('click', closeSearch)
+  const searchFnOnce = () => {
+    $searchMask.addEventListener('click', closeSearch)
     document.querySelector('#algolia-search .search-close-button').addEventListener('click', closeSearch)
   }
 
@@ -102,9 +116,9 @@ window.addEventListener('load', () => {
               : ''
         return `
           <a href="${link}" class="algolia-hit-item-link">
-          ${result.title.value || 'no-title'}
-          </a>
-          <p class="algolia-hit-item-content">${content}</p>`
+          <span class="algolia-hits-item-title">${result.title.value || 'no-title'}</span>
+          <p class="algolia-hit-item-content">${content}</p>
+          </a>`
       },
       empty: function (data) {
         return (
@@ -150,10 +164,10 @@ window.addEventListener('load', () => {
   search.start()
 
   searchClickFn()
-  searchClickFnOnce()
+  searchFnOnce()
 
   window.addEventListener('pjax:complete', () => {
-    getComputedStyle(document.querySelector('#algolia-search .search-dialog')).display === 'block' && closeSearch()
+    !btf.isHidden($searchMask) && closeSearch()
     searchClickFn()
   })