✨ feat: 增加標籤外掛 tag-toggle

✨ feat: 增加頁面加載動畫preloader close #193 ✨ feat: 適配hexo-generator-indexed插件 ✨ feat: aside subtitle可配置，優先顯示配置內容、沒有的顯示頁面subtitle close #191 ✨ feat: aside card-tags可配置是否顯示顏色 ✨ feat: algolia-search highligh文字加深 ✨ feat: 增加頁面keywords設置 #191 ✨ feat: darkmode和readmode配色微調 🐛 fix: 修復hide-block 配置顏色顯示出錯的bug 🐛 fix: 修正zh-TW部分用語
2026-04-10 21:17:07 +08:00 · 2020-04-17 19:48:07 +08:00
parent d62ec1b866
commit b512eb761d
36 changed files with 541 additions and 255 deletions
--- a/README.md
+++ b/README.md
@@ -13,7 +13,7 @@ Based on [hexo-theme-melody](https://github.com/Molunerfinn/hexo-theme-melody) t

 ## Installation

-Stable branch:
+Stable branch [recommend]:

 ```
 git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
--- a/README_CN.md
+++ b/README_CN.md
@@ -14,7 +14,7 @@ JerryC:  https://jerryc.me/

 ## 安裝

-在你的博客根目錄裡
+在你的博客根目錄裡安裝穩定版【推薦】

 ```
 git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
--- a/_config.yml
+++ b/_config.yml
@@ -266,7 +266,6 @@ valine:
  guest_info: nick,mail,link #valine comment header info
  recordIP: false # Record reviewer IP
  serverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
-  mathjax: false
  bg: /img/comment_bg.png # valine background
  count: true # top_img顯示評論數

@@ -509,6 +508,9 @@ subtitle:
 fontawesome_v5:
  enable: false

+# 加載動畫 Loading Animation
+preloader: false
+
 ####    側邊欄    ####
 #-------------------------------------
 # 側邊欄顯示設置
@@ -516,7 +518,9 @@ aside:
  enable: true
  mobile: true # 手機頁面（ 顯示寬度 < 768px ）是否顯示aside內容
  position: right # left or right
-  card_author: true
+  card_author: 
+    enable: true
+    description:
  card_announcement:
    enable: true
    content: This is my Blog
@@ -529,6 +533,7 @@ aside:
  card_tags:
    enable: true
    limit: 40 # if set 0 will show all
+    color: false
  card_archives:
    enable: true
    type: monthly # yearly or monthly
--- a/languages/default.yml
+++ b/languages/default.yml
@@ -105,3 +105,4 @@ Snackbar:
  night_to_day: Light Mode Activated Manually

 error_title: Page not found
+loading: Loading...
--- a/languages/en.yml
+++ b/languages/en.yml
@@ -105,3 +105,4 @@ Snackbar:
  night_to_day: Light Mode Activated Manually

 error_title: Page not found
+loading: Loading...
--- a/languages/zh-CN.yml
+++ b/languages/zh-CN.yml
@@ -107,3 +107,4 @@ Snackbar:
  night_to_day: 你已切换为浅色模式

 error_title: 页面没有找到
+loading: 加载中...
--- a/languages/zh-TW.yml
+++ b/languages/zh-TW.yml
@@ -9,7 +9,7 @@ footer:
 copy:
  success: 複製成功
  error: 複製錯誤
-  noSupport: 瀏覽器不支持
+  noSupport: 瀏覽器不支援

 page:
  articles: 文章總覽
@@ -29,23 +29,23 @@ post:
  comments: 評論數
  copyright:
    author: 文章作者
-    link: 文章鏈接
+    link: 文章連結
    copyright_notice: 版權聲明
-    copyright_content: '本博客所有文章除特別聲明外，均採用
+    copyright_content: '本部落格所有文章除特別聲明外，均採用
      <a href="%s" target="_blank">%s</a> 許可協議。轉載請註明來自 <a href="%s" target="_blank">%s</a>！'
  recommend: 相關推薦

-search: 搜索
+search: 搜尋
 algolia_search:
-  input_placeholder: 搜索文章
+  input_placeholder: 搜尋文章
  hits_empty: "找不到您查詢的內容:${query}"
  hits_stats: "找到 ${hits} 條結果，用時 ${time} 毫秒"

 local_search:
-  label: 本地搜索
-  input_placeholder: 搜索文章
+  label: 本地搜尋
+  input_placeholder: 搜尋文章
  hits_empty: "找不到您查詢的內容:${query}"
-  powered: "提供支持"
+  powered: "提供支援"
  by: 由

 pagination:
@@ -67,35 +67,35 @@ aside:
  card_webinfo:
    headline: 網站資訊
    article_name: 文章數目
-    runtime_name: 已運行時間
+    runtime_name: 已執行時間
    site_wordcount: 本站總字數
    site_uv_name: 本站訪客數
    site_pv_name: 本站總訪問量
-  more_button: 查看更多
+  more_button: 檢視更多

 donate: 打賞
 share: 分享
 bookmark:
-  title: 添加書籤
+  title: 新增書籤

 rightside:
  readmode_title: 閱讀模式
-  font_plus_title: 放大字體
-  font_minus_title: 縮小字體
+  font_plus_title: 放大字型
+  font_minus_title: 縮小字型
  translate_title: 簡繁轉換
  night_mode_title: 夜間模式
  back_to_top: 回到頂部
  toc: 目錄
  scroll_to_comment: 直達評論
-  setting: 設置
+  setting: 設定

 runtime_unit: 天

 copy_copyright:
  author: 作者
-  link: 鏈接
+  link: 連結
  source: 來源
-  info: 著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。
+  info: 著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。

 Snackbar:
  bookmark:
@@ -107,5 +107,5 @@ Snackbar:
  night_to_day: 你已切換為淺色模式

 error_title: 頁面沒有找到
-
+loading: 載入中...

--- a/layout/404.pug
+++ b/layout/404.pug
@@ -6,6 +6,9 @@ html(lang=config.language data-theme=theme.display_mode)
  head
    include includes/head.pug
  body
+    if theme.preloader
+      !=partial('includes/loading/loading', {}, {cache:theme.fragment_cache})
+
    if theme.fireworks && theme.fireworks.enable
      canvas.fireworks

--- a/layout/includes/additional-js.pug
+++ b/layout/includes/additional-js.pug
@@ -69,3 +69,6 @@ if is_home()
  include ./head/subtitle.pug

 !=fragment_cache('injectBottom', function(){return injectHtml(theme.inject.bottom)})
+
+if theme.preloader
+  !=partial('includes/loading/loading-js', {}, {cache:theme.fragment_cache})
--- a/layout/includes/comments/valine.pug
+++ b/layout/includes/comments/valine.pug
@@ -17,6 +17,5 @@ script.
    pageSize: '#{theme.valine.pageSize}',
    lang: '#{theme.valine.lang}',
    recordIP: #{theme.valine.recordIP},
-    serverURLs: '#{theme.valine.serverURLs}',
-    mathjax: #{theme.valine.mathjax}
+    serverURLs: '#{theme.valine.serverURLs}'
  });
--- a/layout/includes/head.pug
+++ b/layout/includes/head.pug
@@ -12,7 +12,8 @@

 - var pageDescription = page_description()
 - var pageKeywords
- if (page.tags && page.tags.data) pageKeywords = page.tags.data.map(function(tag) {return tag.name;}).join(',')
+- if (page.keywords) pageKeywords = Array.isArray(page.keywords) ? (page.keywords).join(',') :  ([]).join(',') || page.keywords
+- else if (page.tags && page.tags.length) pageKeywords = page.tags.data.map(function(tag) {return tag.name;}).join(',')
 - else pageKeywords = Array.isArray(config.keywords) ? (config.keywords).join(','):  ([]).join(',') || config.keywords
 - var pageAuthor = config.email ? config.author + ',' + config.email : config.author
 - var pageCopyright = config.copyright || config.author
--- a/layout/includes/layout.pug
+++ b/layout/includes/layout.pug
@@ -5,6 +5,9 @@ html(lang=config.language data-theme=theme.display_mode)
  head
    include ./head.pug
  body
+    if theme.preloader
+      !=partial('includes/loading/loading', {}, {cache:theme.fragment_cache})
+
    if theme.fireworks && theme.fireworks.enable
      canvas.fireworks

--- a/layout/includes/loading/loading-js.pug
+++ b/layout/includes/loading/loading-js.pug
@@ -0,0 +1,6 @@
+script.
+  var endLoading = function () {
+    document.body.style.overflow = 'auto';
+    document.getElementById('loading-box').classList.add("loaded")
+  }
+  window.addEventListener('load',endLoading)
--- a/layout/includes/loading/loading.pug
+++ b/layout/includes/loading/loading.pug
@@ -0,0 +1,9 @@
+#loading-box
+  .loading-left-bg
+  .loading-right-bg
+  .spinner-box
+    .configure-border-1
+      .configure-core
+    .configure-border-2
+      .configure-core
+    .loading-word= _p('loading')
--- a/layout/includes/widget/card_author.pug
+++ b/layout/includes/widget/card_author.pug
@@ -3,7 +3,7 @@
    .card-info-avatar.is-center
      img.avatar-img(src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='` + url_for(theme.lodding_bg.flink) + `'` alt="avatar")
      .author-info__name= config.author
-      .author-info__description= config.description
+      .author-info__description= theme.aside.card_author.description || config.description

    .card-info-data
      if site.posts.length
--- a/layout/includes/widget/card_tags.pug
+++ b/layout/includes/widget/card_tags.pug
@@ -6,4 +6,7 @@ if site.tags.length
        span= _p('aside.card_tags')

      - let tagLimit = theme.aside.card_tags.limit === 0 ? 0 : theme.aside.card_tags.limit || 40
-      .card-tag-cloud!= tagcloud({min_font: 16, max_font: 24, amount: tagLimit , color: true, start_color: '#999', end_color: '#99a9bf'})
+      if theme.aside.card_tags.color
+        .card-tag-cloud!=cloudTags(site.tags,16,22,tagLimit)
+      else
+        .card-tag-cloud!= tagcloud({min_font: 16, max_font: 24, amount: tagLimit , color: true, start_color: '#999', end_color: '#99a9bf'})
--- a/layout/includes/widget/index.pug
+++ b/layout/includes/widget/index.pug
@@ -1,7 +1,7 @@
 if theme.aside.enable 
  if page.aside !== false
    #aside_content.aside_content
-      if theme.aside.card_author
+      if theme.aside.card_author.enable
        !=partial('includes/widget/card_author', {}, {cache:theme.fragment_cache})
      if theme.aside.card_announcement.enable
        !=partial('includes/widget/card_announcement', {}, {cache:theme.fragment_cache})
--- a/layout/page-tags.pug
+++ b/layout/page-tags.pug
@@ -1,14 +0,0 @@
-.tag-cloud
-  .tag-cloud__title= _p('page.tag')
-    |  - 
-    span.tag-cloud__amount= site.tags.length
-  .tag-cloud-tags
-    - site.tags.sort('path').each(function (tags){
-      - var fontSize = Math.floor(Math.random() * 15 + 15) + "px"; //15 ~ 30
-      - var color = "rgb(" + Math.floor(Math.random() * 201) + ", " + Math.floor(Math.random() * 201) +", " + Math.floor(Math.random() * 201) +")"; // 0,0,0 -> 200,200,200
-      a(href=url_for(tags.path) style='font-size:' + fontSize + ';color:' + color)=tags.name
-    -})
-  if page.comments !== false
-    include includes/comments/index.pug
-
-
--- a/layout/page.pug
+++ b/layout/page.pug
@@ -2,7 +2,14 @@ extends includes/layout.pug

 block content
  if page.type === 'tags'
-    include page-tags.pug
+    .tag-cloud
+      .tag-cloud__title= _p('page.tag')
+        |  - 
+        span.tag-cloud__amount= site.tags.length
+      .tag-cloud-tags
+        !=cloudTags(site.tags,15,30,0)
+      if page.comments !== false
+        include includes/comments/index.pug
  else if page.type === 'link'
    include flink.pug
  else if page.type === 'categories'    
--- a/package.json
+++ b/package.json
@@ -1,5 +1,18 @@
 {
  "name": "hexo-theme-butterfly",
  "version": "2.2.5",
-  "description": "A Hexo Theme: Butterfly"
+  "private": true,
+  "engines": {
+    "node": ">=8.10.0"
+  },
+  "description": "A Simple and Card UI Design theme for Hexo",
+  "keywords": [
+    "hexo",
+    "theme",
+    "butterfly",
+    "Card UI Design"
+  ],
+  "repository": "https://github.com/jerryc127/hexo-theme-butterfly.git",
+  "author": "Jerry <wong@jerryc.me>",
+  "license": "MIT"
 }
--- a/scripts/helpers/page.js
+++ b/scripts/helpers/page.js
@@ -3,6 +3,7 @@
 * @example
 *  page_description()
 *  injectHtml(data)
+ *  cloudTags(source, minfontsize, maxfontsize, limit)
 */

 'use strict'
@@ -11,7 +12,7 @@ const { stripHTML } = require('hexo-util')

 hexo.extend.helper.register('page_description', function () {
  const { config, page } = this
-  let description = page.description || page.excerpt || page.content || page.title || config.description
+  let description = page.description || page.content || page.title || config.description

  if (description) {
    description = stripHTML(description).substring(0, 200)
@@ -29,3 +30,15 @@ hexo.extend.helper.register('injectHtml', function (data) {
  }
  return result
 })
+
+hexo.extend.helper.register('cloudTags', function (source, minfontsize, maxfontsize, limit) {
+  const env = this
+  let result = ''
+  const tagLimit = limit === 0 ? source.length : limit
+  source.sort('name').limit(tagLimit).forEach(function (tags) {
+    var fontSize = Math.floor(Math.random() * (maxfontsize - minfontsize) + minfontsize) + 'px'
+    var color = 'rgb(' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ')' // 0,0,0 -> 200,200,200
+    result += `<a href='${env.url_for(tags.path)}' style='font-size:${fontSize}; color:${color}'>${tags.name}</a>`
+  })
+  return result
+})
--- a/scripts/tags/hide.js
+++ b/scripts/tags/hide.js
@@ -8,29 +8,64 @@
 * {% hideBlock display,bg,color %}
 * content
 * {% endhideBlock %}
+ * hideToggle
+ * {% hideToggle display,bg,color %}
+ * content
+ * {% endhideToggle %}
 */

 'use strict'

 function hideInline (args) {
  args = args.join(' ').split(',')
-  const content = args[0].trim()
-  const display = args[1] || 'Click'
-  const bg = args[2] === '' || typeof args[2] === 'undefined' ? '' : `background-color:${args[2]}`
-  const color = args[3] || '#fff'
-  return `<span class="hide-inline"><a class="hide-button button--primary button--animated" style="color:${color};${bg}">${display}
-    </a><span class="hide-content">${content}</span></span>`
+  var content = args[0]
+  var display = args[1] || 'Click'
+  var bg = args[2] || false
+  var color = args[3] || false
+  var group = 'style="'
+
+  if (bg) group += `background-color: ${bg};`
+  if (color) group += `color: ${color}`
+  group += '"'
+
+  return `<span class="hide-inline"><a class="hide-button button--primary button--animated" ${group}>${display}
+  </a><span class="hide-content">${content}</span></span>`
 }

 function hideBlock (args, content) {
  args = args.join(' ').split(',')
-  const display = args[0] || 'Click'
-  const bg = args[1] === '' || typeof args[2] === 'undefined' ? '' : `background-color:${args[2]}`
-  const color = args[2] || '#fff'
+  var display = args[0] || 'Click'
+  var bg = args[1] || false
+  var color = args[2] || false
+  var group = 'style="'

-  return `<div class="hide-block"><a class="hide-button button--primary button--animated" style="color:${color};${bg}">${display}
+  if (bg) group += `background-color: ${bg};`
+  if (color) group += `color: ${color}`
+  group += '"'
+
+  return `<div class="hide-block"><a class="hide-button button--primary button--animated" ${group}>${display}
    </a><span class="hide-content">${hexo.render.renderSync({ text: content, engine: 'markdown' }).split('\n').join('')}</span></div>`
 }

+function hideToggle (args, content) {
+  args = args.join(' ').split(',')
+  var display = args[0]
+  var bg = args[1] || false
+  var color = args[2] || false
+  var group = 'style="'
+  var border = ''
+
+  if (bg) {
+    border = `style="border: 1px solid ${bg}"`
+    group += `background-color: ${bg};`
+  }
+  if (color) group += `color: ${color}`
+  group += '"'
+
+  return `<div class="hide-toggle" ${border}><div class="hide-button toggle-title" ${group}><i class="fa fa-caret-right fa-fw"></i><span>${display}</span></div>
+    <div class="hide-content">${hexo.render.renderSync({ text: content, engine: 'markdown' }).split('\n').join('')}</div></div>`
+}
+
 hexo.extend.tag.register('hideInline', hideInline)
 hexo.extend.tag.register('hideBlock', hideBlock, { ends: true })
+hexo.extend.tag.register('hideToggle', hideToggle, { ends: true })
--- a/source/css/_global/index.styl
+++ b/source/css/_global/index.styl
@@ -209,34 +209,6 @@ img:not([src])
    width: 100%
    height: 100%

-// tag-hide
-.hide-inline,
-.hide-block
-  & > .hide-button
-    position: relative
-    z-index: 1
-    display: inline-block
-    padding: 0 1rem
-    background: $tag-hide-bg
-    text-align: center
-    cursor: pointer
-
-    &:hover
-      text-decoration: none !important
-
-  & > .hide-content
-    display: none
-
-.hide-inline
-  & > .hide-button
-    margin: 0 .3rem
-
-  & > .hide-content
-    margin: 0 .3rem
-
-.hide-block
-  margin: 0 0 .8rem
-
 .comment_headling
  margin-bottom: 10px
  font-weight: 700
--- a/source/css/_highlight/highlight.styl
+++ b/source/css/_highlight/highlight.styl
@@ -271,6 +271,3 @@ blockquote
  background: darken($highlight-background, 5)
  color: $highlight-foreground
  font-size: 14px
-
-.highlight-close
-  height: 0 !important
--- a/source/css/_layout/aside.styl
+++ b/source/css/_layout/aside.styl
@@ -91,7 +91,8 @@

  .card-tag-cloud
    a
-      word-break: keep-all
+      display: inline-block
+      padding: 0 .1rem

      &:hover
        color: $light-blue !important
--- a/source/css/_layout/loadding.styl
+++ b/source/css/_layout/loadding.styl
@@ -0,0 +1,94 @@
+if hexo-config('preloader')
+  loading-bg()
+    position: fixed
+    z-index: 1000
+    width: 50%
+    height: 100%
+    background-color: $preloader-bg
+    transition: all .5s
+
+  #loading-box
+    .loading-left-bg
+      loading-bg()
+
+    .loading-right-bg
+      loading-bg()
+      right: 0
+
+    .spinner-box
+      position: fixed
+      z-index: 1001
+      display: flex
+      justify-content: center
+      align-items: center
+      width: 100%
+      height: 100vh
+
+      .configure-border-1
+        position: absolute
+        padding: 3px
+        width: 115px
+        height: 115px
+        background: #ffab91
+        animation: configure-clockwise 3s ease-in-out 0s infinite alternate
+
+      .configure-border-2
+        left: -115px
+        padding: 3px
+        width: 115px
+        height: 115px
+        background: rgb(63, 249, 220)
+        transform: rotate(45deg)
+        animation: configure-xclockwise 3s ease-in-out 0s infinite alternate
+
+      .loading-word
+        position: absolute
+        color: $white
+        font-size: .8rem
+
+      .configure-core
+        width: 100%
+        height: 100%
+        background-color: $preloader-bg
+
+    &.loaded
+      .loading-left-bg
+        transform: translate(-100%, 0)
+
+      .loading-right-bg
+        transform: translate(100%, 0)
+
+      .spinner-box
+        display: none
+
+  @keyframes configure-clockwise
+    0%
+      transform: rotate(0)
+
+    25%
+      transform: rotate(90deg)
+
+    50%
+      transform: rotate(180deg)
+
+    75%
+      transform: rotate(270deg)
+
+    100%
+      transform: rotate(360deg)
+
+  @keyframes configure-xclockwise
+    0%
+      transform: rotate(45deg)
+
+    25%
+      transform: rotate(-45deg)
+
+    50%
+      transform: rotate(-135deg)
+
+    75%
+      transform: rotate(-225deg)
+
+    100%
+      transform: rotate(-315deg)
--- a/source/css/_layout/page.styl
+++ b/source/css/_layout/page.styl
@@ -270,7 +270,7 @@
      -webkit-box-orient: vertical

      &:hover
-        color: $light-blue
+        color: $light-blue !important
        transform: translateX(20px)

    &__img
@@ -381,7 +381,7 @@
    & > div:first-child:not(.recent-posts)
      width: 100% !important

-//ie10-ios11使用
+// ie10-ios11使用
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active)
  .recent-post-info
    .content
--- a/source/css/_mode/darkmode.styl
+++ b/source/css/_mode/darkmode.styl
@@ -39,25 +39,43 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
      .article-title
        color: alpha(#FFFFFF, .8) !important

-    #page-header
-      &.fixed
-        background: alpha(#121212, .8)
-        box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0)
+    // 頭部
+    #nav
+      &:before
+        position: absolute
+        top: 0
+        right: 0
+        bottom: 0
+        left: 0
+        background-color: alpha($dark-black, .7)
+        content: ''

-        .toggle-menu,
-        #site-name,
+      & > #page-header
        a
-          color: alpha(#FFFFFF, .8)
+          color: alpha(#FFFFFF, .8) !important

-      .menus_item_child
-        background-color: lighten(#121212, 5) !important
-
-        li
-          &:hover
-            background: lighten(#121212, 20)
+        &.fixed
+          background: alpha(#121212, .8)
+          box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0)

+          .toggle-menu,
+          #site-name,
          a
-            color: alpha(#FFFFFF, .6)
+            color: alpha(#FFFFFF, .8)
+
+        .menus_item_child
+          background-color: lighten(#121212, 5) !important
+
+          li
+            &:hover
+              background: lighten(#121212, 20) !important
+
+            a
+              color: alpha(#FFFFFF, .8)
+
+      #site_subtitle
+        & > span
+          color: alpha(#FFFFFF, .6)

    // 代碼框
    #article-container pre,
@@ -109,6 +127,9 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
      .post-copyright-info
        color: alpha(#FFFFFF, .6)

+      &:after
+        background: #121212
+
    // 音樂播放器
    .aplayer
      filter: brightness(.7)
@@ -120,11 +141,11 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
        & > i,
        & > a,
        & > div
-          background-color: lighten(#121212, 5) !important
-          color: alpha(#FFFFFF, .6) !important
+          background-color: lighten(#121212, 5)
+          color: alpha(#FFFFFF, .6)

          &:hover
-            background: lighten(#121212, 20) !important
+            background: lighten(#121212, 20)

    // 打賞按鈕
    .post-reward
@@ -164,23 +185,8 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
        color: alpha(#FFFFFF, .6) !important

    .button--animated:before
-      background: lighten(#121212, 20) !important
+      background: lighten(#121212, 20)

-    // 頭部
-    #nav
-      &:before
-        position: absolute
-        top: 0
-        right: 0
-        bottom: 0
-        left: 0
-        background-color: alpha($dark-black, .7)
-        content: ''
-
-    #nav span,
-    #nav i,
-    #page-header a,
-    #page-header .toggle-menu,
    #post-meta,
    #post-meta a,
    #footer-wrap,
@@ -217,11 +223,13 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
      color: alpha(#FFFFFF, .8) !important

    // 時間軸界面
-    .article-sort-item__title
-      color: alpha(#FFFFFF, .6)
+    .article-sort
+      &-item__title
+        color: alpha(#FFFFFF, .6)

-      &:hover
-        color: #49b1f5
+      &-item:before,
+      &-title:before
+        background: #121212

    // 手機 MENU,TOC
    #mobile-sidebar
@@ -247,6 +255,10 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
        filter: brightness(.7)
        color: #4c4948

+    // hide-tags
+    .hide-button
+      filter: brightness(.7)
+
    // 第三方
    // 插件 hexo-blog-encrypt
    #hexo-blog-encrypt
@@ -257,6 +269,9 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
      input
        background-color: #121212

+    .mermaid
+      filter: brightness(.7)
+
    if hexo-config('gitalk') && hexo-config('gitalk.enable')
      #gitalk-container
        .gt-header-textarea,
@@ -326,5 +341,12 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
            blockquote
              color: alpha(#FFFFFF, .6)

-    .mermaid
-      filter: brightness(.7)
+    if hexo-config('preloader')
+      #loading-box
+        .loading-left-bg,
+        .loading-right-bg,
+        .configure-core
+          background-color: darken(#121212, 2)
+
+        .loading-word
+          color: alpha(#FFFFFF, .6)
--- a/source/css/_mode/readmode.styl
+++ b/source/css/_mode/readmode.styl
@@ -1,7 +1,9 @@
 if hexo-config('readmode') && hexo-config('readmode.enable')
  [data-theme='light']
+    $light-redmode-bg = #fff
+
    .read-mode
-      background: #fff
+      background: $light-redmode-bg

      #nav.post-bg
        a
@@ -17,12 +19,12 @@ if hexo-config('readmode') && hexo-config('readmode.enable')

        blockquote
          border-left: .2rem solid #ddd
-          background-color: transparent
+          background-color: $light-redmode-bg

        ol,
        li
          &:before
-            background: transparent
+            background: $light-redmode-bg
            color: #4c4948

        ul
@@ -32,27 +34,40 @@ if hexo-config('readmode') && hexo-config('readmode.enable')

        hr
          border: 2px dashed #d6dbdf
-          background: transparent
+          background: $light-redmode-bg

          &:before
            color: darken(#d6dbdf, 10)

+        .hide-toggle
+          border: 1px solid darken(#d6dbdf, 10) !important
+
        .hide-button
-          background: darken(#d6dbdf, 10) !important
+          background: $light-redmode-bg !important
+          color: #4c4948 !important
+
+        .hide-inline,
+        .hide-block
+          & >.hide-button
+            border: 1px solid darken(#d6dbdf, 10)
+
+          & > .button--animated:before
+            background: $light-redmode-bg

        .note
          border: 2px solid #eee
-          background-color: transparent
+          background-color: $light-redmode-bg

-      #mobile-sidebar-menus,
-      #rightside i,
+      #rightside i:not(.fa-cog),
      #rightside a,
      #rightside #rightside_config
-        background: darken(#d6dbdf, 10) !important
+        background: darken(#d6dbdf, 20) !important

  [data-theme='dark']
+    $dark-readmode-bg = #0d0d0d
+
    .read-mode
-      background: #0d0d0d
+      background: $dark-readmode-bg

      #article-container
        code
@@ -60,12 +75,12 @@ if hexo-config('readmode') && hexo-config('readmode.enable')

        blockquote
          border-left: .2rem solid rgba(255, 255, 255, .6)
-          background-color: transparent
+          background-color: $dark-readmode-bg

        ol,
        li
          &:before
-            background: transparent
+            background: $dark-readmode-bg
            color: rgba(255, 255, 255, .6)

        ul
@@ -73,15 +88,28 @@ if hexo-config('readmode') && hexo-config('readmode.enable')
            &:before
              border: .15rem solid rgba(255, 255, 255, .6)

+        .hide-toggle
+          border: 1px solid rgba(255, 255, 255, .6) !important
+
+        .hide-button
+          background: $dark-readmode-bg !important
+          filter: none
+          color: rgba(255, 255, 255, .6) !important
+
+        .hide-inline,
+        .hide-block
+          & >.hide-button
+            border: 1px solid rgba(255, 255, 255, .6)
+
+          & > .button--animated:before
+            background: $dark-readmode-bg !important
+
        .note
          border: 2px solid rgba(255, 255, 255, .6)
          filter: none
-          background-color: transparent
+          background-color: $dark-readmode-bg
          color: rgba(255, 255, 255, .6)

-        .hide-button
-          background: #1f1f1f !important
-
  .read-mode
    #body-wrap
      padding-left: 0 !important
--- a/source/css/_search/algolia.styl
+++ b/source/css/_search/algolia.styl
@@ -45,6 +45,10 @@
      &:hover
        color: $search-color

+    em
+      color: $search-keyword-highlight
+      font-weight: bold
+
  .ais-pagination.pagination
    margin: .8rem 0 0
    padding: 0
--- a/source/css/_layout/gallery.styl
+++ b/source/css/_layout/gallery.styl
@@ -9,6 +9,9 @@ figure.gallery-group
  background: $dark-black
  -webkit-transform: translate3d(0, 0, 0)

+  @media screen and (max-width: 600px)
+    width: calc(100% - .4rem)
+
  &:hover
    img
      opacity: .4
@@ -106,7 +109,3 @@ figure.gallery-group
  .fancybox
    width: auto
    text-align: inherit
-
-@media screen and (max-width: 600px)
-  figure.gallery-group
-    width: calc(100% - .4rem)
--- a/source/css/_tags/hide.styl
+++ b/source/css/_tags/hide.styl
@@ -0,0 +1,53 @@
+// tag-hide
+.hide-inline,
+.hide-block
+  & > a.hide-button
+    position: relative
+    z-index: 1
+    display: inline-block
+    padding: 0 1rem
+    background: $tag-hide-bg
+    color: $white !important
+    text-align: center
+    cursor: pointer
+
+    &:hover
+      text-decoration: none !important
+
+    &.open
+      display: none
+
+  & > .hide-content
+    display: none
+
+.hide-inline
+  & > .hide-button
+    margin: 0 .3rem
+
+  & > .hide-content
+    margin: 0 .3rem
+
+.hide-block
+  margin: 0 0 .8rem
+
+.hide-toggle
+  margin-bottom: 1rem
+  border: 1px solid $tag-hide-toggle-bg
+
+  & > .hide-button
+    padding: .3rem .5rem
+    background: $tag-hide-toggle-bg
+    color: $font-color
+    cursor: pointer
+
+    & > i
+      font-size: 1.2em
+      transition: all .3s
+
+    &.open
+      i
+        transform: rotate(90deg)
+
+  & > .hide-content
+    display: none
+    margin: 1.5rem 1.2rem
--- a/source/css/_layout/note.styl
+++ b/source/css/_layout/note.styl
--- a/source/css/index.styl
+++ b/source/css/index.styl
@@ -5,6 +5,7 @@
@import '_global'
@import '_highlight/highlight'
@import '_layout/*'
+@import '_tags/*'
@import '_mode/*'

 // search
--- a/source/css/var.styl
+++ b/source/css/var.styl
@@ -84,8 +84,9 @@ $search-keyword-highlight = #F47466
 $gallery-color = #fff
 // tag-hide
 $tag-hide-bg = $theme-color
-
-
+$tag-hide-toggle-bg = #f0f0f0
+//preloader
+$preloader-bg = #37474f

 // Note colors
 // --------------------------------------------------
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -247,121 +247,128 @@ $(function () {

  /**
   * 代碼
+   * 只適用於Hexo默認的代碼渲染
   */
-  const isHighlightCopy = GLOBAL_CONFIG.highlightCopy
-  const isHighlightLang = GLOBAL_CONFIG.highlightLang
-  const isHighlightShrink = GLOBAL_CONFIG.highlightShrink
  const $figureHighlight = $('figure.highlight')
-  if (isHighlightCopy || isHighlightLang || isHighlightShrink !== 'none') {
-    $figureHighlight.wrap('<div class="code-area-wrap"></div>').before('<div class="highlight-tools"></div>')
-  }

-  /**
+  if ($figureHighlight.length) {
+    const isHighlightCopy = GLOBAL_CONFIG.highlightCopy
+    const isHighlightLang = GLOBAL_CONFIG.highlightLang
+    const isHighlightShrink = GLOBAL_CONFIG.highlightShrink
+
+    if (isHighlightCopy || isHighlightLang || isHighlightShrink !== 'none') {
+      $figureHighlight.wrap('<div class="code-area-wrap"></div>').before('<div class="highlight-tools"></div>')
+    }
+
+    /**
   * 代碼收縮
   */
-  const $highlightTools = $('.highlight-tools')
-  if (isHighlightShrink === 'true') {
-    $highlightTools.append('<i class="fa fa-angle-down code-expand code-closed" aria-hidden="true"></i>')
-  } else if (isHighlightShrink === 'false') {
-    $highlightTools.append('<i class="fa fa-angle-down code-expand" aria-hidden="true"></i>')
-  }
-
-  $(document).on('click', '.highlight-tools >.code-expand', function () {
-    var $table = $(this).parent().next()
-    if ($(this).hasClass('code-closed')) {
-      $table.css('display', 'block')
-      $(this).removeClass('code-closed')
-    } else {
-      $table.css('display', 'none')
-      $(this).addClass('code-closed')
+    const $highlightTools = $('.highlight-tools')
+    if (isHighlightShrink === 'true') {
+      $highlightTools.append('<i class="fa fa-angle-down code-expand code-closed" aria-hidden="true"></i>')
+    } else if (isHighlightShrink === 'false') {
+      $highlightTools.append('<i class="fa fa-angle-down code-expand" aria-hidden="true"></i>')
    }
-  })

-  /**
+    $(document).on('click', '.highlight-tools >.code-expand', function () {
+      var $table = $(this).parent().next()
+      if ($(this).hasClass('code-closed')) {
+        $table.css('display', 'block')
+        $(this).removeClass('code-closed')
+      } else {
+        $table.css('display', 'none')
+        $(this).addClass('code-closed')
+      }
+    })
+
+    /**
    * 代碼語言
  */
-  if (isHighlightLang) {
-    var langNameIndex, langName
-    $figureHighlight.each(function () {
-      langNameIndex = langName = $(this).attr('class').split(' ')[1]
-      if (langNameIndex === 'plain') langName = 'Code'
-      $(this).prev().append('<div class="code-lang">' + langName + '</div>')
-    })
-  }
-  /**
+    if (isHighlightLang) {
+      var langNameIndex, langName
+      $figureHighlight.each(function () {
+        langNameIndex = langName = $(this).attr('class').split(' ')[1]
+        if (langNameIndex === 'plain') langName = 'Code'
+        $(this).prev().append('<div class="code-lang">' + langName + '</div>')
+      })
+    }
+    /**
   * 代碼copy
   * copy function
   */
-  if (isHighlightCopy) {
-    $highlightTools.append('<div class="copy-notice"></div><i class="fa fa-clipboard" aria-hidden="true"></i>')
-    var copy = function (text, ctx) {
-      if (document.queryCommandSupported && document.queryCommandSupported('copy')) {
-        try {
-          document.execCommand('copy') // Security exception may be thrown by some browsers.
-          if (isSnackbar) {
-            snackbarShow(GLOBAL_CONFIG.copy.success)
-          } else {
-            $(ctx).prev('.copy-notice')
-              .text(GLOBAL_CONFIG.copy.success)
-              .animate({
-                opacity: 1,
-                right: 30
-              }, 450, function () {
-                setTimeout(function () {
-                  $(ctx).prev('.copy-notice').animate({
-                    opacity: 0,
-                    right: 0
-                  }, 650)
-                }, 400)
-              })
+    if (isHighlightCopy) {
+      $highlightTools.append('<div class="copy-notice"></div><i class="fa fa-clipboard" aria-hidden="true"></i>')
+      var copy = function (text, ctx) {
+        if (document.queryCommandSupported && document.queryCommandSupported('copy')) {
+          try {
+            document.execCommand('copy') // Security exception may be thrown by some browsers.
+            if (isSnackbar) {
+              snackbarShow(GLOBAL_CONFIG.copy.success)
+            } else {
+              $(ctx).prev('.copy-notice')
+                .text(GLOBAL_CONFIG.copy.success)
+                .animate({
+                  opacity: 1,
+                  right: 30
+                }, 450, function () {
+                  setTimeout(function () {
+                    $(ctx).prev('.copy-notice').animate({
+                      opacity: 0,
+                      right: 0
+                    }, 650)
+                  }, 400)
+                })
+            }
+          } catch (ex) {
+            if (isSnackbar) {
+              snackbarShow(GLOBAL_CONFIG.copy.success)
+            } else {
+              $(ctx).prev('.copy-notice')
+                .text(GLOBAL_CONFIG.copy.error)
+                .animate({
+                  opacity: 1,
+                  right: 30
+                }, 650, function () {
+                  setTimeout(function () {
+                    $(ctx).prev('.copy-notice').animate({
+                      opacity: 0,
+                      right: 0
+                    }, 650)
+                  }, 400)
+                })
+              return false
+            }
          }
-        } catch (ex) {
-          if (isSnackbar) {
-            snackbarShow(GLOBAL_CONFIG.copy.success)
-          } else {
-            $(ctx).prev('.copy-notice')
-              .text(GLOBAL_CONFIG.copy.error)
-              .animate({
-                opacity: 1,
-                right: 30
-              }, 650, function () {
-                setTimeout(function () {
-                  $(ctx).prev('.copy-notice').animate({
-                    opacity: 0,
-                    right: 0
-                  }, 650)
-                }, 400)
-              })
-            return false
-          }
-        }
-      } else {
-        if (isSnackbar) {
-          snackbarShow(GLOBAL_CONFIG.copy.noSupport)
        } else {
-          $(ctx).prev('.copy-notice').text(GLOBAL_CONFIG.copy.noSupport)
+          if (isSnackbar) {
+            snackbarShow(GLOBAL_CONFIG.copy.noSupport)
+          } else {
+            $(ctx).prev('.copy-notice').text(GLOBAL_CONFIG.copy.noSupport)
+          }
        }
      }
-    }

-    // click events
-    $(document).on('click', '.highlight-tools>.fa-clipboard', function () {
-      var selection = window.getSelection()
-      var range = document.createRange()
-      range.selectNodeContents($(this).parent().next().find('.code pre')[0])
-      selection.removeAllRanges()
-      selection.addRange(range)
-      var text = selection.toString()
-      copy(text, this)
-      selection.removeAllRanges()
-    })
+      // click events
+      $(document).on('click', '.highlight-tools>.fa-clipboard', function () {
+        var selection = window.getSelection()
+        var range = document.createRange()
+        range.selectNodeContents($(this).parent().next().find('.code pre')[0])
+        selection.removeAllRanges()
+        selection.addRange(range)
+        var text = selection.toString()
+        copy(text, this)
+        selection.removeAllRanges()
+      })
+    }
  }

  /**
   * justified-gallery 圖庫排版
   */
  var $justifiedGallery = $('.justified-gallery')
+  var isJustifiedGallery = false
  if ($justifiedGallery.length) {
+    isJustifiedGallery = true
    var $imgList = $justifiedGallery.find('img')
    $imgList.unwrap()
    if ($imgList.length) {
@@ -372,11 +379,19 @@ $(function () {
    }
    $('head').append('<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css">')
    loadScript('https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js', function () {
-      $justifiedGallery.not($('.hide-content .justified-gallery')).justifiedGallery({
-        rowHeight: 220,
-        margins: 4
-      })
+      initJustifiedGallery($justifiedGallery)
    })
+
+    var initJustifiedGallery = function (selector) {
+      selector.each(function (i, o) {
+        if ($(this).is(':visible')) {
+          $(this).justifiedGallery({
+            rowHeight: 220,
+            margins: 4
+          })
+        }
+      })
+    }
  }

  /**
@@ -708,6 +723,9 @@ $(function () {
    interval = setInterval(showDateTime, 10000)
  }

+  /**
+   * 百度推送
+   */
  if (GLOBAL_CONFIG.baiduPush) {
    (function () {
      var bp = document.createElement('script')
@@ -726,17 +744,24 @@ $(function () {
   * tag-hide
   */
  var $hideInline = $('.hide-button')
-  $hideInline.on('click', function (e) {
-    e.preventDefault()
-    $(this).hide()
-    var $hideContent = $(this).next('.hide-content')
-    $hideContent.show()
-    $hideContent.find('.justified-gallery').justifiedGallery({
-      rowHeight: 220,
-      margins: 4
+  if ($hideInline.length) {
+    $hideInline.on('click', function (e) {
+      e.preventDefault()
+      var $this = $(this)
+      var $hideContent = $(this).next('.hide-content')
+      $this.toggleClass('open')
+      $hideContent.toggle()
+      if ($this.hasClass('open')) {
+        if (isJustifiedGallery && $hideContent.find('.justified-gallery').length > 0) {
+          initJustifiedGallery($hideContent.find('.justified-gallery'))
+        }
+      }
    })
-  })
+  }

+  /**
+   * PhotoFigcaption
+   */
  function addPhotoFigcaption () {
    var images = $('#article-container img')
    images.each(function (i, o) {