✨ 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部分用語

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

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

_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

languages/default.yml

@@ -105,3 +105,4 @@ Snackbar:
   night_to_day: Light Mode Activated Manually
 
 error_title: Page not found
+loading: Loading...

languages/en.yml

@@ -105,3 +105,4 @@ Snackbar:
   night_to_day: Light Mode Activated Manually
 
 error_title: Page not found
+loading: Loading...

languages/zh-CN.yml

@@ -107,3 +107,4 @@ Snackbar:
   night_to_day: 你已切换为浅色模式
 
 error_title: 页面没有找到
+loading: 加载中...

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: 本地搜索
+  label: 本地搜尋
-  input_placeholder: 搜索文章
+  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_plus_title: 放大字型
-  font_minus_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: 載入中...
 

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
 

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})

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}',
+    serverURLs: '#{theme.valine.serverURLs}'
-    mathjax: #{theme.valine.mathjax}
   });

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

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
 

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)

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')

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

layout/includes/widget/card_tags.pug

@@ -4,6 +4,9 @@ if site.tags.length
       .item-headline
         i.fa.fa-tags(aria-hidden="true")
         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'})

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})

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
-
-

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'    

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"
 }

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
+})

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

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

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

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

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)

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

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
+    #nav
-        background: alpha(#121212, .8)
+      &:before
-        box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0)
+        position: absolute
+        top: 0
+        right: 0
+        bottom: 0
+        left: 0
+        background-color: alpha($dark-black, .7)
+        content: ''
 
-        .toggle-menu,
+      & > #page-header
-        #site-name,
         a
-          color: alpha(#FFFFFF, .8)
+          color: alpha(#FFFFFF, .8) !important
 
-      .menus_item_child
+        &.fixed
-        background-color: lighten(#121212, 5) !important
+          background: alpha(#121212, .8)
-
+          box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0)
-        li
-          &:hover
-            background: lighten(#121212, 20)
 
+          .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
+          background-color: lighten(#121212, 5)
-          color: alpha(#FFFFFF, .6) !important
+          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
+    .article-sort
-      color: alpha(#FFFFFF, .6)
+      &-item__title
+        color: alpha(#FFFFFF, .6)
 
-      &:hover
+      &-item:before,
-        color: #49b1f5
+      &-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
+    if hexo-config('preloader')
-      filter: brightness(.7)
+      #loading-box
+        .loading-left-bg,
+        .loading-right-bg,
+        .configure-core
+          background-color: darken(#121212, 2)
+
+        .loading-word
+          color: alpha(#FFFFFF, .6)

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:not(.fa-cog),
-      #rightside i,
       #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

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

source/css/_tags/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
@@ -105,8 +108,4 @@ figure.gallery-group
 
   .fancybox
     width: auto
-    text-align: inherit
+    text-align: inherit
-
-@media screen and (max-width: 600px)
-  figure.gallery-group
-    width: calc(100% - .4rem)

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

source/css/index.styl

@@ -5,6 +5,7 @@
 @import '_global'
 @import '_highlight/highlight'
 @import '_layout/*'
+@import '_tags/*'
 @import '_mode/*'
 
 // search

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
 // --------------------------------------------------

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')
+    const $highlightTools = $('.highlight-tools')
-  if (isHighlightShrink === 'true') {
+    if (isHighlightShrink === 'true') {
-    $highlightTools.append('<i class="fa fa-angle-down code-expand code-closed" aria-hidden="true"></i>')
+      $highlightTools.append('<i class="fa fa-angle-down code-expand code-closed" aria-hidden="true"></i>')
-  } else if (isHighlightShrink === 'false') {
+    } else if (isHighlightShrink === 'false') {
-    $highlightTools.append('<i class="fa fa-angle-down code-expand" aria-hidden="true"></i>')
+      $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')
     }
-  })
 
-  /**
+    $(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) {
+    if (isHighlightLang) {
-    var langNameIndex, langName
+      var langNameIndex, langName
-    $figureHighlight.each(function () {
+      $figureHighlight.each(function () {
-      langNameIndex = langName = $(this).attr('class').split(' ')[1]
+        langNameIndex = langName = $(this).attr('class').split(' ')[1]
-      if (langNameIndex === 'plain') langName = 'Code'
+        if (langNameIndex === 'plain') langName = 'Code'
-      $(this).prev().append('<div class="code-lang">' + langName + '</div>')
+        $(this).prev().append('<div class="code-lang">' + langName + '</div>')
-    })
+      })
-  }
+    }
-  /**
+    /**
    * 代碼copy
    * copy function
    */
-  if (isHighlightCopy) {
+    if (isHighlightCopy) {
-    $highlightTools.append('<div class="copy-notice"></div><i class="fa fa-clipboard" aria-hidden="true"></i>')
+      $highlightTools.append('<div class="copy-notice"></div><i class="fa fa-clipboard" aria-hidden="true"></i>')
-    var copy = function (text, ctx) {
+      var copy = function (text, ctx) {
-      if (document.queryCommandSupported && document.queryCommandSupported('copy')) {
+        if (document.queryCommandSupported && document.queryCommandSupported('copy')) {
-        try {
+          try {
-          document.execCommand('copy') // Security exception may be thrown by some browsers.
+            document.execCommand('copy') // Security exception may be thrown by some browsers.
-          if (isSnackbar) {
+            if (isSnackbar) {
-            snackbarShow(GLOBAL_CONFIG.copy.success)
+              snackbarShow(GLOBAL_CONFIG.copy.success)
-          } else {
+            } else {
-            $(ctx).prev('.copy-notice')
+              $(ctx).prev('.copy-notice')
-              .text(GLOBAL_CONFIG.copy.success)
+                .text(GLOBAL_CONFIG.copy.success)
-              .animate({
+                .animate({
-                opacity: 1,
+                  opacity: 1,
-                right: 30
+                  right: 30
-              }, 450, function () {
+                }, 450, function () {
-                setTimeout(function () {
+                  setTimeout(function () {
-                  $(ctx).prev('.copy-notice').animate({
+                    $(ctx).prev('.copy-notice').animate({
-                    opacity: 0,
+                      opacity: 0,
-                    right: 0
+                      right: 0
-                  }, 650)
+                    }, 650)
-                }, 400)
+                  }, 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
+      // click events
-    $(document).on('click', '.highlight-tools>.fa-clipboard', function () {
+      $(document).on('click', '.highlight-tools>.fa-clipboard', function () {
-      var selection = window.getSelection()
+        var selection = window.getSelection()
-      var range = document.createRange()
+        var range = document.createRange()
-      range.selectNodeContents($(this).parent().next().find('.code pre')[0])
+        range.selectNodeContents($(this).parent().next().find('.code pre')[0])
-      selection.removeAllRanges()
+        selection.removeAllRanges()
-      selection.addRange(range)
+        selection.addRange(range)
-      var text = selection.toString()
+        var text = selection.toString()
-      copy(text, this)
+        copy(text, this)
-      selection.removeAllRanges()
+        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({
+      initJustifiedGallery($justifiedGallery)
-        rowHeight: 220,
-        margins: 4
-      })
     })
+
+    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) {
+  if ($hideInline.length) {
-    e.preventDefault()
+    $hideInline.on('click', function (e) {
-    $(this).hide()
+      e.preventDefault()
-    var $hideContent = $(this).next('.hide-content')
+      var $this = $(this)
-    $hideContent.show()
+      var $hideContent = $(this).next('.hide-content')
-    $hideContent.find('.justified-gallery').justifiedGallery({
+      $this.toggleClass('open')
-      rowHeight: 220,
+      $hideContent.toggle()
-      margins: 4
+      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) {