update

README.md

@@ -86,7 +86,7 @@ npm i hexo-theme-butterfly
 - [x] Share (Sharejs/Addtoany)
 - [X] Comment (Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/artalk)
 - [x] Multiple Comment System Support
-- [x] Online Chats (Chatra/Tidio/Daovoice/Crisp)
+- [x] Online Chats (Chatra/Tidio/Crisp)
 - [x] Web analytics
 - [x] Google AdSense
 - [x] Webmaster Verification

README_CN.md

@@ -86,7 +86,7 @@ theme: butterfly
 - [x] 多種分享系統（Sharejs/Addtoany）
 - [X] 多種評論系統（Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/artalk）
 - [x] 支持雙評論部署
-- [x] 多種在線聊天（Chatra/Tidio/Daovoice/Crisp）
+- [x] 多種在線聊天（Chatra/Tidio/Crisp）
 - [x] 多種分析系統
 - [x] 谷歌廣告/手動廣告位置
 - [x] 各種站長驗證

_config.yml

@@ -645,7 +645,7 @@ artalk:
 # --------------------------------------
 
 chat:
-  # Choose: chatra/tidio/daovoice/crisp
+  # Choose: chatra/tidio/crisp
   # Leave it empty if you don't need chat
   use:
   # Chat Button [recommend]
@@ -662,10 +662,6 @@ chatra:
 tidio:
   public_key:
 
-# http://dashboard.daovoice.io/app
-daovoice:
-  app_id:
-
 # https://crisp.chat/en/
 crisp:
   website_id:

layout/includes/mixins/indexPostUI.pug

@@ -105,15 +105,9 @@ mixin indexPostUI()
                           i.fa-solid.fa-spinner.fa-spin
 
             //- Display the article introduction on homepage
-            case theme.index_post_content.method
+            - const content = postDesc(article)
-              when false
+            if content
-                - break
+              .content!=content
-              when 1
-                .content!= article.description
-              when 2
-                .content!= article.description || truncate(article.content, theme.index_post_content.length)
-              default
-                .content!= truncate(article.content, theme.index_post_content.length)
 
         if theme.ad && theme.ad.index
           if (index + 1) % 3 === 0

layout/includes/page/shuoshuo.pug

@@ -21,6 +21,8 @@
             let start = 0
             const container = document.getElementById('article-container')
 
+            const showDateAndTine = date => new Date(date).toLocaleString()
+
             const addData = data => {
               const cLength = data.length
               const end = start + 10 > cLength ? cLength : start + 10
@@ -34,7 +36,7 @@
                           </div>
                           <div class="shuoshuo-info">
                             <div class="shuoshuo-author">${item.author || '!{config.author}'}</div>
-                            <div class="shuoshuo-date">${btf.diffDate(item.date, true)}</div>
+                            <time class="shuoshuo-date" title="${showDateAndTine(item.date)}">${btf.diffDate(item.date, true)}</time>
                           </div>
                         </div>
                         <div class="shuoshuo-content">
@@ -97,7 +99,7 @@
               img.no-lightbox(src=i.avatar || url_for(theme.avatar.img))
             .shuoshuo-info
               .shuoshuo-author=i.author || config.author
-              .shuoshuo-date=relative_date(i.date)
+              time.shuoshuo-date(title=full_date(i.date))=date(i.date)
           .shuoshuo-content
             !=markdown(i.content)
           .shuoshuo-footer

layout/includes/page/tags.pug

@@ -1,2 +1,2 @@
-.tag-cloud-list.is-center
+.tag-cloud-list.text-center
   !=cloudTags({source: site.tags, orderby: page.orderby || 'random', order: page.order || 1, minfontsize: 1.2, maxfontsize: 1.5, limit: 0, unit: 'em'})

layout/includes/pagination.pug

@@ -7,30 +7,28 @@
   }
 
 if is_post()
-  - let prev = theme.post_pagination === 1 ? page.prev : page.next
+  - let paginationOrder = theme.post_pagination === 1 ? { prev: page.prev, next: page.next } : { prev: page.next, next: page.prev }
-  - let next = theme.post_pagination === 1 ? page.next : page.prev
-  nav#pagination.pagination-post
-    if(prev)
-      - var hasPageNext = next ? 'pull-left' : 'pull-full'
-      a.prev-post(class=hasPageNext href=url_for(prev.path) title=prev.title)
-        if prev.cover_type === 'img'
-          img.cover(src=url_for(prev.cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` alt='cover of previous post')
-        else
-          .cover(style=`background: ${prev.cover || 'var(--default-bg-color)'}`)
-        .pagination-info
-          .label=_p('pagination.prev')
-          .prev_info=prev.title
 
-    if(next)
+  nav#pagination.pagination-post
-      - var hasPagePrev = prev ? 'pull-right' : 'pull-full'
+    each direction, key in paginationOrder
-      a.next-post(class=hasPagePrev href=url_for(next.path) title=next.title)
+      if direction
-        if next.cover_type === 'img'
+        - const getPostDesc = direction.postDesc || postDesc(direction)
-          img.cover(src=url_for(next.cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` alt='cover of next post')
+        - let className = key === 'prev' ? (paginationOrder.next ? '' : 'full-width') : (paginationOrder.prev ? '' : 'full-width')
-        else
+        - className = getPostDesc ? className : className + ' no-desc'
-          .cover(style=`background: ${next.cover || 'var(--default-bg-color)'}`)
+        
-        .pagination-info
+        a.pagination-related(class=className href=url_for(direction.path) title=direction.title)
-          .label=_p('pagination.next')
+          if direction.cover_type === 'img'
-          .next_info=next.title
+            img.cover(src=url_for(direction.cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` alt=`cover of ${key === 'prev' ? 'previous' : 'next'} post`)
+          else
+            .cover(style=`background: ${direction.cover || 'var(--default-bg-color)'}`)
+          
+          .info(class=key === 'prev' ? '' : 'text-right')
+            .info-1
+              .info-item-1=_p(`pagination.${key}`)
+              .info-item-2!=direction.title
+            if getPostDesc
+              .info-2
+                .info-item-1!=getPostDesc
 else
   nav#pagination
     .pagination

layout/includes/sidebar.pug

@@ -2,9 +2,9 @@ if theme.menu
   #sidebar
     #menu-mask
     #sidebar-menus
-      .avatar-img.is-center
+      .avatar-img.text-center
         img(src=url_for(theme.avatar.img) onerror=`onerror=null;src='${theme.error_img.flink}'` alt="avatar")
-      .site-data.is-center
+      .site-data.text-center
         a(href=url_for(config.archive_dir) + '/')
           .headline= _p('aside.articles')
           .length-num= site.posts.length

layout/includes/third-party/abcjs/abcjs.pug

@@ -1,12 +1,12 @@
 script.
   (() => {
     const abcjsInit = () => {
-      const abcjsFn = () => {
+      const abcjsFn = () => setTimeout(() => {
         document.querySelectorAll(".abc-music-sheet").forEach(ele => {
           if (ele.children.length > 0) return
           ABCJS.renderAbc(ele, ele.innerHTML, {responsive: 'resize'})
         })
-      }
+      }, 100)
       
       typeof ABCJS === 'object' ? abcjsFn()
         : btf.getScript('!{url_for(theme.asset.abcjs_basic_js)}').then(abcjsFn)

layout/includes/third-party/chat/daovoice.pug

@@ -1,40 +0,0 @@
-//- https://guide.daocloud.io/daovoice/javascript-api-5869833.html
-script.
-  (() => {
-    (function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/!{theme.daovoice.app_id}.js","daovoice")
-
-    const isChatBtn = !{theme.chat.rightside_button}
-    const isChatHideShow = !{theme.chat.button_hide_show}
-
-    daovoice('init', {
-      app_id: '!{theme.daovoice.app_id}',},{
-      launcher: { 
-        disableLauncherIcon: isChatBtn
-      },
-    });
-    daovoice('update');
-
-    if (isChatBtn) {
-      window.chatBtnFn = () => {
-        const isShow = document.getElementById('daodream-messenger').classList.contains('daodream-messenger-active')
-        isShow ? daovoice('hide') : daovoice('show')
-      }
-    } else if (isChatHideShow) {
-      window.chatBtn = {
-        hide: () => {
-          daovoice('update', {},{
-            launcher: {
-              disableLauncherIcon: true
-            }
-          })
-        },
-        show: () => {
-          daovoice('update', {}, {
-            launcher: {
-              disableLauncherIcon: false
-            }
-          })
-        }
-      }
-    }
-  })()

layout/includes/third-party/chat/index.pug

@@ -3,7 +3,5 @@ case theme.chat.use
     include ./chatra.pug
   when 'tidio'
     include ./tidio.pug
-  when 'daovoice'
-    include ./daovoice.pug
   when 'crisp'
     include ./crisp.pug

layout/includes/third-party/search/local-search.pug

@@ -6,7 +6,7 @@
       button.search-close-button
         i.fas.fa-times
 
-    #loading-database.is-center
+    #loading-database.text-center
       i.fas.fa-spinner.fa-pulse
       span= '  ' + _p("search.load_data")
 

layout/includes/widget/card_author.pug

@@ -1,5 +1,5 @@
 if theme.aside.card_author.enable
-  .card-widget.card-info.is-center
+  .card-widget.card-info.text-center
     .avatar-img
       img(src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="avatar")
     .author-info-name= config.author

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-butterfly",
-  "version": "5.1.0-b1",
+  "version": "5.1.0",
   "description": "A Simple and Card UI Design theme for Hexo",
   "main": "package.json",
   "scripts": {

plugins.yml

@@ -9,7 +9,7 @@ activate_power_mode:
 algolia_search:
   name: algoliasearch
   file: dist/lite/builds/browser.umd.js
-  version: 5.8.1
+  version: 5.9.1
 aplayer_css:
   name: aplayer
   file: dist/APlayer.min.css
@@ -45,7 +45,7 @@ canvas_ribbon:
 chartjs:
   name: chart.js
   file: dist/chart.umd.min.js
-  version: 4.4.4
+  version: 4.4.5
 clickShowText:
   name: butterfly-extsrc
   file: dist/click-show-text.min.js
@@ -111,7 +111,7 @@ instantpage:
 instantsearch:
   name: instantsearch.js
   file: dist/instantsearch.production.min.js
-  version: 4.75.0
+  version: 4.75.1
 katex:
   name: katex
   file: dist/katex.min.css

scripts/common/postDesc.js

@@ -0,0 +1,36 @@
+'use strict'
+
+const { stripHTML, truncate } = require('hexo-util')
+
+// Truncates the given content to a specified length, removing HTML tags and replacing newlines with spaces.
+const truncateContent = (content, length) => {
+  return truncate(stripHTML(content), { length, separator: ' ' }).replace(/\n/g, ' ')
+}
+
+// Generates a post description based on the provided data and theme configuration.
+const postDesc = (data, hexo) => {
+  const { description, content, postDesc } = data
+
+  if (postDesc) return postDesc
+
+  const { length, method } = hexo.theme.config.index_post_content
+
+  if (method === false) return
+
+  let result
+  switch (method) {
+    case 1:
+      result = description
+      break
+    case 2:
+      result = description || truncateContent(content, length)
+      break
+    default:
+      result = truncateContent(content, length)
+  }
+
+  data.postDesc = result
+  return result
+}
+
+module.exports = { truncateContent, postDesc }

scripts/events/merge_config.js

@@ -380,9 +380,6 @@ hexo.extend.filter.register('before_generate', () => {
     tidio: {
       public_key: null
     },
-    daovoice: {
-      app_id: null
-    },
     crisp: {
       website_id: null
     },

scripts/helpers/page.js

@@ -1,10 +1,13 @@
 'use strict'
 
-const { stripHTML, prettyUrls, truncate } = require('hexo-util')
+const { truncateContent, postDesc } = require('../common/postDesc')
+const { prettyUrls } = require('hexo-util')
 const crypto = require('crypto')
 
-hexo.extend.helper.register('truncate', (content, length) => {
+hexo.extend.helper.register('truncate', truncateContent)
-  return truncate(stripHTML(content), { length, separator: ' ' }).replace(/\n/g, ' ')
+
+hexo.extend.helper.register('postDesc', data => {
+  return postDesc(data, hexo)
 })
 
 hexo.extend.helper.register('cloudTags', function (options = {}) {

scripts/helpers/related_post.js

@@ -1,3 +1,4 @@
+/* eslint-disable camelcase */
 /**
  * Butterfly
  * Related Posts
@@ -6,12 +7,15 @@
 
 'use strict'
 
+const { postDesc } = require('../common/postDesc')
+
 hexo.extend.helper.register('related_posts', function (currentPost, allPosts) {
   let relatedPosts = []
   const tagsData = currentPost.tags
   tagsData.length && tagsData.forEach(function (tag) {
     allPosts.forEach(function (post) {
       if (currentPost.path !== post.path && isTagRelated(tag.name, post.tags)) {
+        const getPostDesc = post.postDesc || postDesc(post, hexo)
         const relatedPost = {
           title: post.title,
           path: post.path,
@@ -19,7 +23,8 @@ hexo.extend.helper.register('related_posts', function (currentPost, allPosts) {
           cover_type: post.cover_type,
           weight: 1,
           updated: post.updated,
-          created: post.date
+          created: post.date,
+          postDesc: getPostDesc
         }
         const index = findItem(relatedPosts, 'path', post.path)
         if (index !== -1) {
@@ -50,20 +55,27 @@ hexo.extend.helper.register('related_posts', function (currentPost, allPosts) {
     result += '<div class="relatedPosts-list">'
 
     for (let i = 0; i < Math.min(relatedPosts.length, limitNum); i++) {
-      const cover = relatedPosts[i].cover || 'var(--default-bg-color)'
+      let { cover, title, path, cover_type, created, updated, postDesc } = relatedPosts[i]
-      const title = this.escape_html(relatedPosts[i].title)
+      const { escape_html, url_for, date } = this
-      result += `<a href="${this.url_for(relatedPosts[i].path)}" title="${title}">`
+      cover = cover || 'var(--default-bg-color)'
-      if (relatedPosts[i].cover_type === 'img') {
+      title = escape_html(title)
-        result += `<img class="cover" src="${this.url_for(cover)}" alt="cover">`
+      const className = postDesc ? 'pagination-related' : 'pagination-related no-desc'
+      result += `<a class="${className}" href="${url_for(path)}" title="${title}">`
+      if (cover_type === 'img') {
+        result += `<img class="cover" src="${url_for(cover)}" alt="cover">`
       } else {
         result += `<div class="cover" style="background: ${cover}"></div>`
       }
       if (dateType === 'created') {
-        result += `<div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> ${this.date(relatedPosts[i].created, hexoConfig.date_format)}</div>`
+        result += `<div class="info text-center"><div class="info-1"><div class="info-item-1"><i class="far fa-calendar-alt fa-fw"></i> ${date(created, hexoConfig.date_format)}</div>`
       } else {
-        result += `<div class="content is-center"><div class="date"><i class="fas fa-history fa-fw"></i> ${this.date(relatedPosts[i].updated, hexoConfig.date_format)}</div>`
+        result += `<div class="info text-center"><div class="info-1"><div class="info-item-1"><i class="fas fa-history fa-fw"></i> ${date(updated, hexoConfig.date_format)}</div>`
+      }
+      result += `<div class="info-item-2">${title}</div></div>`
+
+      if (postDesc) {
+        result += `<div class="info-2"><div class="info-item-1">${postDesc}</div></div>`
       }
-      result += `<div class="title">${title}</div>`
       result += '</div></a>'
     }
 

source/css/_global/function.styl

@@ -44,7 +44,7 @@ addBorderRadius(x = 6, hide = false)
 .postImgHover
   &:hover
     .cover
-      opacity: .7
+      opacity: .5
       transform: scale(1.1)
 
   .cover

source/css/_global/index.styl

@@ -179,14 +179,11 @@ if $site-name-font
   #aside-content .author-info-description
     font-family: $site-name-font
 
-.is-center
+.text-center
   text-align: center
 
-.pull-left
+.text-right
-  float: left
+  text-align: right
-
-.pull-right
-  float: right
 
 img
   &[src=''],

source/css/_layout/aside.styl

@@ -159,8 +159,8 @@
     a
       display: flex
       flex-direction: row
-      padding: 2px 8px
       margin: 2px 0
+      padding: 2px 8px
       color: var(--font-color)
       transition: all .3s
       addBorderRadius()
@@ -354,11 +354,12 @@
     .headline
       @extend .limit-one-line
       color: var(--font-color)
+      font-size: .95em
 
     .length-num
-      margin-top: -.32em
+      margin-top: -.45em
       color: var(--text-highlight-color)
-      font-size: 1.4em
+      font-size: 1.2em
 
 @keyframes more-btn-move
   0%,

source/css/_layout/head.styl

@@ -146,10 +146,11 @@
       position: fixed
       top: -60px
       z-index: 91
-      background: rgba(255, 255, 255, .8)
+      background: rgba(255, 255, 255, .7)
       box-shadow: 0 5px 6px -5px alpha($grey, .6)
       transition: transform .2s ease-in-out, opacity .2s ease-in-out
       will-change: transform
+      backdrop-filter: blur(7px)
 
       #blog-info
         color: var(--font-color)
@@ -430,6 +431,7 @@
         background-color: lighten($theme-color, 30%)
         content: ''
         transition: all .3s ease-in-out
+        addBorderRadius()
 
       &:hover
         &:after

source/css/_layout/pagination.styl

@@ -8,49 +8,28 @@
       background: $theme-paginator-color
       color: var(--white)
 
-  .pagination-info
+  .full-width
-    position: absolute
-    top: 50%
-    padding: 20px 40px
-    width: 100%
-    transform: translate(0, -50%)
-
-  .prev_info,
-  .next_info
-    @extend .limit-one-line
-    color: var(--white)
-    font-weight: 500
-
-  .next-post
-    .pagination-info
-      text-align: right
-
-  .pull-full
     width: 100% !important
 
-  .prev-post .label,
+  .pagination-related
-  .next-post .label
-    color: var(--light-grey)
-    text-transform: uppercase
-    font-size: 90%
-
-  .prev-post,
-  .next-post
-    @extend .postImgHover
-    position: relative
-    display: block
-    overflow: hidden
     width: 50%
     height: 150px
 
     +maxWidth768()
       width: 100%
 
+    .info-1
+      .info-item-2
+        -webkit-line-clamp: 1
+
+    .info-2
+      .info-item-1
+        -webkit-line-clamp: 2
+
   &.pagination-post
     overflow: hidden
     margin-top: 40px
     width: 100%
-    background: $dark-black
     addBorderRadius()
 
 .layout
@@ -75,3 +54,50 @@
 
     & > *:not(.space)
       box-shadow: none
+
+.pagination-related
+  position: relative
+  display: inline-block
+  overflow: hidden
+  background: $dark-black
+  vertical-align: bottom
+  @extend .postImgHover
+
+  &.next-post
+    .info
+      text-align: right
+
+  .info
+    .info-1,
+    .info-2
+      @extend .verticalCenter
+      padding: 20px 40px
+      color: var(--white)
+      transition: transform .3s, opacity .3s
+
+    .info-1
+      .info-item-1
+        color: var(--light-grey)
+        text-transform: uppercase
+        font-size: 90%
+
+      .info-item-2
+        @extend .limit-more-line
+        color: var(--white)
+        font-weight: 500
+
+    .info-2
+      opacity: 0
+      transform: translate(0, 0)
+
+      .info-item-1
+        @extend .limit-more-line
+
+  &:not(.no-desc):hover
+    .info-1
+      opacity: 0
+      transform: translate(0, -100%)
+
+    .info-2
+      opacity: 1
+      transform: translate(0, -50%)

source/css/_layout/post.styl

@@ -19,9 +19,9 @@ beautify()
     &:before
       position: absolute
       top: calc(50% - 7px)
+      left: 0
       color: $title-prefix-icon-color
       content: $title-prefix-icon
-      left: 0
       line-height: 1
       transition: all .2s ease-out
       @extend .fontawesomeIcon
@@ -119,16 +119,16 @@ beautify()
       width: fit-content
 
       a:not(.headerlink)
-        position relative
+        position: relative
-        z-index 10
+        z-index: 10
 
       a.headerlink
         position: absolute
         top: 0
         right: 0
-        left 0
         bottom: 0
-        width 100%
+        left: 0
+        width: 100%
         height: 100%
 
   ol,

source/css/_layout/relatedposts.styl

@@ -8,15 +8,9 @@
 
   & > .relatedPosts-list
     & > a
-      position: relative
-      display: inline-block
-      overflow: hidden
       margin: 3px
       width: calc(33.333% - 6px)
       height: 200px
-      background: $dark-black
-      vertical-align: bottom
-      @extend .postImgHover
       addBorderRadius()
 
       +maxWidth768()
@@ -27,15 +21,11 @@
       +maxWidth600()
         width: calc(100% - 4px)
 
-    .content
+    .info
-      padding: 0 20px
+      .info-1
-      @extend .verticalCenter
+        .info-item-2
+          -webkit-line-clamp: 2
 
-      .date
+      .info-2
-        color: var(--light-grey)
+        .info-item-1
-        font-size: 90%
+          -webkit-line-clamp: 3
-
-      .title
-        @extend .limit-more-line
-        color: var(--white)
-        -webkit-line-clamp: 2

source/css/_page/shuoshuo.styl

@@ -10,6 +10,7 @@
   .shuoshuo-item-header
     display: flex
     align-items: center
+    cursor: default
 
   .shuoshuo-avatar
     overflow: hidden

source/css/_search/algolia.styl

@@ -75,11 +75,11 @@
         overflow-y: overlay
         margin: 0 -20px
         padding: 0 22px
-        max-height: calc(80vh - 240px)
+        max-height: calc(80vh - 220px)
 
         +maxWidth768()
           max-height: none
-          height: calc(var(--search-height) - 265px)
+          height: calc(var(--search-height) - 235px)
 
     #algolia-info
       div

source/css/_search/index.styl

@@ -19,9 +19,6 @@
     height: 100%
     border-radius: 0
 
-  hr
-    margin: 20px auto
-
   .search-nav
     margin: 0 0 14px
     color: $search-color
@@ -40,7 +37,7 @@
         color: $search-color
   
   hr
-    margin: 20px auto
+    margin: 15px auto
     @extend .custom-hr
 
 #search-mask

source/css/_search/local-search.styl

@@ -19,30 +19,16 @@
       display: none
 
     .local-search-hit-item
-      position: relative
+      margin-left: 24px
-      padding-left: 24px
+      padding-left: 3px
-      line-height: 1.7
+      line-height: 1.8
 
-      &:hover
+      &::marker
-        &:before
+        color: $search-color
-          border-color: var(--pseudo-hover)
+        font-weight: bold
-
+        font-style: italic
-      &:before
-        $w = .5em
-        position: absolute
-        top: .45em
-        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
 
       a
-        display: block
         color: var(--search-a-color)
 
         &:hover
@@ -53,17 +39,19 @@
 
       .search-result
         margin: 0 0 8px
+        word-break: break-all
+        font-size: .9em
 
     .search-result-list
       overflow-y: overlay
       margin: 0 -20px
       padding: 0 22px
-      max-height: calc(80vh - 200px)
+      max-height: calc(80vh - 180px)
 
       +maxWidth768()
-        max-height: calc(var(--search-height) - 220px) !important
+        max-height: calc(var(--search-height) - 190px) !important
 
 .search-keyword
   background: transparent
   color: $search-keyword-highlight
-  font-weight: bold
+  font-weight: 600

source/js/main.js

@@ -206,7 +206,7 @@ document.addEventListener('DOMContentLoaded', () => {
       const altValue = item.title || item.alt
       if (!altValue) return
       const ele = document.createElement('div')
-      ele.className = 'img-alt is-center'
+      ele.className = 'img-alt text-center'
       ele.textContent = altValue
       item.insertAdjacentElement('afterend', ele)
     })

source/js/search/local-search.js

@@ -150,16 +150,16 @@ class LocalSearch {
       url.searchParams.append('highlight', keywords.join(' '))
 
       if (slicesOfTitle.length !== 0) {
-        resultItem += `<div class="local-search-hit-item"><a href="${url.href}"><span class="search-result-title">${this.highlightKeyword(title, slicesOfTitle[0])}</span>`
+        resultItem += `<li class="local-search-hit-item"><a href="${url.href}"><span class="search-result-title">${this.highlightKeyword(title, slicesOfTitle[0])}</span>`
       } else {
-        resultItem += `<div class="local-search-hit-item"><a href="${url.href}"><span class="search-result-title">${title}</span>`
+        resultItem += `<li class="local-search-hit-item"><a href="${url.href}"><span class="search-result-title">${title}</span>`
       }
 
       slicesOfContent.forEach(slice => {
         resultItem += `<p class="search-result">${this.highlightKeyword(content, slice)}...</p></a>`
       })
 
-      resultItem += '</div>'
+      resultItem += '</li>'
       resultItems.push({
         item: resultItem,
         id: resultItems.length,
@@ -281,7 +281,7 @@ window.addEventListener('load', () => {
 
       const stats = languages.hits_stats.replace(/\$\{hits}/, resultItems.length)
 
-      container.innerHTML = `<div class="search-result-list">${resultItems.map(result => result.item).join('')}</div>`
+      container.innerHTML = `<ol class="search-result-list">${resultItems.map(result => result.item).join('')}</ol>`
       statsItem.innerHTML = `<hr><div class="search-result-stats">${stats}</div>`
       window.pjax && window.pjax.refresh(container)
     }