v2.1.0

1. 可設置隱藏文章
2. 適配 Hexo 的 Tag Plugins Code Block With marked lines 顯示
3. 可配置首頁cover顯示的位置
4. 更改深色模式下的配色
5. activate_power_mode 增加關閉顏色和抖動
6. 增加谷歌廣告，騰訊分析
7. 相關文章增加時間顯示，調整佈局，垂直居中
8. 文章頁面，top_img增加評論數顯示
9. 可以取消點擊圖片觀看大圖
10. mathjax和kathex可設置每頁都加載還是按需加載
11. 深色模式下，滾動條顔色的適配
12. 優化gitalk 在 dark mode下的顯示
13. 文章頁，文章標題過長時，只顯示三行內容
14. 深色模式下，背景圖片加上蒙板
15. 優化深色/閲讀模式下，canvas的顯示
16. 優化打賞的特效和移動到二維碼不會立刻消失
17. 優化sub-menu樣式
18. 修改aside 的tags顔色，在深色模式下不會出現觀看困難
19. 升級 normalize.css 到最新版
20. 優化手機上toc和menu的打開動畫
21. 優化代碼框打開關閉的特效
22. 精簡js,部分操作改為css控制
23. 優化主題的一些動畫，不會過於生硬

1. 修復當圖片被a標簽包圍時，點擊圖標沒有跳轉到對應網頁而是出現大圖觀看模式的bug
2. 修復當網址有subdirectory時，menu、打賞二維碼和lodding_bg 鏈接路徑錯誤的bug
3. 修復當網址有subdirectory時,
4. 修復katex 的 CSS無法讀取bug
5. 修復搜索按鈕在文章頁不顯示的bug
6. 修復gitalk css引用失敗的bug
7. 修復 點擊特效 煙花 無效的bug
8. 修復gitalk報path.startsWith is not a function的bug
9. 修復 閲讀模式下，背景沒有變純色的bug
10. 修復閲讀模式下，header 偶爾出現沒有靠攏頂部的bug
11. 修復Hexo Tag Plugins Block Quote 裏的鏈接顯示出外面的Bug
12. 修復aside歸檔日期過長導致錯位的bug
13. 修復toc為空時，toc按鈕仍存在的bug
14. 修復關閉懶加載後，頭像無法顯示的bug
15. 修復深色模式下，切換readmode偶爾會無效的bug
16. 修復在一些手機設備上，toc和menu的按鈕顯示不對齊的bug #72

README.md

@@ -1,6 +1,6 @@
 # hexo-theme-butterfly
 
-<a href="https://github.com/jerryc127/hexo-theme-butterfly/releases"><img alt="Version" src="https://img.shields.io/badge/release-2.0.0-blue"/></a>
+<a href="https://github.com/jerryc127/hexo-theme-butterfly/releases"><img alt="Version" src="https://img.shields.io/badge/release-2.1.0-blue"/></a>
 <a href="https://jerryc.me"><img alt="Author" src="https://img.shields.io/badge/author-JerryC-blur"/></a>
 <a href="https://hexo.io"><img alt="Hexo" src="https://img.shields.io/badge/hexo-3.0+-0e83c"/></a>
 <a href="https://nodejs.org/"><img alt="node.js" src="https://img.shields.io/badge/node.js-6.0-blur"/></a>

README_CN.md

@@ -1,6 +1,6 @@
 # hexo-theme-butterfly
 
-<a href="https://github.com/jerryc127/hexo-theme-butterfly/releases"><img alt="Version" src="https://img.shields.io/badge/release-2.0.0-blue"/></a>
+<a href="https://github.com/jerryc127/hexo-theme-butterfly/releases"><img alt="Version" src="https://img.shields.io/badge/release-2.1.0-blue"/></a>
 <a href="https://jerryc.me"><img alt="Author" src="https://img.shields.io/badge/author-JerryC-blur"/></a>
 <a href="https://hexo.io"><img alt="Hexo" src="https://img.shields.io/badge/hexo-3.0+-0e83c"/></a>
 <a href="https://nodejs.org/"><img alt="node.js" src="https://img.shields.io/badge/node.js-6.0-blur"/></a>

_config.yml

@@ -33,10 +33,10 @@ favicon: /img/favicon.ico
 
 # Highlight theme
 # ---------------
-highlight_theme: light # default, light, darker, pale night, ocean
+highlight_theme: light # default / darker / pale night / light / ocean
-highlight_copy: false #代碼複製按鈕
+highlight_copy: true #代碼複製按鈕
 highlight_lang: true #代碼語言顯示
-highlight_shrink: false #代碼框不展開，需點擊 '>' 打開
+highlight_shrink: false # true 全部代碼框不展開，需點擊 '>' 打開 / false 代碼框展開，有'>'點擊按鈕 | none 代碼框展開，不顯示 '>' 按鈕
 
 code_word_wrap: false
 
@@ -83,56 +83,49 @@ local_search:
 # ---------------
 mathjax:
   enable: false
+  # true 表示每一頁都加載mathjax.js
+  # false 需要時加載，須在使用的Markdown Front-matter 加上 mathjax: true
+  per_page: false
 
 # KaTeX
 # ---------------
 katex:
   enable: false
+  # true 表示每一頁都加載katex.js
+  # false 需要時加載，須在使用的Markdown Front-matter 加上 katex: true
+  per_page: false
   hide_scrollbar: true
 
-####   Analysis    ####
-# ---------------
-# baidu_analytics:
-
-#Google Analytics
-google_analytics:
-
-
 # Post info settings
 # ---------------
-# avatar: /img/avatar.png
+avatar: /img/avatar.png
-avatar: https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/Photo/avatar.png
 
 # the banner image of index
-top_img: https://i.loli.net/2019/05/22/5ce53eb6dc82757840.jpg
+index_img: https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@2.1.0/top_img/index.jpg
-# 以下鏈接是動態壁紙，每次刷新會更換
-# https://source.unsplash.com/collection/collectionid/1600x900
-# https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture
-# https://api.dujin.org/bing/1920.php
-# https://api.dujin.org/bing/1366.php
 
 # if the banner of page not setting,it will show the top_img
-default_top_img: https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/top_img_index.jpg
+default_top_img: https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@2.1.0/top_img/index.jpg
 
 # the default cover of the post
-default_cover: https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg.png
+default_cover: https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@2.1.0/top_img/default.png
 
 # the banner image of archive page
-archive_img: https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/Photo/archive.jpg
+archive_img: https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@2.1.0/top_img/archive.jpg
 
 # the banner image of tag page
-tag_img: https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/tag-bg.png
+tag_img: https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@2.1.0/top_img/tag.png
 
 # the banner image of category page
-category_img: https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/category-bg
+category_img: https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@2.1.0/top_img/category.jpg
 
 # 如果你有使用hexo-douban去生成movie界面，可配置這個
-movies_img: https://cdn.jsdelivr.net/gh/jerryc127/CDN/Photo/movie.jpg
+movies_img: https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@2.1.0/top_img/movie.jpg
 
 # if the photo link cannot connect,it will show that
 lodding_bg:
-  flink: /img/friend_404.gif
+  flink: /img/friend_404.gif #404后圖片
-  post_page: /img/404.jpg
+  post_page: /img/404.jpg #404后圖片
+#  post: /img/loading.gif ##加載動畫
 
 post_meta:
   date_type: both # or created or updated 文章日期是创建日或者更新日或都显示
@@ -188,22 +181,21 @@ addtoany:
 disqus:
   enable: false
   shortname:
+  count: false # top_img顯示評論數
 
-# laibili:
+laibili:
-# enable: false
+  enable: false
-# uid:
+  uid:
 
-# gitalk:
+gitalk:
-#   enable: false
+  enable: false
-#   client_id:
+  client_id:
-#   client_secret:
+  client_secret:
-#   repo:
+  repo:
-#   owner:
+  owner:
-#   admin:
+  admin:
-#   language:   # en , zh-CN , zh-TW
+  language: # en , zh-CN , zh-TW
-####   Using this js for redirect to gitalk container after login
+  count: false # top_img顯示評論數
-####   See https://github.com/gitalk/gitalk/issues/125
-#   js: https://cdn.jsdelivr.net/gh/upupming/gitalk@36368e5dffd049e956cdbbd751ff96c28d8255cf/dist/gitalk.min.js
 
 # valine comment system. https://valine.js.org
 valine:
@@ -218,10 +210,11 @@ valine:
   placeholder: Please leave your footprints # valine comment input placeholder(like: Please leave your footprints )
   guest_info: nick,mail,link #valine comment header info
   bg: /img/comment_bg.png # valine background
+  count: false # top_img顯示評論數
 
 #####     Footer Settings    ####
 # ------------------------------------
-since: 2018
+since: 2019
 
 footer_custom_text:
 
@@ -234,6 +227,25 @@ ICP:
   text:
   icon: /img/icp.png
 
+####   Analysis    ####
+# ---------------
+baidu_analytics:
+
+# Google Analytics
+google_analytics:
+
+# Tencent_analytics ID
+tencent_analytics:
+
+# Ads
+# ---------------
+# Google Adsense
+google_adsense:
+  enable: false
+  js: https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
+  client:
+  enable_page_level_ads: true
+
 ####    站長驗證    ####
 # Google Webmaster tools verification setting
 # See: https://www.google.com/webmasters/
@@ -276,6 +288,7 @@ reward:
 related_post:
   enable: true
   limit: 6 # 顯示推薦文章數目
+  date_type: created # or created or updated 文章日期顯示创建日或者更新日
 
 ####    美化/效果    ####
 #--------------------------------
@@ -298,9 +311,13 @@ related_post:
 # 主頁設置
 # 默認top_img全屏，site_info在中間
 # 使用默認, 都無需填寫（建議默認）
-index_site_info_top: #主頁標題距離頂部距離  例如 300px/300em/300rem/10%
 index_top_img_height: #主頁top_img高度 例如 300px/300em/300rem  不能使用百分比
 
+# 主頁文章COVER顯示位置
+# 三個值可配置 left , right , both
+# left(全部圖片顯示在左邊)，right(全部圖片顯示在右邊)，both(左右左右順序顯示)
+index_post_cover: both
+
 # category和tag頁的UI設置
 # index 值代表 UI將與首頁的UI一樣
 # 默認跟archives頁面UI一樣
@@ -338,7 +355,7 @@ canvas_ribbon_piao:
 # https://github.com/hustcc/canvas-nest.js
 canvas_nest:
   enable: false
-  color: '0,0,255' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
+  color: "0,0,255" #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
   opacity: 0.7 # the opacity of line (0~1), default: 0.5.
   zIndex: -1 # z-index property of the background, default: -1.
   count: 99 # the number of lines, default: 99.
@@ -347,6 +364,8 @@ canvas_nest:
 # 打字效果
 activate_power_mode:
   enable: false
+  colorful: true # 冒光特效
+  shake: true # 抖動特效
 
 # 鼠標點擊效果
 # 避免卡頓，建議只開啓一個
@@ -425,7 +444,6 @@ subtitle:
     - 今日事,今日畢
     - Never put off till tomorrow what you can do today
 
-
 ####    側邊欄    ####
 #-------------------------------------
 # 手機頁面（ 顯示寬度 < 768px ）是否顯示aside内容
@@ -496,11 +514,17 @@ autoChangeMode: false
 #------------------------------------------------
 
 # 圖片大圖查看模式
-# 默認為 fancybox http://fancyapps.com/fancybox/3/
+# 可選 medium_zoom 或者 fancybox
-# 可以選擇改爲 medium_zoom https://github.com/francoischalifour/medium-zoom
+# 只選一個 或者 兩個都不選
+#--------------------------------------------
+# medium_zoom https://github.com/francoischalifour/medium-zoom
 medium_zoom:
   enable: false
 
+# fancybox http://fancyapps.com/fancybox/3/
+fancybox:
+  enable: true
+
 # Snackbar 彈窗
 # https://github.com/polonel/SnackBar
 # position 彈窗位置
@@ -508,8 +532,8 @@ medium_zoom:
 snackbar:
   enable: false
   position: bottom-left
-  bg_light: '#49b1f5' #light mode時彈窗背景
+  bg_light: "#49b1f5" #light mode時彈窗背景
-  bg_dark: '#2d3035' #dark mode時彈窗背景
+  bg_dark: "#2d3035" #dark mode時彈窗背景
 
 #百度推送
 baidu_push:
@@ -554,7 +578,6 @@ twitter_meta: true
 # https://i.loli.net/2019/09/08/2wbFJEKloisRvhj.png
 Open_Graph_meta: true
 
-
 # CDN
 # 網站必須
 # 可根據需要自行添加js/css
@@ -562,14 +585,13 @@ CDN_USE:
   css:
     - /css/index.css
     - https://cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css
-    # - https://use.fontawesome.com/releases/v5.8.1/css/all.css #fontawesomeV5_css
+    # - https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css #fontawesomeV5_css
 
   js:
     - https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js #/js/third-party/jquery.min.js
     - /js/utils.js
     - /js/main.js
 
-
 # CDN
 # 非必要不要修改
 CDN:
@@ -581,14 +603,12 @@ CDN:
 
   # share
   addtoany: https://static.addtoany.com/menu/page.js
-  sharejs: https://cdn.jsdelivr.net/npm/social-share.js@1.0.16/dist/js/social-share.min.js
+  sharejs: https://cdn.jsdelivr.net/npm/social-share.js/dist/js/social-share.min.js
-  sharejs_css: https://cdn.jsdelivr.net/npm/social-share.js@1.0.16/dist/css/share.min.css
+  sharejs_css: https://cdn.jsdelivr.net/npm/social-share.js/dist/css/share.min.css
 
   #search
-  algolia_search: https://cdn.jsdelivr.net/npm/instantsearch.js@2.1.1/dist/instantsearch.min.js
+  algolia_search: https://cdn.jsdelivr.net/npm/instantsearch.js@2.10.5/dist/instantsearch.min.js
-  algolia_search_css: https://cdn.jsdelivr.net/npm/instantsearch.js@2.1.1/dist/instantsearch.min.css
+  algolia_search_css: https://cdn.jsdelivr.net/npm/instantsearch.js@2.10.5/dist/instantsearch.min.css
-  algolia_js: /js/search/algolia.js
-  local_search: /js/search/local-search.js
 
   mathjax: https://cdn.jsdelivr.net/npm/mathjax/MathJax.js?config=TeX-AMS-MML_HTMLorMML
   katex: https://cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css
@@ -599,9 +619,9 @@ CDN:
   busuanzi: //busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js
 
   # 背景特效
-  canvas_ribbon: /js/third-party/canvas-ribbon.js # https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@latest/js/canvas-ribbon.js
+  canvas_ribbon: https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@2.1.0/js/canvas-ribbon.js
-  canvas_ribbon_piao: /js/third-party/piao.js # https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@latest/js/piao.js
+  canvas_ribbon_piao: https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@2.1.0/js/piao.js
-  canvas_nest: /js/third-party/canvas-nest.js  # https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@latest/js/canvas-nest.js 
+  canvas_nest: https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@2.1.0/js/canvas-nest.js
 
   lazyload: https://cdn.jsdelivr.net/npm/lazysizes@latest/lazysizes.min.js
   instantpage: https://cdn.jsdelivr.net/npm/instant.page@latest/instantpage.min.js
@@ -610,19 +630,17 @@ CDN:
   js_cookies: https://cdn.jsdelivr.net/npm/js-cookie/dist/js.cookie.min.js
 
   fancybox_css: https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css
-  fancybox: https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js  #/js/third-party/jquery.fancybox.min.js
+  fancybox: https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js
   medium_zoom: https://cdn.jsdelivr.net/npm/medium-zoom/dist/medium-zoom.min.js
 
-  snackbar_css: https://cdn.jsdelivr.net/npm/node-snackbar@0.1.15/dist/snackbar.min.css
+  snackbar_css: https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.css
-  snackbar: https://cdn.jsdelivr.net/npm/node-snackbar@0.1.15/dist/snackbar.min.js
+  snackbar: https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.js
 
   #鼠标点击特效
-  anime: https://cdn.jsdelivr.net/npm/animejs@latest/anime.min.js  #/js/third-party/anime.min.js
+  anime: https://cdn.jsdelivr.net/npm/animejs@latest/anime.min.js
-  activate_power_mode: /js/third-party/activate-power-mode.js # https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@latest/js/activate-power-mode.js
+  activate_power_mode: https://cdn.jsdelivr.net/npm/activate-power-mode/dist/activate-power-mode.min.js
-  fireworks: /js/third-party/fireworks.js # https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@latest/js/fireworks.js
+  fireworks: https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@2.1.0/js/fireworks.js
-  click_heart: /js/third-party/click_heart.js # https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@latest/js/click_heart.js
+  click_heart: https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@2.1.0/js/click_heart.js
-  ClickShowText: /js/third-party/ClickShowText.js # https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@latest/js/ClickShowText.js
+  ClickShowText: https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@2.1.0/js/ClickShowText.js
 
   translate: /js/tw_cn.js
-  runtimeshow: js/runtimeshow.js
-

languages/default.yml

@@ -27,6 +27,7 @@ post:
   wordcount: Word count
   min2read: "Reading time: %s min"
   page_pv: Post View
+  comments: comments
   copyright:
     author: Author
     link: Link

languages/en.yml

@@ -27,6 +27,7 @@ post:
   wordcount: Word count
   min2read: "Reading time: %s min"
   page_pv: Post View
+  comments: comments
   copyright:
     author: Author
     link: Link

languages/zh-CN.yml

@@ -27,6 +27,7 @@ post:
   wordcount: 字数总计
   min2read: "阅读时长: %s 分钟"
   page_pv: 阅读量
+  comments: 评论数
   copyright:
     author: 文章作者
     link: 文章链接

languages/zh-TW.yml

@@ -27,6 +27,7 @@ post:
   wordcount: 字數總計
   min2read: "閲讀時長: %s 分鐘"
   page_pv: 閲讀量
+  comments: 評論數
   copyright:
     author: 文章作者
     link: 文章鏈接

layout/archive.pug

@@ -8,4 +8,4 @@ block content
     +articleSort(page.posts)
     include includes/pagination.pug
   #aside_content.aside_content
-    include includes/aside.pug
+    include includes/widget/index.pug

layout/category.pug

@@ -7,7 +7,7 @@ block content
       +UI_NEW(page.posts)
       include includes/pagination.pug
     #aside_content.aside_content
-      include includes/aside.pug
+      include includes/widget/index.pug
   else
     include ./includes/mixins/article-sort.pug
     #category
@@ -15,5 +15,5 @@ block content
       +articleSort(page.posts)
       include includes/pagination.pug
     #aside_content.aside_content
-      include includes/aside.pug
+      include includes/widget/index.pug
     

layout/flink.pug

@@ -7,16 +7,15 @@
           li.md-links-item
             a(href=item.link  title=item.name target="_blank")
               if theme.lazyload.enable
-                img.lazyload(data-src=item.avatar onerror=`onerror=null;src='${theme.lodding_bg.flink}'` height="72px")
+                img.lazyload(data-src=item.avatar onerror=`this.onerror=null;this.src='` + url_for(theme.lodding_bg.flink) + `'` alt=item.name )
               else
-                img(src=item.avatar onerror=`onerror=null;src='${theme.lodding_bg.flink}'` height="72px")
+                img(src=item.avatar onerror=`this.onerror=null;this.src='` + url_for(theme.lodding_bg.flink) + `'` alt=item.name )
-              div(class="md-links-title")= item.name 
+              .md-links-title= item.name 
-                <br/>
+              .md-links-des= item.descr
-              div(class="md-links-des")=item.descr
 
   hr
   div 
-    p(style="font-size:15px;font-weight:bold")= theme.Flink.info_headline
+    h2= theme.Flink.info_headline
     ul
       li= theme.Flink.name
       li= theme.Flink.address

layout/includes/additional-js.pug

@@ -1,18 +1,10 @@
 if (theme.medium_zoom && theme.medium_zoom.enable)
   script(src=url_for(theme.CDN.medium_zoom))
-else
+
+if (theme.fancybox && theme.fancybox.enable)
   script(src=url_for(theme.CDN.fancybox))
 
-if (theme.algolia_search.enable)
+include ./math/index.pug 
-  script(async src=url_for(theme.CDN.algolia_js))
-if (theme.mathjax && theme.mathjax.enable)
-  if(!is_tag() && !is_category() && !is_archive() && !is_home())
-    include ./third-party/mathjax.pug
-if (theme.katex && theme.katex.enable)
-  if(!is_tag() && !is_category() && !is_archive() && !is_home())
-    include ./third-party/katex.pug
-if (theme.local_search && theme.local_search.enable)
-  script(async src=url_for(theme.CDN.local_search))
 
 if theme.fireworks && theme.fireworks.enable
   script(src=url_for(theme.CDN.anime))
@@ -30,20 +22,17 @@ if (theme.canvas_ribbon_piao && theme.canvas_ribbon_piao.enable)
 if (theme.canvas_nest && theme.canvas_nest.enable)
   include ./third-party/canvas-nest.pug 
 
-if theme.baidu_push && theme.baidu_push.enable
-  script(src=url_for('js/baidupush.js')) 
-
 if theme.activate_power_mode.enable
+  - var colorful = theme.activate_power_mode.colorful == false ? false : true
+  - var shake = theme.activate_power_mode.shake == false ? false : true
   script(src=url_for(theme.CDN.activate_power_mode))
   script.
-    POWERMODE.colorful = true; // make power mode colorful
+    POWERMODE.colorful = !{colorful};
-    POWERMODE.shake = true; // turn off shake
+    POWERMODE.shake = !{shake}; 
     document.body.addEventListener('input', POWERMODE);
 
 if theme.translate && theme.translate.enable
   script(src=url_for(theme.CDN.translate))
-  script.
-    translateInitilization()
 
 if is_home()
   include index-js.pug

layout/includes/aside.pug

@@ -1,21 +0,0 @@
-if theme.aside.card_author
-  include widget/card_author.pug
-
-if theme.aside.card_announcement
-  include widget/card_announcement.pug
-
-if theme.aside.card_recent_post
-  include widget/card_recent_post.pug
-  
-if theme.aside.card_categories   
-  include widget/card_categories.pug
-
-if theme.aside.card_tags
-  include widget/card_tags.pug
-
-if theme.aside.card_archives
-  include widget/card_archives.pug
-
-if theme.aside.card_webinfo
-  include widget/card_webinfo.pug
-  

layout/includes/comments/gitalk.pug

@@ -8,6 +8,13 @@ if theme.gitalk && theme.gitalk.enable
       owner: '!{theme.gitalk.owner}',
       admin: '!{theme.gitalk.admin}',
       id: md5(decodeURI(location.pathname)),
-      language: '!{theme.gitalk.language}'
+      language: '!{theme.gitalk.language}',
+      updateCountCallback: commentCount
     })
     gitalk.render('gitalk-container')
+
+    function commentCount(n){
+      document.getElementsByClassName('gitalk-comment-count')[0].innerHTML= n
+    }
+
+

layout/includes/config.pug

@@ -49,8 +49,6 @@
     })
   }
 
-  var copy_copyright_js = theme.copy.enable && theme.copy.copyright;
-
   var ClickShowText = 'undefined';
   if (theme.ClickShowText && theme.ClickShowText.enable) {
     ClickShowText = JSON.stringify({
@@ -78,15 +76,20 @@
     })
   }
 
+  var runtime = theme.runtimeshow.enable
+  var fancybox = theme.fancybox.enable
+  var medium_zoom = theme.medium_zoom.enable
+  var baiduPush = theme.baidu_push && theme.baidu_push.enable
+  var isHome = is_home() ? true : false
+  var isPost = is_post() ? true : false
+
+
 script.
   var GLOBAL_CONFIG = { 
     root: '!{config.root}',
     algolia: !{algolia},
     localSearch: !{localSearch},
     translate: !{translate},
-    highlight_copy: '!{theme.highlight_copy}',
-    highlight_lang: '!{theme.highlight_lang}',
-    highlight_shrink: '!{theme.highlight_shrink}',
     copy: {
       success: '!{_p("copy.success")}',
       error: '!{_p("copy.error")}',
@@ -98,11 +101,15 @@ script.
       message_next: '!{_p("Snackbar.bookmark.message_next")}'
     },
     runtime_unit: '!{_p("runtime_unit")}',
+    runtime: !{runtime},
     copyright: !{copyright},
-    copy_copyright_js: !{copy_copyright_js},
     ClickShowText: !{ClickShowText},
-    medium_zoom: '!{theme.medium_zoom.enable}',
+    medium_zoom: !{medium_zoom},
-    Snackbar: !{Snackbar}
+    fancybox: !{fancybox},
+    Snackbar: !{Snackbar},
+    baiduPush: !{baiduPush},
+    isHome: !{isHome},
+    isPost: !{isPost}
     
   }
 

layout/includes/head.pug

@@ -13,71 +13,36 @@ else if !is_post()
 
 - var without_index = url.replace('index.html', '')
 - var without_html = without_index.replace('.html', '')
-- var photo_check = is_post() ? page.cover || theme.avatar : theme.avatar
-- var photo_link = url_check (photo_check) ? photo_check : config.url + photo_check
 
 //- 預解析
-link(rel="preconnect" href="//cdn.jsdelivr.net")
+include ./head/dns_prefetch.pug
 
 //- PWA
 if (theme.pwa && theme.pwa.enable)
-  link(rel="manifest" href=theme.pwa.manifest)
+  include ./head/pwa.pug
-  if(theme.pwa.theme_color) 
-    meta(name="theme-color" content=theme.pwa.theme_color)
-  if(theme.pwa.theme_color) 
-    meta(name="msapplication-TileColor" content=theme.pwa.theme_color)
-  if(theme.pwa.apple_touch_icon) 
-    link(rel="apple-touch-icon" sizes="180x180" href=theme.pwa.apple_touch_icon)
-  if(theme.pwa.favicon_32_32) 
-    link(rel="icon" type="image/png" sizes="32x32" href=theme.pwa.favicon_32_32)
-  if(theme.pwa.favicon_16_16)
-    link(rel="icon" type="image/png" sizes="16x16" href=theme.pwa.favicon_16_16)
-  if(theme.pwa.mask_icon)
-    link(rel="mask-icon" href=theme.pwa.mask_icon color="#5bbad5")
 
 //- 網站驗證
-if theme.google_site_verification
+include ./head/site_verification.pug
-  meta(name="google-site-verification" content=theme.google_site_verification)
-
-if theme.bing_site_verification
-  meta(name="msvalidate.01" content=theme.bing_site_verification)
-
-if theme.baidu_site_verification
-  meta(name="baidu-site-verification" content=theme.baidu_site_verification)
-
-if theme.qihu_site_verification
-  meta(name="360-site-verification" content=theme.qihu_site_verification)
-
-//- twitter meta
-if theme.twitter_meta
-  meta(name="twitter:card" content="summary_large_image")
-  meta(name="twitter:title" content=pageTitle_no_include_blog_name)
-  meta(name="twitter:description" content=pageDescription)
-  meta(name="twitter:image" content=photo_link)
 
 //- Open_Graph
-if theme.Open_Graph_meta
+include ./head/Open_Graph.pug
-  - var contentType = is_post() ? 'article' : 'website'
-  meta(property="og:type" content=contentType)
-  meta(property="og:title" content=pageTitle_no_include_blog_name)
-  meta(property="og:url" content=without_html)
-  meta(property="og:site_name" content=config.title)
-  meta(property="og:description" content=pageDescription)
-  meta(property="og:image" content=photo_link)
 
 if theme.disable_baidu_transformation
   meta(http-equiv="Cache-Control" content="no-transform")
   meta(http-equiv="Cache-Control" content="no-siteapp")
 
+if page.hide == true
+  meta(name="robots" content="noindex")
+
 script(src=url_for(theme.CDN.js_cookies))
 
 if (theme.darkmode && theme.darkmode.enable) || theme.autoChangeMode !== false
-  include ./darkmode
+  include ./head/darkmode.pug
 
 each item in theme.CDN_USE.css
   link(rel='stylesheet', href=url_for(item))
 
-if (theme.medium_zoom && !theme.medium_zoom.enable)
+if (theme.fancybox && theme.fancybox.enable)
   link(rel='stylesheet', href=url_for(theme.CDN.fancybox_css))
 
 if (theme.snackbar && theme.snackbar.enable)
@@ -98,30 +63,14 @@ if theme.algolia_search.enable
 
 if (theme.gitalk && theme.gitalk.enable)
   link(rel="stylesheet" type="text/css" href=url_for(theme.CDN.gitalk_css))
-  script(src=url_for(theme.CDN.gitalk))
+  script(src=url_for(theme.CDN.gitalk) defer)
-  script(src=url_for(theme.CDN.blueimp_md5))
+  script(src=url_for(theme.CDN.blueimp_md5) defer)
 
-if theme.baidu_analytics
+//- google_adsense
-  link(rel="dns-prefetch" href="https://hm.baidu.com")
+include ./head/google_adsense.pug
-  script.
-    var _hmt = _hmt || [];
-    (function() {
-      var hm = document.createElement("script");
-      hm.src = "https://hm.baidu.com/hm.js?!{theme.baidu_analytics}";
-      var s = document.getElementsByTagName("script")[0]; 
-      s.parentNode.insertBefore(hm, s);
-    })();
 
-if theme.google_analytics
+//- analytics
-  link(rel="dns-prefetch" href="https://www.google-analytics.com")
+include ./head/analytics.pug
-  script.
-    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=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;m.parentNode.insertBefore(a,m)
-    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
-
-    ga('create', '!{theme.google_analytics}', 'auto');
-    ga('send', 'pageview');
 
 if !is_post()
   link(rel="preload" href=url_for(top_img)  as="image" )

layout/includes/head/Open_Graph.pug

@@ -0,0 +1,19 @@
+- var photo_check = is_post() ? page.cover || theme.avatar : theme.avatar
+- var photo_link = url_check (photo_check) ? photo_check : config.url + photo_check
+- var contentType = is_post() ? 'article' : 'website'
+
+//- twitter meta
+if theme.twitter_meta
+  meta(name="twitter:card" content="summary")
+  meta(name="twitter:title" content=pageTitle_no_include_blog_name)
+  meta(name="twitter:description" content=pageDescription)
+  meta(name="twitter:image" content=photo_link)
+
+//- Open_Graph
+if theme.Open_Graph_meta
+  meta(property="og:type" content=contentType)
+  meta(property="og:title" content=pageTitle_no_include_blog_name)
+  meta(property="og:url" content=without_html)
+  meta(property="og:site_name" content=config.title)
+  meta(property="og:description" content=pageDescription)
+  meta(property="og:image" content=photo_link)

layout/includes/head/analytics.pug

@@ -0,0 +1,22 @@
+if theme.baidu_analytics
+  script.
+    var _hmt = _hmt || [];
+    (function() {
+      var hm = document.createElement("script");
+      hm.src = "https://hm.baidu.com/hm.js?!{theme.baidu_analytics}";
+      var s = document.getElementsByTagName("script")[0]; 
+      s.parentNode.insertBefore(hm, s);
+    })();
+
+if theme.google_analytics
+  script.
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=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;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+    ga('create', '!{theme.google_analytics}', 'auto');
+    ga('send', 'pageview');
+
+if theme.tencent_analytics
+  script(src=`http://tajs.qq.com/stats?sId=` + theme.tencent_analytics charset="UTF-8")

layout/includes/head/dns_prefetch.pug

@@ -0,0 +1,16 @@
+link(rel="preconnect" href="//cdn.jsdelivr.net")
+
+if theme.google_analytics
+  link(rel="preconnect" href="https://www.google-analytics.com" crossorigin)
+
+if theme.baidu_analytics
+  link(rel="preconnect" href="https://hm.baidu.com")
+
+if theme.tencent_analytics
+  link(rel="preconnect" href="http://ta.qq.com")
+
+if theme.blog_title_font.font_link
+  link(rel="preconnect" href="https://fonts.googleapis.com" crossorigin)
+
+if theme.busuanzi.site_uv || theme.busuanzi.site_pv || theme.busuanzi.page_pv
+  link(rel="preconnect" href="//busuanzi.ibruce.info")

layout/includes/head/google_adsense.pug

@@ -0,0 +1,7 @@
+if (theme.google_adsense && theme.google_adsense.enable)
+  script(async src=theme.google_adsense.js)
+  script.
+    (adsbygoogle = window.adsbygoogle || []).push({
+      google_ad_client: '!{theme.google_adsense.client}',
+      enable_page_level_ads: '!{theme.google_adsense.enable_page_level_ads}'
+    });

layout/includes/head/pwa.pug

@@ -0,0 +1,13 @@
+link(rel="manifest" href=theme.pwa.manifest)
+if(theme.pwa.theme_color) 
+  meta(name="theme-color" content=theme.pwa.theme_color)
+if(theme.pwa.theme_color) 
+  meta(name="msapplication-TileColor" content=theme.pwa.theme_color)
+if(theme.pwa.apple_touch_icon) 
+  link(rel="apple-touch-icon" sizes="180x180" href=theme.pwa.apple_touch_icon)
+if(theme.pwa.favicon_32_32) 
+  link(rel="icon" type="image/png" sizes="32x32" href=theme.pwa.favicon_32_32)
+if(theme.pwa.favicon_16_16)
+  link(rel="icon" type="image/png" sizes="16x16" href=theme.pwa.favicon_16_16)
+if(theme.pwa.mask_icon)
+  link(rel="mask-icon" href=theme.pwa.mask_icon color="#5bbad5")

layout/includes/head/site_verification.pug

@@ -0,0 +1,11 @@
+if theme.google_site_verification
+  meta(name="google-site-verification" content=theme.google_site_verification)
+
+if theme.bing_site_verification
+  meta(name="msvalidate.01" content=theme.bing_site_verification)
+
+if theme.baidu_site_verification
+  meta(name="baidu-site-verification" content=theme.baidu_site_verification)
+
+if theme.qihu_site_verification
+  meta(name="360-site-verification" content=theme.qihu_site_verification)

layout/includes/header.pug

@@ -1,13 +1,16 @@
-#header  
+header  
   #page-header
     span#blog_name.pull_left
       a#site-name.blog_title(href=url_for('/')) #[=config.title]
-    i.fa.fa-bars.fa-fw.toggle-menu.pull_right.close(aria-hidden="true")
+    span.toggle-menu.pull_right.close
+      a.site-page
+        i.fa.fa-bars.fa-fw(aria-hidden="true")
     span.pull_right.menus
       .menus_items
         include menu_item.pug
-    span#search_button.pull_right
+
     if (theme.algolia_search.enable || theme.local_search && theme.local_search.enable)
+      span#search_button.pull_right
         a.site-page.social-icon.search
           i.fa.fa-search.fa-fw
           span=' '+_p('search')

layout/includes/index-js.pug

@@ -1,9 +1,3 @@
-script.
-  if (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)) {} else {
-    $('.full_page .nav_bg').css('background-attachment', 'fixed');
-  }
-
-
 if theme.subtitle.enable
   script(src=url_for(theme.CDN.typed))
   - var source = theme.subtitle.source
@@ -67,7 +61,7 @@ if theme.subtitle.enable
       backSpeed: 50
       });
   else if source == '4'
-    script(type="text/javascript" src="https://sdk.jinrishici.com/v2/browser/jinrishici.js")
+    script(type="text/javascript" src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8")
     script.
       jinrishici.load(function(result) {
         var sub = '!{theme.subtitle.sub}'.length == 0  ? new Array() : '!{theme.subtitle.sub}'.split(",");
@@ -92,22 +86,5 @@ if theme.subtitle.enable
       backSpeed: 50
       });
 
-if !theme.index_top_img_height && !theme.index_site_info_top
-  script.
-    //首頁fullpage
-    function alignContent() {
-      for (var n = $(window).height(), e = document.querySelectorAll(".full_page"), i = 0; i < e.length; i++) 
-        e[i].style.height = n + "px";
-        $("#site-info").each(function () {
-          var x = $(this).height();
-          $(this).css("top", (n-x)/2)       
-        })
-    }
-    alignContent();
-    
-    $(window).bind("resize", function () {
-      alignContent()
-    })
-
 
 

layout/includes/layout.pug

@@ -18,7 +18,7 @@
 - is_home() ? pageTitle = config.title + home_subtitle_true : pageTitle = pageTitle_saved
 //- 判断keywords
 
-- var pageDescription = page.description || page.title || config.description || ''
+- var pageDescription = page.description || page.title || config.description
 - var pageKeywords = Array.isArray(config.keywords) ? (config.keywords).join(','):  ([]).join(',') || config.keywords
 - if (page.tags && page.tags.data) pageKeywords = page.tags.data.map(function(tag) {return tag.name;}).join(',')
 - var pageAuthor = config.email ? config.author + ',' + config.email : config.author
@@ -29,9 +29,10 @@ html(lang=config.language data-theme=theme.display_mode)
   head
     meta(charset='UTF-8')
     meta(http-equiv="X-UA-Compatible" content="IE=edge")
-    meta(name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1")
+    meta(name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5")
     title= pageTitle
     meta(name="description" content=pageDescription)
+    if pageKeywords
       meta(name="keywords" content=pageKeywords)
     meta(name="author" content=pageAuthor)
     meta(name="copyright" content=pageCopyright)
@@ -42,6 +43,7 @@ html(lang=config.language data-theme=theme.display_mode)
   body
     if theme.fireworks && theme.fireworks.enable
       canvas.fireworks
+    //- !=partial('includes/header.pug', {}, {cache: true})
     include ./header.pug
     include ./mobile-sidebar.pug
     #body-wrap
@@ -54,7 +56,7 @@ html(lang=config.language data-theme=theme.display_mode)
         include ./sidebar.pug
       if (!is_post())
         include ./nav.pug
-      #content-outer
+      main#content-outer
         block top_img
         if (!is_post())
           #content-inner.layout_page

layout/includes/math/index.pug

@@ -0,0 +1,15 @@
+if theme.mathjax && theme.mathjax.enable
+  if theme.mathjax.per_page
+    if(!is_tag() && !is_category() && !is_archive() && !is_home())
+      include ./mathjax.pug
+  else
+    if page.mathjax
+      include ./mathjax.pug
+
+if theme.katex && theme.katex.enable
+  if theme.katex.per_page
+    if(!is_tag() && !is_category() && !is_archive() && !is_home())
+      include ./katex.pug
+  else
+    if page.katex
+      include ./katex.pug

layout/includes/menu_item.pug

@@ -1,7 +1,7 @@
 each value, label in theme.menu
   if !Array.isArray(value)
     .menus_item
-      a.site-page(href=trim(value.split('||')[0]))
+      a.site-page(href=url_for(trim(value.split('||')[0])))
         i.fa-fw(class=trim(value.split('||')[1]))
         span=' '+label
   else
@@ -13,6 +13,6 @@ each value, label in theme.menu
       ul.menus_item_child
         each i in value
           li
-            a.site-page(href=trim(i.split('||')[1]))
+            a.site-page(href=url_for(trim(i.split('||')[1])))
               i.fa-fw(class=trim(i.split('||')[2]))
               span=' '+trim(i.split('||')[0])

layout/includes/mixins/UI.pug

@@ -3,7 +3,7 @@ mixin UI_NEW(posts)
     .recent-post-item.article-container
       - var link = article.link || article.path
         if index%2 == 0
-          .post_cover.pull_left.left_radius
+          .post_cover.left_radius
             a(href=url_for(link) title=article.title || _p('no_title'))
               - var post_cover = article.cover
               if theme.lazyload.enable
@@ -11,7 +11,7 @@ mixin UI_NEW(posts)
               else
                 img.post_bg(src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
         else
-          .post_cover.pull_right.right_radius
+          .post_cover.right_radius
             a(href=url_for(link) title=article.title || _p('no_title'))
               - var post_cover = article.cover
               if theme.lazyload.enable

layout/includes/mixins/article-sort.pug

@@ -9,7 +9,7 @@ mixin articleSort(posts)
       .article-sort-item
         .article-sort-img
           a.article-sort-item__img(href=url_for(article.path))
-            img(src=article.cover)
+            img(src=article.cover alt=article.title || 'No Title')
         .article-sort-post
           a.article-sort-item__post(href=url_for(article.path))
             i.fa.fa-clock-o(aria-hidden="true")

layout/includes/mobile-sidebar.pug

@@ -2,24 +2,24 @@
   #menu_mask
   #mobile-sidebar-menus
     .mobile_author_icon
-      img.lazyload.avatar_img(src=url_for(theme.avatar) onerror=`onerror=null;src='${theme.lodding_bg.flink}'`)
+      img.avatar-img(src=url_for(theme.avatar) onerror=`onerror=null;src='${theme.lodding_bg.flink}'` alt="avatar")
     .mobile_post_data
       if site.posts.length
-        .mobile_data_item.is_center
+        .mobile_data_item.is-center
           .mobile_data_link
             a(href=url_for(config.archive_dir) + '/')
               .headline= _p('aside.articles') 
               .length_num= site.posts.length
 
       if site.tags.length
-        .mobile_data_item.is_center       
+        .mobile_data_item.is-center       
           .mobile_data_link
             a(href=url_for(config.tag_dir) + '/' )
               .headline= _p('aside.tags')
               .length_num= site.tags.length
 
       if site.categories.length
-        .mobile_data_item.is_center      
+        .mobile_data_item.is-center      
           .mobile_data_link
             a(href=url_for(config.category_dir) + '/')
               .headline= _p('aside.categories') 
@@ -41,6 +41,6 @@
     #mobile-sidebar-toc
       .toc_mobile_headline= _p('sidebar.catalog')
       if (page.encrypt == true)
-        .toc-div-class(style="display:none")!=toc(page.origin,{"class":"toc_mobile_items",list_number:tocNumber})
+        .sidebar-toc__content.toc-div-class(style="display:none")!=toc(page.origin,{"class":"toc_mobile_items",list_number:tocNumber})
       else 
-        !=toc(page.content,{"class":"toc_mobile_items",list_number:tocNumber})
+        .sidebar-toc__content!=toc(page.content,{"class":"toc_mobile_items",list_number:tocNumber})

layout/includes/nav.pug

@@ -3,8 +3,7 @@
 
 
 if is_home()
-  nav#nav.full_page
+  nav#nav.full_page(style=bg_img)
-    .nav_bg(style=bg_img)
     #site-info
       #site-title
         span.blogtitle= page.title || page.tag || page.category || config.title
@@ -15,14 +14,13 @@ if is_home()
         #site-social-icons
           each url, icon in theme.social
             a.social-icon(href=url target="_blank")
-              i(class=icon)
+              i(class=icon aria-hidden="true")
       
     .scroll-down
       i.fa.fa-angle-down.scroll-down-effects
 
 else
-  nav#nav.not_index_bg
+  nav#nav.not_index_bg(style=bg_img)
-    .nav_bg(style=bg_img)
     #page_site-info
       #site-title
           if (is_archive()) 

layout/includes/pagination.pug

@@ -1,7 +1,7 @@
 -
   var options = {
-    prev_text: '<i class="fa fa-chevron-left"></i>',
+    prev_text: '<i class="fa fa-fw fa-chevron-left" aria-hidden="true"></i>',
-    next_text: '<i class="fa fa-chevron-right"></i>',
+    next_text: '<i class="fa fa-fw fa-chevron-right" aria-hidden="true"></i>',
     mid_size: 1,
     escape: false
   }

layout/includes/recent-posts.pug

@@ -1,24 +1,25 @@
 each article , index in page.posts.data
   .recent-post-item.article-container
     - var link = article.link || article.path
+    - var title = article.title || _p('no_title')
       if index%2 == 0
-        .post_cover.pull_left.left_radius
+        .post_cover.left_radius
-          a(href=url_for(link) title=article.title || _p('no_title'))
+          a(href=url_for(link) title=title)
             - var post_cover = article.cover
             if theme.lazyload.enable
-              img.post_bg.lazyload(data-src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
+              img.post_bg.lazyload(data-src=`${post_cover}` onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'` alt=title)
             else
-              img.post_bg(src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
+              img.post_bg(src=`${post_cover}` onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'` alt=title)
       else
-        .post_cover.pull_right.right_radius
+        .post_cover.right_radius
-          a(href=url_for(link) title=article.title || _p('no_title'))
+          a(href=url_for(link) title=title)
             - var post_cover = article.cover
             if theme.lazyload.enable
-              img.post_bg.lazyload(data-src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
+              img.post_bg.lazyload(data-src=`${post_cover}` onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'` alt=title)
             else
-              img.post_bg(src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)            
+              img.post_bg(src=`${post_cover}` onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'` alt=title)            
     .recent-post-info   
-      a.article-title(href=url_for(link) title= article.title || _p('no_title'))= article.title || _p('no_title')
+      a.article-title(href=url_for(link) title=title)= title
       if (article.top)
         span.article-meta
           i.fa.fa-thumb-tack.article-meta__icon.sticky

layout/includes/reward.pug

@@ -1,11 +1,11 @@
 .post-reward
-  a.reward-button
+  a.reward-button.button--primary.button--animated 
     i.fa.fa-qrcode
     = ' ' + _p('donate')
     .reward-main
       ul.reward-all
         each item in theme.reward.QR_code
           li.reward-item
-            img.lazyload.post-qr-code__img(src=(item.itemlist||item).img)
+            img.lazyload.post-qr-code__img(src=url_for((item.itemlist||item).img) alt=(item.itemlist||item).text)
             .post-qr-code__desc=(item.itemlist||item).text
 

layout/includes/rightside.pug

@@ -2,6 +2,7 @@ section#rightside.rightside
   #rightside-config-hide
     if theme.readmode.enable && is_post()
       i#readmode.fa.fa-book(title=_p('rightside.readmode_title'))
+    if is_post()
       i#font_plus.fa.fa-plus(title=_p('rightside.font_plus_title'))
       i#font_minus.fa.fa-minus(title=_p('rightside.font_minus_title'))
     if theme.translate && theme.translate.enable

layout/includes/widget/card_announcement.pug

@@ -1,6 +1,6 @@
-.card_widget.card-announcement
+.card-widget.card-announcement
   .card-content
-    .item_headline
+    .item-headline
       i.fa.fa-bullhorn.card-announcement-animation(aria-hidden="true")
       span= _p('aside.card_announcement')
     .announcement_content= theme.announcement.content

layout/includes/widget/card_archives.pug

@@ -1,6 +1,6 @@
-.card_widget.card-archives
+.card-widget.card-archives
   .card-content
-    .item_headline
+    .item-headline
       i.fa.fa-archive(aria-hidden="true")
       span= _p('aside.card_archives')
-    div.archives_item!= list_archives({type:'monthly',format: 'YYYY年MM月'})
+    != list_archives({type:'monthly',format: 'YYYY年MM月'})

layout/includes/widget/card_author.pug

@@ -1,43 +1,36 @@
-.card_widget.card-author
+.card-widget.card-info
   .card-content
-    .post_data
+    .card-info-avatar.is-center
-      .data-item.is_center
+      img.avatar-img(src=url_for(theme.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.lodding_bg.flink) + `'` alt="avatar")
-        img.lazyload.avatar_img(src=url_for(theme.avatar) onerror=`onerror=null;src='${theme.lodding_bg.flink}'`)
+      .author-info__name= config.author
-        p.author-info__name.is_center= config.author
+      .author-info__description= config.description
-        p.author-info__description.is_center= config.description
 
-    .post_data.data_config
+    .card-info-data
       if site.posts.length
-        .data-item.is_center
+        .card-info-data-item.is-center
-          .data_link
           a(href=url_for(config.archive_dir) + '/')
-              p.headline= _p('aside.articles') 
+            .headline= _p('aside.articles') 
-              p.length_num= site.posts.length
+            .length_num= site.posts.length
 
       if site.tags.length
-        .data-item.is_center       
+        .card-info-data-item.is-center       
-          .data_link
           a(href=url_for(config.tag_dir) + '/' )
-              p.headline= _p('aside.tags')
+            .headline= _p('aside.tags')
-              p.length_num= site.tags.length
+            .length_num= site.tags.length
 
       if site.categories.length
-        .data-item.is_center      
+        .card-info-data-item.is-center      
-          .data_link
           a(href=url_for(config.category_dir) + '/')
-              p.headline= _p('aside.categories') 
+            .headline= _p('aside.categories') 
-              p.length_num= site.categories.length
+            .length_num= site.categories.length
 
-    .post_data.is_center
+    .card-info-bookmark.is-center
-      a#bookmark-it.data-item.bookmark.bookmarke--primary.bookmark--animated(href="javascript:;" title= _p('aside.card_bookmark') target="_self")
+      a#bookmark-it.bookmark.button--primary.button--animated(href="javascript:;" title= _p('aside.card_bookmark') target="_self")
         i.fa.fa-bookmark(aria-hidden="true")
         span= _p('aside.card_bookmark') || 'Follow Me'
   
-  
-  
     if(theme.social)
-      .post_data.data_config
+        .card-info-social-icons.is-center
-        #aside-social-icons 
           each url, icon in theme.social
-            a.social-icon.data-item(href=url target="_blank")
+            a.social-icon(href=url target="_blank")
-              i(class=icon)
+              i(class=icon aria-hidden="true")

layout/includes/widget/card_categories.pug

@@ -1,20 +1,20 @@
 if site.categories.length
-  .card_widget.card-categories
+  .card-widget.card-categories
       .card-content
-        .item_headline
+        .item-headline
           i.fa.fa-folder-open(aria-hidden="true")
           span= _p('aside.card_categories')
-        ul.aside_category_item        
+        ul.aside-category-item        
           mixin displayCategories(parent = undefined) 
             - site.categories.find({ parent }).sort("name").each(function(category) {
                 - var childCount = site.categories.find({ parent: category._id }).count();              
-                li.aside_category_list
+                li.aside-category-list
-                  a.aside_category_list_link(href=url_for(category.path))
+                  a.aside-category-list_link(href=url_for(category.path))
-                    span.aside_category_list_name= category.name
+                    span.aside-category-list_name= category.name
-                    span.aside_category_list_length= category.length
+                    span.aside-category-list_length= category.length
                   
                 if childCount > 0
-                  ul.aside_category_item.child
+                  ul.aside-category-item.child
                     +displayCategories(category._id)
             - })
 

layout/includes/widget/card_recent_post.pug

@@ -1,23 +1,24 @@
-.card_widget.card-recent-post
+.card-widget.card-recent-post
   .card-content
-    .item_headline
+    .item-headline
       i.fa.fa-history(aria-hidden="true")
       span= _p('aside.card_recent_post')
-    .aside_recent_item
+    .aside-recent-item 
       - site.posts.sort('date', -1).limit(5).each(function(article){
-        .aside_recent_post
+        .aside-recent-post
           - var link = article.link || article.path
+          - var title = article.title || _p('no_title')
             a(href=url_for(link))
               - var post_cover = article.cover
-              .aside_post_cover
+              .aside-post-cover
                 if theme.lazyload.enable
-                  img.aside_post_bg.lazyload(data-src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` title=article.title || _p('no_title'))
+                  img.aside-post-bg.lazyload(data-src=`${post_cover}` onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'` title=title alt=title)
                 else
-                  img.aside_post_bg(src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` title=article.title || _p('no_title'))
+                  img.aside-post-bg(src=`${post_cover}` onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'` title=title alt=title)
-              div#aside_title
+              .aside-post-title
-                .aside_post_title(href=url_for(link) title=article.title || _p('no_title'))= article.title || _p('no_title')
+                .aside-post_title(href=url_for(link) title=article.title || _p('no_title'))= article.title || _p('no_title')
                 if (theme.post_meta.date_type)
                   - var date_type = theme.post_meta.date_type == 'updated' ? 'updated' : 'date'
-                  time.aside_post_meta.post-meta__date #[=date(article[date_type], config.date_format)]
+                  time.aside-post_meta.post-meta__date #[=date(article[date_type], config.date_format)]
     
       - })

layout/includes/widget/card_tags.pug

@@ -1,7 +1,7 @@
 if site.tags.length
-  .card_widget.card-tags
+  .card-widget.card-tags
     .card-content
-      .item_headline
+      .item-headline
         i.fa.fa-tags(aria-hidden="true")
         span= _p('aside.card_tags')
-      .card-tag-cloud!= tagcloud({min_font: 16, max_font: 24, amount: 200, color: true, start_color: '#999', end_color: '#000'})
+      .card-tag-cloud!= tagcloud({min_font: 16, max_font: 24, amount: 200, color: true, start_color: '#999', end_color: '#99a9bf'})

layout/includes/widget/card_webinfo.pug

@@ -1,24 +1,22 @@
-.card_widget.card-webinfo
+.card-widget.card-webinfo
   .card-content
-    .item_headline
+    .item-headline
         i.fa.fa-line-chart(aria-hidden="true")
         span= _p('aside.card_webinfo.headline')
     .webinfo
-      .webinfo_item
+      .webinfo-item
-        .webinfo_article_name= _p('aside.card_webinfo.article_name') + " :"
+        .webinfo-article-name= _p('aside.card_webinfo.article_name') + " :"
-        .webinfo_article_count= site.posts.length      
+        .webinfo-article-count= site.posts.length      
       if theme.runtimeshow.enable
-        .webinfo_item
+        .webinfo-item
-          .webinfo_runtime_name= _p('aside.card_webinfo.runtime_name') + " :"
+          .webinfo-runtime-name= _p('aside.card_webinfo.runtime_name') + " :"
-          #webinfo_runtime_count.webinfo_runtime_count
+          #webinfo-runtime-count.webinfo-runtime-count(start_date=theme.runtimeshow.start_date)      
-          script#runtionshow(src=url_for(theme.CDN.runtimeshow) start_date=theme.runtimeshow.start_date)       
-      
       if theme.busuanzi.site_uv 
-        .webinfo_item       
+        .webinfo-item       
-          .webinfo_site_uv_name= _p('aside.card_webinfo.site_uv_name') + " :"
+          .webinfo-site-uv-name= _p('aside.card_webinfo.site_uv_name') + " :"
-          .webinfo_site_uv_count#busuanzi_value_site_uv
+          .webinfo-site-uv-count#busuanzi_value_site_uv
       if theme.busuanzi.site_pv
-        .webinfo_item
+        .webinfo-item
-          .webinfo_site_name= _p('aside.card_webinfo.site_pv_name') + " :"
+          .webinfo-site-name= _p('aside.card_webinfo.site_pv_name') + " :"
-          .webinfo_site_pv_count#busuanzi_value_site_pv
+          .webinfo-site-pv-count#busuanzi_value_site_pv
 

layout/includes/widget/index.pug

@@ -0,0 +1,21 @@
+if theme.aside.card_author
+  include ./card_author.pug
+
+if theme.aside.card_announcement
+  include ./card_announcement.pug
+
+if theme.aside.card_recent_post
+  include ./card_recent_post.pug
+  
+if theme.aside.card_categories   
+  include ./card_categories.pug
+
+if theme.aside.card_tags
+  include ./card_tags.pug
+
+if theme.aside.card_archives
+  include ./card_archives.pug
+
+if theme.aside.card_webinfo
+  include ./card_webinfo.pug
+  

layout/index.pug

@@ -5,4 +5,4 @@ block content
     include includes/recent-posts.pug  
     include includes/pagination.pug
   #aside_content.aside_content
-    include includes/aside.pug
+    include includes/widget/index.pug

layout/page.pug

@@ -11,14 +11,14 @@ block content
       if page.comments !== false
         include includes/comments/index.pug
     #aside_content.aside_content
-      include includes/aside.pug
+      include includes/widget/index.pug
 
   else if page.type === 'link'
     include flink.pug
       if page.comments !== false
         include includes/comments/index.pug
     #aside_content.aside_content
-      include includes/aside.pug
+      include includes/widget/index.pug
   else if page.type === 'categories'    
     #post-content.category-content
       .category-lists
@@ -29,7 +29,7 @@ block content
       if page.comments !== false
         include includes/comments/index.pug
     #aside_content.aside_content
-      include includes/aside.pug
+      include includes/widget/index.pug
   else
     article#page
       h1= page.title
@@ -38,4 +38,4 @@ block content
       if page.comments !== false
         include includes/comments/index.pug
     #aside_content.aside_content
-      include includes/aside.pug
+      include includes/widget/index.pug

layout/post.pug

@@ -11,38 +11,61 @@ block top_img
         if (theme.post_meta.date_type)
           if (theme.post_meta.date_type === 'both')
             time.post-meta__date
-              i.fa.fa-calendar(aria-hidden="true")
+              i.fa.fa-calendar.fa-fw(aria-hidden="true")
               =' '+_p('post.created')+' '+date(page.date, config.date_format)
               span.post-meta__separator |
-              i.fa.fa-history(aria-hidden="true")
+              i.fa.fa-history.fa-fw(aria-hidden="true")
               =' '+_p('post.updated')+' '+date(page.updated, config.date_format)
           else
             - var date_type = theme.post_meta.date_type === 'updated' ? 'updated' : 'date'
-            time.post-meta__date #[i.fa.fa-calendar(aria-hidden="true")] #[=date(page[date_type], config.date_format)]
+            time.post-meta__date #[i.fa.fa-calendar.fa-fw(aria-hidden="true")] #[=date(page[date_type], config.date_format)]
                   
         if (theme.post_meta.categories && page.categories.data.length > 0)
           if (theme.post_meta.date_type)
-            span.post-meta__separator.mobile_hidden |
+            span.post-meta__separator |
-          span.mobile_hidden
+          span
             each item, index in page.categories.data
-              i.fa.fa-inbox.post-meta__icon(aria-hidden="true")
+              i.fa.fa-inbox.post-meta__icon.fa-fw(aria-hidden="true")
               a(href=url_for(item.path)).post-meta__categories #[=item.name]
               if (index < page.categories.data.length - 1)
-                i.fa.fa-angle-right(aria-hidden="true")
+                i.fa.fa-angle-right.fa-fw(aria-hidden="true")
         .post-meta-wordcount
           if (theme.wordcount && theme.wordcount.enable)
-            i.fa.fa-file-word-o.post-meta__icon(aria-hidden="true")
+            i.fa.fa-file-word-o.post-meta__icon.fa-fw(aria-hidden="true")
             span= _p('post.wordcount') + ':'
             span.word-count= wordcount(page.content)
             span.post-meta__separator |
-            i.fa.fa-clock-o.post-meta__icon(aria-hidden="true")
+            i.fa.fa-clock-o.post-meta__icon.fa-fw(aria-hidden="true")
             span= _p('post.min2read', min2read(page.content, {cn: 350, en: 160}))
+          .post-meta-pv-cv
             if (theme.wordcount && theme.wordcount.enable && theme.busuanzi.page_pv)
               span.post-meta__separator |
             if theme.busuanzi.page_pv       
-            i.fa.fa-eye.post-meta__icon(aria-hidden="true")        
+              span
-            span= _p('post.page_pv') + ': '
+                i.fa.fa-eye.post-meta__icon.fa-fw(aria-hidden="true") 
+                =_p('post.page_pv') + ':'
               span#busuanzi_value_page_pv
+            if (theme.disqus && theme.disqus.enable && theme.disqus.count && page.comments !== false)
+              if (theme.busuanzi && theme.busuanzi.page_pv)
+                span.post-meta__separator |
+              i.fa.fa-comment-o.post-meta__icon.fa-fw(aria-hidden="true")
+              span= _p('post.comments') + ':'
+              a(href=url_for(page.path) + '#post-comment')
+                span.disqus-comment-count(data-disqus-url=page.permalink)
+            if (theme.valine && theme.valine.enable && theme.valine.count && page.comments !== false)
+              if (theme.busuanzi && theme.busuanzi.page_pv)
+                span.post-meta__separator |
+              i.fa.fa-comments-o.post-meta__icon.fa-fw(aria-hidden="true")
+              span= _p('post.comments') + ':'
+              a(href=url_for(page.path) + '#post-comment' itemprop="discussionUrl")
+                span.valine-comment-count.comment-count(data-xid=url_for(page.path) itemprop="commentCount")
+            if (theme.gitalk && theme.gitalk.enable && theme.gitalk.count && page.comments !== false)
+              if (theme.busuanzi && theme.busuanzi.page_pv)
+                span.post-meta__separator |
+              i.fa.fa-comments-o.post-meta__icon.fa-fw(aria-hidden="true")
+              span= _p('post.comments') + ':'
+              a(href=url_for(page.path) + '#post-comment')
+                span.gitalk-comment-count.comment-count
 
 
 block content

layout/tag.pug

@@ -7,7 +7,7 @@ block content
       +UI_NEW(page.posts)
       include includes/pagination.pug
     #aside_content.aside_content
-      include includes/aside.pug
+      include includes/widget/index.pug
   else
     include ./includes/mixins/article-sort.pug
     #tag
@@ -15,4 +15,4 @@ block content
       +articleSort(page.posts)
       include includes/pagination.pug
     #aside_content.aside_content
-      include includes/aside.pug
+      include includes/widget/index.pug

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "hexo-theme-melody",
+  "name": "hexo-theme-butterfly",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "A Hexo Theme: Butterfly"
 }

scripts/hide_post.js

@@ -0,0 +1,63 @@
+/**
+ * global hexo
+ * from printempw/hexo-hide-posts
+ * modify by Jerry
+ */
+
+'use strict';
+
+var public_generators = [];
+
+hexo.extend.filter.register('before_generate', function () {
+  this._bindLocals();
+
+  const all_posts = this.locals.get('posts');
+  const hidden_posts = all_posts.find({
+    'hide': true
+  });
+  const normal_posts = all_posts.filter(post => !post['hide']);
+
+  this.locals.set('all_posts', all_posts);
+  this.locals.set('hidden_posts', hidden_posts);
+  this.locals.set('posts', normal_posts);
+});
+
+hexo.extend.filter.register('after_init', function () {
+
+  const original = {};
+  for (const name in hexo.extend.generator.list()) {
+    original[name] = hexo.extend.generator.get(name);
+  }
+
+  hexo.extend.generator.register('post', async function (locals) {
+    const fg = original.post.bind(this);
+
+    const generated_public = await fg(locals);
+    const generated_hidden = await fg(Object.assign({}, locals, {
+      posts: locals.hidden_posts
+    }));
+
+    // Remove post.prev and post.next for hidden posts
+    generated_hidden.forEach(ele => {
+      ele.data.prev = ele.data.next = null;
+    });
+
+    return generated_public.concat(generated_hidden);
+  });
+
+  // Then we hack into other generators if necessary
+  public_generators.filter(
+    name => Object.keys(original).includes(name)
+  ).forEach(name => {
+    // Overwrite original generator
+    hexo.extend.generator.register(name, function (locals) {
+      const fg = original[name].bind(this);
+
+      return fg(Object.assign({}, locals, {
+        posts: new locals.posts.constructor(
+          locals.posts.data.concat(locals.hidden_posts.data)
+        )
+      }));
+    });
+  });
+});

scripts/highlight.js

@@ -0,0 +1,57 @@
+'use strict';
+hexo.extend.filter.register('after_post_render', data => {
+
+  const cheerio = require('cheerio');
+
+  const $ = cheerio.load(data.content, {
+    decodeEntities: false
+  });
+  var theme = hexo.theme.config;
+
+  if (theme.highlight_shrink === 'none' && !theme.highlight_lang && !theme.highlight_copy) {
+    return;
+  }
+
+  $('figure.highlight').wrap('<div class="code-area-wrap"></div>')
+  var $highlight_layout = $('<div class="highlight-tools"></div>')
+
+  $('figure').before($highlight_layout)
+
+  if (theme.highlight_shrink == true) {
+    var $code_expand = $('<i class="fa fa-angle-down code-expand code-closed" aria-hidden="true"></i>')
+    $('.highlight-tools').append($code_expand)
+  } else if (theme.highlight_shrink === false) {
+    var $code_expand = $('<i class="fa fa-angle-down code-expand" aria-hidden="true"></i>')
+    $('.highlight-tools').append($code_expand)
+  }
+
+  if (theme.highlight_lang) {
+    var $highlight_lang = $('<div class="code_lang"></div>')
+    $('.highlight-tools').append($highlight_lang)
+    var lang_name_index;
+    var lang_name;
+    $('figure').each(function () {
+      lang_name_index = lang_name = $(this).attr('class').split(' ')[1];
+      if (lang_name_index == 'js')
+        lang_name = 'Javascript'
+      if (lang_name_index == 'md')
+        lang_name = 'Markdown'
+      if (lang_name_index == 'plain')
+        lang_name = 'Code'
+      if (lang_name_index == 'py')
+        lang_name = 'Python'
+
+      $(this).prev().find(".code_lang").text(lang_name)
+
+    })
+  }
+
+  if (theme.highlight_copy) {
+    var $copyIcon = $('<i class="fa fa-clipboard" aria-hidden="true"></i>')
+    var $notice = $('<div class="copy-notice"></div>')
+    $('.highlight-tools').append($notice)
+    $('.highlight-tools').append($copyIcon)
+  }
+
+  data.content = $.html();
+}, 100);

scripts/list_archives.js

@@ -1,43 +1,34 @@
-'use strict';
+"use strict";
 
-hexo.extend.helper.register('list_archives', function (options = {}) {
+hexo.extend.helper.register("list_archives", function(options = {}) {
-
+  const { config } = this;
-  const {
-    config
-  } = this;
   const archiveDir = config.archive_dir;
-  const {
+  const { timezone } = config;
-    timezone
-  } = config;
   const lang = this.page.lang || this.page.language || config.language;
-  let {
+  let { format } = options;
-    format
+  const type = options.type || "monthly";
-  } = options;
+  const { style = "list", transform, separator = ", " } = options;
-  const type = options.type || 'monthly';
+  const showCount = Object.prototype.hasOwnProperty.call(options, "show_count")
-  const {
+    ? options.show_count
-    style = 'list', transform, separator = ', '
+    : true;
-  } = options;
-  const showCount = Object.prototype.hasOwnProperty.call(options, 'show_count') ? options.show_count : true;
-  const className = options.class || 'archive';
   const order = options.order || -1;
   const limit = 8;
-  let result = '';
+  let result = "";
 
-  var more_button
+  var more_button;
-  if (lang === 'zh-CN') {
+  if (lang === "zh-CN") {
-    more_button = '查看更多';
+    more_button = "查看更多";
-  } else if (lang === 'zh-TW') {
+  } else if (lang === "zh-TW") {
-    more_button = '查看更多';
+    more_button = "查看更多";
   } else {
-    more_button = 'More';
+    more_button = "More";
   }
 
-
   if (!format) {
-    format = type === 'monthly' ? 'MMMM YYYY' : 'YYYY';
+    format = type === "monthly" ? "MMMM YYYY" : "YYYY";
   }
 
-  const posts = this.site.posts.sort('date', order);
+  const posts = this.site.posts.sort("date", order);
   if (!posts.length) return result;
 
   const data = [];
@@ -70,64 +61,43 @@ hexo.extend.helper.register('list_archives', function (options = {}) {
   const link = item => {
     let url = `${archiveDir}/${item.year}/`;
 
-    if (type === 'monthly') {
+    if (type === "monthly") {
-      if (item.month < 10) url += '0';
+      if (item.month < 10) url += "0";
       url += `${item.month}/`;
     }
 
     return this.url_for(url);
   };
 
-  if (style === 'list') {
+  result += `<ul class="archive-list">`;
-    result += `<ul class="${className}-list">`;
 
   for (let i = 0, len = data.length; i < Math.min(len, limit); i++) {
     const item = data[i];
 
-      result += `<li class="${className}-list-item">`;
+    result += `<li class="archive-list-item">`;
 
-      result += `<a class="${className}-list-link" href="${link(item)}">`;
+    result += `<a class="archive-list-link" href="${link(item)}">`;
+    result += `<span class="archive-list-date">`;
     result += transform ? transform(item.name) : item.name;
-
+    result += `</span>`;
 
     if (showCount) {
-        result += `<span class="${className}-list-count">${item.count}</span>`;
+      result += `<span class="archive-list-count">${item.count}</span>`;
     }
-      result += '</a>';
+    result += "</a>";
-      result += '</li>';
+    result += "</li>";
-
   }
 
   if (data.length > limit) {
-      result += `<li class="${className}-list-item">`;
+    result += `<li class="archive-list-item">`;
-      result += `<a class="${className}-list-link is_center" href="` + '/' + `${archiveDir}" >`;
+    result +=
+      `<a class="archive-list-link-more" href="` +
+      "/" +
+      `${archiveDir}" >`;
     result += more_button;
-      result += '</a>';
+    result += "</a>";
-      result += '</li>';
+    result += "</li>";
   }
-    result += '</ul>';
+  result += "</ul>";
-  } else {
-    for (let i = 0, len = data.length; i < Math.min(len, limit); i++) {
-      const item = data[i];
-
-      if (i) result += separator;
-
-      result += `<a class="${className}-link" href="${link(item)}">`;
-      result += transform ? transform(item.name) : item.name;
-
-      if (showCount) {
-        result += `<span class="${className}-count">${item.count}</span>`;
-      }
-
-      result += '</a>';
-    }
-    if (data.length > limit) {
-      result += `<a class="${className}-link" is_center" href="${archiveDir}" >`;
-      result += more_button;
-      result += '</a>';
-    }
-
-  }
-
   return result;
-})
+});

scripts/photo.js

@@ -0,0 +1,53 @@
+'use strict'
+hexo.extend.filter.register('after_post_render', data => {
+  const theme = hexo.theme.config;
+
+  const cheerio = require('cheerio');
+
+  const $ = cheerio.load(data.content, { decodeEntities: false });
+  
+  const images = $('img').not($('a>img'));
+
+  if (theme.fancybox.enable) {
+    images.each((i, o) => {
+      var lazyload_src = $(o).attr('src') ? $(o).attr('src') : $(o).attr("data-src")
+      var alt = $(o).attr('alt')
+      if (alt !== undefined) {
+        $(o).attr('title', alt)
+      }
+      var $a = $(
+        '<a href="' +
+        lazyload_src +
+        '" data-fancybox="group" data-caption="' +
+        $(o).attr('alt') +
+        '" class="fancybox"></a>'
+      )
+      $(o).wrap($a)    
+    });
+
+  }
+  if (theme.medium_zoom.enable) {
+    images.each((i, o) => {
+      $(o).addClass('mediumZoom')
+    })
+   
+    var imgList = $(".justified-gallery img")  
+    if (imgList.length) {
+      imgList.each((i, o) => {
+        var $a = $('<div></div>')
+        $(o).wrap($a)
+      })
+    }  
+  }
+
+  if (!theme.medium_zoom.enable && !theme.fancybox.enable) {
+    var imgList = $(".justified-gallery > p >img")  
+    if (imgList.length) {
+      imgList.each((i, o) => {
+        $(o).wrap('<div></div>')
+      })
+    }  
+  }
+
+  data.content = $.html();
+}, 100);

scripts/post-lazyload.js

@@ -1,17 +1,23 @@
 'use strict';
+const url_for = require('hexo-util').url_for.bind(hexo);
+
 hexo.extend.filter.register('after_post_render', data => {
   var theme = hexo.theme.config;
+  var bg = theme.lodding_bg.post;
   if (!theme.lazyload.enable) return;
 
   const cheerio = require('cheerio');
 
   const $ = cheerio.load(data.content, {decodeEntities: false});
-  const images = $('img');
+  const images = $('img').not($('.justified-gallery img'));
   if (!images.length) return;
 
   images.each((i, o) => {
     let src = $(o).attr('src');
     $(o).attr('data-src', src).removeAttr('src');
+    if (bg){
+    $(o).attr('src',url_for(bg))
+    }
     $(o).addClass('lazyload');
   });
 

scripts/related_post.js

@@ -1,3 +1,10 @@
+const moment = require('moment-timezone');
+const {
+  isMoment
+} = moment;
+
+
+
 hexo.extend.helper.register('related_posts', function (currentPost, allPosts) {
   var relatedPosts = [];
   currentPost.tags.forEach(function (tag) {
@@ -7,7 +14,9 @@ hexo.extend.helper.register('related_posts', function (currentPost, allPosts) {
           title: post.title,
           path: post.path,
           cover: post.cover,
-          weight: 1
+          weight: 1,
+          updated: post.updated,
+          created: post.created
         };
         var index = findItem(relatedPosts, 'path', post.path);
         if (index != -1) {
@@ -20,10 +29,16 @@ hexo.extend.helper.register('related_posts', function (currentPost, allPosts) {
       };
     });
   });
-  if (relatedPosts.length == 0) { return '' };
+  if (relatedPosts.length == 0) {
+    return ''
+  };
   var result = "";
-  var limit_num = hexo.theme.config.related_post.limit || 6
+  const hexoConfig = hexo.theme.config.rootConfig;
-  var lang = hexo.theme.config.rootConfig.language;
+  const config = hexo.theme.config;
+
+  var limit_num = config.related_post.limit || 6
+  var lang = hexoConfig.language;
+  var date_type = config.related_post.date_type || 'created'
   var headline_lang;
   if (lang === 'zh-CN') {
     headline_lang = '相关推荐';
@@ -34,8 +49,8 @@ hexo.extend.helper.register('related_posts', function (currentPost, allPosts) {
   }
 
   relatedPosts = relatedPosts.sort(compare('weight'));
-  var lazy_src = hexo.theme.config.lazyload.enable ? lazy_src = 'data-src' : lazy_src = 'src'
+  var lazy_src = config.lazyload.enable ? lazy_src = 'data-src' : lazy_src = 'src'
-  var lazy_class = hexo.theme.config.lazyload.enable ? lazy_class  = 'lazyload' : lazy_class  = ''
+  var lazy_class = config.lazyload.enable ? lazy_class = 'lazyload' : lazy_class = ''
 
   if (relatedPosts.length > 0) {
     result += '<div class="relatedPosts">'
@@ -46,10 +61,15 @@ hexo.extend.helper.register('related_posts', function (currentPost, allPosts) {
 
       var cover = relatedPosts[i].cover
 
-    result += '<div class="relatedPosts_item"><a href="' + hexo.theme.config.rootConfig.root + relatedPosts[i].path + '" title="' + relatedPosts[i].title + '">';
+      result += '<div class="relatedPosts_item"><a href="' + hexoConfig.root + relatedPosts[i].path + '" title="' + relatedPosts[i].title + '">';
       result += '<img class="relatedPosts_cover ' + lazy_class + '"' + lazy_src + '="' + cover + '">';
+      if (date_type == 'created') {
+        result += '<div class="relatedPosts_main is-center"><div class="relatedPosts_date"><i class="fa fa-calendar fa-fw" aria-hidden="true"></i>' + ' ' + dateHelper(relatedPosts[i].created) + '</div>'
+      } else {
+        result += '<div class="relatedPosts_main"><div class="relatedPosts_date"><i class="fa fa-history fa-fw" aria-hidden="true"></i>' + ' ' + dateHelper(relatedPosts[i].updated) + '</div>'
+      }
       result += '<div class="relatedPosts_title">' + relatedPosts[i].title + '</div>';
-    result += '</a></div>'
+      result += '</div></a></div>'
     };
 
     result += '</div><div class="clear_both"></div></div>'
@@ -60,6 +80,7 @@ hexo.extend.helper.register('related_posts', function (currentPost, allPosts) {
 hexo.extend.helper.register('echo', function (path) {
   return path;
 });
+
 function isTagRelated(tagName, TBDtags) {
   var result = false;
   TBDtags.forEach(function (tag) {
@@ -69,6 +90,7 @@ function isTagRelated (tagName, TBDtags) {
   })
   return result;
 }
+
 function findItem(arrayToSearch, attr, val) {
   for (var i = 0; i < arrayToSearch.length; i++) {
     if (arrayToSearch[i][attr] == val) {
@@ -77,6 +99,7 @@ function findItem (arrayToSearch, attr, val) {
   };
   return -1;
 }
+
 function compare(attr) {
   return function (a, b) {
     var val1 = a[attr];
@@ -84,3 +107,15 @@ function compare (attr) {
     return val2 - val1;
   }
 }
+
+function dateHelper(date) {
+  const moment = getMoment(date, hexo.theme.config.rootConfig.language);
+  return moment.format(hexo.theme.config.rootConfig.date_format);
+}
+
+function getMoment(date, lang) {
+  if (date == null) date = moment();
+  if (!isMoment(date)) date = moment(isDate(date) ? date : new Date(date));
+  if (lang) date = date.locale(lang);
+  return date;
+}

source/css/_global/index.styl

@@ -4,10 +4,8 @@ html
 
 body
   position: relative
-  display: flex
-  flex-direction: column
   min-height: 100%
-  background: #fff
+  background: $white
   color: $font-black
   font-size: $font-size
   font-family: $font-family
@@ -20,11 +18,11 @@ body
     -ms-user-select: none
 
 #body-wrap
-  position relative
+  position: relative
-  flex: 1 auto
   display: flex
+  flex: 1 auto
   flex-direction: column
-  transition: all .3s
+  transition: all .5s
 
 *::-webkit-scrollbar
   width: 8px
@@ -36,18 +34,16 @@ body
 *::-webkit-scrollbar-track
   background-color: transparent
 
-
 #web_bg
-  background: $web-bg
-  height: 100%
-  width: 100%
-  background-size: cover
   position: fixed
   z-index: -999
+  width: 100%
+  height: 100%
+  background: $web-bg
   background-attachment: local
-  background-repeat: no-repeat
   background-position: center
-  
+  background-size: cover
+  background-repeat: no-repeat
 
 h1,
 h2,
@@ -56,7 +52,7 @@ h4,
 h5,
 h6
   position: relative
-  margin: 0.2rem 0
+  margin: 1rem 0 .7rem
   color: lighten($font-color, 15%)
   font-weight: bold
 
@@ -69,20 +65,15 @@ h6
 *
   box-sizing: border-box
 
-#content-inner
-  .img-alt
-    text-decoration: none
-    color: $a-link-color
-
 #toggle-sidebar
   position: fixed
   bottom: $sidebar-icon-top
   left: $sidebar-icon-left
   z-index: 100
   font-size: $sidebar-icon-size
-  cursor: pointer
-  transition: all 0.2s
   opacity: 0
+  cursor: pointer
+  transition: all .2s
 
 hr
   position: relative
@@ -106,9 +97,12 @@ hr
     font-size: 20px
     transition: all 1s ease-in-out
 
+iframe
+  margin: 0 0 1rem
+
 // collapse/expand beautify
 details
-  padding: 0.3rem
+  padding: .3rem
   border: 2px solid darken($light-grey, 10%)
 
   summary
@@ -117,13 +111,14 @@ details
 // set <caption> of <figure> to center-align
 // use class="not-code" to avoid conflicts because code also use <figure> tag
 .not-code
-  margin: 0.5em
+  margin: .5em
-  padding: 0.5em
+  padding: .5em
   border: thin silver solid
   text-align: center
 
 table
   overflow: auto
+  margin: 0 0 1rem
   width: 100%
   border-spacing: 0
   border-collapse: collapse
@@ -133,7 +128,7 @@ table
 
   th,
   td
-    padding: 0.3rem 0.6rem
+    padding: .3rem .6rem
     border: 1px solid darken($light-grey, 10%)
     vertical-align: top
 
@@ -141,7 +136,7 @@ table
   background: $selection
   color: $pale-grey
 
-
+// 字體
 .full_page #site-title,
 .full_page #site-sub-title,
 #site-name,
@@ -155,7 +150,7 @@ table
 .is_left
   text-align: left
 
-.is_center
+.is-center
   text-align: center
 
 .is_visible
@@ -173,50 +168,61 @@ table
 .pull_right
   float: right
 
+// button hover
+.button--primary
+  color: $ruby
+
+.button--animated
+  transition-duration: 1s
+  transition-property: color
+
+  &:before
+    position: absolute
+    top: 0
+    right: 0
+    bottom: 0
+    left: 0
+    z-index: -1
+    background: $ruby
+    content: ''
+    transition-timing-function: ease-out
+    transition-duration: .5s
+    transition-property: transform
+    transform: scaleX(0)
+    transform-origin: 0 50%
+
+  &:hover
+    &:before
+      transition-timing-function: cubic-bezier(.45, 1.64, .47, .66)
+      transform: scaleX(1)
+
+// third-party
 .fireworks
   position: fixed
   z-index: -1
+  z-index: 99999
   pointer-events: none
 
-
+img[src=''],
-.fireworks
+img:not([src])
-  z-index: 99999
-
-@media screen and (max-width: $bg)
-  i#toggle-sidebar,
-  #sidebar
-    display: none
-
-  body
-    padding-left: 0 !important
-
-
-// 懶加載
-.lazyload,
-.lazyloading 
-	opacity: 0
-
-.lazyloaded 
-	opacity: 1
-	transition: opacity 0.3s
-
-img[src=""],img:not([src])
   opacity: 0
 
 .justified-gallery
   margin: 1rem 0
 
   img
-    opacity 0
+    opacity: 0
+
   .fancybox
     width: auto
     text-align: inherit
+
   .img-alt
     display: none
 
 .medium-zoom-image--opened
-  margin: 0 !important
   z-index: 99999 !important
+  margin: 0 !important
 
 .medium-zoom-overlay
   z-index: 99999 !important
@@ -224,19 +230,18 @@ img[src=""],img:not([src])
 // hexo tag video
 .video-container
   position: relative
+  overflow: hidden
+  margin-bottom: .8rem
   padding-top: 56.25%
   height: 0
-  overflow: hidden
-  margin-bottom: 0.8rem
 
   iframe
     position: absolute
     top: 0
     left: 0
+    margin-top: 0
     width: 100%
     height: 100%
-    margin-top: 0
-
 
 .layout_page,
 .layout_post,
@@ -255,37 +260,37 @@ canvas,
   animation: to_show 4s
 
 .card-announcement-animation
-  animation: announ_animation .8s linear infinite
   color: #FF0000
+  animation: announ_animation .8s linear infinite
 
 .scroll-down-effects
   animation: scroll-down-effect 1.5s infinite
 
-if hexo-config("avatar_effect") == true
+if hexo-config('avatar_effect') == true
-  .avatar_img
+  .avatar-img
     animation: avatar_turn_around 2s linear infinite
 
 .reward-main
   animation: donate_effcet .3s .1s ease both
 
-#rightside-config-hide
-  animation: rightside_in_animate .3s
-
 @keyframes scroll-down-effect
   0%
-    opacity: 0.4
     top: 0
+    opacity: .4
+
   50%
-    opacity: 1
     top: -16px
+    opacity: 1
+
   100%
-    opacity: 0.4
     top: 0
+    opacity: .4
 
 @keyframes header
   0%
     opacity: 0
     transform: translateY(-50px)
+
   100%
     opacity: 1
     transform: translateY(0)
@@ -293,6 +298,7 @@ if hexo-config("avatar_effect") == true
 @keyframes headerNoOpacity
   0%
     transform: translateY(-50px)
+
   100%
     transform: translateY(0)
 
@@ -300,6 +306,7 @@ if hexo-config("avatar_effect") == true
   0%
     opacity: 0
     transform: translateY(50px)
+
   100%
     opacity: 1
     transform: translateY(0)
@@ -307,7 +314,8 @@ if hexo-config("avatar_effect") == true
 @keyframes titlescale
   0%
     opacity: 0
-    transform: scale(0.7)
+    transform: scale(.7)
+
   100%
     opacity: 1
     transform: scale(1)
@@ -316,19 +324,22 @@ if hexo-config("avatar_effect") == true
   0%
     opacity: 1
     transform: scale(1)
+
   100%
     opacity: 0
-    transform: scale(0.7)
+    transform: scale(.7)
 
 @keyframes to_show
   0%
     opacity: 0
+
   100%
     opacity: 1
 
 @keyframes avatar_turn_around
   from
-    transform: rotate(0deg)
+    transform: rotate(0)
+
   to
     transform: rotate(360deg)
 
@@ -336,6 +347,7 @@ if hexo-config("avatar_effect") == true
   0%
     opacity: 0
     transform: translateY(10px)
+
   100%
     opacity: 1
     transform: translateY(0)
@@ -344,31 +356,23 @@ if hexo-config("avatar_effect") == true
   0%
     opacity: 0
     transform: translateY(-20px)
+
   100%
     opacity: 1
     transform: translateY(0)
 
 @keyframes announ_animation
-  0%,to
+  0%,
+  to
     transform: scale(1)
+
   50%
     transform: scale(1.2)
 
-@keyframes rightside_in_animate
+@media screen and (max-width: $bg)
-  0%    
+  i#toggle-sidebar,
-    transform: translateX(28px)
+  #sidebar
-  100%
+    display: none
-    transform: translateX(0)
-
-@keyframes rightside_out_animate
-  0%    
-    transform: translateX(0)
-  100%
-    transform: translateX(28px)
-
-@keyframes right_to_left
-  0%    
-    transform: translateX(100px)
-  100%
-    transform: translateX(0)
 
+  body
+    padding-left: 0 !important

source/css/_highlight/highlight.styl

@@ -1,14 +1,13 @@
 // https://github.com/equinusocio/vsc-material-theme
-@require "theme"
+@require 'theme'
-@require "diff"
+@require 'diff'
 
-wordWrap = !hexo-config("rootConfig.highlight.line_number") && hexo-config("code_word_wrap")
+wordWrap = !hexo-config('rootConfig.highlight.line_number') && hexo-config('code_word_wrap')
 
 $code-block
   overflow: auto
-  margin: 1rem 0
+  margin: 0 0 1rem
   padding: 0
-  padding-top: 1.4rem
   background: $highlight-background
   color: $highlight-foreground
   font-size: $code-font-size
@@ -18,26 +17,34 @@ $code-block
     counter-reset: line
     white-space: pre-wrap
 
+.code-area-wrap
+  position: relative
+  margin: 0 0 1rem
+
 figure.highlight
   position: relative
 
 blockquote
-  margin: 0
+  margin: 0 0 1rem
-  padding: 0.1rem 0.8rem
+  padding: .1rem .8rem
-  border-left: 0.2rem solid $blockquote-padding-color
+  border-left: .2rem solid $blockquote-padding-color
-  color: $blockquote-color
   background-color: lighten($blockquote-padding-color, 33)
+  color: $blockquote-color
+
+  a
+    word-break: break-all
 
   p
     margin: 0 !important
-    padding: 0.5rem 0
+    padding: .5rem 0
 
   footer
-    padding: 0 0 0.5rem 0
+    padding: 0 0 .5rem
+
     cite
       &:before
-        content: "—"
         padding: 0 .3em
+        content: '—'
 
 .article-container
   pre,
@@ -45,7 +52,7 @@ blockquote
     font-family: $code-font !important
 
   code
-    padding: 0.1rem 0.2rem
+    padding: .1rem .2rem
     background: $code-background
     color: $code-foreground
     word-wrap: break-word
@@ -53,6 +60,7 @@ blockquote
 
   pre
     @extend $code-block
+    padding: 10px 20px
 
     code
       padding: 0
@@ -60,21 +68,14 @@ blockquote
       color: $highlight-foreground
       text-shadow: none
 
-  figure.highlight
-    &:after
-      position: absolute
-      top: 0
-      z-index: 0
-      min-width: 100%
-      height: 1.4rem
-      background: darken($highlight-background, 5)
-      content: ""
-
   .highlight
     @extend $code-block
     position: relative
     border-radius: 1px
 
+    if hexo-config('highlight_shrink') == true
+      display: none
+
     pre
       margin: 0
       padding: 8px 0
@@ -88,31 +89,22 @@ blockquote
       if wordWrap
         &:before
           display: inline-block
-          padding: 0 0.3rem 0 0
+          padding: 0 .3rem 0 0
           min-width: 1.6rem
           color: $highlight-gutter.color
           content: counter(line)
           counter-increment: line
           text-align: left
 
+      &.marked
+        background-color: $highlight-selection
+
     table
       position: relative
       margin: 0
       width: auto
       border: none
 
-      if hexo-config('highlight_shrink') == true
-        display: none
-
-      &:after
-        position: absolute
-        top: -1.4rem
-        z-index: 0
-        width: 100%
-        height: 1.4rem
-        background: darken($highlight-background, 5)
-        content: ""
-
     td
       padding: 0
       border: none
@@ -122,7 +114,7 @@ blockquote
       position: absolute
       z-index: 1
       margin-bottom: 1em
-      padding: 0.2em 0 0.2em 0.7rem
+      padding: .2rem 0 .2rem .7rem
       width: 100%
       height: 1.4em
       color: $highlight-foreground
@@ -145,7 +137,7 @@ blockquote
           border-bottom-color: $highlight-foreground
 
       &+table
-        margin-top: 1em
+        margin-top: 1.1rem
 
         &:before
           margin-top: -2.1rem
@@ -154,15 +146,15 @@ blockquote
           top: -2.1rem
 
     .gutter pre
-      padding-right: 0.5rem
+      padding-right: .5rem
-      padding-left: 0.5rem
+      padding-left: .5rem
       background-color: $highlight-gutter.bg-color
       color: $highlight-gutter.color
       text-align: right
 
     .code pre
-      padding-right: 0.5rem
+      padding-right: .5rem
-      padding-left: 0.5rem
+      padding-left: .5rem
       width: 100%
       background-color: $highlight-background
 
@@ -290,3 +282,17 @@ blockquote
       &::selection
         background: $highlight-selection
         color: $highlight-foreground
+
+.highlight-tools
+  position: relative
+  width: 100%
+  height: 1.4rem
+  background: darken($highlight-background, 5)
+  color: $highlight-foreground
+  font-size: 14px
+
+  & + figure
+    margin: 0 !important
+
+.highlight-close
+  height: 0 !important

source/css/_highlight/theme.styl

@@ -1,6 +1,6 @@
-$highlight_theme = hexo-config("highlight_theme")
+$highlight_theme = hexo-config('highlight_theme')
 
-if $highlight_theme == "default"
+if $highlight_theme == 'default'
   $highlight-background = #263238
   $highlight-current-line = #efefef
   $highlight-selection = #80CBC420
@@ -18,7 +18,7 @@ if $highlight_theme == "default"
     bg-color: $highlight-background
   }
 
-if $highlight_theme == "darker"
+if $highlight_theme == 'darker'
   $highlight-background = #212121
   $highlight-current-line = #282a2e
   $highlight-selection = #61616150
@@ -36,7 +36,7 @@ if $highlight_theme == "darker"
     bg-color: $highlight-background
   }
 
-if $highlight_theme == "pale night"
+if $highlight_theme == 'pale night'
   $highlight-background = #292D3E
   $highlight-current-line = #393939
   $highlight-selection = #717CB450
@@ -54,7 +54,7 @@ if $highlight_theme == "pale night"
     bg-color: $highlight-background
   }
 
-if $highlight_theme == "ocean"
+if $highlight_theme == 'ocean'
   $highlight-background = #0F111A
   $highlight-current-line = #000000
   $highlight-selection = #717CB450
@@ -72,7 +72,7 @@ if $highlight_theme == "ocean"
     bg-color: $highlight-background
   }
 
-if $highlight_theme == "light"
+if $highlight_theme == 'light'
   $highlight-background = #F6F8FA
   $highlight-current-line = #00346e
   $highlight-selection = #80CBC440

source/css/_layout/aside.styl

@@ -1,26 +1,25 @@
 #aside_content
   width: 25%
 
-  .card_widget
+  .card-widget
-    -webkit-box-shadow: 0 4px 8px 6px rgba(7,17,27,.06)
-    box-shadow: 0 4px 8px 6px rgba(7,17,27,.06)
-    border-radius: 8px
-    transition: all .3s
-    background: #fff
-    margin-top: 20px
     overflow: hidden
+    margin-top: 20px
+    border-radius: 8px
+    background: $white
+    box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
+    transition: all .3s
 
     &:hover
-      box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
+      box-shadow: 0 4px 12px 12px rgba(7, 17, 27, .15)
 
-  .card-author
+  .card-info
     img
-      height: 120px
-      width: 120px
-      padding: 0
       display: inline-block
-      vertical-align: top
+      padding: 5px
+      width: 120px
+      height: 120px
       border-radius: 70px
+      vertical-align: top
       transition: all .3s
 
       &:hover
@@ -28,248 +27,194 @@
 
     .author-info
       &__name
-        font-size: 1.1rem
-        display: block
-        margin: -0.1rem auto
         font-weight: 500
+        font-size: 1.1rem
 
       &__description
-        display: block
+        margin-top: -.3rem
-        margin: -0.1rem auto
+
+    .card-info-data
+      display: flex
+      padding: .7rem 0
+
+      & > .card-info-data-item
+        flex: 1 1
+        min-width: 0
 
-    .data_link 
         a
           text-decoration: none
 
-      .length_num 
-        font-size: 1rem
-        color: #000
-
           .headline
             display: block
-        font-size: 0.7rem
+            overflow: hidden
-        margin-bottom: -21px
-        text-transform: uppercase
             color: $font-black
+            text-transform: uppercase
+            text-overflow: ellipsis
+            white-space: nowrap
+            font-size: .7rem
 
-    #aside-social-icons
+          .length_num
-      margin: 0.5rem auto -0.7rem
+            color: $dark-black
-      width: 15rem
+            font-size: 1rem
-      text-align: center
+
+    .card-info-social-icons
+      margin: .3rem 0 -.3rem
 
       .social-icon
-        margin: 0 0.5rem
+        margin: 0 .5rem
         color: $font-black
         font-size: 1rem
         cursor: pointer
 
       i
-        transition: all 0.3s
+        transition: all .3s
 
         &:hover
           transform: rotate(540deg)
 
     #bookmark-it
-      margin-top: .2rem
-      height: 1.6rem
-      background-color: $light-blue
-      color: #fff
-      text-decoration: none
-      line-height: 1.6rem
       position: relative
-      text-transform: uppercase
       z-index: 1
+      display: block
+      background-color: $light-blue
+      color: $white
+      text-decoration: none
+      text-transform: uppercase
+      line-height: 1.6rem
 
       span
-        padding-left: 10px
+        padding-left: .5rem
-
-    .bookmark--primary 
-      color: $ruby
-    
-    .bookmark--animated 
-      transition-property: color
-      transition-duration: 1s
-
-      &:before
-        content: ""
-        position: absolute
-        top: 0
-        left: 0
-        right: 0
-        bottom: 0
-        background: $ruby
-        transform: scaleX(0)
-        transform-origin: 0 50%
-        transition-property: transform
-        transition-duration: 0.5s
-        transition-timing-function: ease-out
-        z-index: -1
-      
-      &:hover 
-        color: white
-
-        &:before 
-          transform: scaleX(1)
-          transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66)
 
   .card-content
     padding: 1rem 1.2rem
 
-  .post_data
+  .item-headline
-    display: flex
+    font-size: .8rem
-
-  .data-item
-    flex-grow: 1
-    align-items: center
-    flex-basis: auto
-    justify-content: center
-
-  .item_headline 
-    font-size: 0.8rem
 
     span
-      margin-left: 10px
+      margin-left: .5rem
 
   .card-tag-cloud
     a
       text-decoration: none
-      position: relative
-      padding-bottom: 0.3rem
       word-break: keep-all
 
       &:hover
         color: $light-blue !important
 
-      // &::after
+  .card-recent-post
-      //   width: 100%
+    .aside-recent-item
+      margin: 10px 0 -15px
 
-  .aside_recent_item 
+      & > .aside-recent-post
-      margin: 10px 0 -15px 0
-    
-    .aside_recent_post 
-      a
-        text-decoration: none
-        color: $font-black
-
-    .aside_recent_post
         margin-bottom: 10px
-      width: 100%
 
-    .aside_post_cover
+        & > a
-      height: 66px
+          color: $font-black
-      width: 66px
+          text-decoration: none
+
+          .aside-post-cover
             float: left
             overflow: hidden
+            width: 66px
+            height: 66px
 
-    .aside_post_bg
+            .aside-post-bg
-      object-fit: cover
+              padding: 0
+              max-width: 100%
               width: 100%
               height: 100%
-      max-width: 100%
-      padding: 0
               transition: all .6s
+              object-fit: cover
 
               &:hover
                 box-shadow: none
                 transform: scale(1.1)
 
-    #aside_title    
+          .aside-post-title
-      .aside_post_meta
+            .aside-post_meta
-        font-size: 0.6rem
               padding-left: 10px
-        color: #99a9bf
+              color: $theme-link-color
+              font-size: .6rem
 
-      .aside_post_title
+            .aside-post_title
-        line-height: 1rem
               display: -webkit-box
+              overflow: hidden
+              padding-left: 10px
+              height: 40px
+              line-height: 1rem
               -webkit-line-clamp: 2
               -webkit-box-orient: vertical
-        overflow: hidden
-        height: 40px
-        padding-left: 10px
 
               &:hover
                 color: $light-blue !important
 
-  .aside_category_item,.archive-list
+  .card-archives ul.archive-list,
+  .card-categories ul.aside-category-item
+    margin: 0
+    padding: .2rem 0 0
     list-style: none
-    margin-bottom: -3px
-    margin-block-start: 0.2rem
 
-  .aside_category_item.child
+  .card-archives ul.archive-list > .archive-list-item,
-    margin-bottom: -3px
+  .card-categories ul.aside-category-item > .aside-category-list
-    margin-block-start: 0rem
+    padding: .2rem 1rem
-
+    cursor: pointer
-    .aside_category_list
+    transition: all .3s
-      margin-left: -50px
-
-  .aside_category_list,.archive-list-item
-    margin-left: -40px
 
     &:hover
+      padding: .2rem .85rem
       background-color: $light-blue
       color: #363636
+
     a
-      text-decoration: none
+      display: flex
       color: $font-black
-      padding: 0.2rem 1rem
+      text-decoration: none
-      transition: .2s
 
-      &:hover
+      span
-        padding: 0.2rem 0.85rem
+        &:first-child
-  
+          flex: auto
-  .aside_category_list_name,.archive-list-link
-    white-space: nowrap
           overflow: hidden
           text-overflow: ellipsis
-    flex: auto
+          white-space: nowrap
 
-  .aside_category_list_link,.archive-list-item
+  .card-categories
-    display: flex
+    .aside-category-item
-  
+      &.child
-  .aside_category_list_length,.archive-list-count
+        padding: 0 0 0 1.2rem
-    float: right 
 
   .card-archives
-    margin-bottom: 20px
+    .archive-list-link-more
+      justify-content: center
 
   .card-webinfo
     .webinfo
-      padding: 0.2rem 1rem
+      padding: .2rem 1rem
 
-      .webinfo_item
+      .webinfo-item
         display: block
         padding: 4px 0 0
 
-        .webinfo_article_name,
+        div
-        .webinfo_runtime_name,
+          &:first-child
-        .webinfo_site_uv_name,
-        .webinfo_site_name
             display: inline-block
 
-        .webinfo_article_count,
+          &:last-child
-        .webinfo_runtime_count,
-        .webinfo_site_uv_count,
-        .webinfo_site_pv_count
-          float: right
             display: inline-block
+            float: right
 
 @media screen and (max-width: 900px)
   .layout_page
     flex-direction: column
 
-  #recent-posts,#aside_content
+  #recent-posts,
+  #aside_content
     width: 100% !important
 
-  .card_widget
-    margin-left: 0 
-    margin-right: 0 
-
-
 @media screen and (min-width: 900px)
   #aside_content
-    .card_widget
+    .card-widget
-        if hexo-config("aside.position") == "right"
+      if hexo-config('aside.position') == 'right'
         margin-left: 15px
       else
         margin-right: 15px
@@ -278,4 +223,3 @@ if hexo-config('aside_mobile') == false
   @media screen and (max-width: $sm)
     #aside_content
       display: none
-

source/css/_layout/category.styl

@@ -1,8 +1,8 @@
 .category-content
   ol,
   ul
-    margin-top: 0.4rem
+    margin-top: .4rem
-    padding: 0 0 0 0.8rem
+    padding: 0 0 0 .8rem
     list-style: none
     counter-reset: li
 
@@ -11,12 +11,12 @@
 
     ol,
     ul
-      padding-left: 0.5rem
+      padding-left: .5rem
 
     li
       position: relative
-      margin: 0.3rem 0
+      margin: .3rem 0
-      padding: 0.1rem 0.5rem 0.1rem 1.5rem !important
+      padding: .1rem .5rem .1rem 1.5rem !important
 
       &:hover
         &:before
@@ -29,19 +29,19 @@
         background: $light-blue
         color: $white
         cursor: pointer
-        transition: all 0.3s ease-out
+        transition: all .3s ease-out
 
   ol
     li
       &:before
-        margin-top: 0.2rem
+        margin-top: .2rem
         width: w = 1.2rem
         height: h = w
-        border-radius: 0.5 * w
+        border-radius: .5 * w
         content: counter(li)
         counter-increment: li
         text-align: center
-        font-size: 0.6rem
+        font-size: .6rem
         line-height: h
 
   ul
@@ -51,13 +51,13 @@
           border-color: $ruby
 
       &:before
-        $w = 0.3rem
+        $w = .3rem
         top: 10px
-        margin-left: 0.45rem
+        margin-left: .45rem
         width: w = $w
         height: h = w
-        border: 0.5 * w solid $light-blue
+        border: .5 * w solid $light-blue
         border-radius: w
         background: $white
-        content: ""
+        content: ''
         line-height: h

source/css/_layout/comments.styl

@@ -2,31 +2,32 @@
   margin-top: 1rem
 
 .comment_headling
-  font-size: 20px
-  font-weight: 700
   margin-bottom: 10px
+  font-weight: 700
+  font-size: 20px
 
 // valine
 #vcomment
   font-size: inherit
 
   input
-    font-size: 0.65rem
+    font-size: .65rem
 
   button
-    font-size: .7rem
     padding: .3rem 1rem
+    border-color: #fff
     background-color: $light-blue
     color: #fff
-    border-color: #fff
+    font-size: .7rem
 
     &:hover
       background-color: darken($light-blue, 40)
 
   textarea
-    font-size: 0.7rem
+    font-size: .7rem
-    if hexo-config("valine.bg")
+
-      background: url(convert(hexo-config("valine.bg"))) 100% 100% no-repeat
+    if hexo-config('valine.bg')
+      background: url(convert(hexo-config('valine.bg'))) 100% 100% no-repeat
 
   .info
     display: none
@@ -36,8 +37,9 @@
 
     &:hover
       transform: rotate(540deg)
+
   .vcount
-    font-size: 0.775rem
+    font-size: .775rem
 
   .vnum
     font-size: 1.1rem
@@ -52,15 +54,15 @@
     font-size: 100%
 
   .vat
-    font-size: .7125rem
-    color: $cyan
-    border: 1px solid $cyan
     padding: 0 .8rem
+    border: 1px solid $cyan
     border-radius: 5px
+    color: $cyan
+    font-size: .7125rem
 
     &:hover
-      background-color: alpha($cyan,0.5)
+      background-color: alpha($cyan, .5)
 
-  code, pre
+  code,
+  pre
     font-size: 98%
-

source/css/_layout/flink.styl

@@ -1,122 +1,91 @@
 .flink
+  .post-cards
+    margin: -10px 10px 0
+
     .md-links
-    min-height: calc(100% - 120px - 5pc - 6em)
-    text-align: center
       overflow: auto
-    padding: 0
       margin: 0 auto
+      padding: 0
+      text-align: center
+
+      & > .md-links-item
+        position: relative
+        float: left
+        overflow: hidden
+        margin: 20px 7px
+        padding: 0
+        width: calc(100% / 3 - 14px)
+        height: 90px
+        border-radius: 8px
+        list-style: none
+        line-height: 17px
+        transform: perspective(1px) translateZ(0)
+
+        &:hover
+          img
+            transform: rotate(540deg)
+
+        &:before
+          position: absolute
+          top: 0
+          right: 0
+          bottom: 0
+          left: 0
+          z-index: -1
+          background: $light-blue
+          content: ''
+          transition-timing-function: ease-out
+          transition-duration: .3s
+          transition-property: transform
+          transform: scale(0)
+
+        &:hover:before,
+        &:focus:before,
+        &:active:before
+          transform: scale(1)
 
         a
           color: #333
           text-decoration: none
 
-    li 
-      width: calc(100%/3 - 14px)
-      float: left
-      list-style: none
-    
-  .md-links-item 
-    height: 90px
-    line-height: 17px
-    margin: 20px 7px
-    padding: 0px 0px
-    transition: box-shadow 0.25s
-    text-overflow: ellipsis
-    overflow: hidden
-    border-radius: 8px
-    transform: perspective(1px) translateZ(0)
-    box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-    position: relative
-    transition-property: color
-    transition-duration: 0.3s                      
-    
           img
             float: left
-      border-radius: 35px
             margin: 11px 10px
+            padding: 4px
             width: 70px
             height: 70px
-      border: 0px solid #eaeefb      
+            border-radius: 35px
             transition: all .3s
 
-    &:hover 
-      img
-        filter: unqoute("progid:DXImageTransform.Microsoft.BasicImage(rotation=3)")
-        transform: rotate(540deg)
-    
-    &:before
-      content: ""
-      position: absolute
-      z-index: -1
-      top: 0
-      left: 0
-      right: 0
-      bottom: 0
-      background: $light-blue !important
-      transform: scale(0)
-      transition-property: transform
-      transition-duration: 0.3s
-      transition-timing-function: ease-out
-
-  .md-links-item:hover, 
-  .md-links-item:focus, 
-  .md-links-item:active 
-    color: white
-
-  .md-links-item:hover:before, 
-  .md-links-item:focus:before, 
-  .md-links-item:active:before 
-      -webkit-transform: scale(1)
-      transform: scale(1)
-  
-  .md-links-item a:hover
-    cursor: pointer
-  
           .md-links-title
-      padding-top: 16px
-      padding-right: 10px
-      font-size: 20px
-      font-weight: bold
-      height:40px
             overflow: hidden
-      white-space: nowrap
+            padding: 16px 10px 0 0
+            height: 40px
             text-overflow: ellipsis
+            white-space: nowrap
+            font-weight: bold
+            font-size: 20px
 
-  .post-cards 
+          .md-links-des
-      margin-top: 5px
+            overflow: hidden
-      min-height: 100px
+            padding: 16px 10px
-      padding: 0 15px
+            height: 50px
-      border-radius: 15px
+            text-overflow: ellipsis
+            white-space: nowrap
+            font-size: 13px
 
   .comment-word
     font-weight: bold
     font-size: 1.7em
 
-  .md-links-des
-      padding: 16px 10px  
-      font-size:13px 
-      overflow: hidden
-      height:50px
-      white-space: nowrap
-      text-overflow: ellipsis
-
 @media screen and (max-width: 1100px)
   .flink
-    .post-cards 
-      position: relative
-      margin: -20px -16px 0
-      border-radius: 18px
-      padding: 16px
-    
     .md-links
-      li 
+      .md-links-item
-        width: calc(100%/2 - 14px)   
+        width: calc(50% - 14px) !important
 
 @media screen and (max-width: 600px)
   .flink
     .md-links
-      li 
+      .md-links-item
-        width: calc(100%/1 - 14px) 
+        width: calc(100% - 14px) !important
-
-
-

source/css/_layout/footer.styl

@@ -1,28 +1,26 @@
 #footer
+  position: relative
   margin-top: 1rem
   background: $light-blue
   background-attachment: local
   background-position: bottom
   background-size: cover
-  position: relative
 
   if hexo-config('footer_bg') != false
     &:before
       position: absolute
+      top: 0
+      right: 0
       bottom: 0
       left: 0
-      display: block
+      background-color: alpha($dark-black, .5)
       content: ''
-      width: 100%
-      height: 100%
-      background-color: alpha($dark-black,0.5)
-
 
 #footer-wrap
+  position: relative
   padding: 2rem 1rem
   color: $light-grey
   text-align: center
-  position: relative
 
   a
     color: $light-grey
@@ -33,9 +31,8 @@
       color: $white
 
   .footer-separator
-    margin: 0 0.2rem
+    margin: 0 .2rem
 
   .icp-icon
     padding: 0 4px
     vertical-align: text-bottom
-

source/css/_layout/head.styl

@@ -1,31 +1,30 @@
 #nav
   position: relative
   margin-bottom: 1rem
-
-  &.full_page
-    height: $index_top_img_height
-  
-  .nav_bg
   width: 100%
-    height: 100%
   background-color: $light-blue
+  background-attachment: local
   background-position: center
   background-size: cover
-    background-attachment: local
+
+  &.full_page
+    display: flex
+    align-items: center
+    height: $index_top_img_height
 
   &.not_index_bg
     height: 20rem
 
   #site-social-icons
+    display: none
     margin: 0 auto
     width: 15rem
     text-align: center
-    display: none
 
     .social-icon
-      margin: 0 0.5rem
+      margin: 0 .5rem
       color: $light-grey
-      text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.15)
+      text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .15)
       font-size: .9rem
       cursor: pointer
 
@@ -35,13 +34,12 @@
 #site-info
   position: absolute
   width: 100%
-  top: $index_site_info_top
 
 #site-title,
 #site-sub-title
   color: $light-grey
   text-align: center
-  text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.15)
+  text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .15)
   line-height: 1.5
 
 #site-title
@@ -49,7 +47,7 @@
   font-size: 1.3rem
 
 #site-sub-title
-  font-size: 0.8rem
+  font-size: .8rem
 
 #page_site-info
   position: absolute
@@ -60,16 +58,16 @@
   position: absolute
   bottom: 0
   width: 100%
-  cursor: pointer
   height: 42px
-  font-size: 30px
   text-align: center
+  font-size: 30px
+  cursor: pointer
 
   .scroll-down-effects
     position: absolute
     color: $white
 
-#header
+header
   position: relative
 
 #page-header
@@ -78,20 +76,23 @@
   z-index: 99
   padding: 10px 36px
   width: 100%
+  height: 58px
   border: none
   font-size: 18px
-  transition: all .3s
   opacity: 0
+  transition: all .5s
 
   .toggle-menu
     display: none
-    padding-top: 0.6rem
+    padding: .1rem 0 0 .3rem
-    color: $light-grey
-    cursor: pointer
 
     &:hover
       color: $white
 
+    &.is_visible
+      .site-page
+        font-size: inherit
+
   a
     color: $light-grey
     text-decoration: none
@@ -103,9 +104,9 @@
     position: fixed
     top: -60px
     z-index: 101
-    background: alpha($white, 0.8)
+    background: alpha($white, .8)
-    box-shadow: 0 5px 6px -5px alpha($grey, 0.6)
+    box-shadow: 0 5px 6px -5px alpha($grey, .6)
-    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out
+    transition: transform .2s ease-in-out, opacity .2s ease-in-out
 
     &.open-sidebar
       .site-page
@@ -121,25 +122,23 @@
         color: $light-blue
 
   &.visible
+    transition: all .5s
     transform: translate3d(0, 100%, 0)
-    transition: all .3s
 
     .menus_item_child
       background-color: $white !important
 
-      &:before
-        border-color: transparent transparent $white !important
-
   #site-name
-    text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.15)
+    text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .15)
     font-weight: bold
     cursor: pointer
 
   .menus_item
+    position: relative
     display: inline-block
-    padding: 0 0 0 0.7rem
+    padding: 0 0 0 .7rem
 
-    &:hover,&:focus
+    &:hover
       .menus_item_child
         display: block
 
@@ -148,60 +147,11 @@
 
     .menus-expand
       padding: 4px
-      transform: rotate(0deg)
       transition: all .3s
+      transform: rotate(0)
 
-    .menus_item_child
+    & > a
-      position: absolute
+      &:after
-      background-color: alpha($white, 0.8)
-      border-radius: 5px
-      box-shadow: 0 5px 20px -4px rgba(0,0,0,.5)
-      display: none
-      opacity: 1
-      animation: sub_menus .3s .1s ease both
-      padding: 0
-      margin-top: 10px
-
-      &:before
-        content: ""
-        position: absolute
-        top: -20px
-        left: 50%
-        margin-left: -10px
-        border-width: 10px
-        border-style: solid
-        border-color: transparent transparent alpha($white, 0.8)
-
-      li
-        list-style: none
-        text-align: center
-        padding: 0px 10px
-        
-        &:first-child
-          padding: 6px 10px 0
-
-        &:last-child
-          padding: 0px 10px 6px 
-
-        &:hover
-          a,i 
-            color: $theme-color
-        
-        a
-          color: #3b3a3a
-          text-shadow: none
-#search_button
-  padding: 0 0 0 0.7rem
-
-.site-page
-  position: relative
-  padding-bottom: 0.3rem
-  text-shadow: 0.05rem 0.05rem 0.1rem rgba(0, 0, 0, 0.3)
-  font-size: 0.7rem
-  cursor: pointer
-
-#page-header .menus_item > .site-page
-  &::after
         position: absolute
         bottom: 0
         left: 0
@@ -209,13 +159,53 @@
         width: 0
         height: 3px
         background-color: lighten($theme-color, 30%)
-    content: ""
+        content: ''
-    transition: all 0.3s ease-in-out
+        transition: all .3s ease-in-out
 
       &:hover
         &::after
           width: 100%
 
+    .menus_item_child
+      position: absolute
+      right: 0
+      display: none
+      margin-top: 8px
+      padding: 0
+      width: max-content
+      background-color: alpha($white, .8)
+      box-shadow: 0 5px 20px -4px rgba(0, 0, 0, .5)
+      animation: sub_menus .3s .1s ease both
+
+      &:before
+        position: absolute
+        top: -8px
+        left: 0
+        width: 100%
+        height: 20px
+        content: ''
+
+      li
+        padding: 1px 10px
+        list-style: none
+        text-align: center
+
+        &:hover
+          background: $theme-color
+
+        a
+          color: #3b3a3a
+          text-shadow: none
+
+  #search_button
+    padding: 0 0 0 .7rem
+
+  .site-page
+    position: relative
+    padding-bottom: .3rem
+    text-shadow: .05rem .05rem .1rem rgba(0, 0, 0, .3)
+    font-size: .7rem
+    cursor: pointer
 
 @media screen and (min-width: $sm)
   #site-title
@@ -224,10 +214,9 @@
   #site-sub-title
     font-size: 1.2rem
 
-
 @media screen and (max-width: $sm)
   #page-header
-    padding: 10px 0.8rem
+    padding: 10px .8rem
 
   #nav
     #site-social-icons
@@ -239,18 +228,6 @@
     #page_site-info
       top: 7rem
 
-  #top-container
-    height: 14rem
-
-    #post-info
-      bottom: 1rem
-      padding: 0 5%
-  
-    .mobile_hidden
-      display: none
-
-
-  
 @media screen and (max-width: $bg)
   #page-header
     &.fixed

source/css/_layout/mobile-sidebar.styl

@@ -2,43 +2,39 @@
   #menu_mask
     position: fixed
     top: 0
-    bottom: 0
-    width: 100%
-    height: 110vh
-    left: 0
     right: 0
-    background: alpha($black,0.7)
+    bottom: 0
+    left: 0
     z-index: 102
     display: none
+    background: alpha($dark-black, .7)
 
-  #mobile-sidebar-menus,#mobile-sidebar-toc
+  #mobile-sidebar-menus,
+  #mobile-sidebar-toc
     position: fixed
     top: 0
     right: -254px
-    width: 250px
-    height 101vh
-    background: $white
-    cursor: pointer
-    box-shadow: 0 0 4px alpha($dark-black,0.27)
     z-index: 103
-    overflow-y: scroll
     display: block
-    transition: transform .3s
+    overflow-y: scroll
-    opacity: 0
+    width: 250px
-    will-change: transform
+    height: 100%
+    background: $white
+    box-shadow: 0 0 4px alpha($dark-black, .27)
+    transition: all .5s
 
   #mobile-sidebar-menus
-    .mobile_author_icon
+    & > .mobile_author_icon
       padding: 1.3rem 1.5rem 0
       text-align: center
 
       img
-        height: 120px
-        width: 120px
-        padding: 0
         display: inline-block
-        vertical-align: top
+        padding: 0
+        width: 120px
+        height: 120px
         border-radius: 70px
+        vertical-align: top
         transition: all .3s
 
     .mobile_post_data
@@ -54,121 +50,81 @@
           text-decoration: none
 
         .length_num
-          font-size: .9rem
           color: $dark-black
+          font-size: .9rem
 
         .headline
           display: block
-          font-size: 0.7rem
-          text-transform: uppercase
           color: $font-black
+          text-transform: uppercase
+          font-size: .7rem
 
     hr
       margin: 1rem auto
 
     .menus_items
-      padding: 0 .5rem
       margin-bottom: 5rem
+      padding: 0 .5rem
 
-      a
+      .site-page
-        display: block !important
+        position: relative
-        opacity: 1 !important
+        z-index: 0
+        display: block
+        overflow: hidden
         margin: 0
         padding: .3rem 1.5rem
         color: $font-black
-        text-shadow: none
+        text-decoration: none
-        font-size: 0.8rem
-        z-index: 0
         text-overflow: ellipsis
-        overflow: hidden
+        text-shadow: none
         white-space: nowrap
+        font-size: .8rem
+        cursor: pointer
 
       i
         width: 30%
         text-align: left
 
       span
-        width 70%
+        width: 70%
 
         &:hover
           color: $light-blue
 
       .menus-expand
         position: absolute
-        width: 30px !important
-        height: 30px
         right: 0
         padding: 6px
-        transform: rotate(0deg)
+        width: 30px !important
+        height: 30px
         transition: all .3s
+        transform: rotate(0)
 
         &.menus-closed
-          transform: rotate(180deg) !important
           transition: all .3s
+          transform: rotate(180deg) !important
 
       .menus_item_child
-        list-style: none
         margin: 0
+        list-style: none
 
   #mobile-sidebar-toc
-    padding: 1rem 0.5rem 5rem 0.3rem
+    padding: 1rem .5rem 5rem .3rem
 
-    ol,li
+    ol,
-      list-style: none
+    li
-      padding: 0 0 0 8px
       margin: 0
-    
+      padding: 0 0 0 8px
+      list-style: none
 
     .toc_mobile_headline
       text-align: center
-        font-size: 18px
       font-weight: bold
+      font-size: 18px
 
-  a
+    .toc_mobile_items-link
+      color: $font-color
       text-decoration: none
-    color: $light-black
 
       &:hover
         color: $light-blue
-
-// 手機打開menus，toc特效
-.open-mobile-menus,
-.open-mobile-toc
-  overflow: hidden
-  #body-wrap
-    transform: translateX(-250px)
-  #page-header
-    transform: translateX(-250px)
-    &.fixed.visible
-      transform: translate3d(-250px, 100%, 0)
-  #rightside
-    transform: translate3d(-288px, 0, 0) !important
-
-.open-mobile-menus
-  padding-left: 0 !important
-
-  #mobile-sidebar
-    #mobile-sidebar-menus
-      transform: translateX(-254px)
-      opacity: 1
-
-  // pc界面打開mobile-menus需關閉sidebar
-  #sidebar
-    left: -300px !important
-
-.open-mobile-toc
-  #mobile-sidebar
-    #mobile-sidebar-toc
-      transform: translateX(-254px)
-      opacity: 1
-
-@media screen and (max-width: $sm)
-  #mobile-sidebar-menus
-    display: block !important
-
-@media screen and (max-width: $bg)
-  #mobile-sidebar-toc
-    display: block !important
-
-
-

source/css/_layout/note.styl

@@ -1,72 +1,75 @@
 .note
   $note-icons = hexo-config('note.icons')
   $note-style = hexo-config('note.style')
-  margin: 10px 0
-  padding: 15px
   position: relative
+  margin: 0 0 1rem
+  padding: 15px
 
   if ($note-style == 'simple')
     border: 1px solid $light-grey
     border-left-width: 5px
 
-
   if ($note-style == 'modern')
-    background-color: $whitesmoke
     border: 1px solid transparent
-  
+    background-color: $whitesmoke
 
   if ($note-style == 'flat')
-    background-color: lighten($light-grey, 65%)
     border: initial
     border-left: 5px solid $light-grey
+    background-color: lighten($light-grey, 65%)
 
-
+  if hexo-config('note.border_radius') is a 'unit'
-  if (hexo-config('note.border_radius') is a 'unit') 
     border-radius: unit(hexo-config('note.border_radius'), px)
 
-
+  h2,
-  h2, h3, h4, h5, h6 
+  h3,
-    if ($note-icons) 
+  h4,
+  h5,
+  h6
+    if $note-icons
       margin-top: 3px
     else
       margin-top: 0
 
-
-    border-bottom: initial
     margin-bottom: 0
     padding-top: 0 !important
+    border-bottom: initial
 
-
+  p,
-  p, ul, ol, table, pre, blockquote, img 
+  ul,
+  ol,
+  table,
+  pre,
+  blockquote,
+  img
     &:first-child
       margin-top: 0 !important
 
     &:last-child
       margin-bottom: 0 !important
 
-
+  if $note-icons
-  if ($note-icons) 
     &:not(.no-icon)
       padding-left: 45px
 
       &::before
-        font-family: 'FontAwesome'
-        font-size: larger
-        left: 15px
         position: absolute
         top: 13px
+        left: 15px
+        font-size: larger
+        font-family: 'FontAwesome'
 
   &.default
     if ($note-style == 'flat')
       background-color: $note-default-bg
 
-
     if ($note-style == 'modern')
-      background-color: $note-modern-default-bg
       border-color: $note-modern-default-border
+      background-color: $note-modern-default-bg
       color: $note-modern-default-text
 
-      a, span.exturl 
+      a,
+      span.exturl
         &:not(.btn)
           border-bottom: 1px solid $note-modern-default-text
           color: $note-modern-default-text
@@ -78,10 +81,14 @@
     if ($note-style != 'modern')
       border-left-color: $note-default-border
 
-      h2, h3, h4, h5, h6 
+      h2,
+      h3,
+      h4,
+      h5,
+      h6
         color: $note-default-text
 
-    if ($note-icons) 
+    if $note-icons
       &:not(.no-icon)
         &::before
           content: $note-default-icon
@@ -93,13 +100,13 @@
     if ($note-style == 'flat')
       background-color: $note-primary-bg
 
-
     if ($note-style == 'modern')
-      background-color: $note-modern-primary-bg
       border-color: $note-modern-primary-border
+      background-color: $note-modern-primary-bg
       color: $note-modern-primary-text
 
-      a, span.exturl 
+      a,
+      span.exturl
         &:not(.btn)
           border-bottom: 1px solid $note-modern-primary-text
           color: $note-modern-primary-text
@@ -111,10 +118,14 @@
     if ($note-style != 'modern')
       border-left-color: $note-primary-border
 
-      h2, h3, h4, h5, h6 
+      h2,
+      h3,
+      h4,
+      h5,
+      h6
         color: $note-primary-text
 
-    if ($note-icons) 
+    if $note-icons
       &:not(.no-icon)
         &::before
           content: $note-primary-icon
@@ -126,13 +137,13 @@
     if ($note-style == 'flat')
       background-color: $note-info-bg
 
-
     if ($note-style == 'modern')
-      background-color: $note-modern-info-bg
       border-color: $note-modern-info-border
+      background-color: $note-modern-info-bg
       color: $note-modern-info-text
 
-      a, span.exturl 
+      a,
+      span.exturl
         &:not(.btn)
           border-bottom: 1px solid $note-modern-info-text
           color: $note-modern-info-text
@@ -144,10 +155,14 @@
     if ($note-style != 'modern')
       border-left-color: $note-info-border
 
-      h2, h3, h4, h5, h6 
+      h2,
+      h3,
+      h4,
+      h5,
+      h6
         color: $note-info-text
 
-    if ($note-icons) 
+    if $note-icons
       &:not(.no-icon)
         &::before
           content: $note-info-icon
@@ -159,13 +174,13 @@
     if ($note-style == 'flat')
       background-color: $note-success-bg
 
-
     if ($note-style == 'modern')
-      background-color: $note-modern-success-bg
       border-color: $note-modern-success-border
+      background-color: $note-modern-success-bg
       color: $note-modern-success-text
 
-      a, span.exturl 
+      a,
+      span.exturl
         &:not(.btn)
           border-bottom: 1px solid $note-modern-success-text
           color: $note-modern-success-text
@@ -177,10 +192,14 @@
     if ($note-style != 'modern')
       border-left-color: $note-success-border
 
-      h2, h3, h4, h5, h6 
+      h2,
+      h3,
+      h4,
+      h5,
+      h6
         color: $note-success-text
 
-    if ($note-icons) 
+    if $note-icons
       &:not(.no-icon)
         &::before
           content: $note-success-icon
@@ -192,13 +211,13 @@
     if ($note-style == 'flat')
       background-color: $note-warning-bg
 
-
     if ($note-style == 'modern')
-      background-color: $note-modern-warning-bg
       border-color: $note-modern-warning-border
+      background-color: $note-modern-warning-bg
       color: $note-modern-warning-text
 
-      a, span.exturl 
+      a,
+      span.exturl
         &:not(.btn)
           border-bottom: 1px solid $note-modern-warning-text
           color: $note-modern-warning-text
@@ -210,10 +229,14 @@
     if ($note-style != 'modern')
       border-left-color: $note-warning-border
 
-      h2, h3, h4, h5, h6 
+      h2,
+      h3,
+      h4,
+      h5,
+      h6
         color: $note-warning-text
 
-    if ($note-icons) 
+    if $note-icons
       &:not(.no-icon)
         &::before
           content: $note-warning-icon
@@ -225,13 +248,13 @@
     if ($note-style == 'flat')
       background-color: $note-danger-bg
 
-
     if ($note-style == 'modern')
-      background-color: $note-modern-danger-bg
       border-color: $note-modern-danger-border
+      background-color: $note-modern-danger-bg
       color: $note-modern-danger-text
 
-      a, span.exturl 
+      a,
+      span.exturl
         &:not(.btn)
           border-bottom: 1px solid $note-modern-danger-text
           color: $note-modern-danger-text
@@ -240,14 +263,17 @@
             border-bottom: 1px solid $note-modern-danger-hover
             color: $note-modern-danger-hover
 
-
     if ($note-style != 'modern')
       border-left-color: $note-danger-border
 
-      h2, h3, h4, h5, h6 
+      h2,
+      h3,
+      h4,
+      h5,
+      h6
         color: $note-danger-text
 
-    if ($note-icons) 
+    if $note-icons
       &:not(.no-icon)
         &::before
           content: $note-danger-icon

source/css/_layout/page.styl

@@ -1,122 +1,134 @@
 .layout_page
   display: flex
-  margin: 0 auto
-  max-width: 1200px
   align-items: flex-start
+  margin: 0 auto
   padding: 0 15px
+  max-width: 1200px
 
 // index
 #recent-posts
   width: 75%
 
-  .recent-post-item 
+  & > .recent-post-item
-    padding: 0
+    display: flex
-    box-shadow: 0 4px 8px 6px rgba(7,17,27,0.06)
+    flex-direction: row
-    border-radius: 8px
+    align-items: center
-    transition: all 0.3s
-    background: #fff
     margin-top: 20px
+    padding: 0
     height: 280px
+    border-radius: 8px
+    background: #fff
+    box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
+    transition: all .3s
 
     &:hover
-      -webkit-box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
+      box-shadow: 0 4px 12px 12px rgba(7, 17, 27, .15)
-      box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
 
       img.post_bg
         transform: scale(1.1)
 
+    if hexo-config('index_post_cover') == 'both'
       .left_radius
-    border-top-left-radius: 8px
+        border-radius: 8px 0 0 8px
-    border-bottom-left-radius: 8px
 
       .right_radius
-    border-top-right-radius: 8px
+        order: 2
-    border-bottom-right-radius: 8px
+        border-radius: 0 8px 8px 0
+    else if hexo-config('index_post_cover') == 'left'
+      .left_radius
+        border-radius: 8px 0 0 8px
+
+      .right_radius
+        border-radius: 8px 0 0 8px
+    else if hexo-config('index_post_cover') == 'right'
+      .left_radius
+        order: 2
+        border-radius: 0 8px 8px 0
+
+      .right_radius
+        order: 2
+        border-radius: 0 8px 8px 0
 
     .post_cover
+      overflow: hidden
       width: 45%
       height: 280px
-    overflow: hidden
 
-  .post_bg
+      img.post_bg
-    border: 0
-    transition: all .6s
         display: block
+        margin: 0
+        padding: 0
         width: 100%
         height: 100%
-    padding: 0
+        border: 0
-    margin: 0
+        transition: all .6s
         object-fit: cover
 
         &:hover
           transform: scale(1.1)
 
-  .recent-post-info 
+    & >.recent-post-info
-    padding: 50px 40px
       display: inline-block
+      overflow: hidden
+      padding: 0 40px
       width: 55%
-    overflow hidden
 
-
+      & > .article-title
-  a.article-meta__categories
+        display: -webkit-box
+        overflow: hidden
+        margin-bottom: .3rem
+        color: $black
         text-decoration: none
-    color: #858585
+        text-overflow: ellipsis
+        word-wrap: break-word
+        font-size: 1.2rem
+        line-height: 1.4
+        transition: all .2s ease-in-out
+        -webkit-box-orient: vertical
+        -webkit-line-clamp: 2
 
         &:hover
-      color: #49b1f5 !important
+          color: $light-blue !important
 
-  .content
+      & > time
-    display: -webkit-box
+        color: $grey
-    -webkit-line-clamp: 3
-    -webkit-box-orient: vertical
-    overflow: hidden
-    height: 90px
-    margin-top: 0.5rem
-    word-break: break-word
 
-  .article-meta
+      & > .article-meta
         color: $grey
 
         .sticky
           color: $theme-button-hover-color
 
         i
-      margin: 0 0.2rem 0 0.3rem
+          margin: 0 .2rem 0 .3rem
 
-    &__separator
+        .article-meta__separator
-      margin-left: 0.3rem
+          margin-left: .3rem
 
-    .fa-angle-right,
+        .fa-angle-right
-    &__link
+          margin: 0 0 0 .3rem
-      margin: 0 0 0 0.3rem
 
-  time
+        a.article-meta__categories
-    color: $grey
+          color: #858585
-
-  .article-title
-    margin-bottom: 0.3rem
-    color: $black
           text-decoration: none
-    font-size: 1.2rem
-    cursor: pointer
-    transition: all 0.2s ease-in-out
-    line-height: 1.4
-    text-overflow: ellipsis
-    display: -webkit-box
-    -webkit-box-orient: vertical
-    -webkit-line-clamp: 2
-    overflow: hidden
-    word-wrap: break-word
 
           &:hover
-      color: $light-blue !important
+            color: #49b1f5 !important
 
+      & > .content
+        display: -webkit-box
+        overflow: hidden
+        margin-top: .5rem
+        height: 90px
+        word-break: break-word
+        -webkit-line-clamp: 3
+        -webkit-box-orient: vertical
+
+// tags page
 .tag-cloud
-  padding: 40px 44px 44px
-
   a
     display: inline-block
-    margin: 0 0.4rem
+    padding: 0 .4rem
     text-decoration: none
     cursor: pointer
     transition: all .3s
@@ -126,8 +138,8 @@
       transform: scale(1.1)
 
   &__title
-    font-size: 1.8rem
     text-align: center
+    font-size: 1.8rem
 
   &-tags
     text-align: center
@@ -135,14 +147,14 @@
 #tag,
 #category,
 #archive
-  padding: 3rem 3rem 3rem
+  padding: 3rem
 
+.tag-cloud,
 #page,
 .category-content,
 .flink
   padding: 40px 44px 44px
 
-
 #page,
 .category-content,
 #archive,
@@ -150,16 +162,15 @@
 .flink,
 #tag,
 #category
-  box-shadow: 0 4px 8px 6px rgba(7,17,27,.06)
-  border-radius: 8px
-  transition: all .3s
-  background: #fff
   margin-top: 20px
   width: 75%
+  border-radius: 8px
+  background: $white
+  box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
+  transition: all .3s
 
   &:hover
-    box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
+    box-shadow: 0 4px 12px 12px rgba(7, 17, 27, .15)
-
 
 .article-sort
   padding-left: 1rem
@@ -178,50 +189,50 @@
 
     &:before
       position: absolute
-      top: 0.25rem
+      top: .25rem
-      left: calc(-0.5rem + 1px)
+      left: calc(-.5rem + 1px)
       z-index: 1
-      width: w = 0.5rem
+      width: w = .5rem
       height: h = w
-      border: 0.5 * w solid $light-blue
+      border: .5 * w solid $light-blue
       border-radius: w
       background: $white
-      content: ""
+      content: ''
       line-height: h
-      transition: all 0.2s ease-in-out
+      transition: all .2s ease-in-out
 
     &:after
       position: absolute
       bottom: 0
       left: 0
       z-index: 0
-      width: 0.1rem
+      width: .1rem
       height: 1.3rem
       background: $pale-blue
-      content: ""
+      content: ''
 
   &-item
     position: relative
-    margin: 0 0 1rem 0.5rem
+    margin: 0 0 1rem .5rem
-    transition: all 0.2s ease-in-out
+    transition: all .2s ease-in-out
 
     &:hover
       &:before
         border-color: $ruby
 
     &:before
-      $w = 0.3rem
+      $w = .3rem
       position: absolute
       top: 1.8rem
       left: calc(-1rem - 17px)
       width: w = $w
       height: h = w
-      border: 0.5 * w solid $light-blue
+      border: .5 * w solid $light-blue
       border-radius: w
       background: $white
-      content: ""
+      content: ''
       line-height: h
-      transition: all 0.2s ease-in-out
+      transition: all .2s ease-in-out
 
     &.year
       font-size: 1rem
@@ -231,23 +242,23 @@
           border-color: $light-blue
 
       &:before
-        top: 0.7rem
+        top: .7rem
         border-color: $ruby
 
     &__time
+      padding-left: .4rem
       color: $a-link-color
-      font-size: 0.7rem
+      font-size: .7rem
-      padding-left: 0.4rem
 
     &__title
-      color: $font-black
-      font-size: 0.75rem
-      height: 60px
-      overflow: hidden
       display: -webkit-box
+      overflow: hidden
+      height: 60px
+      color: $font-black
+      font-size: .75rem
+      transition: all .3s
       -webkit-line-clamp: 2
       -webkit-box-orient: vertical
-      transition: all .3s
 
       &:hover
         color: $light-blue
@@ -255,11 +266,11 @@
 
     &__img
       img
-        height: 100%
-        width: 100%
-        object-fit: cover
         padding: 0
+        width: 100%
+        height: 100%
         transition: all .6s
+        object-fit: cover
 
         &:hover
           transform: scale(1.1)
@@ -272,18 +283,17 @@
         color: $a-link-color
 
   &-img
-    height: 80px
-    width: 80px
     display: inline-block
     overflow: hidden
+    width: 80px
+    height: 80px
 
   &-post
-    display: inline-block
-    top: 0
     position: absolute
+    top: 0
+    display: inline-block
     margin-left: 1rem
 
-
 .category-lists
   padding: 1rem 0 1.5rem
 
@@ -298,14 +308,14 @@
     cursor: pointer
 
   .category-list-count
-    margin-left: 0.4rem
+    margin-left: .4rem
     color: $a-link-color
 
     &:before
-      content: "("
+      content: '('
 
     &:after
-      content: ")"
+      content: ')'
 
 @media screen and (max-width: $sm)
   .layout_page
@@ -318,22 +328,25 @@
   .flink,
   #tag,
   #category
-    padding: 1.8rem 1.3rem
     margin: 0
+    padding: 1.8rem 1.3rem
 
   .category-lists
     padding: 0
 
   #recent-posts
     .recent-post-item
+      flex-direction: column
       height: auto !important
 
       .post_cover
+        order: 1 !important
         width: 100%
         height: 230px
         border-radius: 8px 8px 0 0
 
       .recent-post-info
+        order: 2 !important
         padding: 30px 25px 18px !important
         width: 100%
 
@@ -347,10 +360,23 @@
         margin: 0
 
 @media screen and (min-width: 900px)
-  if hexo-config("aside.position") == "left"
+  if hexo-config('aside.position') == 'left'
-    #recent-posts,#page,.category-content,#archive,.tag-cloud,.flink,#tag,#category
+    #recent-posts,
+    #page,
+    .category-content,
+    #archive,
+    .tag-cloud,
+    .flink,
+    #tag,
+    #category
       order: 2
 
 @media screen and (max-width: 900px)
-  #page,.category-content,#archive,.tag-cloud,.flink,#tag,#category
+  #page,
+  .category-content,
+  #archive,
+  .tag-cloud,
+  .flink,
+  #tag,
+  #category
     width: 100% !important

source/css/_layout/pagination.styl

@@ -5,12 +5,13 @@
 
   .pagination
     text-align: center
+
   .space
     color: $a-link-color
 
   .page-number
     display: inline-block
-    margin: 0 0.2rem
+    margin: 0 .2rem
     min-width: w = 1.2rem
     height: w
     text-align: center
@@ -25,90 +26,76 @@
   img.prev_cover,
   img.next_cover
     position: absolute
-    padding: 0
     top: 0
     left: 0
+    padding: 0
     width: 100%
     height: 100%
-    opacity: .4
     background-size: cover
-    transition: all 0.6s;
+    opacity: .4
-    object-fit: cover
+    transition: all .6s
     pointer-events: none
+    object-fit: cover
 
-  .prev_info
+  .prev_info,
-    position: absolute
-    z-index: 100
-    font-weight: 400
-    width: 70%
-    color: #fff
-    overflow: hidden
-    white-space: nowrap
-    -o-text-overflow: ellipsis
-    text-overflow: ellipsis
-    display: block
-    bottom: 50px
-
   .next_info
     position: absolute
-    z-index: 100
-    font-weight: 400
-    width: 70%
-    color: #fff
-    overflow: hidden
-    white-space: nowrap
-    -o-text-overflow: ellipsis
-    text-overflow: ellipsis
-    display: block
-    right: 40px
     bottom: 50px
+    z-index: 100
+    display: block
+    overflow: hidden
+    width: 70%
+    color: $white
+    text-overflow: ellipsis
+    white-space: nowrap
+    font-weight: 400
+
+  .next_info
+    right: 40px
     text-align: right
 
   .pull-full
     width: 100% !important
 
-  .prev-post .label
+  .prev-post .label,
-    position: absolute
-    top: 50px 
-    z-index: 100
-    font-size: 13px
-    display: block
-    text-transform: uppercase
-    color: rgba(255,255,255,.7)
-
   .next-post .label
     position: absolute
     top: 50px
-    right: 40px
     z-index: 100
     display: block
+    color: alpha($white, .9)
     text-transform: uppercase
-    color: rgba(255,255,255,.7)
+    font-size: 90%
 
-  .prev-post, .next-post
+  .next-post .label
-    width: 50%
+    right: 40px
+
+  .prev-post,
+  .next-post
     float: left
+    width: 50%
 
     a
-      width: 100%
-      height: 150px
-      padding: 55px 40px
-      text-align: left
       position: relative
       display: block
       float: left
       overflow: hidden
+      padding: 55px 40px
+      width: 100%
+      height: 150px
+      text-align: left
 
     &:hover
-      img.prev_cover, img.next_cover
+      img.prev_cover,
+      img.next_cover
         opacity: .8
         transform: scale(1.1)
 
+  &.pagination_post
+    margin: 2rem 0 !important
+    background: $dark-black
 
 @media screen and (max-width: 768px)
-  .prev-post, .next-post
+  .prev-post,
+  .next-post
     width: 100% !important
-
-.pagination_post
-    margin: 2rem 0 !important
-    background: #000

source/css/_layout/post.styl

@@ -1,119 +1,81 @@
-if hexo-config("post_beautify.enable")
+if hexo-config('post_beautify.enable')
   headStyle(fontsize)
-    padding-left: unit(fontsize + 0.3, "rem")
+    padding-left: unit(fontsize + .3, 'rem')
 
     code
-      font-size: unit(fontsize, "rem")
+      font-size: unit(fontsize, 'rem')
 
     &:before
-      top: calc(50% - unit(fontsize / 2 - 0.05, "rem"))
+      top: calc(50% - unit(fontsize / 2 - .05, 'rem'))
-      font-size: unit(fontsize, "rem")
+      font-size: unit(fontsize, 'rem')
 
     &:hover
-      padding-left: unit(fontsize + 0.2, "rem")
+      padding-left: unit(fontsize + .2, 'rem')
-
-
-#post-title
-  font-size: 1.4rem
-
-#post
-  overflow: hidden
-
-  &-meta
-    text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.15)
-
-  #post-meta
-    color: $grey
-
-    a
-      text-decoration: none
-
-    i.fa.fa-comment-o
-      margin-right: 0.2rem
 
 #top-container
   position: relative
   margin-bottom: 1rem
+  height: 19rem
   background-color: $light-blue
   background-attachment: local
   background-position: center
   background-size: cover
-  height: 19rem
 
   &:before
     position: absolute
     top: 0
     left: 0
     display: block
-    content: ''
     width: 100%
     height: 100%
-    background-color: alpha($dark-black,0.5)
+    background-color: alpha($dark-black, .5)
+    content: ''
 
   a
     color: $light-grey
     text-decoration: none
-    transition: all 0.3s ease-out
+    transition: all .3s ease-out
 
     &:hover
-      color: $white
+      text-decoration: underline
 
-  #top-img
+  & > #post-info
-    padding: 0
+    position: absolute
-    border: none
+    bottom: 1.5rem
-
+    padding: 0 8%
-  #site-name
-    font-weight: bold
-    cursor: pointer
-
-  #post-info
     width: 100%
     color: $light-grey
     text-align: left
-    padding: 0 8%
-    position: absolute
-    bottom: 1.5rem
 
     #post-title
-    text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.15)
+      margin-bottom: .4rem
       font-size: 1.5rem
-    margin-bottom: 0.4rem
 
       .posttitle
+        display: -webkit-box
+        overflow: hidden
         line-height: 1.5
+        -webkit-line-clamp: 3
+        -webkit-box-orient: vertical
 
-  i.fa.fa-angle-right
+    #post-meta
-    margin: 0 0.3rem 0 0.2rem
+      .word-count,
+      #busuanzi_value_page_pv,
+      .comment-count
+        padding-left: .2rem
 
       .post-meta
         &__separator
-    margin: 0 0.3rem
+          margin: 0 .3rem
 
         &__icon
-    margin-right: 0.2rem
+          margin-right: .2rem
 
-  &__tags
+        &-pv-cv
           display: inline-block
-    width: fit-content
-    margin: 0.4rem 0.4rem 0.4rem 0
-    padding: 0rem 0.6rem
-    border: 1px solid $light-blue
-    border-radius: 0.6rem
-    background: $white
-    color: $light-blue
-    text-decoration: none
-    font-size: 12px
-    cursor: pointer
-    transition: all 0.2s ease-in-out
-
-    &:hover
-      background: $light-blue
-      color: $white
-
 
 #post-content
-
+  if hexo-config('post_beautify.enable')
-  if hexo-config("post_beautify.enable")
     h1,
     h2,
     h3,
@@ -121,17 +83,17 @@ if hexo-config("post_beautify.enable")
     h5,
     h6
       cursor: pointer
-      transition: all 0.2s ease-out
+      transition: all .2s ease-out
 
       &:before
         position: absolute
-        top: calc(50% - 0.35rem)
+        top: calc(50% - .35rem)
         left: 0
         color: $title-prefix-icon-color
         content: $title-prefix-icon
         font: normal normal normal 14px / 1 FontAwesome
-        font-size: 0.8rem
+        font-size: .8rem
-        transition: all 0.2s ease-out
+        transition: all .2s ease-out
 
       &:hover
         padding-left: 1.1rem
@@ -143,38 +105,38 @@ if hexo-config("post_beautify.enable")
       headStyle(1)
 
     h2
-      headStyle(0.9)
+      headStyle(.9)
 
     h3
-      headStyle(0.8)
+      headStyle(.8)
 
     h4
-      headStyle(0.7)
+      headStyle(.7)
 
     h5
-      headStyle(0.6)
+      headStyle(.6)
 
     h6
-      headStyle(0.6)
+      headStyle(.6)
 
     ol,
     ul
-      margin-top: 0.4rem
+      margin-top: .4rem
-      padding: 0 0 0 0.8rem
+      padding: 0 0 0 .8rem
       list-style: none
       counter-reset: li
 
       p
-        margin: 0
+        margin: 0 0 .5rem
 
       ol,
       ul
-        padding-left: 0.5rem
+        padding-left: .5rem
 
       li
         position: relative
-        margin: 0.2rem 0
+        margin: .2rem 0
-        padding: 0.1rem 0.5rem 0.1rem 1.5rem
+        padding: .1rem .5rem .1rem 1.5rem
 
         &:hover
           &:before
@@ -187,19 +149,19 @@ if hexo-config("post_beautify.enable")
           background: $light-blue
           color: $white
           cursor: pointer
-          transition: all 0.3s ease-out
+          transition: all .3s ease-out
 
     ol
       > li
         &:before
-          margin-top: 0.2rem
+          margin-top: .2rem
           width: w = 1.2rem
           height: h = w
-          border-radius: 0.5 * w
+          border-radius: .5 * w
           content: counter(li)
           counter-increment: li
           text-align: center
-          font-size: 0.6rem
+          font-size: .6rem
           line-height: h
 
     ul
@@ -209,38 +171,37 @@ if hexo-config("post_beautify.enable")
             border-color: $ruby
 
         &:before
-          $w = 0.3rem
+          $w = .3rem
           top: 10px
-          margin-left: 0.45rem
+          margin-left: .45rem
           width: w = $w
           height: h = w
-          border: 0.5 * w solid $light-blue
+          border: .5 * w solid $light-blue
           border-radius: w
           background: $white
-          content: ""
+          content: ''
           line-height: h
-
   else
     ol,
     ul
-      margin-top: 0.4rem
+      margin-top: .4rem
       counter-reset: li
 
       p
-        margin: 0
+        margin: 0 0 .5rem
 
       ol,
       ul
-        padding-left: 0.5rem
+        padding-left: .5rem
 
       li
         position: relative
-        margin: 0.3rem 0
+        margin: .3rem 0
-        padding-left: 0.3rem
+        padding-left: .3rem
 
 a
   color: $a-link-color
-  transition: all 0.2s
+  transition: all .2s
 
   &:hover
     color: $light-blue
@@ -260,53 +221,42 @@ a.fancybox
   text-align: center
   text-decoration: none
 
+p
+  margin: 0 0 .8rem
+
 img
-  padding: $img-border-padding
   max-width: 100%
-  transition: all 0.2s
+  transition: all .2s
-
-  &:hover
-    box-shadow: 0 0 8px 0 rgba(232, 237, 250, 0.6), 0 2px 4px 0 rgba(232, 237, 250, 0.5)
-
-.code-area-wrap
-  position: relative
-
-.fa-clipboard
-  position: absolute
-  top: 0.4rem
-  right: 10px
-  z-index: 1
-  color: $highlight-aqua
-  cursor: pointer
-  transition: color 0.2s
-
-  &:hover
-    color: darken($highlight-aqua, 20%)
-
-.code_lang
-  position: absolute
-  font-weight: bold;
-  font-size: 0.8rem;
-  line-height: 1.4rem;
-  color: $highlight-foreground
-  left: 30px
-  z-index: 1
-  cursor: pointer
 
+// highlight
+.highlight-tools
   .code-expand
     position: absolute
     top: 0
-  color: $highlight-foreground
-  padding: 7px 10px
     z-index: 1
+    padding: 7px 10px
+    color: $highlight-foreground
     cursor: pointer
     transition: all .3s
-  transform: rotate(0deg)
+    transform: rotate(0)
 
-.code-closed
+    & + .code_lang
-  transform: rotate(-90deg) !important
+      left: 30px
+
+    &.code-closed
       transition: all .3s
+      transform: rotate(-90deg) !important
 
+  .code_lang
+    position: absolute
+    left: 15px
+    z-index: 1
+    color: $highlight-foreground
+    text-transform: capitalize
+    font-weight: bold
+    font-size: .8rem
+    line-height: 1.4rem
+    cursor: pointer
 
   .copy-notice
     position: absolute
@@ -317,53 +267,17 @@ img
     color: $highlight-aqua
     opacity: 0
 
-.post-copyright
+  .fa-clipboard
-  position: relative
-  margin: 1rem 0 0.5rem 0
-  padding: 0.5rem 0.8rem
-  border: 1px solid $light-grey
-  transition: box-shadow 0.3s ease-in-out
-
-  &:before
     position: absolute
-    top: t = 0.5rem
+    top: .4rem
-    right: t
+    right: 10px
-    width: w = 0.8rem
+    z-index: 1
-    height: w
+    color: $highlight-aqua
-    border-radius: w
+    cursor: pointer
-    background: $light-blue
+    transition: color .2s
-    content: ""
-
-  &:after
-    position: absolute
-    top: t = 0.7rem
-    right: t
-    width: w = 0.4rem
-    height: w
-    border-radius: w
-    background: $white
-    content: ""
 
     &:hover
-    box-shadow: 0 0 8px 0 rgba(232, 237, 250, 0.6), 0 2px 4px 0 rgba(232, 237, 250, 0.5)
+      color: darken($highlight-aqua, 20%)
-
-  &-meta
-    color: $light-blue
-    font-weight: bold
-
-  &-info
-    a
-      word-break: break-word
-
-
-@media screen and (max-width: $sm)
-  #top-container
-    #post-title
-      font-size: 1rem
-
-  #post-title
-    font-size: 1.1rem
-
 
 @media screen and (min-width: $md)
   .layout_post
@@ -371,95 +285,145 @@ img
 
 .katex-wrap
   overflow: auto
-  if hexo-config("katex") && hexo-config("katex.hide_scrollbar")
+
+  if hexo-config('katex') && hexo-config('katex.hide_scrollbar')
     &::-webkit-scrollbar
       display: none
 
-
-// 文章字體
-#post-content p
-  font-size: 1.1em
-
-
-#post-content ol,
-#post-content ul 
-  font-size: 1em
-
-
-
 .layout_post
-  padding: 50px
-  box-shadow: 0 4px 8px 6px rgba(7,17,27,0.06)
-  border-radius: 8px
-  transition: all 0.3s
-  background: #fff
   margin: 40px auto
+  padding: 50px
   max-width: 1000px
+  border-radius: 8px
+  background: #fff
+  box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
+  transition: all .3s
 
   &:hover
-    box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
+    box-shadow: 0 4px 12px 12px rgba(7, 17, 27, .15)
 
   img
     display: block
 
-  .tag_share
+  & >.tag_share
-    display: block
+    .post-meta
-
+      &__tag-list
-    .post-meta__tag-list
         display: inline-block
 
+      &__tags
+        display: inline-block
+        margin: .4rem .4rem .4rem 0
+        padding: 0 .6rem
+        width: fit-content
+        border: 1px solid $light-blue
+        border-radius: .6rem
+        background: $white
+        color: $light-blue
+        text-decoration: none
+        font-size: 12px
+        cursor: pointer
+        transition: all .2s ease-in-out
+
+        &:hover
+          background: $light-blue
+          color: $white
+
     .post_share
-      width: fit-content;
+      display: inline-block
-      display: inline-block;
+      float: right
-      float: right;
+      margin: .4rem 0
-      margin: 0.4rem 0
+      width: fit-content
 
       .social-share
         font-size: 12px
 
-      .social-share .social-share-icon
+        .social-share-icon
-        width: 26px;
+          margin: 0 4px
-        height: 26px;
+          width: 26px
-        font-size: 15px;
+          height: 26px
-        line-height: 25px;
+          font-size: 15px
+          line-height: 25px
 
-      .social-share a
+  & > .post-copyright
-        margin: 0 4px;
+    position: relative
+    margin: 2rem 0 .5rem
+    padding: .5rem .8rem
+    border: 1px solid $light-grey
+    transition: box-shadow .3s ease-in-out
 
+    &:before
+      position: absolute
+      top: t = .5rem
+      right: t
+      width: w = .8rem
+      height: w
+      border-radius: w
+      background: $light-blue
+      content: ''
+
+    &:after
+      position: absolute
+      top: t = .7rem
+      right: t
+      width: w = .4rem
+      height: w
+      border-radius: w
+      background: $white
+      content: ''
+
+    &:hover
+      box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5)
+
+    .post-copyright
+      &-meta
+        color: $light-blue
+        font-weight: bold
+
+      &-info
+        padding-left: .3rem
+
+        a
+          word-break: break-word
 
   #post
     a
-      text-decoration: none
       color: $light-blue
+      text-decoration: none
 
-    h1,
+      &:hover
-    h2,
+        text-decoration: underline
-    h3,
-    h4,
-    h5,
-    h6
-      margin: 1rem 0 0.8rem 0
 
     img
-      margin: 0 auto 0.8rem 
+      margin: .8rem auto
-        
-    blockquote,
-    p
-      margin: 0 0 0.8rem 0
-
-    iframe,.note
-      margin: 0 0 0.8rem 0
-
-.layout_post,
-.layout_page
-  opacity: 1
 
 @media screen and (max-width: 1024px)
   .layout_post
     margin: 0 15px
     width: auto
 
-@media screen and (max-width:768px)
+@media screen and (max-width: $sm)
   .layout_post
+    margin: 0 5px
     padding: 1.8rem 1rem
-    margin: 0px 5px
+
+  #top-container
+    height: 18rem
+
+    & > #post-info
+      bottom: 1rem
+      padding: 0 5%
+
+      & > #post-title
+        font-size: 1.2rem
+
+      & > #post-meta
+        font-size: 90%
+
+        & > span
+          display: none
+
+        .post-meta-pv-cv
+          display: block
+
+          .post-meta__separator:first-child
+            display: none

source/css/_layout/readmode.styl

@@ -1,29 +1,25 @@
-if hexo-config("readmode") && hexo-config("readmode.enable")
+if hexo-config('readmode') && hexo-config('readmode.enable')
   .read-mode
-    background: $pale-yellow
     padding: 0 !important
-
+    background: $pale-yellow
-    #sidebar,
-    #toggle-sidebar
-      display: none
 
     #page-header
       #site-name,
-      .site-page,
+      .site-page
-      .toggle-menu
-        text-shadow: none
         color: $font-black
+        text-shadow: none
 
       .menus_item_child
-        background-color: darken($pale-yellow,5) !important
+        background-color: darken($pale-yellow, 3) !important
 
-        &:before
+        & > li
-          border-color: transparent transparent darken($pale-yellow,5) !important
+          &:hover
+            background-color: darken($pale-yellow, 10) !important
 
     #top-container
-      background-image: none !important
       height: 14rem
       background-color: $pale-yellow
+      background-image: none !important
 
       a
         color: $font-black
@@ -31,87 +27,67 @@ if hexo-config("readmode") && hexo-config("readmode.enable")
       &:before
         opacity: 0
 
-      #post-info
+      & > #post-info
-        text-align: center
         padding: 0
         color: $font-black
-      
+        text-align: center
-      #post-title,
-      #post-meta
-        text-shadow: none
 
     #page-header
       &.fixed
-        background: alpha(darken($pale-yellow,5),0.5)
+        background: alpha(darken($pale-yellow, 5), .5)
         box-shadow: none
 
         &.open-sidebar
           .site-page
-            display: inline-block
+            visibility: visible
-            opacity: 1
-        
 
     .layout_post
-      box-shadow: none
       background: $pale-yellow
+      box-shadow: none
 
       &:hover
         box-shadow: none
 
       .article-container
         pre,
-        .highlight
+        .highlight:not(.js-file-line-container)
-          background: darken($pale-yellow,5);
+          background: darken($pale-yellow, 5)
 
     .highlight
-          &:after
+      display: block !important
-            background: darken($pale-yellow,10);
-          table 
-            &:after
-              background: darken($pale-yellow,10);
-    
 
     blockquote
-      border-left: 0.2rem solid #d6dbdf
+      border-left: .2rem solid #d6dbdf
       background-color: rgba(102, 128, 153, .05)
 
     #rightside
       #darkmode
         display: none
 
-    canvas
+    & > canvas
       display: none !important
 
+    .code-area-wrap > .highlight-tools,
+    #sidebar,
+    #toggle-sidebar,
     #footer,
-    #post-comment,
+    .layout_post > div,
-    hr,
+    .layout_post > hr,
-    .relatedPosts,
+    .layout_post > nav
-    #pagination,
-    .post-reward,
-    .tag_share,
-    .post-copyright
       display: none
 
+    hr
+      border: 2px dashed #d6dbdf
+      background: transparent
+
+      &:before
+        color: darken(#d6dbdf, 10)
+
     &::-webkit-scrollbar-thumb
-      background: darken($pale-yellow,15)
-
-    *::-webkit-scrollbar-thumb
-      background: darken($pale-yellow,15)
-    
-    .copy-notice
       background: darken($pale-yellow, 10)
 
+    *::-webkit-scrollbar-thumb
+      background: darken($pale-yellow, 10)
 
-
+    #web_bg
-
+      background: none
-
-
-
-
-
-
-    
-
-
-
-      

source/css/_layout/relatedposts.styl

@@ -1,75 +1,74 @@
 .relatedPosts
   margin: 0 auto
-    padding: 0
   margin-top: 1rem
+  padding: 0
   width: 100%
 
 .relatedPosts_item
+  position: relative
+  float: left
+  overflow: hidden
+  margin: 5px
   width: calc(100% / 3 - 10px)
   height: 200px
-    overflow: hidden
+  background: $dark-black
-    float: left
-    position: relative
-    margin: 5px
-    background: #000
 
   &:hover
     .relatedPosts_cover
       opacity: .8
       transform: scale(1.1)
 
+  a
+    text-decoration: none
 
 .relatedPosts_cover
-    border: 0
+  position: absolute
-    transition: all 0.6s
   display: block
+  margin: 0
+  padding: 0
   width: 100%
   height: 100%
-    padding: 0
+  border: 0
-    opacity: 0.4
+  opacity: .4
-    margin: 0
+  transition: all .6s
   object-fit: cover
 
+.relatedPosts_main
+  position: relative
+  display: flex
+  flex-direction: column
+  justify-content: center
+  margin: 0
+  padding: 0 1rem
+  height: 100%
+  color: $white
+
+  .relatedPosts_date
+    display: block
+    color: alpha($white, .9)
+    font-size: 90%
+
   .relatedPosts_title
-    color: #fff
-    position: absolute
-    left: 0
-    right: 0
-    top: 45%
-    height: 60px
-    padding: 0 30px
     display: -webkit-box
+    overflow: hidden
+    max-height: 60px
     -webkit-line-clamp: 2
     -webkit-box-orient: vertical
-    overflow: hidden
-    max-width: 100%
-    width: 100%
-    margin: 0 auto
-    text-align: center
 
 .relatedPosts_headline
-    font-size: 20px
-    font-weight: 700
   margin-bottom: 5px
+  font-weight: 700
+  font-size: 20px
 
 .clear_both
   clear: both
 
-
 @media screen and (max-width: 768px)
   .relatedPosts_item
+    margin: 2px
     width: calc(100% / 2 - 4px)
     height: 150px
-    margin: 2px
-  
-  .relatedPosts_title
-    top: 40%
 
 @media screen and (max-width: 480px)
   .relatedPosts_item
     width: calc(100% - 4px)
-    height: 150px
-    margin: 2px
-  
-  .relatedPosts_title
-    top: 40%

source/css/_layout/reward.styl

@@ -1,72 +1,74 @@
 .post-reward
-  position: relative
-  width: 100%
   margin: 75px auto 0
+  width: 100%
   text-align: center
-  display: block
 
   .reward-button
-    text-align: center
+    position: relative
+    z-index: 1
     display: inline-block
-    cursor: pointer
+    width: 100px
-    color: #fff
-    line-height: 36px
     background: $light-blue
-    width: 80px
+    color: $white
+    text-align: center
+    line-height: 36px
+    cursor: pointer
 
     &:hover
-      background: darken($light-blue,30)
-      
       .reward-main
         display: block
 
-  
     .reward-main
       position: absolute
       bottom: 40px
+      left: 0
+      display: none
       margin: 0
       padding: 0 0 15px
       width: 100%
-      left: 0
+      transition: all .6s
-      transition: all 0.6s
-      display: none
-      opacity: 1
 
       .reward-all
-        margin: 0 auto
-        padding: 20px 10px 8px
-        background: #f5f5f5
         display: inline-block
+        margin: 0 0 0 -110px
+        padding: 20px 10px 8px
+        width: 320px
         border-radius: 4px
-        cursor: auto
+        background: #f5f5f5
+
+        &:before
+          position: absolute
+          bottom: -10px
+          left: 0
+          width: 100%
+          height: 20px
+          content: ''
 
         &:after
-          content: ""
-          width: 0
-          height: 0
-          border-left: 13px solid transparent
-          border-right: 13px solid transparent
-          border-top: 13px solid #f5f5f5
           position: absolute
+          right: 0
           bottom: 2px
           left: 0
-          right: 0
           margin: 0 auto
+          width: 0
+          height: 0
+          border-top: 13px solid #f5f5f5
+          border-right: 13px solid transparent
+          border-left: 13px solid transparent
+          content: ''
 
         .reward-item
-          list-style-type: none
-          padding: 0 8px
           display: inline-block
+          padding: 0 8px
+          list-style-type: none
 
           img
-            width: 130px
-            max-width: 130px
-            border-radius: 3px
             position: relative
+            max-width: 130px
+            width: 130px
+            border-radius: 3px
 
           .post-qr-code__desc
-            text-align: center
+            margin: -5px 0
-            margin: -10px 0
             color: #858585
-
+            text-align: center
-

source/css/_layout/rightside.styl

@@ -1,32 +1,35 @@
 #rightside
-  right: -38px
   position: fixed
+  right: -38px
   bottom: 40px
-  transition: all .3s
+  opacity: 0
-  opacity 0
+  transition: all .5s
 
   #rightside-config-hide
-    display none
+    transform: translate(35px, 0)
 
-  #readmode,
+  .rightside-in
-  #font_plus,
+    transform: translate(0, 0) !important
-  #font_minus,
+    animation: rightsideIn .3s
-  #to_comment,
+
-  .darkmode,
+  .rightside-out
-  #mobile-toc-button,
+    animation: rightsideOut .3s
-  #go-up,
+
-  #rightside_config
+  & > div
+    & > i,
+    & > a,
+    & > div
+      display: block
+      margin-bottom: 2px
       width: 30px
       height: 30px
       background-color: $light-blue
       color: $white
       text-align: center
-    line-height: 29px
-    font-size: 16px
-    display: block
-    margin-bottom: 2px
-    cursor: pointer
       text-decoration: none
+      font-size: 16px
+      line-height: 29px
+      cursor: pointer
 
       &:hover
         background-color: $ruby
@@ -35,29 +38,24 @@
     i
       animation: avatar_turn_around 2s linear infinite
 
-  .translate_chn_to_cht
-    width: 30px
-    height: 30px
-    background-color: $light-blue
-    color: $white
-    text-align: center
-    line-height: 29px
-    font-size: 16px
-    display: block
-    margin-bottom: 2px
-    cursor: pointer
-    text-decoration: none
-
-    &:hover  
-      background-color: $ruby 
-  
   #mobile-toc-button
     display: none
 
-
 @media screen and (max-width: $bg)
   #rightside
     #mobile-toc-button
       display: block
 
+@keyframes rightsideIn
+  0%
+    transform: translate(30px, 0)
 
+  100%
+    transform: translate(0, 0)
+
+@keyframes rightsideOut
+  0%
+    transform: translate(0, 0)
+
+  100%
+    transform: translate(30px, 0)

source/css/_layout/sidebar.styl

@@ -4,14 +4,13 @@
   left: -300px
   z-index: 10
   overflow-y: auto
-  padding: 1rem 0 2rem 0.5rem
+  padding: 1rem 0 2rem .5rem
   width: $sidebar-width
   height: 100%
   background: $sidebar-background
-  box-shadow: -0.25rem 0 0.25rem rgba(232, 237, 250, 0.6) inset
+  box-shadow: -.25rem 0 .25rem rgba(232, 237, 250, .6) inset
-  opacity:  0.9
+  opacity: .9
-  will-change: transform
+  transition: ease-in-out .4s
-  transition: ease-in-out .2s
 
   .sidebar-toc
     ol,
@@ -19,20 +18,20 @@
       list-style: none
 
     ol
-      margin-top: 0.2rem
+      margin-top: .2rem
-      padding-left: 0.4rem
+      padding-left: .4rem
 
     &__title
-      padding-right: 0.5rem
+      padding-right: .5rem
       text-align: center
-      font-size: unit(0.9 * $rem, "px")
+      font-size: unit(.9 * $rem, 'px')
 
     .toc-link
       display: block
-      padding-left: 0.2rem
+      padding-left: .2rem
       border-right: 3px solid transparent
       text-decoration: none
-      transition: all 0.2s ease-in-out
+      transition: all .2s ease-in-out
 
       &.active
         border-right-color: darken($cyan, 20%)
@@ -41,21 +40,18 @@
 
     &__progress
       position: relative
-      margin-top: -0.3rem
+      margin-top: -.3rem
-      padding-left: 0.6rem
+      padding-left: .6rem
       color: $cyan
 
       .progress-notice
-        margin-right: 0.4rem
+        margin-right: .4rem
 
       .progress-num
         display: inline-block
-        min-width: 0.9rem
+        min-width: .9rem
 
       &-bar
         width: 0
         height: 1px
         background: $cyan
-
-
-

source/css/_layout/z-darkmode.styl

@@ -1,178 +1,24 @@
-[data-theme="dark"] 
+if hexo-config('darkmode.enable') || hexo-config('autoChangeMode') == '1' || hexo-config('autoChangeMode') == '2'
+  [data-theme='dark']
     body
-    color: #99a9bf 
+      background-color: darken(#121212, 2)
-    background-color: #2d3032
+      color: alpha(#FFFFFF, .6)
 
-    &::-webkit-scrollbar-thumb
+    ::-webkit-scrollbar-thumb
-      background: lighten(#2d3035,5)
+      background: lighten(#121212, 5)
 
-  #sidebar
+    // 網站背景，footer背景
-    background: #2d3035
+    #web_bg[data-type=color],
-    box-shadow: -0.25rem 0 0.25rem #2d3035
+    #footer[data-type=color]
+      background: darken(#121212, 2)
 
-    &::-webkit-scrollbar-thumb
+    #web_bg[data-type=photo]:before,
-      background: lighten(#2d3035,5)
+    #footer[data-type=photo]:before
-
+      position: absolute
-  if hexo-config("local_search") && hexo-config("local_search.enable")
+      width: 100%
-    #local-search
+      height: 100%
-      background: #2d3035  
+      background-color: alpha($dark-black, .7)
-      .local-search-box--input  
+      content: ''
-        background: #2d3035
-        color: #99a9bf
-          
-      .search-result-title
-        color: #99a9bf
-  if hexo-config("algolia_search.enable")
-    #algolia-search
-      background: #2d3035
-      .ais-search-box--input
-        background: #2d3035
-        color: #99a9bf
-
-      #algolia-search-results
-        .algolia-hit-item-link
-          color: #99a9bf
-
-  .article-container code
-    background: #616a6b 
-    color: #99a9bf
-  
-  if hexo-config('valine') && hexo-config('valine.enable')
-    // 評論
-    #vcomment
-      p,a,textarea,.vemoji-btn,.vpreview-btn,input,path,.vcount,.vnum,.vtime,.vsys,.vsys,.vnick
-        color: #99a9bf !important
-      
-      .vsys
-        background: rgb(97, 106, 107) !important
-
-      .vbtn
-        background: rgb(45, 48, 53) !important      
-        color: #99a9bf !important
-        border: 1px solid #99a9bf
-      
-      .vwrap
-        border: 1px solid #99a9bf
-      
-      input
-        border-bottom: 1px dashed #616a6b
-      
-      .vh
-        border-bottom: 1px dashed  #616a6b
-      
-      pre
-        background-color: #2d3035
-        border: 1px solid #99a9bf
-      
-      .vcontent.expand:before
-        background: linear-gradient(180deg,hsla(0, 0%, 0%, 0),hsl(218, 8%, 19%))
-
-      .vcontent.expand:after
-        background: hsla(204, 5%, 22%, 1)
-        
-  .recent-posts
-    .recent-post-item
-      background: #2d3032 !important
-    
-    .article-title
-      color: #99a9bf !important
-      
-  #page-header
-    &.fixed
-      background: #2d3035
-      box-shadow: 0 5px 6px -5px rgba(133,133,133,0) 
-
-      a, 
-      .toggle-menu, 
-      #site-name 
-          color: #99a9bf 
-              
-  blockquote
-    color: #99a9bf
-    background-color: lighten(#2d3035,10)
-
-  hr
-      background: 0
-      border: 2px dashed #616A6B
-      &:before
-          color: #99a9bf
-
-  .post-meta__tags
-    background: 0
-    border: 1px solid #99a9bf
-    color: #99a9bf
-
-  .post-copyright
-    border: 1px solid #99a9bf
-
-    *
-      color: #99a9bf
-  
-  .article-container pre
-    background-color: lighten(#2d3035, 2)
-
-  .article-container .highlight:not(.js-file-line-container)
-    background-color: lighten(#2d3035, 2) 
-    .code pre
-      background-color: lighten(#2d3035, 2)  
-
-    .gutter pre
-      background: lighten(#2d3035, 3) 
-
-    &:after
-      background: lighten(#2d3035, 3) 
-    
-    table
-      &:after,.copy-notice
-        background: lighten(#2d3035, 3)  
-    
-    &::-webkit-scrollbar-thumb
-      background: lighten(#2d3035, 8) 
-      
-  .copy-notice
-    background: lighten(#2d3035, 3)  
-
-  .aplayer
-    color: #000000 
-    filter: brightness(0.6)
-
-  .translate_chn_to_cht,
-  .darkmode,
-  #readmode,
-  #to_comment,
-  #font_plus,
-  #font_minus,
-  #rightside_config,
-  #go-up,
-  #mobile-toc-button
-    background-color: lighten(#2d3035,10) !important
-    color: #99a9bf !important
-
-    &:hover
-      background: lighten(#2d3035,20) !important
-  
-  .md-links-item:before,
-  .aside_category_list:hover,
-  .archive-list-item:hover,
-  #bookmark-it,
-  .reward-button,
-  .reward-all,
-  .note
-    background-color: lighten(#2d3035,10) !important
-
-  img,iframe,.gist
-    filter: brightness(0.7)
-
-  #aside_content
-    .card_widget
-      background:#2d3035 !important
-    .headline,
-    .length_num,
-    .aside_post_title,
-    .aside_category_list_link,
-    .archive-list-link,
-    .social-icon
-      color: #99a9bf !important
 
     #archive,
     .tag-cloud,
@@ -182,18 +28,159 @@
     #page,
     .flink,
     .layout_post
-    background: #2d3035
+      background: #121212
 
+    #sidebar
+      background: #121212
+      box-shadow: -.25rem 0 .25rem #121212
+
+    .article-container code
+      background: #2c2c2c
+
+    .recent-posts
+      .recent-post-item
+        background: #121212 !important
+
+      .article-title
+        color: alpha(#FFFFFF, .8) !important
+
+    #page-header
+      &.fixed
+        background: #121212
+        box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0)
+
+        .toggle-menu,
+        #site-name,
+        a
+          color: alpha(#FFFFFF, .8)
+
+      .menus_item_child
+        background-color: lighten(#121212, 5) !important
+
+        li
+          &:hover
+            background: lighten(#121212, 20)
+
+          a
+            color: alpha(#FFFFFF, .6)
+
+    // 代碼框
+    .article-container pre,
+    .article-container pre code
+      background-color: lighten(#121212, 2)
+
+    .highlight-tools
+      background: lighten(#121212, 3)
+
+    .article-container .highlight:not(.js-file-line-container)
+      background-color: lighten(#121212, 2)
+
+      .code pre,
+      .gutter pre
+        background-color: lighten(#121212, 2)
+
+      table
+        .copy-notice
+          background: lighten(#121212, 3)
+
+    .copy-notice
+      background: lighten(#121212, 3)
+
+    blockquote
+      background-color: lighten(#121212, 10)
+      color: alpha(#FFFFFF, .6)
+
+    hr
+      border: 2px dashed alpha(#FFFFFF, .3)
+      background: 0
+
+      &:before
+        color: alpha(#FFFFFF, .6)
+
+    .layout_post >.tag_share .post-meta__tags
+      border: 1px solid alpha(#FFFFFF, .6)
+      background: 0
+      color: alpha(#FFFFFF, .6)
+
+      &:hover
+        background: darken(#FFFFFF, 60)
+
+    // 文章版權
+    .post-copyright
+      border: 1px solid alpha(#FFFFFF, .6)
+
+      .post-copyright-meta
+        color: alpha(#FFFFFF, .8)
+
+      .post-copyright-info
+        color: alpha(#FFFFFF, .6)
+
+    // 音樂播放器
+    .aplayer
+      filter: brightness(.7)
+      color: #000000
+
+    // 右下角按鈕
+    #rightside
+      & > div
+        & > i,
+        & > a,
+        & > div
+          background-color: lighten(#121212, 5) !important
+          color: alpha(#FFFFFF, .6) !important
+
+          &:hover
+            background: lighten(#121212, 20) !important
+
+    // 打賞按鈕
+    .post-reward
+      .reward-button
+        background-color: lighten(#121212, 10) !important
+
+      .reward-all
+        background-color: lighten(#121212, 10) !important
+
+        &:after
+          border-top: 13px solid lighten(#121212, 10) !important
+
+    .md-links-item:before,
+    .aside-category-list:hover,
+    .archive-list-item:hover,
+    #bookmark-it
+      background-color: lighten(#121212, 10) !important
+
+    img,
+    iframe,
+    .gist
+      filter: brightness(.7)
+
+    // 側邊欄
+    #aside_content
+      .card-widget
+        background: #121212 !important
+
+      .headline,
+      .length_num,
+      .aside-post_title,
+      .aside-category-list_link,
+      .archive-list-link,
+      .social-icon
+        color: alpha(#FFFFFF, .6) !important
+
+    .button--animated:before
+      background: lighten(#121212, 20) !important
+
+    // 頭部
     #nav,
     #top-container
       &::before
-      content: ""
         position: absolute
         top: 0
+        right: 0
         bottom: 0
         left: 0
-      right: 0
+        background-color: alpha($dark-black, .7)
-      background-color: alpha($dark-black,0.7)
+        content: ''
 
     #nav span,
     #nav i,
@@ -201,103 +188,169 @@
     #page-header .toggle-menu,
     #top-container #post-meta,
     #top-container a,
-  .posttitle,
     #footer-wrap,
     #footer-wrap a
-    color: lighten(#99a9bf,10)
+      color: alpha(#FFFFFF, .6)
+
+    .posttitle,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6
+      color: alpha(#FFFFFF, .8)
 
     .recent-posts .post-meta__date,
     .recent-posts .article-meta,
     .recent-posts .article-meta__categories,
-  h1, h2, h3, h4, h5, h6,
-  .prev_info,
-  .next_info,
     .post-reward .reward-button,
     .fa-clipboard,
     .gutter pre,
     #bookmark-it,
     .copy-notice,
     .md-links-item a,
-  .category-list-link
+    .category-list-link,
-    color: #99a9bf !important
+    .relatedPosts_date,
+    .prev-post .label,
+    .next-post .label
+      color: alpha(#FFFFFF, .6) !important
 
+    .prev_info,
+    .next_info,
+    .relatedPosts_title
+      color: alpha(#FFFFFF, .8) !important
+
+    // 時間軸界面
     .article-sort-item__title
-    color: #99a9bf
+      color: alpha(#FFFFFF, .6)
+
       &:hover
         color: #49b1f5
 
-  //打賞 分享
+    // 手機 MENU,TOC
-  .post-reward      
-    .reward-all:after
-      border-top: 13px solid lighten(#2d3035,10) !important
-    
-
-  #web_bg[data-type=color],
-  #footer[data-type=color]
-    background: #2d3032
-
-  #web_bg[data-type=photo]:before,
-  #footer[data-type=photo]:before
-    background-color: alpha($dark-black,0.7)
-
-  #hexo-blog-encrypt
-    label,input
-      color: #99a9bf !important
-    input
-      background-color: #2d3035
-
-
     #mobile-sidebar
       #mobile-sidebar-menus
-      background: #2d3035
+        background: #121212
 
         .headline
-        color: #99a9bf !important
+          color: alpha(#FFFFFF, .6) !important
 
         .length_num
-        color: darken(#99a9bf,10) !important
+          color: alpha(#FFFFFF, .8) !important
+
         a
-        color: #99a9bf !important
+          color: alpha(#FFFFFF, .6) !important
 
       #mobile-sidebar-toc
-      background: #2d3035
+        background: #121212
+
         a
-        color: #99a9bf !important
+          color: alpha(#FFFFFF, .6) !important
 
-  #page-header 
+    // note
-    .menus_item_child
+    if hexo-config('note.style') == 'modern'
-      background-color: #2d3035 !important
+      .note
+        filter: brightness(.7)
 
-      &:before
+    if hexo-config('note.style') == 'flat'
-        border-color: transparent transparent #2d3035 !important
+      .note
+        filter: brightness(.7)
+        color: #4c4948
 
-      li
+    // 第三方
-        a
+    // 插件 hexo-blog-encrypt
-          color: #99a9bf
+    #hexo-blog-encrypt
+      label,
+      input
+        color: alpha(#FFFFFF, .6) !important
 
-  .bookmark--animated:before
+      input
-    background: lighten(#2d3035,20) !important
+        background-color: #121212
 
     if hexo-config('gitalk') && hexo-config('gitalk.enable')
       #gitalk-container
-      .gt-header-textarea
+        .gt-header-textarea,
-        background-color: #2d3035 !important
+        .gt-header-preview,
-        color: #99a9bf
+        .gt-comment-content,
-        border: 1px solid #99a9bf
+        button,
-      .gt-comment-content
+        .gt-popup
-        filter: brightness(0.7)
+          filter: brightness(.7)
 
+        svg
+          fill: alpha(#FFFFFF, .6) !important
 
+    if hexo-config('valine') && hexo-config('valine.enable')
+      // 評論
+      #vcomment
+        p,
+        a,
+        textarea,
+        .vemoji-btn,
+        .vpreview-btn,
+        input,
+        path,
+        .vcount,
+        .vnum,
+        .vtime,
+        .vsys,
+        .vsys,
+        .vnick
+          color: alpha(#FFFFFF, .6) !important
 
+        .vsys
+          background: rgb(97, 106, 107) !important
 
+        .vbtn
+          border: 1px solid alpha(#FFFFFF, .6)
+          background: rgb(45, 48, 53) !important
+          color: alpha(#FFFFFF, .6) !important
 
+        .vwrap
+          border: 1px solid alpha(#FFFFFF, .6)
 
+        input
+          border-bottom: 1px dashed #616a6b
 
+        .vh
+          border-bottom: 1px dashed #616a6b
 
+        pre
+          border: 1px solid alpha(#FFFFFF, .6)
+          background-color: #121212
 
+          code
+            background: transparent
 
+        code
+          background-color: #2c2c2c
+          color: alpha(#FFFFFF, .6)
 
+        .vcontent.expand:before
+          background: linear-gradient(180deg, hsla(0, 0, 0, 0), hsl(218, 8%, 19%))
 
+        .vcontent.expand:after
+          background: hsla(204, 5%, 22%, 1)
 
+    if hexo-config('local_search') && hexo-config('local_search.enable')
+      #local-search
+        background: #121212
 
+        .local-search-box--input
+          background: #121212
+          color: alpha(#FFFFFF, .6)
 
+        .search-result-title
+          color: alpha(#FFFFFF, .6)
+
+    if hexo-config('algolia_search.enable')
+      #algolia-search
+        background: #121212
+
+        .ais-search-box--input
+          background: #121212
+          color: alpha(#FFFFFF, .6)
+
+        #algolia-search-results
+          .algolia-hit-item-link
+            color: alpha(#FFFFFF, .6)

source/css/_search/algolia.styl

@@ -1,5 +1,5 @@
 #algolia-search
-  animation: titlescale 0.5s
+  animation: titlescale .5s
 
   .ais-search-box
     margin: 0 auto
@@ -7,7 +7,7 @@
     width: 100%
 
     input
-      padding: 0.25rem 0.7rem
+      padding: .25rem .7rem
       outline: none
       border: 2px solid $light-blue
       border-radius: 2rem
@@ -22,18 +22,18 @@
         border-color: $ruby
 
     &:before
-      $w = 0.3rem
+      $w = .3rem
       position: absolute
-      top: 0.4rem
+      top: .4rem
       left: 0
       width: w = $w
       height: h = w
-      border: 0.5 * w solid $light-blue
+      border: .5 * w solid $light-blue
       border-radius: w
       background: $white
-      content: ""
+      content: ''
       line-height: h
-      transition: all 0.2s ease-in-out
+      transition: all .2s ease-in-out
 
     a
       display: block
@@ -46,12 +46,12 @@
         color: $light-blue
 
   .ais-pagination.pagination
-    margin: 0.8rem 0 0 0
+    margin: .8rem 0 0
     padding: 0
     text-align: center
 
     .ais-pagination--item
-      margin: 0 0.2rem
+      margin: 0 .2rem
       padding: 0
 
       a

source/css/_search/index.styl

@@ -14,18 +14,18 @@
 
   span.search-close-button
     position: absolute
-    top: 0.5rem
+    top: .5rem
-    right: 0.5rem
+    right: .5rem
     color: $grey
     line-height: 1
     cursor: pointer
-    transition: color 0.2s ease-in-out
+    transition: color .2s ease-in-out
 
     &:hover
       color: $light-blue
 
   &__title
-    padding: 0 0 0.7rem
+    padding: 0 0 .7rem
     color: $light-blue
     font-size: 1rem
     line-height: 1
@@ -38,7 +38,7 @@
   left: 0
   z-index: 1000
   display: none
-  background: rgba(0, 0, 0, 0.6)
+  background: rgba(0, 0, 0, .6)
 
 @media screen and (max-width: $sm)
   .search-dialog

source/css/_search/local-search.styl

@@ -1,5 +1,5 @@
 #local-search
-  animation: titlescale 0.5s
+  animation: titlescale .5s
 
   .local-search-box
     margin: 0 auto
@@ -7,7 +7,7 @@
     width: 100%
 
     input
-      padding: 0.25rem 0.7rem
+      padding: .25rem .7rem
       width: 100%
       outline: none
       border: 2px solid $light-blue
@@ -23,18 +23,18 @@
         border-color: $ruby
 
     &:before
-      $w = 0.3rem
+      $w = .3rem
       position: absolute
-      top: 0.4rem
+      top: .4rem
       left: 0
       width: w = $w
       height: h = w
-      border: 0.5 * w solid $light-blue
+      border: .5 * w solid $light-blue
       border-radius: w
       background: $white
-      content: ""
+      content: ''
       line-height: h
-      transition: all 0.2s ease-in-out
+      transition: all .2s ease-in-out
 
     a
       display: block

source/css/_third-party/normalize.min.css

@@ -1 +1 @@
-/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}/*# sourceMappingURL=normalize.min.css.map */
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}

source/css/index.styl

@@ -1,18 +1,16 @@
-@import "nib"
+@import 'nib'
-@import "_third-party/normalize.min.css"
+@import '_third-party/normalize.min.css'
 // project
-@import "var"
+@import 'var'
-@import "_global"
+@import '_global'
-@import "_highlight/highlight"
+@import '_highlight/highlight'
-@import "_layout/*"
+@import '_layout/*'
 
 // search
-if hexo-config("algolia_search.enable")
+if hexo-config('algolia_search.enable')
-  @import "_search/index"
+  @import '_search/index'
-  @import "_search/algolia"
+  @import '_search/algolia'
-
-if hexo-config("local_search") && hexo-config("local_search.enable")
-  @import "_search/index"
-  @import "_search/local-search"
-
 
+if hexo-config('local_search') && hexo-config('local_search.enable')
+  @import '_search/index'
+  @import '_search/local-search'

source/css/var.styl

@@ -62,7 +62,6 @@ $sidebar-icon-left = $sidebar-icon-top - 4px
 $sidebar-icon-size = 16px
 $web-bg = convert(hexo-config("background"))
 $index_top_img_height = convert(hexo-config('index_top_img_height')) || 100vh
-$index_site_info_top = convert(hexo-config("index_site_info_top")) || 43%
 // Global color & SVG
 $pale-blue = $theme-hr-color
 $light-blue = $theme-color
@@ -109,7 +108,6 @@ $content-large-width = 1000px
 $a-link-color = $theme-link-color
 $a-hover-color = #82AAFF
 $img-border-color = #eaeefb
-$img-border-padding = 4px
 // sidebar
 $sidebar-width = 300px
 $sidebar-background = #f6f8fa

source/js/baidupush.js

@@ -1,12 +0,0 @@
-(function(){
-    var bp = document.createElement('script');
-    var curProtocol = window.location.protocol.split(':')[0];
-    if (curProtocol === 'https') {
-        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
-    }
-    else {
-        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
-    }
-    var s = document.getElementsByTagName("script")[0];
-    s.parentNode.insertBefore(bp, s);
-})();

source/js/runtimeshow.js

@@ -1,19 +0,0 @@
-// get user config
-var start_date = document.getElementById("runtionshow").getAttribute("start_date")
-
-function show_date_time() {
-    BirthDay=new Date(start_date);
-    today=new Date();
-    timeold=(today.getTime()-BirthDay.getTime());
-    msPerDay=24*60*60*1000
-    e_daysold=timeold/msPerDay
-    daysold=Math.floor(e_daysold);
-    webinfo_runtime_count.innerHTML= daysold + " " + GLOBAL_CONFIG.runtime_unit
-}
-
-var interval;
-show_date_time();
-clearInterval(interval);
-interval = setInterval(show_date_time, 10000);
-
-    

source/js/search/algolia.js

@@ -1,143 +0,0 @@
-$(function () {
-  $('a.social-icon.search').on('click', function () {
-    $('body').css('width', '100%')
-    $('body').css('overflow', 'hidden')
-
-    $('.search-dialog').animate({}, function () {
-      $('.search-dialog').css({
-        'display': 'block'
-      }),300
-    })
-
-    $('.ais-search-box--input').focus()
-    $('.search-mask').fadeIn();
-    // shortcut: ESC
-    document.addEventListener('keydown', function f(event) {
-      if (event.code == "Escape") {
-        closeSearch();
-        document.removeEventListener('keydown', f);
-      }
-    })
-  })
-
-  var closeSearch = function () {
-    $('body').css('width', '')
-    $('body').css('overflow', '')
-    $('.search-dialog').css({
-      'animation': 'search_close .5s'
-    })
-
-    $('.search-dialog').animate({}, function () {
-
-      setTimeout(function () {
-        $('.search-dialog').css({
-          'animation': '',
-          'display': 'none'
-        })
-      },500)
-    })
-
-    $('.search-mask').fadeOut();
-  }
-  $('.search-mask, .search-close-button').on('click', closeSearch)
-
-
-  var algolia = GLOBAL_CONFIG.algolia
-  var isAlgoliaValid = algolia.appId && algolia.apiKey && algolia.indexName
-  if (!isAlgoliaValid) {
-    return console.error('Algolia setting is invalid!')
-  }
-
-  var search = instantsearch({
-    appId: algolia.appId,
-    apiKey: algolia.apiKey,
-    indexName: algolia.indexName,
-    searchParameters: {
-      hitsPerPage: algolia.hits.per_page || 10
-    },
-    searchFunction: function (helper) {
-      var searchInput = $('#algolia-search-input').find('input')
-
-      if (searchInput.val()) {
-        helper.search()
-      }
-    }
-  })
-
-  search.addWidget(
-    instantsearch.widgets.searchBox({
-      container: '#algolia-search-input',
-      reset: false,
-      magnifier: false,
-      placeholder: GLOBAL_CONFIG.algolia.languages.input_placeholder
-    })
-  )
-  search.addWidget(
-    instantsearch.widgets.hits({
-      container: '#algolia-hits',
-      templates: {
-        item: function (data) {
-          var link = data.permalink ? data.permalink : (GLOBAL_CONFIG.root + data.path)
-          return (
-            '<a href="' + link + '" class="algolia-hit-item-link">' +
-            data._highlightResult.title.value +
-            '</a>'
-          )
-        },
-        empty: function (data) {
-          return (
-            '<div id="algolia-hits-empty">' +
-            GLOBAL_CONFIG.algolia.languages.hits_empty.replace(/\$\{query}/, data.query) +
-            '</div>'
-          )
-        }
-      },
-      cssClasses: {
-        item: 'algolia-hit-item'
-      }
-    })
-  )
-
-  search.addWidget(
-    instantsearch.widgets.stats({
-      container: '#algolia-stats',
-      templates: {
-        body: function (data) {
-          var stats = GLOBAL_CONFIG.algolia.languages.hits_stats
-            .replace(/\$\{hits}/, data.nbHits)
-            .replace(/\$\{time}/, data.processingTimeMS)
-          return (
-            '<hr>' +
-            stats +
-            '<span class="algolia-logo pull_right">' +
-            '  <img src="' + GLOBAL_CONFIG.root + 'img/algolia.svg" alt="Algolia" />' +
-            '</span>'
-          )
-        }
-      }
-    })
-  )
-
-  search.addWidget(
-    instantsearch.widgets.pagination({
-      container: '#algolia-pagination',
-      scrollTo: false,
-      showFirstLast: false,
-      labels: {
-        first: '<i class="fa fa-angle-double-left"></i>',
-        last: '<i class="fa fa-angle-double-right"></i>',
-        previous: '<i class="fa fa-angle-left"></i>',
-        next: '<i class="fa fa-angle-right"></i>'
-      },
-      cssClasses: {
-        root: 'pagination',
-        item: 'pagination-item',
-        link: 'page-number',
-        active: 'current',
-        disabled: 'disabled-item'
-      }
-    })
-  )
-
-  search.start()
-})

source/js/search/local-search.js

@@ -1,111 +0,0 @@
-$(function () {
-  var loadFlag = false
-  $('a.social-icon.search').on('click', function () {
-    $('body').css('width', '100%')
-    $('body').css('overflow', 'hidden')
-    $('.search-dialog').animate({}, function () {
-      $('.search-dialog').css({
-        'display': 'block'
-      }),300
-    })
-          $('#local-search-input input').focus()
-  
-          $('.search-mask').fadeIn();
-    if (!loadFlag) {
-      search(GLOBAL_CONFIG.localSearch.path)
-      loadFlag = true
-    }
-
-    // shortcut: ESC
-    document.addEventListener('keydown', function f(event) {
-      if (event.code === 'Escape') {
-        closeSearch()
-        document.removeEventListener('keydown', f)
-      }
-    })
-  })
-
-  var closeSearch = function () {
-    $('body').css('width', '')
-    $('body').css('overflow', '')
-    $('.search-dialog').css({
-      'animation': 'search_close .5s'
-    })
-
-    $('.search-dialog').animate({}, function () {
-
-      setTimeout(function () {
-        $('.search-dialog').css({
-          'animation': '',
-          'display': 'none'
-        })
-      },500)
-    })
-
-    $('.search-mask').fadeOut();
-  }
-  $('.search-mask, .search-close-button').on('click', closeSearch)
-
-  function search(path) {
-    $.ajax({
-      url: GLOBAL_CONFIG.root + path,
-      dataType: 'xml',
-      success: function (xmlResponse) {
-        // get the contents from search data
-        var datas = $('entry', xmlResponse).map(function () {
-          return {
-            title: $('title', this).text(),
-            content: $('content', this).text(),
-            url: $('url', this).text()
-          }
-        }).get()
-        var $input = $('#local-search-input input')[0]
-        var $resultContent = $('#local-hits')[0]
-        $input.addEventListener('input', function () {
-          var str = '<div class="search-result-list">'
-          var keywords = this.value.trim().toLowerCase().split(/[\s]+/)
-          $resultContent.innerHTML = ''
-          if (this.value.trim().length <= 0) {
-            $('.local-search-stats__hr').hide()
-            return
-          }
-          var count = 0
-          // perform local searching
-          datas.forEach(function (data) {
-            var isMatch = true
-            var dataTitle = data.title.trim().toLowerCase()
-            var dataContent = data.content.trim().replace(/<[^>]+>/g, '').toLowerCase()
-            var dataUrl = data.url
-            var indexTitle = -1
-            var indexContent = -1
-            // only match artiles with not empty titles and contents
-            if (dataTitle !== '' && dataContent !== '') {
-              keywords.forEach(function (keyword, i) {
-                indexTitle = dataTitle.indexOf(keyword)
-                indexContent = dataContent.indexOf(keyword)
-                if (indexTitle < 0 && indexContent < 0) {
-                  isMatch = false
-                } else {
-                  if (indexContent < 0) {
-                    indexContent = 0
-                  }
-                }
-              })
-            }
-            // show search results
-            if (isMatch) {
-              str += '<div class="local-search__hit-item"><a href="' + dataUrl + '" class="search-result-title">' + dataTitle + '</a>' + '</div>'
-              count += 1
-              $('.local-search-stats__hr').show()
-            }
-          })
-          if (count === 0) {
-            str += '<div id="local-search__hits-empty">' + GLOBAL_CONFIG.localSearch.languages.hits_empty.replace(/\$\{query}/, this.value.trim()) +
-              '</div>'
-          }
-          $resultContent.innerHTML = str
-        })
-      }
-    })
-  }
-})

source/js/third-party/ClickShowText.js

@@ -1,42 +0,0 @@
-  function co(){
-    var colorElements = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";
-     var colorArray = colorElements.split(",");
-     var color ="#";
-     for(var i =0;i<6;i++){
-     color+=colorArray[Math.floor(Math.random()*16)];
-     }
-     return color;
- };
- var a_idx = 0;
- jQuery(document).ready(function($) {
-   $("body").click(function (e) {
-   
-     var config = GLOBAL_CONFIG.ClickShowText;
-     
-     /*这个数组中的每一个字符是你要浮动显示的词或句子，每次点击鼠标后按顺序出现*/
-     var a = config.text.split(",");
-     var $i = $("<span/>").text(a[a_idx]);
-     a_idx = (a_idx + 1) % a.length;
-     var x = e.pageX,
-     y = e.pageY;
-     $i.css({
-    "z-index": 150,
-    "top": y - 20,
-    "left": x -40,
-    "position": "absolute",
-    "font-weight": "bold",
-    "color": co(),
-    "cursor": "default",
-    "font-size": config.fontSize || "inherit"
-     });
-     $("body").append($i);
-     $i.animate({
-    "top": y - 180,
-    "opacity": 0
-     },
-     1500,
-     function() {
-    $i.remove();
-     });
- });
- });

source/js/third-party/activate-power-mode.js

@@ -1 +0,0 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.POWERMODE=e():t.POWERMODE=e()}(this,function(){return function(o){var n={};function r(t){if(n[t])return n[t].exports;var e=n[t]={exports:{},id:t,loaded:!1};return o[t].call(e.exports,e,e.exports,r),e.loaded=!0,e.exports}return r.m=o,r.c=n,r.p="",r(0)}([function(t,e,l){"use strict";var r=document.createElement("canvas");r.width=window.innerWidth,r.height=window.innerHeight,r.style.cssText="position:fixed;top:0;left:0;pointer-events:none;z-index:999999",window.addEventListener("resize",function(){r.width=window.innerWidth,r.height=window.innerHeight}),document.body.appendChild(r);var i=r.getContext("2d"),c=[],u=0,p=!1;function o(t,e){return Math.random()*(e-t)+t}function f(t){if(h.colorful){var e=o(0,360);return"hsla("+o(e-10,e+10)+", 100%, "+o(50,80)+"%, 1)"}return window.getComputedStyle(t).color}function h(){for(var t=function(){var t,e=document.activeElement;if("TEXTAREA"===e.tagName||"INPUT"===e.tagName&&"text"===e.getAttribute("type")){var o=l(1)(e,e.selectionEnd);return t=e.getBoundingClientRect(),{x:o.left+t.left,y:o.top+t.top,color:f(e)}}var n=window.getSelection();if(n.rangeCount){var r=n.getRangeAt(0),i=r.startContainer;return i.nodeType===document.TEXT_NODE&&(i=i.parentNode),{x:(t=r.getBoundingClientRect()).left,y:t.top,color:f(i)}}return{x:0,y:0,color:"transparent"}}(),e=5+Math.round(10*Math.random());e--;)c[u]=(o=t.x,n=t.y,r=t.color,{x:o,y:n,alpha:1,color:r,velocity:{x:2*Math.random()-1,y:2*Math.random()-3.5}}),u=(u+1)%500;var o,n,r;if(h.shake){var i=1+2*Math.random(),a=i*(.5<Math.random()?-1:1),d=i*(.5<Math.random()?-1:1);document.body.style.marginLeft=a+"px",document.body.style.marginTop=d+"px",setTimeout(function(){document.body.style.marginLeft="",document.body.style.marginTop=""},75)}p||requestAnimationFrame(s)}function s(){p=!0,i.clearRect(0,0,r.width,r.height);for(var t=!1,e=r.getBoundingClientRect(),o=0;o<c.length;++o){var n=c[o];n.alpha<=.1||(n.velocity.y+=.075,n.x+=n.velocity.x,n.y+=n.velocity.y,n.alpha*=.96,i.globalAlpha=n.alpha,i.fillStyle=n.color,i.fillRect(Math.round(n.x-1.5)-e.left,Math.round(n.y-1.5)-e.top,3,3),t=!0)}t?requestAnimationFrame(s):p=!1}h.shake=!0,h.colorful=!1,t.exports=h},function(e,t){!function(){var u=["direction","boxSizing","width","height","overflowX","overflowY","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderStyle","paddingTop","paddingRight","paddingBottom","paddingLeft","fontStyle","fontVariant","fontWeight","fontStretch","fontSize","fontSizeAdjust","lineHeight","fontFamily","textAlign","textTransform","textIndent","textDecoration","letterSpacing","wordSpacing","tabSize","MozTabSize"],p=null!=window.mozInnerScreenX;function t(t,e,o){var n=o&&o.debug||!1;if(n){var r=document.querySelector("#input-textarea-caret-position-mirror-div");r&&r.parentNode.removeChild(r)}var i=document.createElement("div");i.id="input-textarea-caret-position-mirror-div",document.body.appendChild(i);var a=i.style,d=window.getComputedStyle?getComputedStyle(t):t.currentStyle;a.whiteSpace="pre-wrap","INPUT"!==t.nodeName&&(a.wordWrap="break-word"),a.position="absolute",n||(a.visibility="hidden"),u.forEach(function(t){a[t]=d[t]}),p?t.scrollHeight>parseInt(d.height)&&(a.overflowY="scroll"):a.overflow="hidden",i.textContent=t.value.substring(0,e),"INPUT"===t.nodeName&&(i.textContent=i.textContent.replace(/\s/g," "));var l=document.createElement("span");l.textContent=t.value.substring(e)||".",i.appendChild(l);var c={top:l.offsetTop+parseInt(d.borderTopWidth),left:l.offsetLeft+parseInt(d.borderLeftWidth)};return n?l.style.backgroundColor="#aaa":document.body.removeChild(i),c}void 0!==e&&void 0!==e.exports?e.exports=t:window.getCaretCoordinates=t}()}])});

source/js/third-party/anime.min.js

@@ -1,27 +0,0 @@
-/*
- 2017 Julian Garnier
- Released under the MIT license
-*/
-var $jscomp$this=this;
-(function(v,p){"function"===typeof define&&define.amd?define([],p):"object"===typeof module&&module.exports?module.exports=p():v.anime=p()})(this,function(){function v(a){if(!g.col(a))try{return document.querySelectorAll(a)}catch(b){}}function p(a){return a.reduce(function(a,d){return a.concat(g.arr(d)?p(d):d)},[])}function w(a){if(g.arr(a))return a;g.str(a)&&(a=v(a)||a);return a instanceof NodeList||a instanceof HTMLCollection?[].slice.call(a):[a]}function F(a,b){return a.some(function(a){return a===b})}
-function A(a){var b={},d;for(d in a)b[d]=a[d];return b}function G(a,b){var d=A(a),c;for(c in a)d[c]=b.hasOwnProperty(c)?b[c]:a[c];return d}function B(a,b){var d=A(a),c;for(c in b)d[c]=g.und(a[c])?b[c]:a[c];return d}function S(a){a=a.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,function(a,b,d,h){return b+b+d+d+h+h});var b=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(a);a=parseInt(b[1],16);var d=parseInt(b[2],16),b=parseInt(b[3],16);return"rgb("+a+","+d+","+b+")"}function T(a){function b(a,b,c){0>
-c&&(c+=1);1<c&&--c;return c<1/6?a+6*(b-a)*c:.5>c?b:c<2/3?a+(b-a)*(2/3-c)*6:a}var d=/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(a);a=parseInt(d[1])/360;var c=parseInt(d[2])/100,d=parseInt(d[3])/100;if(0==c)c=d=a=d;else{var e=.5>d?d*(1+c):d+c-d*c,l=2*d-e,c=b(l,e,a+1/3),d=b(l,e,a);a=b(l,e,a-1/3)}return"rgb("+255*c+","+255*d+","+255*a+")"}function x(a){if(a=/([\+\-]?[0-9#\.]+)(%|px|pt|em|rem|in|cm|mm|ex|pc|vw|vh|deg|rad|turn)?/.exec(a))return a[2]}function U(a){if(-1<a.indexOf("translate"))return"px";
-if(-1<a.indexOf("rotate")||-1<a.indexOf("skew"))return"deg"}function H(a,b){return g.fnc(a)?a(b.target,b.id,b.total):a}function C(a,b){if(b in a.style)return getComputedStyle(a).getPropertyValue(b.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase())||"0"}function I(a,b){if(g.dom(a)&&F(V,b))return"transform";if(g.dom(a)&&(a.getAttribute(b)||g.svg(a)&&a[b]))return"attribute";if(g.dom(a)&&"transform"!==b&&C(a,b))return"css";if(null!=a[b])return"object"}function W(a,b){var d=U(b),d=-1<b.indexOf("scale")?
-1:0+d;a=a.style.transform;if(!a)return d;for(var c=[],e=[],l=[],h=/(\w+)\((.+?)\)/g;c=h.exec(a);)e.push(c[1]),l.push(c[2]);a=l.filter(function(a,c){return e[c]===b});return a.length?a[0]:d}function J(a,b){switch(I(a,b)){case "transform":return W(a,b);case "css":return C(a,b);case "attribute":return a.getAttribute(b)}return a[b]||0}function K(a,b){var d=/^(\*=|\+=|-=)/.exec(a);if(!d)return a;b=parseFloat(b);a=parseFloat(a.replace(d[0],""));switch(d[0][0]){case "+":return b+a;case "-":return b-a;case "*":return b*
-a}}function D(a){return g.obj(a)&&a.hasOwnProperty("totalLength")}function X(a,b){function d(c){c=void 0===c?0:c;return a.el.getPointAtLength(1<=b+c?b+c:0)}var c=d(),e=d(-1),l=d(1);switch(a.property){case "x":return c.x;case "y":return c.y;case "angle":return 180*Math.atan2(l.y-e.y,l.x-e.x)/Math.PI}}function L(a,b){var d=/-?\d*\.?\d+/g;a=D(a)?a.totalLength:a;if(g.col(a))b=g.rgb(a)?a:g.hex(a)?S(a):g.hsl(a)?T(a):void 0;else{var c=x(a);a=c?a.substr(0,a.length-c.length):a;b=b?a+b:a}b+="";return{original:b,
-numbers:b.match(d)?b.match(d).map(Number):[0],strings:b.split(d)}}function Y(a,b){return b.reduce(function(b,c,e){return b+a[e-1]+c})}function M(a){return(a?p(g.arr(a)?a.map(w):w(a)):[]).filter(function(a,d,c){return c.indexOf(a)===d})}function Z(a){var b=M(a);return b.map(function(a,c){return{target:a,id:c,total:b.length}})}function aa(a,b){var d=A(b);if(g.arr(a)){var c=a.length;2!==c||g.obj(a[0])?g.fnc(b.duration)||(d.duration=b.duration/c):a={value:a}}return w(a).map(function(a,c){c=c?0:b.delay;
-a=g.obj(a)&&!D(a)?a:{value:a};g.und(a.delay)&&(a.delay=c);return a}).map(function(a){return B(a,d)})}function ba(a,b){var d={},c;for(c in a){var e=H(a[c],b);g.arr(e)&&(e=e.map(function(a){return H(a,b)}),1===e.length&&(e=e[0]));d[c]=e}d.duration=parseFloat(d.duration);d.delay=parseFloat(d.delay);return d}function ca(a){return g.arr(a)?y.apply(this,a):N[a]}function da(a,b){var d;return a.tweens.map(function(c){c=ba(c,b);var e=c.value,l=J(b.target,a.name),h=d?d.to.original:l,h=g.arr(e)?e[0]:h,m=K(g.arr(e)?
-e[1]:e,h),l=x(m)||x(h)||x(l);c.isPath=D(e);c.from=L(h,l);c.to=L(m,l);c.start=d?d.end:a.offset;c.end=c.start+c.delay+c.duration;c.easing=ca(c.easing);c.elasticity=(1E3-Math.min(Math.max(c.elasticity,1),999))/1E3;g.col(c.from.original)&&(c.round=1);return d=c})}function ea(a,b){return p(a.map(function(a){return b.map(function(b){var c=I(a.target,b.name);if(c){var d=da(b,a);b={type:c,property:b.name,animatable:a,tweens:d,duration:d[d.length-1].end,delay:d[0].delay}}else b=void 0;return b})})).filter(function(a){return!g.und(a)})}
-function O(a,b,d){var c="delay"===a?Math.min:Math.max;return b.length?c.apply(Math,b.map(function(b){return b[a]})):d[a]}function fa(a){var b=G(ga,a),d=G(ha,a),c=Z(a.targets),e=[],g=B(b,d),h;for(h in a)g.hasOwnProperty(h)||"targets"===h||e.push({name:h,offset:g.offset,tweens:aa(a[h],d)});a=ea(c,e);return B(b,{children:[],animatables:c,animations:a,duration:O("duration",a,d),delay:O("delay",a,d)})}function n(a){function b(){return window.Promise&&new Promise(function(a){return Q=a})}function d(a){return f.reversed?
-f.duration-a:a}function c(a){for(var b=0,c={},d=f.animations,e={};b<d.length;){var g=d[b],h=g.animatable,m=g.tweens;e.tween=m.filter(function(b){return a<b.end})[0]||m[m.length-1];e.isPath$1=e.tween.isPath;e.round=e.tween.round;e.eased=e.tween.easing(Math.min(Math.max(a-e.tween.start-e.tween.delay,0),e.tween.duration)/e.tween.duration,e.tween.elasticity);m=Y(e.tween.to.numbers.map(function(a){return function(b,c){c=a.isPath$1?0:a.tween.from.numbers[c];b=c+a.eased*(b-c);a.isPath$1&&(b=X(a.tween.value,
-b));a.round&&(b=Math.round(b*a.round)/a.round);return b}}(e)),e.tween.to.strings);ia[g.type](h.target,g.property,m,c,h.id);g.currentValue=m;b++;e={isPath$1:e.isPath$1,tween:e.tween,eased:e.eased,round:e.round}}if(c)for(var k in c)E||(E=C(document.body,"transform")?"transform":"-webkit-transform"),f.animatables[k].target.style[E]=c[k].join(" ");f.currentTime=a;f.progress=a/f.duration*100}function e(a){if(f[a])f[a](f)}function g(){f.remaining&&!0!==f.remaining&&f.remaining--}function h(a){var h=f.duration,
-l=f.offset,n=f.delay,P=f.currentTime,q=f.reversed,r=d(a),r=Math.min(Math.max(r,0),h);if(f.children){var p=f.children;if(r>=f.currentTime)for(var u=0;u<p.length;u++)p[u].seek(r);else for(u=p.length;u--;)p[u].seek(r)}r>l&&r<h?(c(r),!f.began&&r>=n&&(f.began=!0,e("begin")),e("run")):(r<=l&&0!==P&&(c(0),q&&g()),r>=h&&P!==h&&(c(h),q||g()));a>=h&&(f.remaining?(t=m,"alternate"===f.direction&&(f.reversed=!f.reversed)):(f.pause(),"Promise"in window&&(Q(),R=b()),f.completed||(f.completed=!0,e("complete"))),
-k=0);e("update")}a=void 0===a?{}:a;var m,t,k=0,Q=null,R=b(),f=fa(a);f.reset=function(){var a=f.direction,b=f.loop;f.currentTime=0;f.progress=0;f.paused=!0;f.began=!1;f.completed=!1;f.reversed="reverse"===a;f.remaining="alternate"===a&&1===b?2:b;for(a=f.children.length;a--;)b=f.children[a],b.seek(b.offset),b.reset()};f.tick=function(a){m=a;t||(t=m);h((k+m-t)*n.speed)};f.seek=function(a){h(d(a))};f.pause=function(){var a=q.indexOf(f);-1<a&&q.splice(a,1);f.paused=!0};f.play=function(){f.paused&&(f.paused=
-!1,t=0,k=d(f.currentTime),q.push(f),z||ja())};f.reverse=function(){f.reversed=!f.reversed;t=0;k=d(f.currentTime)};f.restart=function(){f.pause();f.reset();f.play()};f.finished=R;f.reset();f.autoplay&&f.play();return f}var ga={update:void 0,begin:void 0,run:void 0,complete:void 0,loop:1,direction:"normal",autoplay:!0,offset:0},ha={duration:1E3,delay:0,easing:"easeOutElastic",elasticity:500,round:0},V="translateX translateY translateZ rotate rotateX rotateY rotateZ scale scaleX scaleY scaleZ skewX skewY".split(" "),
-E,g={arr:function(a){return Array.isArray(a)},obj:function(a){return-1<Object.prototype.toString.call(a).indexOf("Object")},svg:function(a){return a instanceof SVGElement},dom:function(a){return a.nodeType||g.svg(a)},str:function(a){return"string"===typeof a},fnc:function(a){return"function"===typeof a},und:function(a){return"undefined"===typeof a},hex:function(a){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(a)},rgb:function(a){return/^rgb/.test(a)},hsl:function(a){return/^hsl/.test(a)},col:function(a){return g.hex(a)||
-g.rgb(a)||g.hsl(a)}},y=function(){function a(a,d,c){return(((1-3*c+3*d)*a+(3*c-6*d))*a+3*d)*a}return function(b,d,c,e){if(0<=b&&1>=b&&0<=c&&1>=c){var g=new Float32Array(11);if(b!==d||c!==e)for(var h=0;11>h;++h)g[h]=a(.1*h,b,c);return function(h){if(b===d&&c===e)return h;if(0===h)return 0;if(1===h)return 1;for(var m=0,k=1;10!==k&&g[k]<=h;++k)m+=.1;--k;var k=m+(h-g[k])/(g[k+1]-g[k])*.1,l=3*(1-3*c+3*b)*k*k+2*(3*c-6*b)*k+3*b;if(.001<=l){for(m=0;4>m;++m){l=3*(1-3*c+3*b)*k*k+2*(3*c-6*b)*k+3*b;if(0===l)break;
-var n=a(k,b,c)-h,k=k-n/l}h=k}else if(0===l)h=k;else{var k=m,m=m+.1,f=0;do n=k+(m-k)/2,l=a(n,b,c)-h,0<l?m=n:k=n;while(1e-7<Math.abs(l)&&10>++f);h=n}return a(h,d,e)}}}}(),N=function(){function a(a,b){return 0===a||1===a?a:-Math.pow(2,10*(a-1))*Math.sin(2*(a-1-b/(2*Math.PI)*Math.asin(1))*Math.PI/b)}var b="Quad Cubic Quart Quint Sine Expo Circ Back Elastic".split(" "),d={In:[[.55,.085,.68,.53],[.55,.055,.675,.19],[.895,.03,.685,.22],[.755,.05,.855,.06],[.47,0,.745,.715],[.95,.05,.795,.035],[.6,.04,.98,
-.335],[.6,-.28,.735,.045],a],Out:[[.25,.46,.45,.94],[.215,.61,.355,1],[.165,.84,.44,1],[.23,1,.32,1],[.39,.575,.565,1],[.19,1,.22,1],[.075,.82,.165,1],[.175,.885,.32,1.275],function(b,c){return 1-a(1-b,c)}],InOut:[[.455,.03,.515,.955],[.645,.045,.355,1],[.77,0,.175,1],[.86,0,.07,1],[.445,.05,.55,.95],[1,0,0,1],[.785,.135,.15,.86],[.68,-.55,.265,1.55],function(b,c){return.5>b?a(2*b,c)/2:1-a(-2*b+2,c)/2}]},c={linear:y(.25,.25,.75,.75)},e={},l;for(l in d)e.type=l,d[e.type].forEach(function(a){return function(d,
-e){c["ease"+a.type+b[e]]=g.fnc(d)?d:y.apply($jscomp$this,d)}}(e)),e={type:e.type};return c}(),ia={css:function(a,b,d){return a.style[b]=d},attribute:function(a,b,d){return a.setAttribute(b,d)},object:function(a,b,d){return a[b]=d},transform:function(a,b,d,c,e){c[e]||(c[e]=[]);c[e].push(b+"("+d+")")}},q=[],z=0,ja=function(){function a(){z=requestAnimationFrame(b)}function b(b){var c=q.length;if(c){for(var d=0;d<c;)q[d]&&q[d].tick(b),d++;a()}else cancelAnimationFrame(z),z=0}return a}();n.version="2.0.2";
-n.speed=1;n.running=q;n.remove=function(a){a=M(a);for(var b=q.length;b--;)for(var d=q[b],c=d.animations,e=c.length;e--;)F(a,c[e].animatable.target)&&(c.splice(e,1),c.length||d.pause())};n.getValue=J;n.path=function(a,b){var d=g.str(a)?v(a)[0]:a,c=b||100;return function(a){return{el:d,property:a,totalLength:d.getTotalLength()*(c/100)}}};n.setDashoffset=function(a){var b=a.getTotalLength();a.setAttribute("stroke-dasharray",b);return b};n.bezier=y;n.easings=N;n.timeline=function(a){var b=n(a);b.pause();
-b.duration=0;b.add=function(a){b.children.forEach(function(a){a.began=!0;a.completed=!0});w(a).forEach(function(a){var c=b.duration,d=a.offset;a.autoplay=!1;a.offset=g.und(d)?c:K(d,c);b.seek(a.offset);a=n(a);a.duration>c&&(b.duration=a.duration);a.began=!0;b.children.push(a)});b.reset();b.seek(0);b.autoplay&&b.restart();return b};return b};n.random=function(a,b){return Math.floor(Math.random()*(b-a+1))+a};return n});

source/js/third-party/canvas-nest.js

@@ -1,88 +0,0 @@
-! function () {
-  var cn = document.getElementById('canvas_nest');
-  var mb = cn.getAttribute("mobile");
-
-  if (mb == 'false' && (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent))) {
-    return;
-  }
-
-  function o(w, v, i) {
-    return w.getAttribute(v) || i
-  }
-
-  function j(i) {
-    return document.getElementsByTagName(i)
-  }
-
-  function l() {
-    var i = j("script"),
-      w = i.length,
-      v = i[w - 1];
-    return {
-      l: w,
-      z: o(v, "zIndex", -1),
-      o: o(v, "opacity", 0.5),
-      c: o(v, "color", "0,0,0"),
-      n: o(v, "count", 99)
-    }
-  }
-
-  function k() {
-    r = u.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, n = u.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
-  }
-
-  function b() {
-    e.clearRect(0, 0, r, n);
-    var w = [f].concat(t);
-    var x, v, A, B, z, y;
-    t.forEach(function (i) {
-      i.x += i.xa, i.y += i.ya, i.xa *= i.x > r || i.x < 0 ? -1 : 1, i.ya *= i.y > n || i.y < 0 ? -1 : 1, e.fillRect(i.x - 0.5, i.y - 0.5, 1, 1);
-      for (v = 0; v < w.length; v++) {
-        x = w[v];
-        if (i !== x && null !== x.x && null !== x.y) {
-          B = i.x - x.x, z = i.y - x.y, y = B * B + z * z;
-          y < x.max && (x === f && y >= x.max / 2 && (i.x -= 0.03 * B, i.y -= 0.03 * z), A = (x.max - y) / x.max, e.beginPath(), e.lineWidth = A / 2, e.strokeStyle = "rgba(" + s.c + "," + (A + 0.2) + ")", e.moveTo(i.x, i.y), e.lineTo(x.x, x.y), e.stroke())
-        }
-      }
-      w.splice(w.indexOf(i), 1)
-    }), m(b)
-  }
-  var u = document.createElement("canvas"),
-    s = l(),
-    c = "c_n" + s.l,
-    e = u.getContext("2d"),
-    r, n, m = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (i) {
-      window.setTimeout(i, 1000 / 45)
-    },
-    a = Math.random,
-    f = {
-      x: null,
-      y: null,
-      max: 20000
-    };
-  u.id = c;
-  u.style.cssText = "position:fixed;top:0;left:0;z-index:" + s.z + ";opacity:" + s.o;
-  j("body")[0].appendChild(u);
-  k(), window.onresize = k;
-  window.onmousemove = function (i) {
-    i = i || window.event, f.x = i.clientX, f.y = i.clientY
-  }, window.onmouseout = function () {
-    f.x = null, f.y = null
-  };
-  for (var t = [], p = 0; s.n > p; p++) {
-    var h = a() * r,
-      g = a() * n,
-      q = 2 * a() - 1,
-      d = 2 * a() - 1;
-    t.push({
-      x: h,
-      y: g,
-      xa: q,
-      ya: d,
-      max: 6000
-    })
-  }
-  setTimeout(function () {
-    b()
-  }, 100)
-}();

source/js/third-party/canvas-ribbon.js

@@ -1,91 +0,0 @@
-/**
- * Copyright (c) 2016 hustcc
- * License: MIT
- * Version: v1.0.1
- * GitHub: https://github.com/hustcc/ribbon.js
- **/
-
-!(function () {
-
-  var script = document.getElementById('ribbon');
-  var mb = script.getAttribute("mobile");  
-  if (mb == 'false' && (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent))) {
-    return;
-  }
-
-  config = {
-    z: attr(script, 'zIndex', -1), // z-index
-    a: attr(script, 'alpha', 0.6), // alpha
-    s: attr(script, 'size', 90), // size
-    c: attr(script, 'data-click', true) // click-to-change
-  }
-
-
-  function attr (node, attr, default_value) {
-    if (default_value === true) {
-      return node.getAttribute(attr) || default_value
-    }
-    return Number(node.getAttribute(attr)) || default_value
-  }
-
-  var canvas = document.createElement('canvas'),
-    g2d = canvas.getContext('2d'),
-    pr = window.devicePixelRatio || 1,
-    width = window.innerWidth,
-    height = window.innerHeight,
-    f = config.s,
-    q,
-    t,
-    m = Math,
-    r = 0,
-    pi = m.PI * 2,
-    cos = m.cos,
-    random = m.random
-  canvas.width = width * pr
-  canvas.height = height * pr
-  g2d.scale(pr, pr)
-  g2d.globalAlpha = config.a
-  canvas.style.cssText =
-    'opacity: ' +
-    config.a +
-    ';position:fixed;top:0;left:0;z-index: ' +
-    config.z +
-    ';width:100%;height:100%;pointer-events:none;'
-  // create canvas
-  document.getElementsByTagName('body')[0].appendChild(canvas)
-
-  function redraw () {
-    g2d.clearRect(0, 0, width, height)
-    q = [{ x: 0, y: height * 0.7 + f }, { x: 0, y: height * 0.7 - f }]
-    while (q[1].x < width + f) draw(q[0], q[1])
-  }
-  function draw (i, j) {
-    g2d.beginPath()
-    g2d.moveTo(i.x, i.y)
-    g2d.lineTo(j.x, j.y)
-    var k = j.x + (random() * 2 - 0.25) * f,
-      n = line(j.y)
-    g2d.lineTo(k, n)
-    g2d.closePath()
-    r -= pi / -50
-    g2d.fillStyle =
-      '#' +
-      (
-        ((cos(r) * 127 + 128) << 16) |
-        ((cos(r + pi / 3) * 127 + 128) << 8) |
-        (cos(r + (pi / 3) * 2) * 127 + 128)
-      ).toString(16)
-    g2d.fill()
-    q[0] = q[1]
-    q[1] = { x: k, y: n }
-  }
-  function line (p) {
-    t = p + (random() * 2 - 1.1) * f
-    return t > height || t < 0 ? line(p) : t
-  }
-  if (config.c !== 'false') {
-    document.onclick = redraw
-    document.ontouchstart = redraw
-  }
-  redraw()
-})()

source/js/third-party/click_heart.js

@@ -1 +0,0 @@
-!function(e,t,a){function r(e){var a=t.createElement("div");a.className="heart",n.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}),t.body.appendChild(a)}var n=[];e.requestAnimationFrame=e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)},function(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),function(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),r(e)}}(),function e(){for(var a=0;a<n.length;a++)n[a].alpha<=0?(t.body.removeChild(n[a].el),n.splice(a,1)):(n[a].y--,n[a].scale+=.004,n[a].alpha-=.013,n[a].el.style.cssText="left:"+n[a].x+"px;top:"+n[a].y+"px;opacity:"+n[a].alpha+";transform:scale("+n[a].scale+","+n[a].scale+") rotate(45deg);background:"+n[a].color+";z-index:99999");requestAnimationFrame(e)}()}(window,document);

source/js/third-party/fireworks.js

@@ -1,129 +0,0 @@
-var canvasEl = document.querySelector('.fireworks')
-if (canvasEl) {
-  var ctx = canvasEl.getContext('2d')
-  var numberOfParticules = 30
-  var pointerX = 0
-  var pointerY = 0
-  // var tap = ('ontouchstart' in window || navigator.msMaxTouchPoints) ? 'touchstart' : 'mousedown'
-  // Fixed the mobile scroll
-  var tap = 'mousedown'
-  var colors = ['#FF1461', '#18FF92', '#5A87FF', '#FBF38C']
-
-  var setCanvasSize = debounce(function () {
-    canvasEl.width = window.innerWidth
-    canvasEl.height = window.innerHeight
-    canvasEl.style.width = window.innerWidth + 'px'
-    canvasEl.style.height = window.innerHeight + 'px'
-    canvasEl.getContext('2d').scale(1, 1)
-  }, 500)
-
-  var render = anime({
-    duration: Infinity,
-    update: function () {
-      ctx.clearRect(0, 0, canvasEl.width, canvasEl.height)
-    }
-  })
-
-  document.addEventListener(tap, function (e) {
-    if (e.target.id !== 'sidebar' && e.target.id !== 'toggle-sidebar' && e.target.nodeName !== 'A' && e.target.nodeName !== 'IMG') {
-      render.play()
-      updateCoords(e)
-      animateParticules(pointerX, pointerY)
-    }
-  }, false)
-
-  setCanvasSize()
-  window.addEventListener('resize', setCanvasSize, false)
-}
-
-function updateCoords (e) {
-  pointerX = (e.clientX || e.touches[0].clientX) - canvasEl.getBoundingClientRect().left
-  pointerY = e.clientY || e.touches[0].clientY - canvasEl.getBoundingClientRect().top
-}
-
-function setParticuleDirection (p) {
-  var angle = anime.random(0, 360) * Math.PI / 180
-  var value = anime.random(50, 180)
-  var radius = [-1, 1][anime.random(0, 1)] * value
-  return {
-    x: p.x + radius * Math.cos(angle),
-    y: p.y + radius * Math.sin(angle)
-  }
-}
-
-function createParticule (x, y) {
-  var p = {}
-  p.x = x
-  p.y = y
-  p.color = colors[anime.random(0, colors.length - 1)]
-  p.radius = anime.random(16, 32)
-  p.endPos = setParticuleDirection(p)
-  p.draw = function () {
-    ctx.beginPath()
-    ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true)
-    ctx.fillStyle = p.color
-    ctx.fill()
-  }
-  return p
-}
-
-function createCircle (x, y) {
-  var p = {}
-  p.x = x
-  p.y = y
-  p.color = '#F00'
-  p.radius = 0.1
-  p.alpha = 0.5
-  p.lineWidth = 6
-  p.draw = function () {
-    ctx.globalAlpha = p.alpha
-    ctx.beginPath()
-    ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true)
-    ctx.lineWidth = p.lineWidth
-    ctx.strokeStyle = p.color
-    ctx.stroke()
-    ctx.globalAlpha = 1
-  }
-  return p
-}
-
-function renderParticule (anim) {
-  for (var i = 0; i < anim.animatables.length; i++) {
-    anim.animatables[i].target.draw()
-  }
-}
-
-function animateParticules (x, y) {
-  var circle = createCircle(x, y)
-  var particules = []
-  for (var i = 0; i < numberOfParticules; i++) {
-    particules.push(createParticule(x, y))
-  }
-  anime.timeline().add({
-    targets: particules,
-    x: function (p) {
-      return p.endPos.x
-    },
-    y: function (p) {
-      return p.endPos.y
-    },
-    radius: 0.1,
-    duration: anime.random(1200, 1800),
-    easing: 'easeOutExpo',
-    update: renderParticule
-  })
-    .add({
-      targets: circle,
-      radius: anime.random(80, 160),
-      lineWidth: 0,
-      alpha: {
-        value: 0,
-        easing: 'linear',
-        duration: anime.random(600, 800)
-      },
-      duration: anime.random(1200, 1800),
-      easing: 'easeOutExpo',
-      update: renderParticule,
-      offset: 0
-    })
-}