breaking changes: algolia 升級至 v4

feat: 本地搜索增加數據庫加載中和搜索中 loading 顯示 feat: 更改文章美化後,列表的顯示效果 closed #693 closed #686 improvement: UI 微調
2026-04-08 12:07:06 +08:00 · 2021-10-29 14:40:10 +08:00
parent 632cb37bc5
commit f7c50586ce
36 changed files with 290 additions and 364 deletions
--- a/_config.yml
+++ b/_config.yml
@@ -845,8 +845,8 @@ CDN:
  # search
  local_search:
  algolia_js:
-  algolia_search:
-  algolia_search_css:
+  algolia_search_v4:
+  instantsearch_v4:

  # math
  mathjax:
@@ -869,8 +869,8 @@ CDN:
  pangu:

  # photo
-  fancybox_css:
-  fancybox:
+  fancybox_css_v4:
+  fancybox_v4:
  medium_zoom:

  # snackbar
--- a/languages/default.yml
+++ b/languages/default.yml
@@ -34,16 +34,18 @@ post:
  recommend: Related Articles
  edit: Edited on

-search: Search
-algolia_search:
-  input_placeholder: Search for Posts
-  hits_empty: "We didn't find any results for the search: ${query}."
-  hits_stats: '${hits} results found in ${time} ms'
+search:
+  title: Search
+  load_data: Loading the Database
+  algolia_search:
+    input_placeholder: Search for Posts
+    hits_empty: "We didn't find any results for the search: ${query}."
+    hits_stats: '${hits} results found in ${time} ms'

-local_search:
-  label: Local search
-  input_placeholder: Search for Posts
-  hits_empty: "We didn't find any results for the search: ${query}"
+  local_search:
+    label: Local search
+    input_placeholder: Search for Posts
+    hits_empty: "We didn't find any results for the search: ${query}"

 pagination:
  prev: Previous Post
--- a/languages/en.yml
+++ b/languages/en.yml
@@ -34,16 +34,18 @@ post:
  recommend: Related Articles
  edit: Edited on

-search: Search
-algolia_search:
-  input_placeholder: Search for Posts
-  hits_empty: "We didn't find any results for the search: ${query}."
-  hits_stats: '${hits} results found in ${time} ms'
+search:
+  title: Search
+  load_data: Loading the Database
+  algolia_search:
+    input_placeholder: Search for Posts
+    hits_empty: "We didn't find any results for the search: ${query}."
+    hits_stats: '${hits} results found in ${time} ms'

-local_search:
-  label: Local search
-  input_placeholder: Search for Posts
-  hits_empty: "We didn't find any results for the search: ${query}"
+  local_search:
+    label: Local search
+    input_placeholder: Search for Posts
+    hits_empty: "We didn't find any results for the search: ${query}"

 pagination:
  prev: Previous Post
--- a/languages/zh-CN.yml
+++ b/languages/zh-CN.yml
@@ -35,16 +35,18 @@ post:
  recommend: 相关推荐
  edit: 编辑

-search: 搜索
-algolia_search:
-  input_placeholder: 搜索文章
-  hits_empty: '找不到您查询的内容：${query}'
-  hits_stats: '找到 ${hits} 条结果，用时 ${time} 毫秒'
+search:
+  title: 搜索
+  load_data: 数据库加载中
+  algolia_search:
+    input_placeholder: 搜索文章
+    hits_empty: '找不到您查询的内容：${query}'
+    hits_stats: '找到 ${hits} 条结果，用时 ${time} 毫秒'

-local_search:
-  label: 本地搜索
-  input_placeholder: 搜索文章
-  hits_empty: '找不到您查询的内容：${query}'
+  local_search:
+    label: 本地搜索
+    input_placeholder: 搜索文章
+    hits_empty: '找不到您查询的内容：${query}'

 pagination:
  prev: 上一篇
--- a/languages/zh-TW.yml
+++ b/languages/zh-TW.yml
@@ -35,16 +35,18 @@ post:
  recommend: 相關推薦
  edit: 編輯

-search: 搜尋
-algolia_search:
-  input_placeholder: 搜尋文章
-  hits_empty: '找不到您查詢的內容：${query}'
-  hits_stats: '找到 ${hits} 條結果，用時 ${time} 毫秒'
+search:
+  title: 搜尋
+  load_data: 資料庫載入中
+  algolia_search:
+    input_placeholder: 搜尋文章
+    hits_empty: '找不到您查詢的內容：${query}'
+    hits_stats: '找到 ${hits} 條結果，用時 ${time} 毫秒'

-local_search:
-  label: 本地搜尋
-  input_placeholder: 搜尋文章
-  hits_empty: '找不到您查詢的內容：${query}'
+  local_search:
+    label: 本地搜尋
+    input_placeholder: 搜尋文章
+    hits_empty: '找不到您查詢的內容：${query}'

 pagination:
  prev: 上一篇
@@ -65,7 +67,7 @@ aside:
    headline: 網站資訊
    article_name: 文章數目
    runtime:
-      name: 已運行時間
+      name: 已執行時間
      unit: 天
    last_push_date:
      name: 最後更新時間
@@ -80,7 +82,7 @@ aside:
    zero: 沒有評論
    image: 圖片
    link: 連結
-    code: 代碼
+    code: 程式碼
  card_toc: 目錄

 date_suffix:
--- a/layout/includes/additional-js.pug
+++ b/layout/includes/additional-js.pug
@@ -8,7 +8,7 @@ div
  if theme.medium_zoom
    script(src=url_for(theme.CDN.medium_zoom))
  else if theme.fancybox
-    script(src=url_for(theme.CDN.fancybox))
+    script(src=url_for(theme.CDN.fancybox_v4))

  if theme.instantpage
    script(src=url_for(theme.CDN.instantpage), type='module')
@@ -24,7 +24,8 @@ div

  //- search
  if theme.algolia_search.enable
-    script(src=url_for(theme.CDN.algolia_search))
+    script(src=url_for(theme.CDN.algolia_search_v4))
+    script(src=url_for(theme.CDN.instantsearch_v4))
    script(src=url_for(theme.CDN.algolia_js))
  else if theme.local_search.enable
    script(src=url_for(theme.CDN.local_search))
--- a/layout/includes/head.pug
+++ b/layout/includes/head.pug
@@ -52,11 +52,8 @@ link(rel='stylesheet', href=url_for(theme.CDN.fontawesome) media="print" onload=
 if (theme.snackbar && theme.snackbar.enable)
  link(rel='stylesheet', href=url_for(theme.CDN.snackbar_css) media="print" onload="this.media='all'")

-if theme.algolia_search.enable
-  link(rel='stylesheet' href=url_for(theme.CDN.algolia_search_css) media="print" onload="this.media='all'")
-
 if theme.fancybox
-  link(rel='stylesheet' href=url_for(theme.CDN.fancybox_css) media="print" onload="this.media='all'")
+  link(rel='stylesheet' href=url_for(theme.CDN.fancybox_css_v4) media="print" onload="this.media='all'")

 //- google_adsense
 !=partial('includes/head/google_adsense', {}, {cache: true})
--- a/layout/includes/head/config.pug
+++ b/layout/includes/head/config.pug
@@ -9,9 +9,9 @@
      hits: theme.algolia_search.hits,
      // search languages
      languages: {
-        input_placeholder: _p("algolia_search.input_placeholder"),
-        hits_empty: _p("algolia_search.hits_empty"),
-        hits_stats: _p("algolia_search.hits_stats")
+        input_placeholder: _p("search.algolia_search.input_placeholder"),
+        hits_empty: _p("search.algolia_search.hits_empty"),
+        hits_stats: _p("search.algolia_search.hits_stats"),
      }
    })
  }
@@ -22,7 +22,7 @@
      path: config.search.path,
      languages: {
        // search languages
-        hits_empty: _p("local_search.hits_empty")
+        hits_empty: _p("search.local_search.hits_empty"),
      }
    })
  }
--- a/layout/includes/header/nav.pug
+++ b/layout/includes/header/nav.pug
@@ -7,7 +7,7 @@ nav#nav
      #search-button
        a.site-page.social-icon.search
          i.fas.fa-search.fa-fw
-          span=' '+_p('search')
+          span=' '+_p('search.title')
    !=partial('includes/header/menu_item', {}, {cache: true})

    #toggle-menu
--- a/layout/includes/page/categories.pug
+++ b/layout/includes/page/categories.pug
@@ -1,5 +1 @@
-.category-lists
-  .category-title.is-center= _p('page.category')
-    |  - 
-    span.category-amount= site.categories.length
-  div!= list_categories()
+.category-lists!= list_categories()
--- a/layout/includes/page/default-page.pug
+++ b/layout/includes/page/default-page.pug
@@ -1,4 +1,2 @@
 #article-container
-  if top_img === false
-    h1.page-title= page.title
  != page.content
--- a/layout/includes/page/flink.pug
+++ b/layout/includes/page/flink.pug
@@ -1,7 +1,4 @@
 #article-container
-  if top_img === false
-    h1.page-title= page.title
-
  .flink
    if site.data.link
      each i in site.data.link
--- a/layout/includes/page/tags.pug
+++ b/layout/includes/page/tags.pug
@@ -1,5 +1,2 @@
-.tag-cloud-title.is-center= _p('page.tag')
-  |  - 
-  span.tag-cloud-amount= site.tags.length
 .tag-cloud-list.is-center
  !=cloudTags({source: site.tags, minfontsize: 1.2, maxfontsize: 2.1, limit: 0, unit: 'em'})
--- a/layout/includes/third-party/search/algolia.pug
+++ b/layout/includes/third-party/search/algolia.pug
@@ -1,13 +1,16 @@
 #algolia-search
  .search-dialog
-    #algolia-search-title.search-dialog__title Algolia
-    #algolia-input-panel
+    nav.search-nav
+      span.search-dialog-title= 'Algolia'
+      button.search-close-button
+        i.fas.fa-times
+
+    .search-wrap
      #algolia-search-input
-    hr
-    #algolia-search-results
-      #algolia-hits
-      #algolia-pagination
-      #algolia-stats
-    span.search-close-button
-      i.fas.fa-times
+      hr
+      #algolia-search-results
+        #algolia-hits
+        #algolia-pagination
+        #algolia-stats
+  
  #search-mask
--- a/layout/includes/third-party/search/local-search.pug
+++ b/layout/includes/third-party/search/local-search.pug
@@ -1,12 +1,20 @@
 #local-search
  .search-dialog
-    #local-search-title.search-dialog__title=_p("local_search.label")
-    #local-input-panel
+    nav.search-nav
+      span.search-dialog-title=_p("search.local_search.label")
+      span#loading-status
+      button.search-close-button
+        i.fas.fa-times
+
+    #loading-database.is-center
+      i.fas.fa-spinner.fa-pulse
+      span= '  ' + _p("search.load_data")
+
+    .search-wrap
      #local-search-input
        .local-search-box
-          input(placeholder=_p("local_search.input_placeholder") type="text").local-search-box--input
-    hr
-    #local-search-results
-    span.search-close-button
-      i.fas.fa-times
+          input(placeholder=_p("search.local_search.input_placeholder") type="text").local-search-box--input
+      hr
+      #local-search-results
+
  #search-mask
--- a/layout/page.pug
+++ b/layout/page.pug
@@ -2,6 +2,9 @@ extends includes/layout.pug

 block content
  #page
+    if top_img === false
+      h1.page-title= page.title
+
    case page.type
      when 'tags'
        include includes/page/tags.pug
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "hexo-theme-butterfly",
-  "version": "4.0.0-b8",
+  "version": "4.0.0-b9",
  "description": "A Simple and Card UI Design theme for Hexo",
  "main": "package.json",
  "scripts": {
--- a/scripts/events/cdn.js
+++ b/scripts/events/cdn.js
@@ -33,8 +33,8 @@ hexo.extend.filter.register('before_generate', () => {
    // search
    local_search: '/js/search/local-search.js',
    algolia_js: '/js/search/algolia.js',
-    algolia_search: 'https://cdn.jsdelivr.net/npm/instantsearch.js@2.10.5/dist/instantsearch.min.js',
-    algolia_search_css: 'https://cdn.jsdelivr.net/npm/instantsearch.js@2.10.5/dist/instantsearch.min.css',
+    algolia_search_v4: 'https://cdn.jsdelivr.net/npm/algoliasearch@4/dist/algoliasearch-lite.umd.js',
+    instantsearch_v4: 'https://cdn.jsdelivr.net/npm/instantsearch.js@4/dist/instantsearch.production.min.js',

    // math
    mathjax: 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js',
@@ -57,8 +57,8 @@ hexo.extend.filter.register('before_generate', () => {
    pangu: 'https://cdn.jsdelivr.net/npm/pangu/dist/browser/pangu.min.js',

    // photo
-    fancybox_css: 'https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css',
-    fancybox: 'https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js',
+    fancybox_css_v4: 'https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css',
+    fancybox_v4: 'https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js',
    medium_zoom: 'https://cdn.jsdelivr.net/npm/medium-zoom/dist/medium-zoom.min.js',

    // snackbar
--- a/scripts/events/init.js
+++ b/scripts/events/init.js
@@ -18,10 +18,4 @@ hexo.extend.filter.register('before_generate', () => {
      process.exit(-1)
    }
  }
-
-  // let stylus to get the hexo highlight config
-  const themeConfig = hexo.theme.config
-  const hexoConfig = hexo.config
-  themeConfig.highlight_settings = hexoConfig.highlight
-  themeConfig.prismjs_settings = hexoConfig.prismjs
 })
--- a/scripts/events/stylus.js
+++ b/scripts/events/stylus.js
@@ -0,0 +1,15 @@
+/**
+ * stylus
+ */
+
+'use strict'
+
+hexo.extend.filter.register('stylus:renderer', function (style) {
+  const { highlight, prismjs } = hexo.config
+  style
+    .define('$highlight_enable', highlight && highlight.enable)
+    .define('$highlight_line_number', highlight && highlight.line_number)
+    .define('$prismjs_enable', prismjs && prismjs.enable)
+    .define('$prismjs_line_number', prismjs && prismjs.line_number)
+    // .import(this.source_dir.replace(/\\/g, '/') + '_data/css/*')
+})
--- a/source/css/_global/function.styl
+++ b/source/css/_global/function.styl
@@ -50,6 +50,30 @@
    transition: all .6s, filter 375ms ease-in .2s
    object-fit: cover

+.list-beauty
+  list-style: none
+
+  li
+    position: relative
+    padding 0.12em 0.4em 0.12em 1.4em
+
+    &:hover
+      &:before
+        border-color: var(--pseudo-hover)
+
+    &:before
+      position: absolute
+      top: .67em
+      left: 0
+      width: w = .43em
+      height: h = w
+      border: .5 * w solid $light-blue
+      border-radius: w
+      background: transparent
+      content: ''
+      cursor: pointer
+      transition: all .3s ease-out
+
 maxWidth600()
  @media screen and (max-width: 600px)
    {block}
--- a/source/css/_highlight/highlight.styl
+++ b/source/css/_highlight/highlight.styl
@@ -1,7 +1,5 @@
 $highlight_theme = hexo-config('highlight_theme')
-$highlighEnable = hexo-config('highlight_settings') && hexo-config('highlight_settings.enable')
-$prismjsEnable = hexo-config('prismjs_settings') && hexo-config('prismjs_settings.enable')
-wordWrap = !hexo-config('highlight_settings.line_number') && hexo-config('code_word_wrap')
+wordWrap = $highlight_enable && !$highlight_line_number && hexo-config('code_word_wrap')

@require 'theme'

@@ -15,10 +13,10 @@ wordWrap = !hexo-config('highlight_settings.line_number') && hexo-config('code_w
  --hlscrollbar-bg: $highlight-scrollbar
  --hlexpand-bg: linear-gradient(180deg, rgba($highlight-background, .6), rgba($highlight-background, .9))

-if $highlighEnable
+if $highlight_enable
  @require 'highlight/index'

-if $prismjsEnable
+if $prismjs_enable
  @require 'prismjs/index'

 $code-block
--- a/source/css/_highlight/prismjs/index.styl
+++ b/source/css/_highlight/prismjs/index.styl
@@ -1,4 +1,4 @@
-if hexo-fonfig('prismjs_settings.line_number')
+if $prismjs_line_number
  @require 'line-number'

 if $highlight_theme != false
--- a/source/css/_highlight/theme.styl
+++ b/source/css/_highlight/theme.styl
@@ -13,7 +13,7 @@ if $highlight_theme == 'darker' || ($highlight_theme == 'mac')
  }
  $highlight-scrollbar = lighten($highlight-background, 8)

-  if $highlighEnable
+  if $highlight_enable
    $highlight-comment = #969896
    $highlight-red = #FF5370
    $highlight-orange = #F78C6C
@@ -39,7 +39,7 @@ if $highlight_theme == 'pale night'
  }
  $highlight-scrollbar = lighten($highlight-background, 8)

-  if $highlighEnable
+  if $highlight_enable
    $highlight-comment = #676E95
    $highlight-red = #FF5370
    $highlight-orange = #F78C6C
@@ -65,7 +65,7 @@ if $highlight_theme == 'ocean'
  }
  $highlight-scrollbar = lighten($highlight-background, 8)

-  if $highlighEnable
+  if $highlight_enable
    $highlight-comment = rgba(101, 115, 126, .8)
    $highlight-red = #FF5370
    $highlight-orange = #F78C6C
@@ -92,7 +92,7 @@ if $highlight_theme == 'light' || ($highlight_theme == 'mac light')
  }
  $highlight-scrollbar = darken($highlight-background, 8)

-  if $highlighEnable
+  if $highlight_enable
    $highlight-comment = rgba(149, 165, 166, .8)
    $highlight-red = #E53935
    $highlight-orange = #F76D47
--- a/source/css/_layout/aside.styl
+++ b/source/css/_layout/aside.styl
@@ -258,7 +258,8 @@

    .toc-content
      clear: both
-      overflow-y: auto
+      overflow-y: scroll
+      overflow-y: overlay
      max-height: calc(100vh - 120px)

      +maxWidth900()
@@ -288,6 +289,7 @@

      .toc-link
        display: block
+        padding-right: 8px
        padding-left: 6px
        border-left: 3px solid transparent
        color: var(--toc-link-color)
--- a/source/css/_layout/post.styl
+++ b/source/css/_layout/post.styl
@@ -1,9 +1,9 @@
 beautify()
  headStyle(fontsize)
-    padding-left: unit(fontsize + .4, 'px')
+    padding-left: unit(fontsize + 12, 'px')

    &:before
-      margin-left: unit((-(fontsize + 4)), 'px')
+      margin-left: unit((-(fontsize + 6)), 'px')
      font-size: unit(fontsize, 'px')

    &:hover
@@ -50,93 +50,21 @@ beautify()

  ol,
  ul
-    margin-top: 8px
-    padding: 0 0 0 16px
-    list-style: none
-    counter-reset: li
-
-    +maxWidth768()
-      padding: 0 0 0 8px
-
    p
-      margin: 0 0 10px
+      margin: 0 0 8px

-    ol,
-    ul
-      padding-left: 12px
+  li
+    &::marker
+      color: $light-blue
+      font-weight: 600
+      font-size: 1.05em

-      +maxWidth768()
-        padding-left: 4px
+    &:hover
+      &::marker
+        color: var(--pseudo-hover)

-    li
-      &:not(.tab)
-        position: relative
-        margin: 4px 0
-
-      &:hover
-        &:before
-          transform: rotate(360deg)
-
-      &:before
-        position: absolute
-        top: 0
-        left: 0
-        background: $light-blue
-        color: $white
-        cursor: pointer
-        transition: all .3s ease-out
-
-  ol
-    > li
-      &:not(.tab)
-        padding: .2em .2em .2em 1.8em
-
-      &:before
-        margin-top: .65em
-        width: w = 1.45em
-        height: h = w
-        border-radius: .5 * w
-        content: counter(li)
-        counter-increment: li
-        text-align: center
-        font-size: .85em
-        line-height: h
-
-  ul
-    > li:not(.tab)
-      padding: .2em .2em .2em 1.4em
-
-      &:hover
-        &:before
-          border-color: var(--pseudo-hover)
-
-      &:before
-        $w = .42em
-        top: .78em
-        width: w = $w
-        height: h = w
-        border: .5 * w solid $light-blue
-        border-radius: w
-        background: transparent
-        content: ''
-        line-height: h
-
-no-beautify()
-  ol,
-  ul
-    margin-top: 8px
-
-    p
-      margin: 0 0 10px
-
-    ol,
-    ul
-      padding-left: 10px
-
-    li
-      position: relative
-      margin: 6px 0
-      padding-left: 6px
+  ul > li
+    list-style-type: circle

 #article-container
  word-wrap: break-word
@@ -152,7 +80,7 @@ no-beautify()
    display: block
    margin: 0 auto 20px
    max-width: 100%
-    transition: filter 375ms ease-in 0.2s
+    transition: filter 375ms ease-in .2s

  p
    margin: 0 0 16px
@@ -174,15 +102,24 @@ no-beautify()
    font-family: Monaco, 'Ubuntu Mono', monospace
    line-height: 1em

-  if hexo-config('beautify.enable') && hexo-config('beautify.field') == 'site'
-    beautify()
-  else if hexo-config('beautify.enable') && hexo-config('beautify.field') == 'post'
-    no-beautify()
+  ol,
+  ul
+    ol,
+    ul
+      padding-left: 20px

-    &.post-content
+    li
+      margin: 4px 0
+
+    p
+      margin: 0 0 8px
+
+  if hexo-config('beautify.enable')
+    if hexo-config('beautify.field') == 'site'
      beautify()
-  else
-    no-beautify()
+    else if hexo-config('beautify.field') == 'post'
+      &.post-content
+        beautify()

  > :last-child
    margin-bottom: 0 !important
--- a/source/css/_layout/rightside.styl
+++ b/source/css/_layout/rightside.styl
@@ -18,7 +18,7 @@
    & > a
      display: block
      margin-bottom: 5px
-      width: w = 38px
+      width: w = 35px
      height: w
      border-radius: 5px
      background-color: var(--btn-bg)
@@ -30,11 +30,6 @@
      &:hover
        background-color: var(--btn-hover-color)

-      +maxWidth768()
-        width: w = 34px
-        height: w
-        line-height: w
-
  #mobile-toc-button
    display: none

--- a/source/css/_page/categories.styl
+++ b/source/css/_page/categories.styl
@@ -1,62 +1,37 @@
-#page
-  .category-lists
-    padding: 20px 0 30px
+.category-lists
+  .category-title
+    font-size: 2.57em

    +maxWidth768()
-      padding: 0
+      font-size: 2em

-    .category-title
-      font-size: 2.57em
+  .category-list
+    margin-bottom: 0

-      +maxWidth768()
-        font-size: 2em
+    a
+      color: var(--font-color)

-    .category-list
-      a
-        color: var(--font-color)
+      &:hover
+        color: $text-hover

-        &:hover
-          color: $text-hover
+    .category-list-count
+      margin-left: 8px
+      color: $theme-meta-color

-      .category-list-count
-        margin-left: 8px
-        color: $theme-meta-color
+      &:before
+        content: '('

-        &:before
-          content: '('
+      &:after
+        content: ')'

-        &:after
-          content: ')'
+  ul
+    padding: 0 0 0 20px
+    @extend .list-beauty

    ul
-      margin-top: 8px
-      padding: 0 0 0 20px
-      list-style: none
-      counter-reset: li
+      padding-left: 4px

-      ul
-        padding-left: 4px
-
-      li
-        position: relative
-        margin: 6px 0
-        padding: .12em .4em .12em 1.4em
-
-        &:before
-          position: absolute
-          left: 0
-          cursor: pointer
-          transition: all .3s ease-out
-          $w = .43em
-          top: .7em
-          width: w = $w
-          height: h = w
-          border: .5 * w solid $light-blue
-          border-radius: w
-          background: transparent
-          content: ''
-          // line-height: h
-
-        &:hover
-          &:before
-            border-color: var(--pseudo-hover)
+    li
+      position: relative
+      margin: 6px 0
+      padding: .12em .4em .12em 1.4em
--- a/source/css/_page/tags.styl
+++ b/source/css/_page/tags.styl
@@ -17,3 +17,7 @@

    +maxWidth768()
      font-size: 2em
+
+h1.page-title
+  & + .tag-cloud-list
+    text-align: left
--- a/source/css/_search/algolia.styl
+++ b/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
--- a/source/css/_search/index.styl
+++ b/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
--- a/source/css/_search/local-search.styl
+++ b/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
--- a/source/img/algolia.svg
+++ b/source/img/algolia.svg
@@ -1,9 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1366 362">
-  <linearGradient id="a" x1="428.258" x2="434.145" y1="404.15" y2="409.85" gradientUnits="userSpaceOnUse" gradientTransform="matrix(94.045 0 0 -94.072 -40381.527 38479.52)">
-    <stop offset="0" stop-color="#00aeff"/>
-    <stop offset="1" stop-color="#3369e7"/>
-  </linearGradient>
-  <path fill="url(#a)" d="M61.8 15.4h242.8c23.9 0 43.4 19.4 43.4 43.4v242.9c0 23.9-19.4 43.4-43.4 43.4H61.8c-23.9 0-43.4-19.4-43.4-43.4v-243c0-23.9 19.4-43.3 43.4-43.3z"/>
-  <path fill="#FFF" d="M187 98.7c-51.4 0-93.1 41.7-93.1 93.2S135.6 285 187 285s93.1-41.7 93.1-93.2-41.6-93.1-93.1-93.1zm0 158.8c-36.2 0-65.6-29.4-65.6-65.6s29.4-65.6 65.6-65.6 65.6 29.4 65.6 65.6-29.3 65.6-65.6 65.6zm0-117.8v48.9c0 1.4 1.5 2.4 2.8 1.7l43.4-22.5c1-.5 1.3-1.7.8-2.7-9-15.8-25.7-26.6-45-27.3-1 0-2 .8-2 1.9zm-60.8-35.9l-5.7-5.7c-5.6-5.6-14.6-5.6-20.2 0l-6.8 6.8c-5.6 5.6-5.6 14.6 0 20.2l5.6 5.6c.9.9 2.2.7 3-.2 3.3-4.5 6.9-8.8 10.9-12.8 4.1-4.1 8.3-7.7 12.9-11 1-.6 1.1-2 .3-2.9zM217.5 89V77.7c0-7.9-6.4-14.3-14.3-14.3h-33.3c-7.9 0-14.3 6.4-14.3 14.3v11.6c0 1.3 1.2 2.2 2.5 1.9 9.3-2.7 19.1-4.1 29-4.1 9.5 0 18.9 1.3 28 3.8 1.2.3 2.4-.6 2.4-1.9z"/>
-  <path fill="#182359" d="M842.5 267.6c0 26.7-6.8 46.2-20.5 58.6-13.7 12.4-34.6 18.6-62.8 18.6-10.3 0-31.7-2-48.8-5.8l6.3-31c14.3 3 33.2 3.8 43.1 3.8 15.7 0 26.9-3.2 33.6-9.6s10-15.9 10-28.5v-6.4c-3.9 1.9-9 3.8-15.3 5.8-6.3 1.9-13.6 2.9-21.8 2.9-10.8 0-20.6-1.7-29.5-5.1-8.9-3.4-16.6-8.4-22.9-15-6.3-6.6-11.3-14.9-14.8-24.8s-5.3-27.6-5.3-40.6c0-12.2 1.9-27.5 5.6-37.7 3.8-10.2 9.2-19 16.5-26.3 7.2-7.3 16-12.9 26.3-17s22.4-6.7 35.5-6.7c12.7 0 24.4 1.6 35.8 3.5 11.4 1.9 21.1 3.9 29 6.1v155.2zm-108.7-77.2c0 16.4 3.6 34.6 10.8 42.2 7.2 7.6 16.5 11.4 27.9 11.4 6.2 0 12.1-.9 17.6-2.6 5.5-1.7 9.9-3.7 13.4-6.1v-97.1c-2.8-.6-14.5-3-25.8-3.3-14.2-.4-25 5.4-32.6 14.7-7.5 9.3-11.3 25.6-11.3 40.8zm294.3 0c0 13.2-1.9 23.2-5.8 34.1s-9.4 20.2-16.5 27.9c-7.1 7.7-15.6 13.7-25.6 17.9s-25.4 6.6-33.1 6.6c-7.7-.1-23-2.3-32.9-6.6-9.9-4.3-18.4-10.2-25.5-17.9-7.1-7.7-12.6-17-16.6-27.9s-6-20.9-6-34.1c0-13.2 1.8-25.9 5.8-36.7 4-10.8 9.6-20 16.8-27.7s15.8-13.6 25.6-17.8c9.9-4.2 20.8-6.2 32.6-6.2s22.7 2.1 32.7 6.2c10 4.2 18.6 10.1 25.6 17.8 7.1 7.7 12.6 16.9 16.6 27.7 4.2 10.8 6.3 23.5 6.3 36.7zm-40 .1c0-16.9-3.7-31-10.9-40.8-7.2-9.9-17.3-14.8-30.2-14.8-12.9 0-23 4.9-30.2 14.8-7.2 9.9-10.7 23.9-10.7 40.8 0 17.1 3.6 28.6 10.8 38.5 7.2 10 17.3 14.9 30.2 14.9 12.9 0 23-5 30.2-14.9 7.2-10 10.8-21.4 10.8-38.5zm127.1 86.4c-64.1.3-64.1-51.8-64.1-60.1L1051 32l39.1-6.2v183.6c0 4.7 0 34.5 25.1 34.6v32.9zm68.9 0h-39.3V108.1l39.3-6.2v175zm-19.7-193.5c13.1 0 23.8-10.6 23.8-23.7S1177.6 36 1164.4 36s-23.8 10.6-23.8 23.7 10.7 23.7 23.8 23.7zm117.4 18.6c12.9 0 23.8 1.6 32.6 4.8 8.8 3.2 15.9 7.7 21.1 13.4s8.9 13.5 11.1 21.7c2.3 8.2 3.4 17.2 3.4 27.1v100.6c-6 1.3-15.1 2.8-27.3 4.6s-25.9 2.7-41.1 2.7c-10.1 0-19.4-1-27.7-2.9-8.4-1.9-15.5-5-21.5-9.3-5.9-4.3-10.5-9.8-13.9-16.6-3.3-6.8-5-16.4-5-26.4 0-9.6 1.9-15.7 5.6-22.3 3.8-6.6 8.9-12 15.3-16.2 6.5-4.2 13.9-7.2 22.4-9s17.4-2.7 26.6-2.7c4.3 0 8.8.3 13.6.8s9.8 1.4 15.2 2.7v-6.4c0-4.5-.5-8.8-1.6-12.8-1.1-4.1-3-7.6-5.6-10.7-2.7-3.1-6.2-5.5-10.6-7.2s-10-3-16.7-3c-9 0-17.2 1.1-24.7 2.4-7.5 1.3-13.7 2.8-18.4 4.5l-4.7-32.1c4.9-1.7 12.2-3.4 21.6-5.1s19.5-2.6 30.3-2.6zm3.3 141.9c12 0 20.9-.7 27.1-1.9v-39.8c-2.2-.6-5.3-1.3-9.4-1.9-4.1-.6-8.6-1-13.6-1-4.3 0-8.7.3-13.1 1-4.4.6-8.4 1.8-11.9 3.5s-6.4 4.1-8.5 7.2c-2.2 3.1-3.2 4.9-3.2 9.6 0 9.2 3.2 14.5 9 18 5.9 3.6 13.7 5.3 23.6 5.3zM512.9 103c12.9 0 23.8 1.6 32.6 4.8 8.8 3.2 15.9 7.7 21.1 13.4 5.3 5.8 8.9 13.5 11.1 21.7 2.3 8.2 3.4 17.2 3.4 27.1v100.6c-6 1.3-15.1 2.8-27.3 4.6-12.2 1.8-25.9 2.7-41.1 2.7-10.1 0-19.4-1-27.7-2.9-8.4-1.9-15.5-5-21.5-9.3-5.9-4.3-10.5-9.8-13.9-16.6-3.3-6.8-5-16.4-5-26.4 0-9.6 1.9-15.7 5.6-22.3 3.8-6.6 8.9-12 15.3-16.2 6.5-4.2 13.9-7.2 22.4-9s17.4-2.7 26.6-2.7c4.3 0 8.8.3 13.6.8 4.7.5 9.8 1.4 15.2 2.7v-6.4c0-4.5-.5-8.8-1.6-12.8-1.1-4.1-3-7.6-5.6-10.7-2.7-3.1-6.2-5.5-10.6-7.2-4.4-1.7-10-3-16.7-3-9 0-17.2 1.1-24.7 2.4-7.5 1.3-13.7 2.8-18.4 4.5l-4.7-32.1c4.9-1.7 12.2-3.4 21.6-5.1 9.4-1.8 19.5-2.6 30.3-2.6zm3.4 142c12 0 20.9-.7 27.1-1.9v-39.8c-2.2-.6-5.3-1.3-9.4-1.9-4.1-.6-8.6-1-13.6-1-4.3 0-8.7.3-13.1 1-4.4.6-8.4 1.8-11.9 3.5s-6.4 4.1-8.5 7.2c-2.2 3.1-3.2 4.9-3.2 9.6 0 9.2 3.2 14.5 9 18s13.7 5.3 23.6 5.3zm158.5 31.9c-64.1.3-64.1-51.8-64.1-60.1L610.6 32l39.1-6.2v183.6c0 4.7 0 34.5 25.1 34.6v32.9z"/>
-</svg>
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -1,5 +1,6 @@
 document.addEventListener('DOMContentLoaded', function () {
-  let blogNameWidth, menusWidth, searchWidth, $nav, hideMenuIndex, mobileSidebarOpen
+  let blogNameWidth, menusWidth, searchWidth, $nav, hideMenuIndex
+  let mobileSidebarOpen = false

  const adjustMenu = (init) => {
    if (init) {
@@ -43,6 +44,7 @@ document.addEventListener('DOMContentLoaded', function () {
      $body.style.paddingRight = ''
      btf.fadeOut(document.getElementById('menu-mask'), 0.5)
      document.getElementById('sidebar-menus').classList.remove('open')
+      mobileSidebarOpen = false
    }
  }

@@ -237,7 +239,7 @@ document.addEventListener('DOMContentLoaded', function () {
    })

    if (window.fjGallery) {
-      btf.initJustifiedGallery(ele)
+      setTimeout(() => { btf.initJustifiedGallery(ele) }, 100)
      return
    }

--- a/source/js/search/algolia.js
+++ b/source/js/search/algolia.js
@@ -1,8 +1,10 @@
 window.addEventListener('load', () => {
  const openSearch = () => {
-    document.body.style.cssText = 'width: 100%;overflow: hidden'
+    const bodyStyle = document.body.style
+    bodyStyle.width = '100%'
+    bodyStyle.overflow = 'hidden'
    document.querySelector('#algolia-search .search-dialog').style.display = 'block'
-    document.querySelector('#algolia-search .ais-search-box--input').focus()
+    document.querySelector('#algolia-search .ais-SearchBox-input').focus()
    btf.fadeIn(document.getElementById('search-mask'), 0.5)
    // shortcut: ESC
    document.addEventListener('keydown', function f (event) {
@@ -14,7 +16,9 @@ window.addEventListener('load', () => {
  }

  const closeSearch = () => {
-    document.body.style.cssText = "width: '';overflow: ''"
+    const bodyStyle = document.body.style
+    bodyStyle.width = ''
+    bodyStyle.overflow = ''
    const $searchDialog = document.querySelector('#algolia-search .search-dialog')
    $searchDialog.style.animation = 'search_close .5s'
    setTimeout(() => { $searchDialog.style.cssText = "display: none; animation: ''" }, 500)
@@ -40,41 +44,38 @@ window.addEventListener('load', () => {
    return console.error('Algolia setting is invalid!')
  }

+  const searchClient = window.algoliasearch(algolia.appId, algolia.apiKey)
  const search = instantsearch({
-    appId: algolia.appId,
-    apiKey: algolia.apiKey,
    indexName: algolia.indexName,
-    searchParameters: {
-      hitsPerPage: algolia.hits.per_page || 10
-    },
-    searchFunction: function (helper) {
-      const searchInput = document.querySelector('#algolia-search-input input')
-
-      if (searchInput.value) {
-        helper.search()
-      }
-    }
+    searchClient
  })

-  search.addWidget(
+  search.addWidgets([
+    instantsearch.widgets.configure({
+      hitsPerPage: 5
+    })
+  ])
+
+  search.addWidgets([
    instantsearch.widgets.searchBox({
      container: '#algolia-search-input',
-      reset: false,
-      magnifier: false,
-      placeholder: GLOBAL_CONFIG.algolia.languages.input_placeholder
+      showReset: false,
+      showSubmit: false,
+      placeholder: GLOBAL_CONFIG.algolia.languages.input_placeholder,
+      showLoadingIndicator: true
    })
-  )
-  search.addWidget(
+  ])
+
+  search.addWidgets([
    instantsearch.widgets.hits({
      container: '#algolia-hits',
      templates: {
        item: function (data) {
          const link = data.permalink ? data.permalink : (GLOBAL_CONFIG.root + data.path)
-          return (
-            '<a href="' + link + '" class="algolia-hit-item-link">' +
-            data._highlightResult.title.value +
-            '</a>'
-          )
+          return `
+            <a href="${link}" class="algolia-hit-item-link">
+            ${data._highlightResult.title.value || 'no-title'}
+            </a>`
        },
        empty: function (data) {
          return (
@@ -83,53 +84,39 @@ window.addEventListener('load', () => {
            '</div>'
          )
        }
-      },
-      cssClasses: {
-        item: 'algolia-hit-item'
      }
    })
-  )
+  ])

-  search.addWidget(
+  search.addWidgets([
    instantsearch.widgets.stats({
      container: '#algolia-stats',
      templates: {
-        body: function (data) {
+        text: function (data) {
+          const icon = '<svg viewBox="0 0 1366 362" xmlns="http://www.w3.org/2000/svg"><linearGradient id="a" x1="428.26" x2="434.14" y1="404.15" y2="409.85" gradientTransform="matrix(94.045 0 0 -94.072 -40382 38480)" gradientUnits="userSpaceOnUse"><stop stop-color="#00aeff" offset="0"/><stop stop-color="#3369e7" offset="1"/></linearGradient><path d="M61.8 15.4h242.8c23.9 0 43.4 19.4 43.4 43.4v242.9c0 23.9-19.4 43.4-43.4 43.4H61.8c-23.9 0-43.4-19.4-43.4-43.4v-243c0-23.9 19.4-43.3 43.4-43.3z" fill="url(#a)"/><path d="M187 98.7c-51.4 0-93.1 41.7-93.1 93.2S135.6 285 187 285s93.1-41.7 93.1-93.2-41.6-93.1-93.1-93.1zm0 158.8c-36.2 0-65.6-29.4-65.6-65.6s29.4-65.6 65.6-65.6 65.6 29.4 65.6 65.6-29.3 65.6-65.6 65.6zm0-117.8v48.9c0 1.4 1.5 2.4 2.8 1.7l43.4-22.5c1-.5 1.3-1.7.8-2.7-9-15.8-25.7-26.6-45-27.3-1 0-2 .8-2 1.9zm-60.8-35.9l-5.7-5.7c-5.6-5.6-14.6-5.6-20.2 0l-6.8 6.8c-5.6 5.6-5.6 14.6 0 20.2l5.6 5.6c.9.9 2.2.7 3-.2 3.3-4.5 6.9-8.8 10.9-12.8 4.1-4.1 8.3-7.7 12.9-11 1-.6 1.1-2 .3-2.9zM217.5 89V77.7c0-7.9-6.4-14.3-14.3-14.3h-33.3c-7.9 0-14.3 6.4-14.3 14.3v11.6c0 1.3 1.2 2.2 2.5 1.9 9.3-2.7 19.1-4.1 29-4.1 9.5 0 18.9 1.3 28 3.8 1.2.3 2.4-.6 2.4-1.9z" fill="#FFF"/><path d="m842.5 267.6c0 26.7-6.8 46.2-20.5 58.6s-34.6 18.6-62.8 18.6c-10.3 0-31.7-2-48.8-5.8l6.3-31c14.3 3 33.2 3.8 43.1 3.8 15.7 0 26.9-3.2 33.6-9.6s10-15.9 10-28.5v-6.4c-3.9 1.9-9 3.8-15.3 5.8-6.3 1.9-13.6 2.9-21.8 2.9-10.8 0-20.6-1.7-29.5-5.1s-16.6-8.4-22.9-15-11.3-14.9-14.8-24.8-5.3-27.6-5.3-40.6c0-12.2 1.9-27.5 5.6-37.7 3.8-10.2 9.2-19 16.5-26.3 7.2-7.3 16-12.9 26.3-17s22.4-6.7 35.5-6.7c12.7 0 24.4 1.6 35.8 3.5s21.1 3.9 29 6.1v155.2zm-108.7-77.2c0 16.4 3.6 34.6 10.8 42.2s16.5 11.4 27.9 11.4c6.2 0 12.1-0.9 17.6-2.6s9.9-3.7 13.4-6.1v-97.1c-2.8-0.6-14.5-3-25.8-3.3-14.2-0.4-25 5.4-32.6 14.7-7.5 9.3-11.3 25.6-11.3 40.8zm294.3 0c0 13.2-1.9 23.2-5.8 34.1s-9.4 20.2-16.5 27.9-15.6 13.7-25.6 17.9-25.4 6.6-33.1 6.6c-7.7-0.1-23-2.3-32.9-6.6s-18.4-10.2-25.5-17.9-12.6-17-16.6-27.9-6-20.9-6-34.1 1.8-25.9 5.8-36.7 9.6-20 16.8-27.7 15.8-13.6 25.6-17.8c9.9-4.2 20.8-6.2 32.6-6.2s22.7 2.1 32.7 6.2c10 4.2 18.6 10.1 25.6 17.8 7.1 7.7 12.6 16.9 16.6 27.7 4.2 10.8 6.3 23.5 6.3 36.7zm-40 0.1c0-16.9-3.7-31-10.9-40.8-7.2-9.9-17.3-14.8-30.2-14.8s-23 4.9-30.2 14.8-10.7 23.9-10.7 40.8c0 17.1 3.6 28.6 10.8 38.5 7.2 10 17.3 14.9 30.2 14.9s23-5 30.2-14.9c7.2-10 10.8-21.4 10.8-38.5zm127.1 86.4c-64.1 0.3-64.1-51.8-64.1-60.1l-0.1-184.8 39.1-6.2v183.6c0 4.7 0 34.5 25.1 34.6v32.9zm68.9 0h-39.3v-168.8l39.3-6.2v175zm-19.7-193.5c13.1 0 23.8-10.6 23.8-23.7s-10.6-23.7-23.8-23.7-23.8 10.6-23.8 23.7 10.7 23.7 23.8 23.7zm117.4 18.6c12.9 0 23.8 1.6 32.6 4.8s15.9 7.7 21.1 13.4 8.9 13.5 11.1 21.7c2.3 8.2 3.4 17.2 3.4 27.1v100.6c-6 1.3-15.1 2.8-27.3 4.6s-25.9 2.7-41.1 2.7c-10.1 0-19.4-1-27.7-2.9-8.4-1.9-15.5-5-21.5-9.3-5.9-4.3-10.5-9.8-13.9-16.6-3.3-6.8-5-16.4-5-26.4 0-9.6 1.9-15.7 5.6-22.3 3.8-6.6 8.9-12 15.3-16.2 6.5-4.2 13.9-7.2 22.4-9s17.4-2.7 26.6-2.7c4.3 0 8.8 0.3 13.6 0.8s9.8 1.4 15.2 2.7v-6.4c0-4.5-0.5-8.8-1.6-12.8-1.1-4.1-3-7.6-5.6-10.7-2.7-3.1-6.2-5.5-10.6-7.2s-10-3-16.7-3c-9 0-17.2 1.1-24.7 2.4s-13.7 2.8-18.4 4.5l-4.7-32.1c4.9-1.7 12.2-3.4 21.6-5.1s19.5-2.6 30.3-2.6zm3.3 141.9c12 0 20.9-0.7 27.1-1.9v-39.8c-2.2-0.6-5.3-1.3-9.4-1.9s-8.6-1-13.6-1c-4.3 0-8.7 0.3-13.1 1-4.4 0.6-8.4 1.8-11.9 3.5s-6.4 4.1-8.5 7.2c-2.2 3.1-3.2 4.9-3.2 9.6 0 9.2 3.2 14.5 9 18 5.9 3.6 13.7 5.3 23.6 5.3zm-772.2-140.9c12.9 0 23.8 1.6 32.6 4.8s15.9 7.7 21.1 13.4c5.3 5.8 8.9 13.5 11.1 21.7 2.3 8.2 3.4 17.2 3.4 27.1v100.6c-6 1.3-15.1 2.8-27.3 4.6s-25.9 2.7-41.1 2.7c-10.1 0-19.4-1-27.7-2.9-8.4-1.9-15.5-5-21.5-9.3-5.9-4.3-10.5-9.8-13.9-16.6-3.3-6.8-5-16.4-5-26.4 0-9.6 1.9-15.7 5.6-22.3 3.8-6.6 8.9-12 15.3-16.2 6.5-4.2 13.9-7.2 22.4-9s17.4-2.7 26.6-2.7c4.3 0 8.8 0.3 13.6 0.8 4.7 0.5 9.8 1.4 15.2 2.7v-6.4c0-4.5-0.5-8.8-1.6-12.8-1.1-4.1-3-7.6-5.6-10.7-2.7-3.1-6.2-5.5-10.6-7.2s-10-3-16.7-3c-9 0-17.2 1.1-24.7 2.4s-13.7 2.8-18.4 4.5l-4.7-32.1c4.9-1.7 12.2-3.4 21.6-5.1 9.4-1.8 19.5-2.6 30.3-2.6zm3.4 142c12 0 20.9-0.7 27.1-1.9v-39.8c-2.2-0.6-5.3-1.3-9.4-1.9s-8.6-1-13.6-1c-4.3 0-8.7 0.3-13.1 1-4.4 0.6-8.4 1.8-11.9 3.5s-6.4 4.1-8.5 7.2c-2.2 3.1-3.2 4.9-3.2 9.6 0 9.2 3.2 14.5 9 18s13.7 5.3 23.6 5.3zm158.5 31.9c-64.1 0.3-64.1-51.8-64.1-60.1l-0.1-184.8 39.1-6.2v183.6c0 4.7 0 34.5 25.1 34.6v32.9z" fill="#182359"/></svg>'
          const stats = GLOBAL_CONFIG.algolia.languages.hits_stats
            .replace(/\$\{hits}/, data.nbHits)
            .replace(/\$\{time}/, data.processingTimeMS)
          return (
-            '<hr>' +
-            stats +
-            '<span class="algolia-logo pull-right">' +
-            '  <img src="' + GLOBAL_CONFIG.root + 'img/algolia.svg" alt="Algolia" />' +
-            '</span>'
+            `<hr>${stats}<span class="algolia-logo pull-right">${icon}</span>`
          )
        }
      }
    })
-  )
+  ])

-  search.addWidget(
+  search.addWidgets([
    instantsearch.widgets.pagination({
      container: '#algolia-pagination',
-      scrollTo: false,
-      showFirstLast: false,
-      labels: {
+      totalPages: 5,
+      templates: {
        first: '<i class="fas fa-angle-double-left"></i>',
        last: '<i class="fas fa-angle-double-right"></i>',
        previous: '<i class="fas fa-angle-left"></i>',
        next: '<i class="fas fa-angle-right"></i>'
-      },
-      cssClasses: {
-        root: 'pagination',
-        item: 'pagination-item',
-        link: 'page-number',
-        active: 'current',
-        disabled: 'disabled-item'
      }
    })
-  )
+  ])
  search.start()

  window.pjax && search.on('render', () => {
--- a/source/js/search/local-search.js
+++ b/source/js/search/local-search.js
@@ -59,22 +59,31 @@ window.addEventListener('load', () => {
        }
      })
    }
+    if (response.ok) {
+      const $loadDataItem = document.getElementById('loading-database')
+      $loadDataItem.nextElementSibling.style.display = 'block'
+      $loadDataItem.remove()
+    }
+
    const $input = document.querySelector('#local-search-input input')
    const $resultContent = document.getElementById('local-search-results')
+    const $loadingStatus = document.getElementById('loading-status')
    $input.addEventListener('input', function () {
-      let str = '<div class="search-result-list">'
      const keywords = this.value.trim().toLowerCase().split(/[\s]+/)
+      if (keywords[0] !== '') $loadingStatus.innerHTML = '<i class="fas fa-spinner fa-pulse"></i>'
+
      $resultContent.innerHTML = ''
+      let str = '<div class="search-result-list">'
      if (this.value.trim().length <= 0) return
      let count = 0
      // perform local searching
      datas.forEach(function (data) {
        let isMatch = true
        if (!data.title || data.title.trim() === '') {
-          data.title = 'Untitled'
+          data.title = ''
        }
        let dataTitle = data.title.trim().toLowerCase()
-        const dataContent = data.content.trim().replace(/<[^>]+>/g, '').toLowerCase()
+        const dataContent = data.content ? data.content.trim().replace(/<[^>]+>/g, '').toLowerCase() : ''
        const dataUrl = data.url.startsWith('/') ? data.url : GLOBAL_CONFIG.root + data.url
        let indexTitle = -1
        let indexContent = -1
@@ -146,6 +155,7 @@ window.addEventListener('load', () => {
      }
      str += '</div>'
      $resultContent.innerHTML = str
+      if (keywords[0] !== '') $loadingStatus.innerHTML = ''
      window.pjax && window.pjax.refresh($resultContent)
    })
  }