V2.0.0

Breaking change
1. 手機端界面卡片化，同時，手機端也可以顯示側邊欄的內容
2. 修復當menu過多時，header界面出現錯亂的bug。當menu過多時，會變為sidebar模式
3. 增加medium-zoom大圖查看模式
4. 增加鼠標點擊特效：文字和愛心 兩個點擊特效
5. 主頁subtitle可以調用第三方api(金山詞霸每日一句、一言網的一句話、一句網、今日詩詞)
6. 添加 snackbar 彈窗
7. 修改nightshift為darkmode，darkmode可隨系統設置而自動切換，可設置隨時間而切換darkmode
8. 修復hexo自帶的標籤外掛(Tag Plugins)顯示bug(Block Quote、Code Block With caption、Gist、Youtube、Vimeo)
9. 主題所需要的css和js可根據需要配置CDN
10. 更改darkmode的加載方式，網站設置dark mode後，現在進入網頁不會在'閃'一下
11. 背景特效和背景圖片在手機界面也會顯示
12. 增加justified-gallery圖片顯示(Tag Plugins)
Feature
1. 文章頁面，字數統計、閲讀時長和閲讀量前面添加icon
2. 更改懶加載js
3. 升級typed.js/instantpage.js到最新版
4. 搜索和右下角按鈕添加退出特效
Fixed
1. 修復在 Hexo 4.0.0下，一些按鈕點擊會跳出一個空白頁的bug
2. 修復在 Hexo 4.0.0下，分頁按鈕出現代碼的bug
3. 修復當沒有設置評論時，右下角依舊出現'直達評論'按鈕的bug
4. 優化sidebar的打開速度
5. 修復文章頁標題左右邊距不平等的bug
6. 修復keywords讀取的bug
7. 修復當post/page 內容為空時，footer位置錯亂的bug
8. 修復在手機safari，toc sidebar底部內容被遮擋的bug
9. 完善Dark mode,一些界面的配色
10. 修復 card-archives 查看更多 跳轉bug
Remove
1. 移除Gitment
2. 移除Gallery

README.md

@@ -1,5 +1,11 @@
 # 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://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>
+
+
 [预览](https://jerryc.me/)
 
 一款基于[hexo-theme-melody](https://github.com/Molunerfinn/hexo-theme-melody)修改的主题
@@ -25,12 +31,11 @@ git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Bu
 theme: Butterfly
 ```
 
->如果你没有pug以及stylus的渲染器，请下载安装： npm install hexo-renderer-jade hexo-renderer-stylus --save or yarn add hexo-renderer-jade hexo-renderer-stylus
+>如果你没有pug以及stylus的渲染器，请下载安装： npm install hexo-renderer-pug hexo-renderer-stylus --save or yarn add hexo-renderer-pug hexo-renderer-stylus
 
 ## 文档
 
-可查看或[这里](https://docs.jerryc.me/)或[这里](https://jerryc.me/posts/21cfbf15)
+可查看[这里](https://jerryc.me/posts/21cfbf15)
-
 
 ## 截图
 ![image](https://user-images.githubusercontent.com/16351105/58887365-1272f780-8718-11e9-9329-3292c6ba20d4.png)

_config.yml

@@ -1,21 +1,9 @@
-# Theme color for customize
-# Notice: color value must in double quotes like "#000" or may cause error!
-# ---------------
-# theme_color:
-#   enable: true
-#   main: "#49B1F5"
-#   paginator: "#00c4b6"
-#   button_hover: "#FF7242"
-#   text_selection: "#00c4b6"
-#   link_color: "#99a9bf"
-#   meta_color: '#858585'
-#   hr_color: "#A4D8FA"
-#   read-mode-bg_color: '#FAF9DE'
-#   inline-code-color: '#F47466'
-
 # Main menu navigation
-# format: xxx: /xxx/||icon
 # ---------------
+# format: xxx: 連結 || icon
+# sub-menu
+# xxx || icon:
+#   xxx || 連結 || icon
 menu:
   Home: / || fa fa-home
   Archives: /archives/ || fa fa-archive
@@ -23,8 +11,9 @@ menu:
   Categories: /categories/ || fa fa-folder-open
   Link: /link/ || fa fa-link
   About: /about/ || fa fa-heart
-#   #XXX: /xxx
+  List||fa fa-list:
-
+    - Music || /music/ || fa fa-music
+    - Movie || /movies/ || fa fa-film
 
 # Favicon
 # ---------------
@@ -41,8 +30,6 @@ favicon: /img/favicon.ico
 #   favicon_32_32: /img/pwa/32.png
 #   favicon_16_16: /img/pwa/16.png
 #   mask_icon: /img/pwa/safari-pinned-tab.svg
-#   shortcut_icon: /img/favicon.ico
-
 
 # Highlight theme
 # ---------------
@@ -53,12 +40,20 @@ highlight_shrink: false #代碼框不展開，需點擊 '>' 打開
 
 code_word_wrap: false
 
+# copy setting
+# 是否禁止複製（如果禁止，highlight_copy的功能將無效)
+# copyright 複製的内容後面加上版權信息
+copy:
+  enable: true # true 開啓 / false 禁止
+  copyright: false
+
 # social settings
 # formal:
 #   icon: link
 # ---------------
 social:
   fa fa-github: https://github.com/jerryc127
+  fa fa-envelope: mailto:xxxxxxxx@gmail.com
   fa fa-rss: /atom.xml
 
 ####    search    ####
@@ -88,17 +83,13 @@ local_search:
 # ---------------
 mathjax:
   enable: false
-  cdn: https://cdn.jsdelivr.net/npm/mathjax/MathJax.js?config=TeX-AMS-MML_HTMLorMML
 
 # KaTeX
 # ---------------
 katex:
   enable: false
-  cdn:
-    css: https://cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css  
   hide_scrollbar: true
 
-
 ####   Analysis    ####
 # ---------------
 # baidu_analytics:
@@ -107,41 +98,21 @@ katex:
 google_analytics:
 
 
-# stylesheets loaded in the <head>
-# ---------------
-stylesheets:
-  - /css/index.css
-
-# scripts loaded in the end of the body
-# ---------------
-scripts:
-  - /js/utils.js
-  - /js/main.js
-
-# cdn for third-party library
-# ---------------
-cdn:
-  css:
-    fontawesome: https://cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css
-    # fontawesomeV5: https://use.fontawesome.com/releases/v5.8.1/css/all.css
-    fancybox: https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css
-  js:
-    jquery: https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js
-    fancybox: https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js
-    js-cookies: https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js
-
 # Post info settings
 # ---------------
 # avatar: /img/avatar.png
 avatar: https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/Photo/avatar.png
 
 # the banner image of index
-# if the banner of another page not setting,it will show the top_img
 top_img: https://i.loli.net/2019/05/22/5ce53eb6dc82757840.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
 
-#the banner image of post
+# if the banner of page not setting,it will show the top_img
-# if the post not set the post cover and post top image, it will show it
+default_top_img: https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/top_img_index.jpg
-post_img: https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/Photo/post.png
 
 # the default cover of the post
 default_cover: https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg.png
@@ -149,6 +120,15 @@ default_cover: https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg
 # the banner image of archive page
 archive_img: https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/Photo/archive.jpg
 
+# the banner image of tag page
+tag_img: https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/tag-bg.png
+
+# the banner image of category page
+category_img: https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/category-bg
+
+# 如果你有使用hexo-douban去生成movie界面，可配置這個
+movies_img: https://cdn.jsdelivr.net/gh/jerryc127/CDN/Photo/movie.jpg
+
 # if the photo link cannot connect,it will show that
 lodding_bg:
   flink: /img/friend_404.gif
@@ -181,7 +161,6 @@ auto_excerpt:
   enable: true
   length: 150
 
-
 ####    Share System    ####
 # -----------------------------------------
 addThis:
@@ -214,13 +193,6 @@ disqus:
 # enable: false
 # uid:
 
-# gitment
-  # enable: false
-  # owner: 
-  # repo: 
-  # client_id: 
-  # client_secret: 
-
 # gitalk:
 #   enable: false
 #   client_id:
@@ -228,6 +200,7 @@ disqus:
 #   repo:
 #   owner:
 #   admin:
+#   language:   # en , zh-CN , zh-TW
 ####   Using this js for redirect to gitalk container after login
 ####   See https://github.com/gitalk/gitalk/issues/125
 #   js: https://cdn.jsdelivr.net/gh/upupming/gitalk@36368e5dffd049e956cdbbd751ff96c28d8255cf/dist/gitalk.min.js
@@ -243,7 +216,8 @@ valine:
   avatar: monsterid # gravatar style https://valine.js.org/#/avatar
   lang: en # i18n: zh-cn/en
   placeholder: Please leave your footprints # valine comment input placeholder(like: Please leave your footprints )
-  guest_info: nick,mail,link #valine comment header inf
+  guest_info: nick,mail,link #valine comment header info
+  bg: /img/comment_bg.png # valine background
 
 #####     Footer Settings    ####
 # ------------------------------------
@@ -258,7 +232,7 @@ ICP:
   enable: false
   url:
   text:
-
+  icon: /img/icp.png
 
 ####    站長驗證    ####
 # Google Webmaster tools verification setting
@@ -277,7 +251,6 @@ baidu_site_verification:
 # see http://zhanzhang.so.com/
 qihu_site_verification:
 
-
 # 友情鏈接界面設置
 Flink:
   headline: 友情鏈接
@@ -307,6 +280,33 @@ related_post:
 ####    美化/效果    ####
 #--------------------------------
 
+# Theme color for customize
+# Notice: color value must in double quotes like "#000" or may cause error!
+# ---------------
+# theme_color:
+#   enable: true
+#   main: "#49B1F5"
+#   paginator: "#00c4b6"
+#   button_hover: "#FF7242"
+#   text_selection: "#00c4b6"
+#   link_color: "#99a9bf"
+#   meta_color: '#858585'
+#   hr_color: "#A4D8FA"
+#   read-mode-bg_color: '#FAF9DE'
+#   inline-code-color: '#F47466'
+
+# 主頁設置
+# 默認top_img全屏，site_info在中間
+# 使用默認, 都無需填寫（建議默認）
+index_site_info_top: #主頁標題距離頂部距離  例如 300px/300em/300rem/10%
+index_top_img_height: #主頁top_img高度 例如 300px/300em/300rem  不能使用百分比
+
+# category和tag頁的UI設置
+# index 值代表 UI將與首頁的UI一樣
+# 默認跟archives頁面UI一樣
+category_ui: # 留空或index
+tag_ui: # 留空或index
+
 # 設置網站背景
 # 可設置圖片 或者 顔色
 # 圖片格式 background: url(http://xxxxxx.com/xxx.jpg)
@@ -317,7 +317,8 @@ background:
 # footer是否顯示圖片背景(與top_img一致)
 footer_bg: false
 
-
+# 背景特效
+# 避免卡頓，建議只開啓一個
 # canvas_ribbon 禁止彩帶背景
 # See: https://github.com/hustcc/ribbon.js
 canvas_ribbon:
@@ -326,10 +327,12 @@ canvas_ribbon:
   alpha: 0.6
   zIndex: -1
   click_to_change: false
+  mobile: false # false 手機端不顯示 true 手機端顯示
 
 # 動態彩帶
 canvas_ribbon_piao:
   enable: false
+  mobile: false # false 手機端不顯示 true 手機端顯示
 
 # canvas_nest
 # https://github.com/hustcc/canvas-nest.js
@@ -339,23 +342,47 @@ canvas_nest:
   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.
-  script: https://cdn.jsdelivr.net/gh/jerryc127/CDN/js/canvas-nest.js # or /js/third-party/canvas-nest.js
+  mobile: false # false 手機端不顯示 true 手機端顯示
 
 # 打字效果
 activate_power_mode:
   enable: false
 
 # 鼠標點擊效果
+# 避免卡頓，建議只開啓一個
+# 點擊烟火特效
 fireworks:
   enable: false
 
+# 點擊出現愛心
+click_heart:
+  enable: false
+
+# 點擊出現文字，文字可自行修改
+ClickShowText:
+  enable: false
+  text: 
+    - 富强
+    - 民主
+    - 文明
+    - 和谐
+    - 自由
+    - 平等
+    - 公正
+    - 法治
+    - 爱国
+    - 敬业
+    - 诚信
+    - 友善
+  fontSize: 15px
+
 # 頭像會一直轉圈
 avatar_effect: false
 
 # 網站顯示模式
-# day 默認模式
+# light 默認模式
-# night 黑暗模式（不建議）
+# dark 黑暗模式（不建議）
-display_mode: day
+display_mode: light
 
 # 美化post頁顯示
 post_beautify:
@@ -366,14 +393,14 @@ post_beautify:
 # 全局字體
 font:
   enable: false
-  font-family: Lato, Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB,"Microsoft JhengHei", "MicrMicrosoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif
+  font-family: Lato, Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, MicrMicrosoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif
-  code-font: consolas, Menlo, "PingFang SC", "Microsoft JhengHei","Microsoft YaHei", monospace, Helvetica Neue For Number
+  code-font: consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace, Helvetica Neue For Number
 
 # 網站名字字體
 # 左上角網站名字 主頁居中網站名字
 blog_title_font:
   font_link: https://fonts.googleapis.com/css?family=Titillium+Web #字體鏈接
-  font-family: Titillium Web, PingFang SC, Hiragino Sans GB, "Microsoft JhengHei", "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif
+  font-family: Titillium Web, PingFang SC, Hiragino Sans GB, "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif
 
 # 水平分隔綫
 hr:
@@ -385,10 +412,18 @@ hr:
 # 打字效果
 subtitle: 
   enable: true
-  sub1: 今日事,今日畢
+  # source調用第三方服務
-  sub2: Never put off till tomorrow what you can do today  #如果有符號 ' ，記得前面加上 \ 
+  # source: false 關閉調用 
-
+  # source: 1  調用金山詞霸的每日一句（簡體）
-
+  # source: 2  調用一言网的一句話（簡體） #https://hitokoto.cn/
+  # source: 3  調用一句网（簡體） http://yijuzhan.com/
+  # source: 4  調用今日詩詞（簡體） https://www.jinrishici.com/
+  # subtitle 會先顯示 source , 再顯示 sub 的内容
+  source: false
+  # (如果有英文逗號' , '，請使用轉義字符 &#44;)
+  sub:
+    - 今日事&#44;今日畢
+    - Never put off till tomorrow what you can do today
 
 
 ####    側邊欄    ####
@@ -422,7 +457,6 @@ runtimeshow:
   enable: true
   start_date: 6/7/2018 00:00:00
 
-
 ####   右下角按鈕  ####
 #----------------------------------------------
 # 簡繁轉換
@@ -441,18 +475,39 @@ translate:
   #當文字是繁體時，按鈕顯示的文字
   msgToSimplifiedChinese: "简"
 
-# 夜間模式
-nightshift:
-  enable: true
-
 #閲讀模式
 readmode:
   enable: true
 
+# 夜間模式
+darkmode:
+  enable: true
+
+# 自動切換 dark mode和 light mode
+# autoChangeMode: 1  跟隨系統而變化，不支持的瀏覽器/系統將按照時間晚上6點到早上6點之間切換為 dark mode
+# autoChangeMode: 2  只按照時間晚上6點到早上6點之間切換為 dark mode
+# autoChangeMode: false 取消自動切換
+autoChangeMode: false
 
 ####    other     ####
 #------------------------------------------------
 
+# 圖片大圖查看模式
+# 默認為 fancybox http://fancyapps.com/fancybox/3/
+# 可以選擇改爲 medium_zoom https://github.com/francoischalifour/medium-zoom
+medium_zoom:
+  enable: false
+
+# Snackbar 彈窗
+# https://github.com/polonel/SnackBar
+# position 彈窗位置
+# 可選 top-left / top-center / top-right / bottom-left / bottom-center / bottom-right
+snackbar:
+  enable: false
+  position: bottom-left
+  bg_light: '#49b1f5' #light mode時彈窗背景
+  bg_dark: '#2d3035' #dark mode時彈窗背景
+
 #百度推送
 baidu_push:
   enable: false
@@ -470,7 +525,7 @@ note:
   #  - modern    bs-callout new (v2-v3) alert style.
   #  - flat      flat callout style with background, like on Mozilla or StackOverflow.
   #  - disabled  disable all CSS styles import of note tag.
-  style: simple
+  style: flat
   icons: true
   border_radius: 3
   # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
@@ -478,9 +533,9 @@ note:
   light_bg_offset: 0
 
 # 圖片懶加載
+# https://github.com/aFarkas/lazysizes
 lazyload:
   enable: true
-  script: https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js
 
 # 避免重複網址分散seo
 canonical: true
@@ -495,3 +550,76 @@ twitter_meta: true
 # facebook QQ 等 分享自動帶上樣式
 # https://i.loli.net/2019/09/08/2wbFJEKloisRvhj.png
 Open_Graph_meta: true
+
+
+# CDN
+# 網站必須
+# 可根據需要自行添加js/css
+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
+
+  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:
+  #comments
+  blueimp-md5: https://cdn.jsdelivr.net/npm/blueimp-md5@2.10.0/js/md5.min.js
+  gitalk: https://cdn.jsdelivr.net/npm/gitalk@latest/dist/gitalk.min.js
+  gitalk_css: https://cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.css
+  valine: https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js
+
+  # 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_css: https://cdn.jsdelivr.net/npm/social-share.js@1.0.16/dist/css/share.min.css
+
+  #search
+  algolia_search: https://cdn.jsdelivr.net/npm/instantsearch.js@2.1.1/dist/instantsearch.min.js
+  algolia_search_css: https://cdn.jsdelivr.net/npm/instantsearch.js@2.1.1/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
+  katex_copytex: https://cdn.jsdelivr.net/npm/katex-copytex@latest/dist/katex-copytex.min.js
+  katex_copytex_css: https://cdn.jsdelivr.net/npm/katex-copytex@latest/dist/katex-copytex.min.css
+
+  #不蒜子計數器
+  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_piao: /js/third-party/piao.js # https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@latest/js/piao.js
+  canvas_nest: /js/third-party/canvas-nest.js  # https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@latest/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
+
+  typed: https://cdn.jsdelivr.net/npm/typed.js
+  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
+  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: https://cdn.jsdelivr.net/npm/node-snackbar@0.1.15/dist/snackbar.min.js
+
+  #鼠标点击特效
+  anime: https://cdn.jsdelivr.net/npm/animejs@latest/anime.min.js  #/js/third-party/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
+  fireworks: /js/third-party/fireworks.js # https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@latest/js/fireworks.js
+  click_heart: /js/third-party/click_heart.js # https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@latest/js/click_heart.js
+  ClickShowText: /js/third-party/ClickShowText.js # https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@latest/js/ClickShowText.js
+
+  translate: /js/tw_cn.js
+  runtimeshow: js/runtimeshow.js
+

languages/default.yml

@@ -73,8 +73,7 @@ share: Share
 
 bookmark:
   title: Bookmark
-  message_prev: Press
+
-  message_next: to bookmark this page
 
 rightside:
   readmode_title: Read Mode
@@ -82,5 +81,24 @@ rightside:
   font_minus_title: Decrease font size
   translate_title: Traditional Chinese and Simplified Chinese Conversion
   night_mode_title: Dark Mode
+  back_to_top: Back to top
+  toc: Table of Contents
+  scroll_to_comment: Scroll to comment
+  setting: Setting
 
 runtime_unit: days
+
+copy_copyright:
+  author: Author
+  link: Link
+  source: Source
+  info: Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.
+
+Snackbar:
+  bookmark:
+    message_prev: Press
+    message_next: to bookmark this page
+  chs_to_cht: Traditional Chinese Activated Manually
+  cht_to_chs: Simplified Chinese Activated Manually
+  day_to_night: Light Mode Activated Manually
+  night_to_day: Dark Mode Activated Manually

languages/en.yml

@@ -72,8 +72,6 @@ donate: Donate
 share: Share
 bookmark:
   title: Bookmark
-  message_prev: Press
-  message_next: to bookmark this page
 
 rightside:
   readmode_title: Read Mode
@@ -81,5 +79,24 @@ rightside:
   font_minus_title: Decrease font size
   translate_title: Traditional Chinese and Simplified Chinese Conversion
   night_mode_title: Dark Mode
+  back_to_top: Back to top
+  toc: Table of Contents
+  scroll_to_comment: Scroll to comment
+  setting: Setting
 
 runtime_unit: days
+
+copy_copyright:
+  author: Author
+  link: Link
+  source: Source
+  info: Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.
+
+Snackbar:
+  bookmark:
+    message_prev: Press
+    message_next: to bookmark this page
+  chs_to_cht: Traditional Chinese Activated Manually
+  cht_to_chs: Simplified Chinese Activated Manually
+  day_to_night: Light Mode Activated Manually
+  night_to_day: Dark Mode Activated Manually

languages/zh-CN.yml

@@ -73,8 +73,7 @@ donate: 打赏
 share: 分享
 bookmark:
   title: 添加书签
-  message_prev: 按
+
-  message_next: 键将本页加入书签
 
 rightside:
   readmode_title: 阅读模式
@@ -82,5 +81,24 @@ rightside:
   font_minus_title: 缩小字体
   translate_title: 简繁转换
   night_mode_title: 夜间模式
+  back_to_top: 回到顶部
+  toc: 目录
+  scroll_to_comment: 直达评论
+  setting: 设置
 
 runtime_unit: 天
+
+copy_copyright:
+  author: 作者
+  link: 链接
+  source: 来源
+  info: 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
+
+Snackbar:
+  bookmark:
+    message_prev: 按
+    message_next: 键将本页加入书签
+  chs_to_cht: 你已切换为繁体
+  cht_to_chs: 你已切换为简体
+  day_to_night: 你已切换为深色模式
+  night_to_day: 你已切换为浅色模式

languages/zh-TW.yml

@@ -15,7 +15,7 @@ page:
   articles: 文章總覽
   tag: 標籤
   category: 分類
-  archives: 歸檔
+  archives: 時間軸
 
 sticky: 置頂
 no_title: 無題
@@ -74,8 +74,7 @@ donate: 打賞
 share: 分享
 bookmark:
   title: 添加書籤
-  message_prev: 按
+
-  message_next: 鍵將本頁加入書籤
 
 rightside:
   readmode_title: 閲讀模式
@@ -83,5 +82,26 @@ rightside:
   font_minus_title: 縮小字體
   translate_title: 簡繁轉換
   night_mode_title: 夜間模式
+  back_to_top: 回到頂部
+  toc: 目錄
+  scroll_to_comment: 直達評論
+  setting: 設置
 
 runtime_unit: 天
+
+copy_copyright:
+  author: 作者
+  link: 鏈接
+  source: 來源
+  info: 著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。
+
+Snackbar:
+  bookmark:
+    message_prev: 按
+    message_next: 鍵將本頁加入書籤
+  chs_to_cht: 你已切換為繁體
+  cht_to_chs: 你已切換為簡體
+  day_to_night: 你已切換為深色模式
+  night_to_day: 你已切換為淺色模式
+
+

layout/category.pug

@@ -1,6 +1,14 @@
 extends includes/layout.pug
 
 block content
+  if theme.category_ui == 'index'
+    include ./includes/mixins/UI.pug
+    #recent-posts.recent-posts.category_ui   
+      +UI_NEW(page.posts)
+      include includes/pagination.pug
+    #aside_content.aside_content
+      include includes/aside.pug
+  else
     include ./includes/mixins/article-sort.pug
     #category
       .article-sort-title= _p('page.category') + ' - ' + page.category

layout/flink.pug

@@ -1,13 +1,13 @@
 .flink
   each i in site.data.link
-    p.comment-word= i.class_name
+    h1= i.class_name
     .post-cards
       ul.md-links
         each item in i.link_list
           li.md-links-item
             a(href=item.link  title=item.name target="_blank")
               if theme.lazyload.enable
-                img.lozad(data-src=item.avatar onerror=`onerror=null;src='${theme.lodding_bg.flink}'` height="72px")
+                img.lazyload(data-src=item.avatar onerror=`onerror=null;src='${theme.lodding_bg.flink}'` height="72px")
               else
                 img(src=item.avatar onerror=`onerror=null;src='${theme.lodding_bg.flink}'` height="72px")
               div(class="md-links-title")= item.name 

layout/gallery.pug

@@ -1,4 +0,0 @@
-extends includes/layout.pug
-
-block content
-  include includes/gallery/layout.pug

layout/includes/additional-js.pug

@@ -1,20 +1,25 @@
+if (theme.medium_zoom && theme.medium_zoom.enable)
+  script(src=url_for(theme.CDN.medium_zoom))
+else
+  script(src=url_for(theme.CDN.fancybox))
+
 if (theme.algolia_search.enable)
-  script(async src=url_for('/js/search/algolia.js'))
+  script(async src=url_for(theme.CDN.algolia_js))
 if (theme.mathjax && theme.mathjax.enable)
-  if(!is_tag() && !is_category() && !is_archive())
+  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())
+  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('/js/search/local-search.js'))
+  script(async src=url_for(theme.CDN.local_search))
 
 if theme.fireworks && theme.fireworks.enable
-  script(src='https://cdn.jsdelivr.net/npm/animejs@latest/anime.min.js')
+  script(src=url_for(theme.CDN.anime))
-  script(src=url_for('/js/third-party/fireworks.js'))
+  script(src=url_for(theme.CDN.fireworks))
 
-if theme.nightshift.enable
+if (theme.snackbar && theme.snackbar.enable)
-  script(src=url_for('js/nightshift.js'))
+  script(src=url_for(theme.CDN.snackbar))
 
 if (theme.canvas_ribbon && theme.canvas_ribbon.enable)
   include ./third-party/canvas-ribbon.pug
@@ -29,73 +34,32 @@ if theme.baidu_push && theme.baidu_push.enable
   script(src=url_for('js/baidupush.js')) 
 
 if theme.activate_power_mode.enable
-  script(src=url_for('js/activate-power-mode.js'))
+  script(src=url_for(theme.CDN.activate_power_mode))
   script.
     POWERMODE.colorful = true; // make power mode colorful
     POWERMODE.shake = true; // turn off shake
     document.body.addEventListener('input', POWERMODE);
 
 if theme.translate && theme.translate.enable
-  script(src=url_for('/js/tw_cn.js'))
+  script(src=url_for(theme.CDN.translate))
   script.
     translateInitilization()
 
-
-if is_home() && theme.subtitle.enable
-  script(src="https://cdn.jsdelivr.net/npm/typed.js@2.0.9")    
-  script.
-    var typed = new Typed(".subtitle", {
-    strings: ['!{theme.subtitle.sub1}','!{theme.subtitle.sub2}'],
-    startDelay: 300,
-    typeSpeed: 100,
-    loop: true,
-    backSpeed: 50
-    });
-
 if is_home()
-  script.
+  include index-js.pug
-    //首頁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)       
-        })
-    }
-
-    function recent_post_padding() {
-      $(".recent-post-info").each(function () {
-        var k = $(".recent-post-item").height();
-        var e = $(this).height();
-        $(this).css({"padding-top": (k-e)/2 , "padding-bottom": (k-e)/2 })
-      })   
-    }
-
-    alignContent();
-
-    //recent-post-item垂直置中
-    if ($(window).width() > 768) {    
-      recent_post_padding();
-    }
-     
-    $(window).bind("resize", function () {
-
-      alignContent()
-
-      if ($(window).width() > 768) {    
-        recent_post_padding();     
-      }
-    })
 
 if theme.busuanzi.site_uv || theme.busuanzi.site_pv || theme.busuanzi.page_pv
-  script(async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js")
+  script(async src=url_for(theme.CDN.busuanzi))
 
 if theme.instantpage.enable
-  script(src="https://cdn.jsdelivr.net/npm/instant.page@1.2.2/instantpage.min.js" type="module")
+  script(src=url_for(theme.CDN.instantpage) type="module")
 
 if theme.lazyload.enable
-  script(src=url_for(theme.lazyload.script))
+  script(src=url_for(theme.CDN.lazyload) async="")
-  script. 
+
-    const observer = lozad(); // lazy loads elements with default selector as '.lozad'
+//- 鼠標特效
-    observer.observe();
+if theme.click_heart && theme.click_heart.enable
+  script(src=url_for(theme.CDN.click_heart))
+
+if theme.ClickShowText && theme.ClickShowText.enable
+  script(src=url_for(theme.CDN.ClickShowText))

layout/includes/comments/gitalk.pug

@@ -8,6 +8,6 @@ if theme.gitalk && theme.gitalk.enable
       owner: '!{theme.gitalk.owner}',
       admin: '!{theme.gitalk.admin}',
       id: md5(decodeURI(location.pathname)),
-      language: '!{lang}'
+      language: '!{theme.gitalk.language}'
     })
     gitalk.render('gitalk-container')

layout/includes/comments/gitment.pug

@@ -1,13 +0,0 @@
-if theme.gitment && theme.gitment.enable
-  #gitment-container
-  script.
-    var gitment = new Gitment({
-      id: md5(decodeURI(location.pathname)),
-      owner: '!{theme.gitment.owner}',
-      repo: '!{theme.gitment.repo}',
-      oauth: {
-        client_id: '!{theme.gitment.client_id}',
-        client_secret: '!{theme.gitment.client_secret}'
-      }
-    })
-    gitment.render('gitment-container')

layout/includes/comments/index.pug

@@ -1,35 +1,19 @@
-if theme.disqus && theme.disqus.enable
+- var d = theme.disqus && theme.disqus.enable
+- var l = theme.laibili && theme.laibili.enable
+- var gt = theme.gitalk && theme.gitalk.enable
+- var v = theme.valine && theme.valine.enable
+
+if d || l || gt || v
   hr
   #post-comment
     .comment_headling
       i.fa.fa-comments.fa-fw(aria-hidden="true")
       span= ' ' + _p('comment')
+    if d
       include ./disqus.pug
-else if theme.laibili && theme.laibili.enable
+    else if l
-  hr
-  #post-comment
-    .comment_headling
-      i.fa.fa-comments.fa-fw(aria-hidden="true")
-      span= ' ' + _p('comment')
       include ./laibili.pug
-else if theme.gitment && theme.gitment.enable
+    else if gt
-  hr
-  #post-comment
-    .comment_headling
-      i.fa.fa-comments.fa-fw(aria-hidden="true")
-      span= ' ' +  _p('comment')
-    include ./gitment.pug
-else if theme.gitalk && theme.gitalk.enable
-  hr
-  #post-comment
-    .comment_headling
-      i.fa.fa-comments.fa-fw(aria-hidden="true")
-      span= ' ' +  _p('comment')
       include ./gitalk.pug
-else if theme.valine && theme.valine.enable
+    else if v
-  hr
-  #post-comment
-    .comment_headling
-      i.fa.fa-comments.fa-fw(aria-hidden="true")
-      span= ' ' +  _p('comment')
       include ./valine.pug

layout/includes/comments/valine.pug

@@ -1,6 +1,6 @@
 if theme.valine && theme.valine.enable
   #vcomment.vcomment
-  script(src='https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js')
+  script(src=url_for(theme.CDN.valine))
   script.
     var notify = #{ theme.valine.notify } == true ? true : false;
     var verify = #{ theme.valine.verify } == true ? true : false;

layout/includes/config.pug

@@ -28,7 +28,6 @@
   }
   var translate = 'undefined';
   if (theme.translate && theme.translate.enable){
-    var defaultEncoding;
     translate = JSON.stringify({
       defaultEncoding: theme.translate.defaultEncoding,
       translateDelay: theme.translate.translateDelay,
@@ -38,9 +37,46 @@
     })
   }
 
+  var copyright = 'undefined' ;
+  if (theme.copy.enable && theme.copy.copyright){
+    copyright = JSON.stringify({      
+      languages: {
+      author: _p("copy_copyright.author") + ': ' + config.author,
+      link: _p("copy_copyright.link") + ': ' + without_html,
+      source: _p("copy_copyright.source") + ': ' + config.title,
+      info: _p("copy_copyright.info")
+      }
+    })
+  }
+
+  var copy_copyright_js = theme.copy.enable && theme.copy.copyright;
+
+  var ClickShowText = 'undefined';
+  if (theme.ClickShowText && theme.ClickShowText.enable) {
+    ClickShowText = JSON.stringify({
+    text: theme.ClickShowText.text.join(","),
+      fontSize: theme.ClickShowText.fontSize
+    })
+  }
 
   
-
+  var Snackbar = 'undefined';
+  if (theme.snackbar && theme.snackbar.enable) {
+  Snackbar = JSON.stringify({      
+    bookmark: {
+      title: _p("Snackbar.bookmark.title"),
+      message_prev: _p("Snackbar.bookmark.message_prev"),
+      message_next: _p("Snackbar.bookmark.message_next")
+    },
+    chs_to_cht: _p("Snackbar.chs_to_cht"),
+    cht_to_chs: _p("Snackbar.cht_to_chs"),
+    day_to_night: _p("Snackbar.day_to_night"),
+    night_to_day: _p("Snackbar.night_to_day"),
+    bgLight: theme.snackbar.bg_light,
+    bgDark: theme.snackbar.bg_dark,
+    position: theme.snackbar.position,
+    })
+  }
 
 script.
   var GLOBAL_CONFIG = { 
@@ -57,12 +93,16 @@ script.
       noSupport: '!{_p("copy.noSupport")}'
     },
     bookmark: {
-      title: '!{_p("bookmark.title")}',
+      title: '!{_p("Snackbar.bookmark.title")}',
-      message_prev: '!{_p("bookmark.message_prev")}',
+      message_prev: '!{_p("Snackbar.bookmark.message_prev")}',
-      message_next: '!{_p("bookmark.message_next")}'
+      message_next: '!{_p("Snackbar.bookmark.message_next")}'
     },
-    runtime_unit: '!{_p("runtime_unit")}'
+    runtime_unit: '!{_p("runtime_unit")}',
-  
+    copyright: !{copyright},
+    copy_copyright_js: !{copy_copyright_js},
+    ClickShowText: !{ClickShowText},
+    medium_zoom: '!{theme.medium_zoom.enable}',
+    Snackbar: !{Snackbar}
     
   }
 

layout/includes/darkmode.pug

@@ -0,0 +1,48 @@
+script.
+  const autoChangeMode = '#{theme.autoChangeMode}'
+  var t = Cookies.get("theme");
+  if (autoChangeMode == '1'){
+  const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches
+  const isLightMode = window.matchMedia("(prefers-color-scheme: light)").matches
+  const isNotSpecified = window.matchMedia("(prefers-color-scheme: no-preference)").matches
+  const hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified
+
+  if (t === undefined){
+    if (isLightMode) activateLightMode()
+    else if (isDarkMode) activateDarkMode()
+    else if (isNotSpecified || hasNoSupport){
+      console.log('You specified no preference for a color scheme or your browser does not support it. I Schedule dark mode during night time.')
+      now = new Date();
+      hour = now.getHours();
+      isNight = hour < 6 || hour >= 18
+      isNight ? activateDarkMode() : activateLightMode()
+  }
+  } else if (t == 'light') activateLightMode()
+  else activateDarkMode()
+
+ 
+  } else if (autoChangeMode == '2'){
+    now = new Date();
+    hour = now.getHours();
+    isNight = hour < 6 || hour >= 18
+    if(t === undefined) isNight? activateDarkMode() : activateLightMode()
+    else if (t === 'light') activateLightMode()
+    else activateDarkMode() 
+  } else {
+    if ( t == 'dark' ) activateDarkMode()
+    else if ( t == 'light') activateLightMode()
+  }
+
+  function activateDarkMode(){
+    document.documentElement.setAttribute('data-theme', 'dark')
+    if (document.querySelector('meta[name="theme-color"]') !== null){
+      document.querySelector('meta[name="theme-color"]').setAttribute('content','#000')
+    }
+  }
+  function activateLightMode(){
+    document.documentElement.setAttribute('data-theme', 'light')
+    if (document.querySelector('meta[name="theme-color"]') !== null){
+    document.querySelector('meta[name="theme-color"]').setAttribute('content','#fff')
+    }
+  }
+

layout/includes/footer.pug

@@ -1,4 +1,4 @@
-#footer
+#footer-wrap
   - var now = new Date()
   - var nowYear = now.getFullYear()
   if theme.since && theme.since != nowYear
@@ -19,4 +19,6 @@
   if theme.ICP.enable
     .icp
       a(href=theme.ICP.url)
+        if theme.ICP.icon
+          img.icp-icon(src=url_for(theme.ICP.icon))
         span=theme.ICP.text

layout/includes/gallery/layout.pug

@@ -1 +0,0 @@
-#gallery!= page.content

layout/includes/head.pug

@@ -1,61 +1,25 @@
+if is_home()
+  - var top_img = theme.index_img || theme.default_top_img
+else if is_archive()
+  - var top_img = theme.archive_img || theme.default_top_img
+else if is_tag()
+  - var top_img = theme.tag_img || theme.default_top_img
+else if is_category()
+  - var top_img = theme.category_img || theme.default_top_img
+else if is_current('/movies/', [strict])
+  - var top_img = theme.movies_img || theme.default_top_img
+else if !is_post()
+  - var top_img = page.top_img || theme.default_top_img
+
 - var without_index = url.replace('index.html', '')
 - var without_html = without_index.replace('.html', '')
-- var photo_check = page.cover || theme.avatar
+- var photo_check = is_post() ? page.cover || theme.avatar : theme.avatar
 - var photo_link = url_check (photo_check) ? photo_check : config.url + photo_check
 
-meta(http-equiv="x-dns-prefetch-control" content="on")
+//- 預解析
-if theme.canonical
+link(rel="preconnect" href="//cdn.jsdelivr.net")
-  link(rel="canonical" href=without_html)
-
-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)
-
-if theme.Open_Graph_meta
-  if is_post()
-    meta(property="og:type" content="article")
-  else
-    meta(property="og:type" content="website")
-
-  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 is_post()
-  if(page.prev)
-    link(rel="prev" title=page.prev.title href=url_for(page.prev.permalink) )
-  if(page.next)
-    link(rel="next" title=page.next.title  href=url_for(page.next.permalink) )
-
-
-if theme.algolia_search.enable
-  link(rel="dns-prefetch" href="https://cdn.jsdelivr.net")
-  link(rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.1.1/dist/instantsearch.min.css")
-  script(src="https://cdn.jsdelivr.net/npm/instantsearch.js@2.1.1/dist/instantsearch.min.js" defer)
-
-if (theme.gitment && theme.gitment.enable)
-  link(rel="dns-prefetch" href="https://unpkg.com")
-  link(rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/gitment/style/default.min.css")
-  script(src="https://cdn.jsdelivr.net/npm/gitment/dist/gitment.browser.min.js")
-  script(src="https://cdn.jsdelivr.net/npm/blueimp-md5@2.10.0/js/md5.min.js")
-if (theme.gitalk && theme.gitalk.enable)
-  link(rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.css")
-  if(theme.gitalk.js)
-    script(src=theme.gitalk.js)
-  else
-    script(src="https://cdn.jsdelivr.net/npm/gitalk@latest/dist/gitalk.min.js")
-  script(src="https://cdn.jsdelivr.net/npm/blueimp-md5@2.10.0/js/md5.min.js")
-
-
 
+//- PWA
 if (theme.pwa && theme.pwa.enable)
   link(rel="manifest" href=theme.pwa.manifest)
   if(theme.pwa.theme_color) 
@@ -71,28 +35,7 @@ if (theme.pwa && theme.pwa.enable)
   if(theme.pwa.mask_icon)
     link(rel="mask-icon" href=theme.pwa.mask_icon color="#5bbad5")
 
-
+//- 網站驗證
-if theme.baidu_analytics
-  link(rel="dns-prefetch" href="https://hm.baidu.com")
-  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
-  link(rel="dns-prefetch" href="https://www.google-analytics.com")
-  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.google_site_verification
   meta(name="google-site-verification" content=theme.google_site_verification)
 
@@ -105,14 +48,83 @@ if 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)
 
-- var preload_archive_img = theme.archive_img ||theme.top_img || config.top_img
+//- Open_Graph
-- var preload_img = page.top_img || theme.top_img || config.top_img
+if theme.Open_Graph_meta
+  - 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 (is_archive() && preload_archive_img) 
+if theme.disable_baidu_transformation
-  link(rel="preload" href=url_for(preload_archive_img)  as="image" )
+  meta(http-equiv="Cache-Control" content="no-transform")
-else if (!is_post() && preload_img)
+  meta(http-equiv="Cache-Control" content="no-siteapp")
-  link(rel="preload" href=url_for(preload_img)  as="image" )
+
+script(src=url_for(theme.CDN.js_cookies))
+
+if (theme.darkmode && theme.darkmode.enable) || theme.autoChangeMode !== false
+  include ./darkmode
+
+each item in theme.CDN_USE.css
+  link(rel='stylesheet', href=url_for(item))
+
+if (theme.medium_zoom && !theme.medium_zoom.enable)
+  link(rel='stylesheet', href=url_for(theme.CDN.fancybox_css))
+
+if (theme.snackbar && theme.snackbar.enable)
+  link(rel='stylesheet', href=url_for(theme.CDN.snackbar_css))
+
+if theme.canonical
+  link(rel="canonical" href=without_html)
+
+if is_post()
+  if(page.prev)
+    link(rel="prev" title=page.prev.title href=url_for(page.prev.permalink) )
+  if(page.next)
+    link(rel="next" title=page.next.title  href=url_for(page.next.permalink) )
+
+if theme.algolia_search.enable
+  link(rel="stylesheet" type="text/css" href=url_for(theme.CDN.algolia_search_css))
+  script(src=url_for(theme.CDN.algolia_search) defer)
+
+if (theme.gitalk && theme.gitalk.enable)
+  link(rel="stylesheet" type="text/css" href=url_for(gitalk_css))
+  script(src=url_for(theme.CDN.gitalk))
+  script(src=url_for(theme.CDN.blueimp-md5))
+
+if theme.baidu_analytics
+  link(rel="dns-prefetch" href="https://hm.baidu.com")
+  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
+  link(rel="dns-prefetch" href="https://www.google-analytics.com")
+  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" )
 
 if theme.blog_title_font.font_link
   link(rel='stylesheet', href=url_for(theme.blog_title_font.font_link))

layout/includes/header.pug

@@ -1,64 +1,12 @@
+#header  
   #page-header
-  span.pull-left 
+    span#blog_name.pull_left
       a#site-name.blog_title(href=url_for('/')) #[=config.title]
-  //- i.fa.fa-bars.toggle-menu.pull-right(aria-hidden="true")
+    i.fa.fa-bars.fa-fw.toggle-menu.pull_right.close(aria-hidden="true")
-  .open.toggle-menu.pull-right
+    span.pull_right.menus
-    .menu-icon-first
-    .menu-icon-second
-    .menu-icon-third
-  
-  .menu_mask
-  
-  span.pull-right.menus
-    .mobile_author_icon
-      img.lozad.avatar_img(src=theme.avatar || url_for('/img/avatar.png') onerror=`onerror=null;src='${theme.lodding_bg.flink}'`)
-    .mobile_post_data
-      if site.posts.length
-        .mobile_data_item.text-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.text-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.text-center      
-          .mobile_data_link
-            a(href=url_for(config.category_dir) + '/')
-              .headline= _p('aside.categories') 
-              .length_num= site.categories.length
-
-    hr
       .menus_items
-      each value, label in theme.menu
+        include menu_item.pug
-        if !Array.isArray(value)
+    span#search_button.pull_right
-          .menus_item
-            a.site-page(href=value.split('||')[0])
-              i.fa-fw(class=value.split('||')[1])
-              span=' '+label
-        else
-          .menus_item
-            a.site-page
-              i.fa-fw(class=label.split('||')[1] aria-hidden="true")
-              span=' '+label.split('||')[0]
-              i.fa.fa-chevron-down.menus-expand(aria-hidden="true")
-            ul.menus_item_child
-              each i in value
-                li
-                  a.site-page(href=i.split('||')[1])
-                    i.fa-fw(class=i.split('||')[2])
-                    span=' '+i.split('||')[0]
-
-
-      script.
-        document.body.addEventListener('touchstart', function(){ });
-  span.pull-right
       if (theme.algolia_search.enable || theme.local_search && theme.local_search.enable)
           a.site-page.social-icon.search
             i.fa.fa-search.fa-fw

layout/includes/index-js.pug

@@ -0,0 +1,113 @@
+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
+
+  if source == '1' || source == '2'
+    script(src="https://cdn.jsdelivr.net/npm/bluebird@3/js/browser/bluebird.min.js")
+    script(src="https://cdn.jsdelivr.net/npm/whatwg-fetch@2.0.3/fetch.min.js")
+
+  if source == '1'
+    script.
+      fetch('https://api.ooopn.com/ciba/api.php',)
+      .then(function (res){
+        return res.json();
+      })
+      .then(function (data) {
+        var sub = '!{theme.subtitle.sub}'.length == 0  ? new Array() : '!{theme.subtitle.sub}'.split(",");
+        var both = sub.unshift(data['ciba-en'],data.ciba)
+        var typed = new Typed(".subtitle", {
+        strings: sub,
+        startDelay: 300,
+        typeSpeed: 100,
+        loop: true,
+        backSpeed: 50
+        });
+      })
+      .catch(function (err) {
+        console.error(err);
+      })
+  else if source == '2'
+    script.
+      fetch('https://v1.hitokoto.cn')
+      .then(function (res){
+        return res.json();
+      })
+      .then(function (data) {
+        var sub = '!{theme.subtitle.sub}'.length == 0  ? new Array() : '!{theme.subtitle.sub}'.split(",");
+        var both = sub.unshift(data.hitokoto)  
+        var typed = new Typed(".subtitle", {
+        strings: sub,
+        startDelay: 300,
+        typeSpeed: 100,
+        loop: true,
+        backSpeed: 50
+        });
+      })
+      .catch(function (err) {
+        console.error(err);
+      })
+  else if source == "3"
+    script(type="text/javascript" src="http://yijuzhan.com/api/word.php?m=js")
+    script.
+      var con = str[0];
+      var author = "出自 " + str[1];
+      var sub = '!{theme.subtitle.sub}'.length == 0  ? new Array() : '!{theme.subtitle.sub}'.split(",");
+      var both = sub.unshift(con,author)
+      var typed = new Typed(".subtitle", {
+      strings: sub,
+      startDelay: 300,
+      typeSpeed: 100,
+      loop: true,
+      backSpeed: 50
+      });
+  else if source == '4'
+    script(type="text/javascript" src="https://sdk.jinrishici.com/v2/browser/jinrishici.js")
+    script.
+      jinrishici.load(function(result) {
+        var sub = '!{theme.subtitle.sub}'.length == 0  ? new Array() : '!{theme.subtitle.sub}'.split(",");
+        var content = result.data.content;
+        var both = sub.unshift(content)
+        var typed = new Typed(".subtitle", {
+        strings: sub,
+        startDelay: 300,
+        typeSpeed: 100,
+        loop: true,
+        backSpeed: 50
+      });
+      })
+     
+  else
+    script.
+      var typed = new Typed(".subtitle", {
+      strings: '!{theme.subtitle.sub}'.split(","),
+      startDelay: 300,
+      typeSpeed: 100,
+      loop: true,
+      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

@@ -16,17 +16,16 @@
 - config.subtitle ? home_subtitle_true = ' - ' + config.subtitle : home_subtitle_true = ''
 //- home時pageTitle顯示 JerryC - subtitle，其他顯示 pageTitle | JerryC
 - is_home() ? pageTitle = config.title + home_subtitle_true : pageTitle = pageTitle_saved
+//- 判断keywords
 
 - var pageDescription = page.description || page.title || config.description || ''
-- var pageKeywords = (config.keywords || []).join(',')
+- 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
 - var pageCopyright = config.copyright || config.author
-- var body_class = theme.display_mode == 'night' ? 'night-mode' : ''
-
 
 doctype html
-html(lang=config.language)
+html(lang=config.language data-theme=theme.display_mode)
   head
     meta(charset='UTF-8')
     meta(http-equiv="X-UA-Compatible" content="IE=edge")
@@ -38,19 +37,18 @@ html(lang=config.language)
     meta(name="copyright" content=pageCopyright)
     meta(name ="format-detection" content="telephone=no")
     !=favicon_tag(config.favicon || theme.favicon || '/favicon.ico')
-    if theme.stylesheets !== undefined && theme.stylesheets.length > 0
-      each url in theme.stylesheets
-        link(rel='stylesheet', href=url_for(url))
-    each item in theme.cdn.css
-      if item !== undefined
-        link(rel='stylesheet', href=item)
     include ./head.pug
     include ./config.pug
-  body(class=body_class)
+  body
     if theme.fireworks && theme.fireworks.enable
       canvas.fireworks
+    include ./header.pug
+    include ./mobile-sidebar.pug
+    #body-wrap
       if theme.background
-      #web_bg
+        - var source = theme.background
+        - var is_photo = source.substring(3,0) === 'url' ? 'photo':'color'
+        #web_bg(data-type=is_photo)
       if (is_post() && page.toc != false && theme.toc.enable)      
         i.fa.fa-arrow-right#toggle-sidebar(aria-hidden="true")      
         include ./sidebar.pug
@@ -72,19 +70,11 @@ html(lang=config.language)
               block content
       
       - var footer_bg = theme.footer_bg == false ? '' : bg_img
-    footer(style=footer_bg)
+      footer#footer(style=footer_bg)
         include ./footer.pug    
-    i.fa.fa-arrow-up#go-up(aria-hidden="true")
     include ./rightside.pug
-    if (is_post())
+    each item in theme.CDN_USE.js
-      include ./post-bottom.pug
-    each item in theme.cdn.js
-      if item !== undefined
       script(src=url_for(item))
-    if theme.scripts !== undefined && theme.scripts.length > 0
-      //- scripts list from config.yml
-      each url in theme.scripts
-        script(src=url_for(url))
     include ./additional-js.pug
     include ./search/index.pug
     

layout/includes/menu_item.pug

@@ -0,0 +1,18 @@
+each value, label in theme.menu
+  if !Array.isArray(value)
+    .menus_item
+      a.site-page(href=trim(value.split('||')[0]))
+        i.fa-fw(class=trim(value.split('||')[1]))
+        span=' '+label
+  else
+    .menus_item
+      a.site-page
+        i.fa-fw(class=trim(label.split('||')[1]) aria-hidden="true")
+        span=' '+ trim(label.split('||')[0])
+        i.fa.fa-chevron-down.menus-expand(aria-hidden="true")
+      ul.menus_item_child
+        each i in value
+          li
+            a.site-page(href=trim(i.split('||')[1]))
+              i.fa-fw(class=trim(i.split('||')[2]))
+              span=' '+trim(i.split('||')[0])

layout/includes/mixins/UI.pug

@@ -0,0 +1,41 @@
+mixin UI_NEW(posts)
+  - posts.each(function(article,index){
+    .recent-post-item.article-container
+      - var link = article.link || article.path
+        if index%2 == 0
+          .post_cover.pull_left.left_radius
+            a(href=url_for(link) title=article.title || _p('no_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}'`)
+              else
+                img.post_bg(src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
+        else
+          .post_cover.pull_right.right_radius
+            a(href=url_for(link) title=article.title || _p('no_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}'`)
+              else
+                img.post_bg(src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)            
+      .recent-post-info   
+        a.article-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.post-meta__date #[i.fa.fa-calendar(aria-hidden="true")] #[=date(article[date_type], config.date_format)]
+        if (theme.post_meta.categories && article.categories.data.length > 0)
+          span.article-meta
+            span.article-meta__separator |
+            each item, index in article.categories.data
+              i.fa.fa-inbox.article-meta__icon(aria-hidden="true")
+              a(href=url_for(item.path)).article-meta__categories #[=item.name]
+              if (index < article.categories.data.length - 1)
+                  i.fa.fa-angle-right(aria-hidden="true")
+        if theme.auto_excerpt && theme.auto_excerpt.enable
+          - const content = strip_html(article.content)
+          - let expert = content.substring(0, theme.auto_excerpt.length) 
+          - content.length > theme.auto_excerpt.length ? expert += ' ...' : ''
+          .content!= expert
+        else
+          .content!= article.description
+  - })

layout/includes/mixins/article-sort.pug

@@ -7,6 +7,12 @@ mixin articleSort(posts)
         - year = tempYear
         .article-sort-item.year= year
       .article-sort-item
+        .article-sort-img
+          a.article-sort-item__img(href=url_for(article.path))
+            img(src=article.cover)
+        .article-sort-post
+          a.article-sort-item__post(href=url_for(article.path))
+            i.fa.fa-clock-o(aria-hidden="true")
             time.article-sort-item__time= date(article.date)
-        a.article-sort-item__title(href=url_for(article.path))= article.title || 'No Title'
+            .article-sort-item__title= article.title || 'No Title'
     - })

layout/includes/mobile-sidebar.pug

@@ -0,0 +1,46 @@
+#mobile-sidebar
+  #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}'`)
+    .mobile_post_data
+      if site.posts.length
+        .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_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_link
+            a(href=url_for(config.category_dir) + '/')
+              .headline= _p('aside.categories') 
+              .length_num= site.categories.length
+    hr
+    .menus_items
+      include menu_item.pug
+
+
+  
+  - const showToc = is_post() && page.toc != false && theme.toc.enable
+  -
+    let tocNumber
+    if (page.toc_number !== undefined) tocNumber = page.toc_number
+    else if (theme.toc.number !== undefined) tocNumber = theme.toc.number
+    else tocNumber = true
+  -
+  if (showToc)
+    #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})
+      else 
+        !=toc(page.content,{"class":"toc_mobile_items",list_number:tocNumber})

layout/includes/nav.pug

@@ -1,7 +1,3 @@
-if (is_archive())
-  - var top_img = theme.archive_img ||theme.top_img || config.top_img
-else
-  - var top_img = page.top_img||theme.top_img || config.top_img
 
 - var bg_img = top_img && top_img !== true ? `background-image: url(${top_img})` : ''
 
@@ -9,7 +5,6 @@ else
 if is_home()
   nav#nav.full_page
     .nav_bg(style=bg_img)
-    include ./header.pug
     #site-info
       #site-title
         span.blogtitle= page.title || page.tag || page.category || config.title
@@ -28,7 +23,6 @@ if is_home()
 else
   nav#nav.not_index_bg
     .nav_bg(style=bg_img)
-    include ./header.pug
     #page_site-info
       #site-title
           if (is_archive()) 

layout/includes/page_tag.pug

@@ -0,0 +1,6 @@
+- site.tags.sort('path').each(function (tags){
+  - var fontSize = Math.floor(Math.random() * 15 + 15) + "px"; //15 ~ 30
+  - var color = "rgb(" + Math.floor(Math.random() * 201) + ", " + Math.floor(Math.random() * 201) +", " + Math.floor(Math.random() * 201) +")"; // 0,0,0 -> 200,200,200
+
+  a(href=url_for(tags.path) style='font-size:' + fontSize + ';color:' + color)=tags.name
+-})

layout/includes/pagination.pug

@@ -2,7 +2,8 @@
   var options = {
     prev_text: '<i class="fa fa-chevron-left"></i>',
     next_text: '<i class="fa fa-chevron-right"></i>',
-    mid_size: 1
+    mid_size: 1,
+    escape: false
   }
 
 if(!is_post())
@@ -13,11 +14,11 @@ else
   nav#pagination.pagination_post
     if(page.prev)
       if(page.next)
-        .prev-post.pull-left
+        .prev-post.pull_left
-          - var pagination_cover = page.prev.cover || random_cover()
+          - var pagination_cover = page.prev.cover
           a(href=url_for(page.prev.path))
             if theme.lazyload.enable
-              img.prev_cover.lozad(data-src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` )
+              img.prev_cover.lazyload(data-src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` )
             else
               img.prev_cover(src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` )
 
@@ -26,10 +27,10 @@ else
               span=page.prev.title
       else
         .prev-post.pull-full
-          - var pagination_cover = page.prev.cover || random_cover()
+          - var pagination_cover = page.prev.cover
           a(href=url_for(page.prev.path))
             if theme.lazyload.enable
-              img.prev_cover.lozad(data-src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
+              img.prev_cover.lazyload(data-src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
             else
               img.prev_cover(src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
             .label=_p('pagination.prev')
@@ -38,11 +39,11 @@ else
           
     if(page.next)
       if(page.prev)
-        .next-post.pull-right
+        .next-post.pull_right
-          - var pagination_cover = page.next.cover || random_cover()
+          - var pagination_cover = page.next.cover
           a(href=url_for(page.next.path))
             if theme.lazyload.enable
-              img.next_cover.lozad(data-src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
+              img.next_cover.lazyload(data-src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
             else
               img.next_cover(src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)            
             .label=_p('pagination.next')
@@ -50,10 +51,10 @@ else
               span=page.next.title 
       else
         .next-post.pull-full
-          - var pagination_cover = page.next.cover || random_cover()
+          - var pagination_cover = page.next.cover
           a(href=url_for(page.next.path))
             if theme.lazyload.enable
-              img.next_cover.lozad(data-src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
+              img.next_cover.lazyload(data-src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
             else
               img.next_cover(src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
             .label=_p('pagination.next')

layout/includes/post-bottom.pug

@@ -1,17 +0,0 @@
-- var no_comment_show = page.comments !== false ? '' : 'no_comment_show'
-- var no_toc_show = (is_post() && page.toc != false && theme.toc.enable) ? '' : 'no_toc_show'
-#post_bottom(class= no_comment_show + ' ' + no_toc_show)
-  #post_bottom_items
-    if page.comments !== false
-      a#mobile_to_comment(href="#post-comment")
-        i.mobile_scroll_to_comment.fa.fa-comments
-    
-    if (is_post() && page.toc != false && theme.toc.enable)
-      i#mobile_toc.fa.fa-list
-      #toc_mobile
-        .toc_mobile_headline= _p('sidebar.catalog')
-        if (page.encrypt == true)
-          .toc-div-class(style="display:none")!=toc(page.origin,{"class":"toc_mobile_items"})
-        else 
-          !=toc(page.content,{"class":"toc_mobile_items"})
-        

layout/includes/recent-posts.pug

@@ -2,35 +2,21 @@ each article , index in page.posts.data
   .recent-post-item.article-container
     - var link = article.link || article.path
       if index%2 == 0
-        .post_cover.is_left
+        .post_cover.pull_left.left_radius
           a(href=url_for(link) title=article.title || _p('no_title'))
             - var post_cover = article.cover
-            - var default_post_cover = random_cover()
-            if (post_cover)
             if theme.lazyload.enable
-                img.post_bg.lozad(data-src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
+              img.post_bg.lazyload(data-src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
             else
               img.post_bg(src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
       else
-              if theme.lazyload.enable
+        .post_cover.pull_right.right_radius
-                img.post_bg.lozad(data-src=`${default_post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
-              else
-                img.post_bg(src=`${default_post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
-      else
-        .post_cover.is_right
           a(href=url_for(link) title=article.title || _p('no_title'))
             - var post_cover = article.cover
-            - var default_post_cover = random_cover()
-            if (post_cover)
             if theme.lazyload.enable
-                img.post_bg.lozad(data-src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
+              img.post_bg.lazyload(data-src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
             else
               img.post_bg(src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)            
-            else
-              if theme.lazyload.enable
-                img.post_bg.lozad(data-src=`${default_post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
-              else
-                img.post_bg(src=`${default_post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
     .recent-post-info   
       a.article-title(href=url_for(link) title= article.title || _p('no_title'))= article.title || _p('no_title')
       if (article.top)
@@ -49,14 +35,6 @@ each article , index in page.posts.data
             a(href=url_for(item.path)).article-meta__categories #[=item.name]
             if (index < article.categories.data.length - 1)
                 i.fa.fa-angle-right(aria-hidden="true")
-      //- if (theme.post_meta.tags && article.tags.data.length > 0)
-      //-   span.article-meta.tags
-      //-     span.article-meta__separator |
-      //-     each item, index in article.tags.data
-      //-       i.fa.fa-tag.article-meta__icon(aria-hidden="true")
-      //-       a(href=url_for(item.path)).article-meta__tags #[=item.name]
-      //-       if (index < article.tags.data.length - 1)
-      //-         span.article-meta__link -
       if theme.auto_excerpt && theme.auto_excerpt.enable
         - const content = strip_html(article.content)
         - let expert = content.substring(0, theme.auto_excerpt.length) 

layout/includes/reward.pug

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

layout/includes/rightside.pug

@@ -1,13 +1,20 @@
 section#rightside.rightside
-  if is_post() && page.comments !== false
+  #rightside-config-hide
-    a#to_comment(href="#post-comment")
-      i.scroll_to_comment.fa.fa-comments
     if theme.readmode.enable && is_post()
       i#readmode.fa.fa-book(title=_p('rightside.readmode_title'))
     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
-    a#translateLink.translate_chn_to_cht(href="javascript:translatePage();" title=_p('rightside.translate_title'))= theme.translate.default
+      a#translateLink.translate_chn_to_cht(href="javascript:translatePage();" title=_p('rightside.translate_title') target="_self")= theme.translate.default
-  if theme.nightshift.enable
+    if theme.darkmode && theme.darkmode.enable
-    - var display_mode = theme.display_mode == 'night'? 'fa fa-sun-o' : 'fa fa-moon-o'
+      - var display_mode = theme.display_mode == 'dark' ? 'fa fa-sun-o' : 'fa fa-moon-o'
-    i#nightshift.nightshift(class=display_mode title=_p('rightside.night_mode_title'))
+      i#darkmode.darkmode(class=display_mode title=_p('rightside.night_mode_title'))
+  #rightside-config-show
+    #rightside_config(title=_p("rightside.setting"))
+      i.fa.fa-cog(aria-hidden="true")
+    if is_post() && page.comments !== false && (d || l || gt || v)
+      a#to_comment(href="#post-comment" title=_p("rightside.scroll_to_comment"))
+        i.scroll_to_comment.fa.fa-comments   
+    if is_post() && page.toc != false && theme.toc.enable
+      i#mobile-toc-button.fa.fa-list-ul.close(title=_p("rightside.toc") aria-hidden="true")
+    i.fa.fa-arrow-up#go-up(title=_p("rightside.back_to_top") aria-hidden="true")

layout/includes/share/addtoany.pug

@@ -4,6 +4,6 @@
       a(class="a2a_button_" + name)
 
     a.a2a_dd(href="https://www.addtoany.com/share")
-script(async src="https://static.addtoany.com/menu/page.js")
+script(async src=url_for(theme.CDN.addtoany))
 
 

layout/includes/share/share-js.pug

@@ -1,4 +1,4 @@
 if (theme.sharejs && theme.sharejs.enable)
   .social-share(data-image= page.cover|| theme.avatar data-sites= theme.sharejs.sites)
-  link(rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-share.js@1.0.16/dist/css/share.min.css")
+  link(rel="stylesheet" href=url_for(theme.CDN.sharejs_css))
-  script(src="https://cdn.jsdelivr.net/npm/social-share.js@1.0.16/dist/js/social-share.min.js")
+  script(src=url_for(theme.CDN.sharejs))

layout/includes/third-party/canvas-nest.pug

@@ -1 +1 @@
-script(color=theme.canvas_nest.color opacity=theme.canvas_nest.opacity zIndex=theme.canvas_nest.zIndex count=theme.canvas_nest.count src=url_for(theme.canvas_nest.script))
+script#canvas_nest(color=theme.canvas_nest.color opacity=theme.canvas_nest.opacity zIndex=theme.canvas_nest.zIndex count=theme.canvas_nest.count mobile=`${theme.canvas_nest.mobile}` src=url_for(theme.CDN.canvas_nest))

layout/includes/third-party/canvas-ribbon-piao.pug

@@ -1 +1 @@
-script(id="ribbon" src=url_for('https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/js/piao.js'))
+script(id="ribbon_piao" mobile=`${theme.canvas_ribbon_piao.mobile}` src=url_for(theme.CDN.canvas_ribbon_piao))

layout/includes/third-party/canvas-ribbon.pug

@@ -1,3 +1,3 @@
-script(id="ribbon" src=url_for('/js/third-party/canvas-ribbon.js') size=theme.canvas_ribbon.size
+script(id="ribbon" src=url_for(theme.CDN.canvas_ribbon) size=theme.canvas_ribbon.size
-alpha=theme.canvas_ribbon.alpha zIndex=theme.canvas_ribbon.zIndex data-click=`${theme.canvas_ribbon.click_to_change}`)
+alpha=theme.canvas_ribbon.alpha zIndex=theme.canvas_ribbon.zIndex mobile=`${theme.canvas_ribbon.mobile}` data-click=`${theme.canvas_ribbon.click_to_change}`)
 

layout/includes/third-party/katex.pug

@@ -1,6 +1,6 @@
 link(rel="stylesheet" type="text/css" href=theme.katex.cdn.css)
-script(src='https://cdn.jsdelivr.net/npm/katex-copytex@latest/dist/katex-copytex.min.js')
+script(src=url_for(theme.CDN.katex_copytex))
-link(rel="stylesheet" type="text/css" href='https://cdn.jsdelivr.net/npm/katex-copytex@latest/dist/katex-copytex.min.css')
+link(rel="stylesheet" type="text/css" href=theme.CDN.katex_copytex_css)
 script.
   $(function () {
     $('span.katex-display').wrap('<div class="katex-wrap"></div>')

layout/includes/third-party/mathjax.pug

@@ -24,4 +24,4 @@ script(type="text/x-mathjax-config").
     }
   });
 
-script(src=theme.mathjax.cdn)
+script(src=theme.CDN.mathjax)

layout/includes/widget/card_author.pug

@@ -1,35 +1,37 @@
 .card_widget.card-author
   .card-content
     .post_data
-      .data-item.text-center
+      .data-item.is_center
-        img.lozad.avatar_img(src=theme.avatar || url_for('/img/avatar.png') onerror=`onerror=null;src='${theme.lodding_bg.flink}'`)
+        img.lazyload.avatar_img(src=url_for(theme.avatar) onerror=`onerror=null;src='${theme.lodding_bg.flink}'`)
-        p.author-info__name.text-center= config.author
+        p.author-info__name.is_center= config.author
-        p.author-info__description.text-center= config.description
+        p.author-info__description.is_center= config.description
 
     .post_data.data_config
       if site.posts.length
-        .data-item.text-center
+        .data-item.is_center
           .data_link
             a(href=url_for(config.archive_dir) + '/')
               p.headline= _p('aside.articles') 
               p.length_num= site.posts.length
 
       if site.tags.length
-        .data-item.text-center       
+        .data-item.is_center       
           .data_link
             a(href=url_for(config.tag_dir) + '/' )
               p.headline= _p('aside.tags')
               p.length_num= site.tags.length
 
       if site.categories.length
-        .data-item.text-center      
+        .data-item.is_center      
           .data_link
             a(href=url_for(config.category_dir) + '/')
               p.headline= _p('aside.categories') 
               p.length_num= site.categories.length
 
-    .post_data.text-center
+    .post_data.is_center
-      a#bookmark-it.data-item.bookmark.bookmarke--primary.bookmark--animated(href="javascript:;" title= _p('aside.card_bookmark') )=  _p('aside.card_bookmark') || 'Follow Me'
+      a#bookmark-it.data-item.bookmark.bookmarke--primary.bookmark--animated(href="javascript:;" title= _p('aside.card_bookmark') target="_self")
+        i.fa.fa-bookmark(aria-hidden="true")
+        span= _p('aside.card_bookmark') || 'Follow Me'
       
   
   

layout/includes/widget/card_recent_post.pug

@@ -9,18 +9,11 @@
           - var link = article.link || article.path
             a(href=url_for(link))
               - var post_cover = article.cover
-              - var default_post_cover = random_cover()
               .aside_post_cover
-                if (post_cover)
                 if theme.lazyload.enable
-                    img.aside_post_bg.lozad(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=`onerror=null;src='${theme.lodding_bg.post_page}'` title=article.title || _p('no_title'))
                 else
                   img.aside_post_bg(src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` title=article.title || _p('no_title'))
-                else
-                  if theme.lazyload.enable
-                    img.aside_post_bg.lozad(data-src=`${default_post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` title=article.title || _p('no_title'))
-                  else
-                    img.aside_post_bg(src=`${default_post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` title=article.title || _p('no_title'))
               div#aside_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)

layout/includes/widget/card_webinfo.pug

@@ -11,7 +11,7 @@
         .webinfo_item
           .webinfo_runtime_name= _p('aside.card_webinfo.runtime_name') + " :"
           #webinfo_runtime_count.webinfo_runtime_count
-          script#runtionshow(src=url_for('js/runtimeshow.js') 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       

layout/page.pug

@@ -6,7 +6,8 @@ block content
       .tag-cloud__title= _p('page.tag')
         |  - 
         span.tag-cloud__amount= site.tags.length
-      .tag-cloud-tags!= tags(site.tags)
+      .tag-cloud-tags
+        include includes/page_tag.pug
       if page.comments !== false
         include includes/comments/index.pug
     #aside_content.aside_content

layout/post.pug

@@ -1,10 +1,9 @@
 extends includes/layout.pug
 
 block top_img
-  - var top_img =  page.top_img || page.cover || theme.post_meta.top_img || theme.post_img || theme.top_img || config.top_img
+  - var top_img =  page.top_img || page.cover || theme.post_meta.top_img || theme.default_top_img
   - var bg_img = top_img !== true ? `background-image: url(${top_img})` : ''
   div#top-container(style=bg_img)
-    include ./includes/header.pug
     #post-info
       #post-title
           .posttitle= page.title || _p('no_title')
@@ -30,14 +29,18 @@ block top_img
               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")
-        if (theme.wordcount && theme.wordcount.enable)
         .post-meta-wordcount
+          if (theme.wordcount && theme.wordcount.enable)
+            i.fa.fa-file-word-o.post-meta__icon(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")
             span= _p('post.min2read', min2read(page.content, {cn: 350, en: 160}))
-            if theme.busuanzi.page_pv
+          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= _p('post.page_pv') + ': '
             span#busuanzi_value_page_pv
 

layout/tag.pug

@@ -1,6 +1,14 @@
 extends includes/layout.pug
 
 block content
+  if theme.tag_ui == 'index'
+    include ./includes/mixins/UI.pug
+    #recent-posts.recent-posts    
+      +UI_NEW(page.posts)
+      include includes/pagination.pug
+    #aside_content.aside_content
+      include includes/aside.pug
+  else
     include ./includes/mixins/article-sort.pug
     #tag
       .article-sort-title= _p('page.tag') + ' - ' + page.tag

package.json

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

scripts/gallery-tag.js

@@ -1,16 +1,6 @@
-hexo.extend.tag.register('gallery', args => {
+function gallery(args, content) {
-  const url = args[0]
+  return `<div class="justified-gallery">${hexo.render.renderSync({text: content, engine: 'markdown'})}
-  const title = args[1] || 'No title'
+          </div>`;
-  return `
+}
-    <div
+
-      class="gallery-item"
+hexo.extend.tag.register('gallery', gallery, {ends: true});
-      style="background-image: url('${url}')"
-      data-title="${title}"
-      data-url="${url}"
-    >
-      <div class="gallery-item__title">
-        ${title}
-      </div>
-    </div>
-  `
-})

scripts/list_archives.js

@@ -0,0 +1,133 @@
+'use strict';
+
+hexo.extend.helper.register('list_archives', function (options = {}) {
+
+  const {
+    config
+  } = this;
+  const archiveDir = config.archive_dir;
+  const {
+    timezone
+  } = config;
+  const lang = this.page.lang || this.page.language || config.language;
+  let {
+    format
+  } = options;
+  const type = options.type || 'monthly';
+  const {
+    style = 'list', transform, separator = ', '
+  } = 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 = '';
+
+  var more_button
+  if (lang === 'zh-CN') {
+    more_button = '查看更多';
+  } else if (lang === 'zh-TW') {
+    more_button = '查看更多';
+  } else {
+    more_button = 'More';
+  }
+
+
+  if (!format) {
+    format = type === 'monthly' ? 'MMMM YYYY' : 'YYYY';
+  }
+
+  const posts = this.site.posts.sort('date', order);
+  if (!posts.length) return result;
+
+  const data = [];
+  let length = 0;
+
+  posts.forEach(post => {
+    // Clone the date object to avoid pollution
+    let date = post.date.clone();
+
+    if (timezone) date = date.tz(timezone);
+    if (lang) date = date.locale(lang);
+
+    const year = date.year();
+    const month = date.month() + 1;
+    const name = date.format(format);
+    const lastData = data[length - 1];
+
+    if (!lastData || lastData.name !== name) {
+      length = data.push({
+        name,
+        year,
+        month,
+        count: 1
+      });
+    } else {
+      lastData.count++;
+    }
+  });
+
+  const link = item => {
+    let url = `${archiveDir}/${item.year}/`;
+
+    if (type === 'monthly') {
+      if (item.month < 10) url += '0';
+      url += `${item.month}/`;
+    }
+
+    return this.url_for(url);
+  };
+
+  if (style === '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 += `<a class="${className}-list-link" href="${link(item)}">`;
+      result += transform ? transform(item.name) : item.name;
+
+
+      if (showCount) {
+        result += `<span class="${className}-list-count">${item.count}</span>`;
+      }
+      result += '</a>';
+      result += '</li>';
+
+    }
+
+    if (data.length > limit) {
+      result += `<li class="${className}-list-item">`;
+      result += `<a class="${className}-list-link is_center" href="` + '/' + `${archiveDir}" >`;
+      result += more_button;
+      result += '</a>';
+      result += '</li>';
+    }
+    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/post-lazyload.js

@@ -1,10 +1,9 @@
 'use strict';
-let cheerio;
 hexo.extend.filter.register('after_post_render', data => {
   var theme = hexo.theme.config;
   if (!theme.lazyload.enable) return;
 
-  if (!cheerio) cheerio = require('cheerio');
+  const cheerio = require('cheerio');
 
   const $ = cheerio.load(data.content, {decodeEntities: false});
   const images = $('img');
@@ -13,7 +12,7 @@ hexo.extend.filter.register('after_post_render', data => {
   images.each((i, o) => {
     let src = $(o).attr('src');
     $(o).attr('data-src', src).removeAttr('src');
-    $(o).addClass('lozad');
+    $(o).addClass('lazyload');
   });
 
   data.content = $.html();

scripts/random_cover.js

@@ -1,4 +1,9 @@
-hexo.extend.helper.register('random_cover', function () {
+hexo.extend.filter.register('before_post_render', function(data){
+  data.cover = data.cover || random_cover()
+  return data;
+});
+
+var random_cover = function () {
   var cover;
   var num;
   if (!Array.isArray(hexo.theme.config.default_cover)) {
@@ -10,4 +15,4 @@ hexo.extend.helper.register('random_cover', function () {
     return cover
   }
 
-})
+}

scripts/related_post.js

@@ -35,7 +35,7 @@ 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_class = hexo.theme.config.lazyload.enable ? lazy_class  = 'lozad' : lazy_class  = ''
+  var lazy_class = hexo.theme.config.lazyload.enable ? lazy_class  = 'lazyload' : lazy_class  = ''
 
   if (relatedPosts.length > 0) {
     result += '<div class="relatedPosts">'
@@ -44,7 +44,7 @@ hexo.extend.helper.register('related_posts', function (currentPost, allPosts) {
   
   for (var i = 0; i < Math.min(relatedPosts.length, limit_num); i++) {
  
-    var cover = relatedPosts[i].cover || random_cover()
+    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 += '<img class="relatedPosts_cover '+ lazy_class + '"' + lazy_src + '="' + cover + '">';
@@ -84,16 +84,3 @@ function compare (attr) {
       return val2 - val1;
   }
 }
-
-function random_cover() {
-  var post_cover;
-  var num;
-  if (!Array.isArray(hexo.theme.config.default_cover)) {
-    post_cover = hexo.theme.config.default_cover
-    return post_cover
-  } else {
-    num = Math.floor(Math.random() * (hexo.theme.config.default_cover.length));
-    post_cover = hexo.theme.config.default_cover[num];
-    return post_cover
-  }
-}

scripts/tags.js

@@ -1,16 +0,0 @@
-hexo.extend.helper.register('tags', function (site_tags) {
-  var result = "";
-  site_tags.sort('path').each(function (tags) {    
-  var fontSize = Math.floor(Math.random() * 15 + 15) + "px"; //15 ~ 30
-  var color =
-    "rgb(" +
-    Math.floor(Math.random() * 201) +
-    ", " +
-    Math.floor(Math.random() * 201) +
-    ", " +
-    Math.floor(Math.random() * 201) +
-    ")"; // 0,0,0 -> 200,200,200
-    result += '<a href="' + hexo.theme.config.rootConfig.root + tags.path + '" style="font-size:' + fontSize + ';color:' + color + '">' + tags.name + '</a>'
-  })
-  return result;
-})

source/css/_global/index.styl

@@ -13,6 +13,19 @@ body
   font-family: $font-family
   line-height: $text-line-height
 
+  if !hexo-config('copy.enable')
+    user-select: none
+    -moz-user-select: none
+    -webkit-user-select: none
+    -ms-user-select: none
+
+#body-wrap
+  position relative
+  flex: 1 auto
+  display: flex
+  flex-direction: column
+  transition: all .3s
+
 *::-webkit-scrollbar
   width: 8px
   height: 8px
@@ -71,19 +84,6 @@ h6
   transition: all 0.2s
   opacity: 0
 
-#go-up
-  position: fixed
-  right: $go-up-right
-  bottom: $go-up-bottom
-  font-size: $sidebar-icon-size
-  opacity: 0
-  cursor: pointer
-  transition: all .2s
-
-.fancybox-caption
-  text-align: center
-
-
 hr
   position: relative
   margin: 2rem auto
@@ -141,85 +141,6 @@ table
   background: $selection
   color: $pale-grey
 
-.text-center
-  text-align: center
-.pull-left
-  float: left
-
-.pull-right
-  float: right
-
-@media screen and (max-width: $bg)
-  i#toggle-sidebar,
-  #sidebar
-    display: none
-
-  body
-    padding-left: 0 !important
-
-
-
-// valine 
-#vcomment
-  font-size: inherit
-  
-  input 
-    font-size: 0.65rem
-
-  button 
-    font-size: .7rem
-    padding: .3rem 1rem
-    background-color: $light-blue
-    color: #fff
-    border-color: #fff
-
-    &:hover
-      background-color: darken($light-blue, 40)
-
-
-  textarea 
-    font-size: 0.7rem
-    background: url(/img/comment_bg.png) 100% 100% no-repeat
-
-  .info
-    display: none
-  
-  .vimg
-    border: 0
-
-    &:hover
-      -moz-transform: rotate(540deg)
-      -o-transform: rotate(540deg)
-      -webkit-transform: rotate(540deg)
-      transform: rotate(540deg)
-  .vcount
-    font-size: 0.775rem
-
-  .vnum 
-    font-size: 1.1rem
-
-  .vsys
-    font-size: 80%
-  
-  .vtime
-    font-size: .65rem
-  
-  .vcontent
-    font-size: 100%
-  
-  .vat
-    font-size: .7125rem
-    color: $cyan
-    border: 1px solid $cyan
-    padding: 0 .8rem
-    border-radius: 5px
-
-    &:hover
-      background-color: alpha($cyan,0.5)
-  
-  code, pre
-    font-size: 98%
-    font-family: $code-font
 
 .full_page #site-title, 
 .full_page #site-sub-title, 
@@ -228,141 +149,15 @@ table
 #aside_content .author-info__description
   font-family: $site-name-font
 
-
+.is_right
-
-#rightside 
-  right: -38px
-  position: fixed
-  bottom: 60px
-  opacity: 0
-  transition: all .2s
-
-
-  #readmode,#font_plus,#font_minus,#to_comment
-    width: 30px
-    height: 30px
-    background-color: $light-blue
-    color: #e3e8ee
-    text-align: center
-    line-height: 29px
-    font-size: 16px
-    display: block
-    margin-bottom: 2px
-    cursor: pointer
-    text-decoration: none
-
-  #to_comment
-    display: none
-  
-  #font_minus,#font_plus
-    display: none
-
-  .translate_chn_to_cht
-    width: 30px
-    height: 30px
-    background-color: $light-blue
-    color: #e3e8ee
-    text-align: center
-    line-height: 29px
-    font-size: 16px
-    display: block
-    margin-bottom: 2px
-    cursor: pointer
-    text-decoration: none
-
-  .nightshift
-    width: 30px
-    height: 30px
-    background-color: $light-blue
-    color: #e3e8ee
-    text-align: center
-    font-size: 17px
-    display: block
-    margin-bottom: 2px
-    cursor: pointer
-    padding-top: 6px
-
-
-  a
-    &:hover  
-      color: white
-    &:after    
-      color: white
-
-  
-
-.comment_headling
-  font-size: 20px
-  font-weight: 700
-  margin-bottom: 10px
-
-
-// bookmark 樣式
-.fc-container .fancybox-bg 
-  background: #eee
-
-
-.fancybox-is-open.fc-container .fancybox-bg 
-  opacity: 0.95
-
-
-.fc-content 
-  margin: 20px
-  max-width: 550px
-  padding: 50px
-  box-shadow: 10px 10px 60px -25px
-  border-radius: 4px
-
-
-.fc-content h3 
-  margin-top: 0
-  font-size: 1.6em
-  letter-spacing: normal
-
-
-.fc-content p 
-  color: #666
-  line-height: 1.5
-
-
-.fc-content p:last-child 
-  margin-bottom: 0
-
-
-/* Custom animation */
-.fancybox-fx-material.fancybox-slide--previous,
-.fancybox-fx-material.fancybox-slide--next 
-  transform: translateY(-60px) scale(1.1)
-  opacity: 0
-
-
-.fancybox-fx-material.fancybox-slide--current 
-  opacity: 1
-  transform: translateY(0) scale(1)
-
-
-.bookmark-ok
-  background: #FF6666
-  border-width: 0
-  color: #fff
-  text-decoration: none
-  padding: 7px 20px
-  line-height: 1.5
-  border-radius: 20px
-  text-transform: uppercase
-  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif
-  font-size: 80%
-  font-weight: 700
-  margin: 5px 5px 5px 0
-  display: inline-block
-  cursor: pointer
-  outline: none
-  transition: all .2s ease-in-out
-  user-select: none
-
-.tright
   text-align: right 
 
+.is_left
+  text-align: left
+
+.is_center
+  text-align: center
+
 .is_visible
   display: block !important
 
@@ -372,12 +167,206 @@ table
 .is_hidden
   overflow: hidden
 
+.pull_left
+  float: left
+
+.pull_right
+  float: right
+
 .fireworks
   position: fixed
   z-index: -1
   pointer-events: none
 
 
-// 去掉加載黑框
+.fireworks
+  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
+  img 
+    opacity 0
+  .fancybox 
+    width: auto
+    text-align: inherit    
+  .img-alt
+    display: none
+
+.medium-zoom-image--opened
+  margin: 0 !important
+  z-index: 99999 !important
+
+.medium-zoom-overlay
+  z-index: 99999 !important
+
+// hexo tag video
+.video-container
+  position: relative
+  padding-top: 56.25%
+  height: 0
+  overflow: hidden
+  margin-bottom: 0.8rem
+
+  iframe
+    position: absolute
+    top: 0
+    left: 0
+    width: 100%
+    height: 100%
+    margin-top: 0
+
+
+.layout_page,
+.layout_post,
+#footer
+  animation: main 1s
+
+#nav,
+#top-container
+  animation: header 1s
+
+#site-title
+  animation: titlescale 1s
+
+canvas,
+#web_bg
+  animation: to_show 4s
+
+.card-announcement-animation
+  animation: announ_animation .8s linear infinite
+  color: #FF0000
+
+.scroll-down-effects
+  animation: scroll-down-effect 1.5s infinite
+
+if hexo-config("avatar_effect") == true
+  .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
+  50%
+    opacity: 1
+    top: -16px
+  100%
+    opacity: 0.4
+    top: 0
+    
+@keyframes header 
+  0% 
+    opacity: 0
+    transform: translateY(-50px)
+  100% 
+    opacity: 1
+    transform: translateY(0)
+
+@keyframes headerNoOpacity
+  0% 
+    transform: translateY(-50px)
+  100% 
+    transform: translateY(0)
+
+@keyframes main
+  0% 
+    opacity: 0
+    transform: translateY(50px)
+  100% 
+    opacity: 1
+    transform: translateY(0)
+
+@keyframes titlescale
+  0%
+    opacity: 0
+    transform: scale(0.7)
+  100% 
+    opacity: 1
+    transform: scale(1)
+
+@keyframes search_close
+  0%
+    opacity: 1
+    transform: scale(1)
+  100% 
+    opacity: 0
+    transform: scale(0.7)
+
+@keyframes to_show
+  0%
+    opacity: 0
+  100%
+    opacity: 1
+ 
+@keyframes avatar_turn_around
+  from
+    transform: rotate(0deg)
+  to
+    transform: rotate(360deg)
+
+@keyframes sub_menus
+  0%
+    opacity: 0
+    transform: translateY(10px)
+  100%
+    opacity: 1
+    transform: translateY(0)
+
+@keyframes donate_effcet
+  0%
+    opacity: 0
+    transform: translateY(-20px)
+  100%
+    opacity: 1
+    transform: translateY(0)
+
+@keyframes announ_animation
+  0%,to
+    transform: scale(1)
+  50%
+    transform: scale(1.2)
+
+@keyframes rightside_in_animate
+  0%    
+    transform: translateX(28px)
+  100%
+    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)
+  

source/css/_highlight/highlight.styl

@@ -28,6 +28,17 @@ blockquote
   color: $blockquote-color
   background-color: lighten($blockquote-padding-color,33)
 
+  p
+    margin: 0 !important
+    padding: 0.5rem 0
+
+  footer
+    padding: 0 0 0.5rem 0
+    cite 
+      &:before
+        content: "—"
+        padding: 0 .3em
+
 .article-container
   pre,
   code
@@ -49,11 +60,7 @@ blockquote
       color: $highlight-foreground
       text-shadow: none
 
-  .highlight
+  figure.highlight
-    @extend $code-block
-    position: relative
-    border-radius: 1px
-
     &:after
       position: absolute
       top: 0
@@ -63,6 +70,11 @@ blockquote
       background: darken($highlight-background, 5)
       content: ""
 
+  .highlight
+    @extend $code-block
+    position: relative
+    border-radius: 1px
+
     pre
       margin: 0
       padding: 8px 0

source/css/_layout/aside.styl

@@ -5,33 +5,27 @@
     -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
-    -webkit-transition: all .3s
-    -moz-transition: all .3s
-    -o-transition: all .3s
-    -ms-transition: all .3s
     transition: all .3s
     background: #fff
     margin-top: 20px
     overflow: hidden
 
     &:hover
-      -webkit-box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
       box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
 
   .card-author
     img
-      height: 128px
+      height: 120px
-      width: 128px
+      width: 120px
+      padding: 0
       display: inline-block
       vertical-align: top
       border-radius: 70px
       transition: all .3s
 
       &:hover
-        -moz-transform: rotate(540deg)
-        -o-transform: rotate(540deg)
-        -webkit-transform: rotate(540deg)
         transform: rotate(540deg)
+
     .author-info
       &__name
         font-size: 1.1rem
@@ -54,10 +48,9 @@
       .headline 
         display: block
         font-size: 0.7rem
-        // letter-spacing: 1px
         margin-bottom: -21px
         text-transform: uppercase
-        color:#4c4948
+        color:$font-black
 
     #aside-social-icons
       margin: 0.5rem auto -0.7rem
@@ -66,8 +59,7 @@
 
       .social-icon 
         margin: 0 0.5rem
-        color: #4c4948
+        color: $font-black
-        /* text-shadow: 0.1rem 0.1rem 0.2rem rgba(0,0,0,0.15) */
         font-size: 1rem
         cursor: pointer
       
@@ -75,18 +67,12 @@
         transition: all 0.3s
         
         &:hover
-          -moz-transform: rotate(540deg)
-          -o-transform: rotate(540deg)
-          -webkit-transform: rotate(540deg)
           transform: rotate(540deg)
 
-
+    #bookmark-it
-    a#bookmark-it
-      display: inline-block
       margin-top: .2rem
-      padding: 0 1rem
       height: 1.6rem
-      background: $light-blue
+      background-color: $light-blue
       color: #fff
       text-decoration: none
       line-height: 1.6rem
@@ -94,14 +80,17 @@
       text-transform: uppercase
       z-index: 1
 
-    .toggle_change--primary,.bookmark--primary 
+      span
+        padding-left: 10px
+
+    .bookmark--primary 
       color: $ruby
     
-    .toggle_change--animated,.bookmark--animated 
+    .bookmark--animated 
       transition-property: color
       transition-duration: 1s
 
-      &:before {
+      &:before
         content: ""
         position: absolute
         top: 0
@@ -115,18 +104,13 @@
         transition-duration: 0.5s
         transition-timing-function: ease-out
         z-index: -1
-      }
       
-      &:hover {
+      &:hover 
         color: white
 
-        &:before {
+        &:before 
           transform: scaleX(1)
           transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66)
-        }
-      }
-      
-
 
   .card-content 
     padding: 1rem 1.2rem
@@ -140,37 +124,24 @@
     flex-basis: auto
     justify-content: center
 
-
   .item_headline 
     font-size: 0.8rem
     
     span 
       margin-left: 10px
 
-  .card-tag-cloud a
+  .card-tag-cloud 
+    a
       text-decoration: none
       position: relative
       padding-bottom: 0.3rem
       word-break: keep-all
 
-    &::after
-      position: absolute
-      bottom: 0
-      left: 0
-      z-index: -1
-      width: 0
-      height: 3px
-      background-color: lighten($theme-color, 30%)
-      content: ""
-      transition: all 0.3s ease-in-out
-
       &:hover
         color: $light-blue !important
 
-      &::after
+      // &::after
-        width: 100%
+      //   width: 100%
-
-
 
   .aside_recent_item 
       margin: 10px 0 -15px 0
@@ -178,31 +149,35 @@
     .aside_recent_post 
       a
         text-decoration: none
-        color: #4c4948
+        color: $font-black
 
     .aside_recent_post
       margin-bottom: 10px
       width: 100%
 
     .aside_post_cover
-      height: 70px
+      height: 66px
-      width: 70px
+      width: 66px
       float: left
+      overflow: hidden
+
     .aside_post_bg
       object-fit: cover
       width: 100%
       height: 100%
       max-width: 100%
+      padding: 0
+      transition: all .6s
 
       &:hover
         box-shadow: none
+        transform: scale(1.1)
     
     #aside_title    
-      padding-top: 4px
-    
       .aside_post_meta
         font-size: 0.6rem
-        padding-left: 5px
+        padding-left: 10px
+        color: #99a9bf
 
       .aside_post_title
         line-height: 1rem
@@ -210,14 +185,12 @@
         -webkit-line-clamp: 2
         -webkit-box-orient: vertical
         overflow: hidden
-        height: 41px
+        height: 40px
-        padding-left: 5px
+        padding-left: 10px
 
         &:hover
           color: $light-blue !important
 
-
-
   .aside_category_item,.archive-list
     list-style: none
     margin-bottom: -3px
@@ -232,14 +205,18 @@
 
   .aside_category_list,.archive-list-item
     margin-left: -40px
-    padding: 0.2rem 1rem
 
     &:hover
       background-color: $light-blue
       color: #363636
     a
       text-decoration: none
-      color: #4c4948
+      color: $font-black
+      padding: 0.2rem 1rem
+      transition: .2s
+
+      &:hover
+        padding: 0.2rem 0.85rem
   
   .aside_category_list_name,.archive-list-link
     white-space: nowrap
@@ -250,9 +227,6 @@
   .aside_category_list_link,.archive-list-item
     display: flex
   
-
-
-
   .aside_category_list_length,.archive-list-count
     float: right 
   
@@ -280,17 +254,6 @@
           float: right
           display: inline-block
 
-
-@keyframes announ_animation{
-  0%,to{
-    color: #4c4948
-}
-  50%{
-    color: #FF0000
-    }
-    }
-
-
 @media screen and (max-width: 900px) 
   .layout_page
     flex-direction: column

source/css/_layout/category.styl

@@ -16,7 +16,6 @@
     li
       position: relative
       margin: 0.3rem 0
-      // padding-left: 0.3rem
       padding: 0.1rem 0.5rem 0.1rem 1.5rem !important
 
       &:hover

source/css/_layout/comments.styl

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

source/css/_layout/flink.styl

@@ -24,13 +24,10 @@
     text-overflow: ellipsis
     overflow: hidden
     border-radius: 8px
-    -webkit-transform: perspective(1px) translateZ(0)
     transform: perspective(1px) translateZ(0)
     box-shadow: 0 0 1px rgba(0, 0, 0, 0)
     position: relative
-    -webkit-transition-property: color
     transition-property: color
-    -webkit-transition-duration: 0.3s
     transition-duration: 0.3s                      
     
     img 
@@ -40,13 +37,11 @@
       width: 70px
       height: 70px
       border: 0px solid #eaeefb      
+      transition: all .3s 
   
     &:hover 
       img
         filter: unqoute("progid:DXImageTransform.Microsoft.BasicImage(rotation=3)")
-        -moz-transform: rotate(540deg)
-        -o-transform: rotate(540deg)
-        -webkit-transform: rotate(540deg)
         transform: rotate(540deg)
     
     &:before
@@ -58,13 +53,9 @@
       right: 0
       bottom: 0
       background: $light-blue !important
-      -webkit-transform: scale(0)
       transform: scale(0)
-      -webkit-transition-property: transform
       transition-property: transform
-      -webkit-transition-duration: 0.3s
       transition-duration: 0.3s
-      -webkit-transition-timing-function: ease-out
       transition-timing-function: ease-out
 
   .md-links-item:hover, 
@@ -94,7 +85,7 @@
   .post-cards 
       margin-top: 5px
       min-height: 100px
-      padding: 15px
+      padding: 0 15px
       border-radius: 15px
   
   .comment-word
@@ -121,8 +112,6 @@
       li 
         width: calc(100%/2 - 14px)   
 
-
-
 @media screen and (max-width:600px)
   .flink
     .md-links 

source/css/_layout/footer.styl

@@ -1,4 +1,4 @@
-footer
+#footer
   margin-top: 1rem
   background: $light-blue
   background-attachment: local
@@ -20,7 +20,7 @@ footer
       background-image: linear-gradient(234deg, #394245 0%, #000 100%)
 
 
-#footer
+#footer-wrap
   padding: 1.2rem 1rem 1rem
   color: $light-grey
   text-align: center
@@ -37,3 +37,7 @@ footer
   .footer-separator
     margin: 0 0.2rem
 
+  .icp-icon
+    padding: 0 4px
+    vertical-align: text-bottom
+

source/css/_layout/head.styl

@@ -3,7 +3,7 @@
   margin-bottom: 1rem
 
   &.full_page
-    height: 100vh
+    height: $index_top_img_height
   
   .nav_bg
     width: 100%
@@ -16,7 +16,6 @@
   &.not_index_bg
     height: 20rem
 
-
   #site-social-icons
     margin: 0 auto
     width: 15rem
@@ -36,7 +35,7 @@
 #site-info
   position: absolute
   width: 100%
-  top: 43%
+  top: $index_site_info_top
 
 #site-title,
 #site-sub-title
@@ -68,8 +67,10 @@
 
   .scroll-down-effects
     position: absolute
-    color: #fff
+    color: $white
 
+#header
+  position: relative
 
 #page-header
   position: absolute
@@ -79,110 +80,18 @@
   width: 100%
   border: none
   font-size: 18px
-  transition: all 0.2s ease-in-out
+  transition: all .3s
+  opacity: 0
 
   .toggle-menu
     display: none
     padding-top: 0.6rem
     color: $light-grey
     cursor: pointer
-    transition: all 0.2s ease-in-out
 
     &:hover
       color: $white
   
-    .menu-icon-first, 
-    .menu-icon-second,
-    .menu-icon-third 
-      width: 18px
-      height: 3px
-      background-color: #eee
-      margin: 2px 0
-      transition: 0.4s
-    
-    &.close
-      /* 旋转第一条横线 */
-      .menu-icon-first 
-        -webkit-transform: rotate(45deg) translate(4px, 3px)
-        transform: rotate(45deg) translate(4px, 3px)
-
-      /* 隐藏第二条横线 */
-      .menu-icon-second 
-        opacity: 0
-
-      /* 旋转第三条横线 */
-      .menu-icon-third 
-        -webkit-transform: rotate(-45deg) translate(4px, -4px)
-        transform: rotate(-45deg) translate(4px, -4px)
-  
-  .menu_mask
-    position: fixed
-    top: 0
-    bottom: 0
-    width: 100%
-    height: 110vh
-    left: 0
-    right: 0
-    background: alpha($black,0.7)
-    display: none
-  
-  .menus  
-    .mobile_author_icon
-      display: none
-      padding: 1.3rem 1.5rem 0
-      text-align: center
-
-  
-      img
-        height: 120px
-        width: 120px
-        display: inline-block
-        vertical-align: top
-        border-radius: 70px
-        transition: all .3s
-
-    .mobile_post_data
-      display: flex
-      justify-content: center
-      padding: .6rem .5rem 0
-      display: none
-
-      .mobile_data_item
-        flex: 1
-
-      .mobile_data_link 
-        a
-          text-decoration: none
-
-        .length_num 
-          font-size: .9rem
-          color: #000
-
-        .headline 
-          display: block
-          font-size: 0.7rem
-          // letter-spacing: .5px
-          text-transform: uppercase
-          color:#4c4948
-
-    .menus-expand
-      position: absolute
-      width: 30px !important
-      height: 30px
-      right: 0
-      padding: 6px
-      display: none
-      transform: rotate(0deg)
-      transition: all .3s
-    
-      &.menus-closed
-        transform: rotate(180deg) !important
-        transition: all .3s
-      
-    hr         
-      margin: 1rem auto
-      display: none
-
   a
     color: $light-grey
     text-decoration: none
@@ -190,12 +99,108 @@
     &:hover
       color: $white
 
+  &.fixed
+    position: fixed
+    top: -60px
+    z-index: 101
+    background: alpha($white, 0.8)
+    box-shadow: 0 5px 6px -5px alpha($grey, 0.6)
+    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out
+
+    &.open-sidebar
+      .site-page
+        visibility: hidden
+
+    a,
+    #site-name,
+    .toggle-menu
+      color: $light-black
+      text-shadow: none
+
+      &:hover
+        color: $light-blue       
+
+  &.visible
+    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)
+    font-weight: bold
+    cursor: pointer
+
+  .menus_item
+    display: inline-block
+    padding: 0 0 0 0.7rem
+
+    &:hover,&:focus
+      .menus_item_child
+        display: block
+      
+      .menus-expand
+        transform: rotate(180deg) !important
+    
+    .menus-expand
+      padding: 4px        
+      transform: rotate(0deg)
+      transition: all .3s
+
+    .menus_item_child
+      position: absolute
+      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
@@ -211,42 +216,6 @@
     &::after
       width: 100%
 
-  &.fixed
-    position: fixed
-    top: -60px
-    z-index: 101
-    background: alpha($white, 0.8)
-    box-shadow: 0 5px 6px -5px alpha($grey, 0.6)
-    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out
-
-    &.open-sidebar
-      .site-page
-        display: none
-        opacity: 0
-
-    a,
-    #site-name
-      color: $light-black
-      text-shadow: none
-    
-    .menu-icon-first, 
-    .menu-icon-second,
-    .menu-icon-third
-      background-color: $light-black
-      text-shadow: none
-
-
-      &a,#site-name
-        &:hover
-          color: $light-blue
-
-  &.visible
-    transform: translate3d(0, 100%, 0)
-
-  #site-name
-    text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.15)
-    font-weight: bold
-    cursor: pointer
 
 @media screen and (min-width: $sm)  
   #site-title
@@ -255,125 +224,37 @@
   #site-sub-title
     font-size: 1.2rem
 
-  #page-header    
-    .menus_item
-      display: inline-block
-      padding: 0 0.5rem
-
-      &:hover,&:focus
-        .menus_item_child
-          display: block
-
-    .menus_item_child
-      position: absolute
-      background-color: alpha($white, 0.8)
-      padding: 8px 10px
-      width: fit-content
-      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
-
-      &: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)
-
-    .menus_item_child li
-      list-style: none
-      text-align: center
-
-      a
-        color: #3b3a3a;
-        text-shadow: none;
-
-    &.fixed.visible
-      .menus_item_child
-        background-color: #ffffff
-
-        &:before
-          border-color: transparent transparent #ffffff
 
 @media screen and (max-width: $sm)
   #page-header
     padding: 10px 0.8rem
   
-    .toggle-menu
+  #nav 
+    #site-social-icons
       display: block
 
-    .menus
+    &.not_index_bg
-      position: fixed
+      height: 14rem
-      top: 0
+
-      right: -250px
+    #page_site-info
-      width: 250px
+      top: 7rem
-      height 101vh
+  
-      background: $white
+  #top-container
-      cursor: pointer
+    height: 14rem
-      box-shadow: 0 0 4px rgba(0, 0, 0, 0.27)
+
-      z-index: 1
+    #post-info
-      overflow-y: scroll
+      bottom: 1rem
+      padding: 0 5%
+  
+    .mobile_hidden
       display: none
 
-      .mobile_post_data
-        display: flex
 
-      .menus_items
-        a
-          display: block !important
-          opacity: 1 !important
-          margin: 0
-          padding: .3rem 1.5rem
-          color: $font-black
-          text-shadow: none
-          font-size: 0.8rem
-          z-index: 0
-          text-overflow: ellipsis
-          overflow: hidden
-          white-space: nowrap  
   
-        i
+@media screen and (max-width: $bg)
-          width: 30%
+  #page-header
-          text-align: left 
+    &.fixed
-
+      &.open-sidebar
-        span
+        .site-page
-          width 70%
-
-          &:hover
-            color: $light-blue
-
-        .menus-expand
-          display: inline-block
-        
-        .menus_item_child
-          list-style: none
-          margin: 0
-        
-      .mobile_author_icon
-        display: block
-     
-      .menus_items 
-          padding: 0 .5rem
-          margin-bottom: 5rem                              
-              
-      hr
-        display: block 
-
-    .search 
-      right: 0.5rem
-
-      span
-        display none
-    
-    &.fixed.open-sidebar 
-      .search
           display: inline-block
           opacity: 1
-
-
-

source/css/_layout/mobile-sidebar.styl

@@ -0,0 +1,174 @@
+#mobile-sidebar
+  #menu_mask
+    position: fixed
+    top: 0
+    bottom: 0
+    width: 100%
+    height: 110vh
+    left: 0
+    right: 0
+    background: alpha($black,0.7)
+    z-index: 102
+    display: none
+
+  #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
+    opacity: 0
+    will-change: transform
+
+  #mobile-sidebar-menus
+    .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
+        border-radius: 70px
+        transition: all .3s
+
+    .mobile_post_data
+      display: flex
+      justify-content: center
+      padding: .6rem .5rem 0
+
+      .mobile_data_item
+        flex: 1
+
+      .mobile_data_link 
+        a
+          text-decoration: none
+
+        .length_num 
+          font-size: .9rem
+          color: $dark-black
+
+        .headline 
+          display: block
+          font-size: 0.7rem
+          text-transform: uppercase
+          color:$font-black
+      
+    hr         
+      margin: 1rem auto
+
+    .menus_items
+      padding: 0 .5rem
+      margin-bottom: 5rem
+
+      a
+        display: block !important
+        opacity: 1 !important
+        margin: 0
+        padding: .3rem 1.5rem
+        color: $font-black
+        text-shadow: none
+        font-size: 0.8rem
+        z-index: 0
+        text-overflow: ellipsis
+        overflow: hidden
+        white-space: nowrap  
+        
+      i
+        width: 30%
+        text-align: left 
+
+      span
+        width 70%
+
+        &:hover
+          color: $light-blue
+
+      .menus-expand
+        position: absolute
+        width: 30px !important
+        height: 30px
+        right: 0
+        padding: 6px        
+        transform: rotate(0deg)
+        transition: all .3s
+    
+        &.menus-closed
+          transform: rotate(180deg) !important
+          transition: all .3s
+      
+      .menus_item_child
+        list-style: none
+        margin: 0
+                            
+  #mobile-sidebar-toc
+    padding: 1rem 0.5rem 5rem 0.3rem
+
+    ol,li
+      list-style: none
+      padding: 0 0 0 8px
+      margin: 0
+    
+
+    .toc_mobile_headline 
+        text-align: center
+        font-size: 18px
+        font-weight: bold
+
+  a
+    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/nightshift.styl

@@ -1,300 +0,0 @@
-if hexo-config("nightshift") && hexo-config("nightshift.enable")
-  .night-mode 
-    #sidebar
-      background: #2d3035 !important
-      box-shadow: -0.25rem 0 0.25rem #2d3035 !important
-
-      &::-webkit-scrollbar-thumb
-        background: lighten(#2d3035,5)
-
-    if hexo-config("local_search") && hexo-config("local_search.enable")
-      #local-search
-        background: #2d3035  
-        .local-search-box--input  
-          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 !important
-        
-    h1, h2, h3, h4, h5, h6
-      color: #99a9bf
-
-    .article-container code
-      background: #616a6b 
-      color: #99a9bf 
-
-    // 評論
-    #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-post-item .article-title
-        color: #99a9bf
-
-    #page-header
-        &.fixed
-            background: #2d3035
-            box-shadow: 0 5px 6px -5px rgba(133,133,133,0) 
-
-            a, 
-            .toggle-menu, 
-            #site-name 
-                color: #99a9bf 
-                
-    blockquote
-        border-left: 0.2rem solid #7A5353 
-        color: #99a9bf
-        background-color: #2f3d49
-
-    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 .highlight
-        background-color: #1B2631 
-        .code pre
-            background-color: #1B2631 
-
-        .gutter pre
-            background: #1C2833 
-
-
-        &:after
-            background: rgb(27, 38, 59) 
-        
-        table
-            &:after,.copy-notice
-                background: rgb(27, 38, 59) 
-        
-        &::-webkit-scrollbar-thumb
-          background: lighten(#1B2631,10)
-        
-    .copy-notice
-        background: rgb(27, 38, 59) 
-
-    .post-cards,.md-links-item
-        a
-            color: #99a9bf
-
-    .aplayer
-        color: #000000 
-        filter: brightness(0.6)
-
-    .article-sort-item__title
-        color: #99a9bf
-
-    .category-list
-        a
-            color: #99a9bf
-
-
-
-    .translate_chn_to_cht,
-    .nightshift,
-    #readmode,
-    #to_comment
-        background-color: #2d3035 !important
-
-    img
-        filter: brightness(0.6)
-
-    .layout_post
-        background:#2d3035
-    
-    canvas
-      display: none !important
-
-    #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
-      
-      #bookmark-it
-        background: #616a6b !important
-    
-    #archive,
-    .tag-cloud,
-    #tag,
-    .category-content,
-    #category,
-    #page,
-    .flink
-      background:#2d3035
-
-    #nav,
-    #top-container,
-    footer
-      &::before
-        content: ""
-        position: absolute
-        top: 0
-        bottom: 0
-        left: 0
-        right: 0
-        background-color: rgba(0,0,0,.6)
-
-    .layout_page
-      .post-meta__date,
-      .article-meta__separator,
-      .article-meta__categories,
-      i
-        color: #99a9bf
-
-    #site-info .blogtitle, 
-    span.subtitle,
-    #site-title,
-    #post-info .posttitle,
-    #post-info #post-meta,
-    #site-social-icons i,
-    #top-container a,
-    #footer,
-    #footer a,
-    #page-header a
-      color: rgba(238,238,238,.6)
-
-    //打賞 分享
-    .post-reward
-      .reward-buttom
-        background-color: #616a6b
-      .post_share
-        filter: brightness(0.6)
-      img
-        filter: brightness(1)
-      
-    &::-webkit-scrollbar-thumb
-      background: lighten(#2d3035,5)
-
-
-    #post_bottom
-      background: #2d3035
-      box-shadow: 0 -5px 6px -5px rgba(133,133,133,0)
-
-      i
-        color: #99a9bf !important
-      
-      #toc_mobile
-        background: #2d3035
-
-        a
-          color: #99a9bf !important
-
-    #web_bg
-      background-color: #2d3032
-
-    #hbe-security
-      label
-        color: #99a9bf !important
-      input
-        background-color: #616a6b
-
-
-  @media screen and (max-width: 768px)
-    .night-mode
-      color: #99a9bf 
-      background-color: rgb(45, 48, 53)
-
-      #page-header
-        .menus
-          background: #2d3035
-
-          .headline
-            color: #99a9bf !important
-          
-          .length_num
-            color: darken(#99a9bf,10) !important
-        a
-          color: #99a9bf !important        
-        .menu-icon-first,
-        .menu-icon-second,
-        .menu-icon-third
-          background-color: #99a9bf !important
-
-
-  @media screen and (min-width: 768px)
-    .night-mode
-      color: #99a9bf 
-      background-color: #2d3032
-        
-      .recent-post-item
-          background: #2d3035 !important
-
-      #page-header 
-        .menus_item_child
-          background-color: #2d3035 !important
-
-          &:before
-            border-color: transparent transparent #2d3035 !important
-
-          li
-            a
-              color: #99a9bf
-
-
-
-
-    
-
-
-
-
-
-
-

source/css/_layout/note.styl

@@ -39,10 +39,10 @@
 
   p, ul, ol, table, pre, blockquote, img 
     &:first-child 
-      margin-top: 0
+      margin-top: 0 !important
 
     &:last-child 
-      margin-bottom: 0
+      margin-bottom: 0 !important
     
 
   if ($note-icons) 

source/css/_layout/page.styl

@@ -1,90 +1,78 @@
-galleryItemStyle(w, h)
+.layout_page
-  .gallery
+  display: flex 
-    &-item
+  margin: 0 auto
-      width: w
+  max-width: 1200px
-      height: unit(h, "rem")
+  align-items: flex-start
+  padding: 0 15px
 
-      &__title
+//index
-        transform: translate3d(0, unit(h, "rem"), 0)
+#recent-posts
-
+  width: 75%
-      &:hover
-        .gallery-item__title
-          transform: translate3d(0, unit(h - 1.5, "rem"), 0)
 
   .recent-post-item 
-  .content
+    padding: 0
-    margin-top: 0.5rem
+    box-shadow: 0 4px 8px 6px rgba(7,17,27,0.06)
+    border-radius: 8px
+    transition: all 0.3s
+    background: #fff
+    margin-top: 20px
+    height: 280px
 
-    p
+    &:hover 
-      word-break: break-word
+      -webkit-box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
+      box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
 
+      img.post_bg
+        transform:scale(1.1)
    
-    ol,
+  .left_radius
-    ul
+    border-top-left-radius: 8px
-      margin-top: 0.4rem
+    border-bottom-left-radius: 8px
-      padding: 0 0 0 0.8rem
-      list-style: none
-      counter-reset: li
 
-      p
+  .right_radius
+    border-top-right-radius: 8px
+    border-bottom-right-radius: 8px
+
+  .post_cover
+    width: 45%
+    height: 280px
+    overflow: hidden
+
+  .post_bg
+    border: 0
+    transition: all .6s
+    display: block
+    width: 100%
+    height: 100%
+    padding: 0
     margin: 0
-
+    object-fit: cover
-      ol,
-      ul
-        padding-left: 0.5rem
-
-      li
-        position: relative
-        margin: 0.2rem 0
-        padding: 0.1rem 0.5rem 0.1rem 1.5rem
 
     &:hover
-          &:before
+      transform:scale(1.1)
-            transform: rotate(360deg)
   
-        &:before
+  .recent-post-info 
-          position: absolute
+    padding: 50px 40px
-          top: 0
+    display: inline-block
-          left: 0
+    width: 55%
-          background: $light-blue
+    overflow hidden
-          color: $white
-          cursor: pointer
-          transition: all 0.3s ease-out
 
-    ol
-      li
-        &:before
-          margin-top: 0.2rem
-          width: w = 1.2rem
-          height: h = w
-          border-radius: 0.5 * w
-          content: counter(li)
-          counter-increment: li
-          text-align: center
-          font-size: 0.6rem
-          line-height: h
 
-    ul
+  a.article-meta__categories
-      li
+    text-decoration: none
+    color: #858585
+
     &:hover
-          &:before
+      color: #49b1f5 !important
-            border-color: $ruby
 
-        &:before
+  .content
-          $w = 0.3rem
+    display: -webkit-box
-          top: 10px
+    -webkit-line-clamp: 3
-          margin-left: 0.45rem
+    -webkit-box-orient: vertical
-          width: w = $w
+    overflow: hidden
-          height: h = w
+    height: 90px
-          border: 0.5 * w solid $light-blue
+    margin-top: 0.5rem
-          border-radius: w
+    word-break: break-word
-          background: $white
-          content: ""
-          line-height: h
-
-  .article-type
-    margin-left: 0.3rem
-    color: $grey
 
   .article-meta
     color: $grey
@@ -121,30 +109,58 @@ galleryItemStyle(w, h)
     word-wrap: break-word
 
     &:hover
-      // border-bottom: 1px solid $light-blue
       color: $light-blue !important
 
 .tag-cloud
-  padding: 1.5rem 1rem 2rem
+  padding: 40px 44px 44px
-  text-align: center
 
   a
     display: inline-block
     margin: 0 0.4rem
     text-decoration: none
     cursor: pointer
+    transition: all .3s
 
     &:hover
       color: $ruby !important
+      transform: scale(1.1)
 
   &__title
     font-size: 1.8rem
+    text-align: center
+
+  &-tags
+    text-align: center
 
 #tag,
 #category,
 #archive
   padding: 3rem 3rem 3rem
 
+#page,
+.category-content,
+.flink
+  padding: 40px 44px 44px
+
+
+#page,
+.category-content,
+#archive,
+.tag-cloud,
+.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%
+
+  &:hover
+    box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
+
+
 .article-sort
   padding-left: 1rem
   border-left: 2px solid $pale-blue
@@ -186,7 +202,7 @@ galleryItemStyle(w, h)
 
   &-item
     position: relative
-    margin-bottom: 1rem
+    margin: 0 0 1rem 0.5rem
     transition: all 0.2s ease-in-out
 
     &:hover
@@ -196,8 +212,8 @@ galleryItemStyle(w, h)
     &:before
       $w = 0.3rem
       position: absolute
-      top: 0.48rem
+      top: 1.8rem
-      left: calc(-1rem - 7px)
+      left: calc(-1rem - 17px)
       width: w = $w
       height: h = w
       border: 0.5 * w solid $light-blue
@@ -219,18 +235,55 @@ galleryItemStyle(w, h)
         border-color: $ruby
     
     &__time
-      position: absolute
-      top: 0.1rem
       color: $a-link-color
+      font-size: 0.7rem
+      padding-left: 0.4rem
 
     &__title
-      display: block
-      margin-left: 5rem
       color: $font-black
+      font-size: 0.75rem
+      height: 60px
+      overflow: hidden
+      display: -webkit-box
+      -webkit-line-clamp: 2
+      -webkit-box-orient: vertical
+      transition: all .3s
+
+      &:hover
+        color: $light-blue
+        transform: translateX(20px)
+    
+    &__img
+      img
+        height: 100%
+        width: 100%
+        object-fit: cover
+        padding: 0
+        transition: all .6s
+      
+        &:hover
+          transform: scale(1.1)
+
+    &__post
       text-decoration: none
-      font-size: 0.8rem
       cursor: pointer
 
+      &:hover
+        color: $a-link-color
+
+  &-img
+    height: 80px
+    width: 80px
+    display: inline-block
+    overflow: hidden
+  
+  &-post
+    display: inline-block
+    top: 0
+    position: absolute
+    margin-left: 1rem
+
+
 .category-lists
   padding: 1rem 0 1.5rem
 
@@ -254,48 +307,50 @@ galleryItemStyle(w, h)
     &:after
       content: ")"
 
-.gallery
-  &-item
-    position: relative
-    display: inline-block
-    overflow: hidden
-    margin: 0.4rem
-    width: 6rem
-    height: 6rem
-    background-position: 50% 50%
-    background-size: cover
-    background-repeat: no-repeat
-    cursor: pointer
-    transition: all 0.2s ease-in-out
-
-    &__title
-      position: absolute
-      overflow: hidden
-      padding: 0 0.4rem
-      width: 100%
-      height: 1.5rem
-      background: rgba(0, 0, 0, 0.5)
-      color: $pale-blue
-      text-align: center
-      text-overflow: ellipsis
-      white-space: nowrap
-      line-height: 1.5rem
-      transition: 0.2s ease-in-out
-      transform: translate3d(0, 6rem, 0)
-
-    &:hover
-      .gallery-item__title
-        transform: translate3d(0, 4.5rem, 0)
-
 @media screen and (max-width: $sm)
+  .layout_page
+    padding: 0 5px !important
+   
+  #page,
+  .category-content,
+  #archive,
+  .tag-cloud,
+  .flink,
+  #tag,
+  #category
+    padding: 1.8rem 1.3rem
+    margin-top: 10px
+ 
+  .category-lists
+    padding: 0
+  
+  #recent-posts    
     .recent-post-item
+      height: auto !important
+
+      .post_cover 
+        width: 100% 
+        height: 230px 
+        border-radius: 8px 8px 0 0
+
+      .recent-post-info 
+        padding: 30px 25px 18px!important
+        width: 100%
+              
         .article-title
           font-size: 1rem
         
         .article-meta.tags
           display: none
 
-  galleryItemStyle(calc(50% - 22px), 6)
+      &:first-child
+        margin-top: 10px
 
-@media screen and (min-width: $md)
+@media screen and (min-width: 900px) 
-  galleryItemStyle(8rem, 8)
+  if hexo-config("aside.position") == "left"
+    #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
+      width: 100% !important

source/css/_layout/pagination.styl

@@ -22,7 +22,8 @@
       color: $white
       cursor: default
 
-  img.prev_cover, img.next_cover
+  img.prev_cover,
+  img.next_cover
     position: absolute
     padding: 0
     top: 0

source/css/_layout/post.styl

@@ -72,13 +72,17 @@ if hexo-config("post_beautify.enable")
     width: 100%
     color: $light-grey
     text-align: left
-    padding-left: 8%
+    padding: 0 8%
     position: absolute
     bottom: 1.5rem
 
   #post-title
     text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.15)
     font-size: 1.5rem
+    margin-bottom: 0.4rem
+
+    .posttitle
+      line-height: 1.5
 
   i.fa.fa-angle-right
     margin: 0 0.3rem 0 0.2rem
@@ -108,12 +112,8 @@ if hexo-config("post_beautify.enable")
       background: $light-blue
       color: $white
 
-.layout
-  margin: 0 auto
-  max-width: 1000px
 
 #post-content
-  margin-bottom: 1rem
 
   if hexo-config("post_beautify.enable")
     h1,
@@ -321,7 +321,7 @@ img
 
 .post-copyright
   position: relative
-  margin-bottom: 0.4rem
+  margin: 1rem 0 0.5rem 0
   padding: 0.5rem 0.8rem
   border: 1px solid $light-grey
   transition: box-shadow 0.3s ease-in-out
@@ -359,13 +359,7 @@ img
 
 
 @media screen and (max-width: $sm)
-  .layout
-    margin: 0 30px
-    width: auto
-
   #top-container
-    // background-attachment: local
-
     #post-title
       font-size: 1rem
 
@@ -374,7 +368,7 @@ img
 
 
 @media screen and (min-width: $md)
-  .layout
+  .layout_post
     width: $content-large-width
         
 .katex-wrap
@@ -385,48 +379,31 @@ img
       
 
 // 文章字體
-#post-content p {
+#post-content p
   font-size: 1.1em
-}
 
-#post-content ol, #post-content ul {
+
+#post-content ol,
+#post-content ul 
   font-size: 1em
-}
-
-
-
-@media screen and (max-width: 1024px)
-  .layout 
-    margin: 0 15px
-    width: auto
-
 
 
 
 .layout_post 
   padding: 50px
-  -webkit-box-shadow: 0 4px 8px 6px rgba(7,17,27,0.06)
   box-shadow: 0 4px 8px 6px rgba(7,17,27,0.06)
   border-radius: 8px
-  -webkit-transition: all 0.3s
-  -moz-transition: all 0.3s
-  -o-transition: all 0.3s
-  -ms-transition: all 0.3s
   transition: all 0.3s
   background: #fff
-  margin-top: 40px
+  margin: 40px auto
-  margin-bottom: 40px
+  max-width: 1000px
 
   &:hover 
-    -webkit-box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
     box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
   
   img
-    margin:0 auto
     display:block
 
-
-
   .tag_share
     display: block
 
@@ -456,3 +433,35 @@ img
     a
       text-decoration: none
       color: $light-blue
+    
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6
+      margin: 1rem 0 0.8rem 0
+    
+    img
+      margin: 0 auto 0.8rem 
+        
+    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)
+  .layout_post
+    padding: 1.8rem 1rem
+    margin: 30px 5px

source/css/_layout/post_bottom.styl

@@ -1,70 +0,0 @@
-#post_bottom
-  position: fixed
-  bottom: -50px
-  background: alpha($white, 0.8)
-  width: 100%
-  border: none
-  box-shadow: 0 -5px 6px -5px alpha($grey, 0.6)
-  display: none
-  transition: all .2s
-  cursor: pointer
-  z-index: 100
-
-  &.toc_mobile_show
-    bottom: 0
-
-  #mobile_to_comment,#mobile_toc
-    width: 50%
-    text-align: center
-    font-size: 18px
-    padding: 7px 0
-    display: inline-block
-    color: $light-black
-
-  a
-    text-decoration: none
-    color: $light-black
-
-  #toc_mobile 
-    box-shadow: 0 0 4px alpha($grey, 0.6)
-    background: $white
-    width: 50%
-    height: 70%
-    position: fixed
-    bottom: 60px
-    right: 10px
-    overflow: scroll
-    padding: 15px 10px
-    font-size: 15px
-    border-radius: 10px
-    display: none
-
-    ol,li
-      list-style: none
-      padding: 0 0 0 5px
-      margin: 0
-    
-    a
-      &:hover
-        color: $light-blue
-
-  .toc_mobile_headline 
-      text-align: center
-      font-size: 18px
-      font-weight: bold
-  
-  &.no_comment_show
-    #mobile_toc
-      width: 100%
-      padding: 16px 0
-
-    #toc_mobile
-      right: 25%
-
-  &.no_toc_show
-    #mobile_to_comment
-      width: 100%
-
-@media screen and (max-width:768px)
-  #post_bottom
-    display: block

source/css/_layout/readmode.styl

@@ -7,27 +7,34 @@ if hexo-config("readmode") && hexo-config("readmode.enable")
     #toggle-sidebar
       display: none
 
+    #page-header
+      #site-name,
+      .site-page,
+      .toggle-menu
+        text-shadow: none
+        color: $font-black
+      
+      .menus_item_child
+        background-color: darken($pale-yellow,5) !important
+
+        &:before
+          border-color: transparent transparent darken($pale-yellow,5) !important
+
     #top-container
       background-image: none !important
       height: 14rem
       background-color: $pale-yellow
 
       a
-        color: #4c4948
+        color: $font-black
-
 
       &:before
         opacity: 0
      
-      #site-name,
-      .site-page
-        text-shadow: none
-        color: #4c4948
-      
       #post-info
         text-align: center
         padding: 0
-        color: #4c4948
+        color: $font-black
       
       #post-title,
       #post-meta
@@ -43,11 +50,6 @@ if hexo-config("readmode") && hexo-config("readmode.enable")
             display: inline-block
             opacity: 1
         
-        .toggle-menu 
-          .menu-icon-first,
-          .menu-icon-second,
-          .menu-icon-third
-            background-color: #4c4948
 
     .layout_post
       box-shadow: none
@@ -74,13 +76,13 @@ if hexo-config("readmode") && hexo-config("readmode.enable")
       background-color: rgba(102,128,153,.05)
     
     #rightside
-      #nightshift
+      #darkmode
         display: none
       
     canvas
       display: none !important
     
-    footer,
+    #footer,
     #post-comment,
     hr,
     .relatedPosts,
@@ -99,31 +101,6 @@ if hexo-config("readmode") && hexo-config("readmode.enable")
     .copy-notice
       background: darken($pale-yellow,10)
 
-    .toc_mobile_show
-      background: alpha(darken($pale-yellow,5),0.5) !important
-      box-shadow: none !important
-      
-      #post_bottom_items
-        #mobile_to_comment
-          display: none 
-        #mobile_toc
-          width: 100%
-          padding: 16px 0
-        #toc_mobile
-          right: 25%
-          background: darken($pale-yellow,5)
-
-
-  @media screen and (min-width: 768px)
-    .read-mode
-      .menus_item_child
-        background-color: darken($pale-yellow,5) !important
-
-        &:before
-          border-color: transparent transparent darken($pale-yellow,5) !important
-
-
-
 
 
 

source/css/_layout/reward.styl

@@ -5,7 +5,7 @@
   text-align: center
   display: block
 
-  .reward-buttom
+  .reward-button
     text-align: center
     display: inline-block
     cursor: pointer

source/css/_layout/rightside.styl

@@ -0,0 +1,63 @@
+#rightside 
+  right: -38px
+  position: fixed
+  bottom: 40px
+  transition: all .3s
+  opacity 0
+
+  #rightside-config-hide
+    display none
+
+  #readmode,
+  #font_plus,
+  #font_minus,
+  #to_comment,
+  .darkmode,
+  #mobile-toc-button,
+  #go-up,
+  #rightside_config
+    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 
+  
+  #rightside_config
+    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
+  
+

source/css/_layout/sidebar.styl

@@ -10,6 +10,8 @@
   background: $sidebar-background
   box-shadow: -0.25rem 0 0.25rem rgba(232, 237, 250, 0.6) inset
   opacity:  0.9
+  will-change: transform
+  transition: transform .2s
   
   .sidebar-toc
     ol,

source/css/_layout/z-darkmode.styl

@@ -0,0 +1,300 @@
+[data-theme="dark"] 
+  body
+    color: #99a9bf 
+    background-color: #2d3032
+
+    &::-webkit-scrollbar-thumb
+      background: lighten(#2d3035,5)
+
+  #sidebar
+    background: #2d3035
+    box-shadow: -0.25rem 0 0.25rem #2d3035
+
+    &::-webkit-scrollbar-thumb
+      background: lighten(#2d3035,5)
+
+  if hexo-config("local_search") && hexo-config("local_search.enable")
+    #local-search
+      background: #2d3035  
+      .local-search-box--input  
+        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,
+  #tag,
+  .category-content,
+  #category,
+  #page,
+  .flink,
+  .layout_post,
+  #footer-wrap
+    background:#2d3035
+
+  #nav,
+  #top-container,
+  #footer
+    &::before
+      content: ""
+      position: absolute
+      top: 0
+      bottom: 0
+      left: 0
+      right: 0
+      background-color: rgba(0,0,0,0.7)
+
+  #nav span,
+  #nav i,
+  #page-header a,
+  #page-header .toggle-menu,
+  #top-container #post-meta,
+  #top-container a,
+  .posttitle,
+  #footer-wrap,
+  #footer-wrap a   
+    color: lighten(#99a9bf,10)
+
+  .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
+    color: #99a9bf !important
+
+  .article-sort-item__title
+    color: #99a9bf
+    &:hover
+      color: #49b1f5
+
+  //打賞 分享
+  .post-reward      
+    .reward-all:after
+      border-top: 13px solid lighten(#2d3035,10) !important
+    
+
+  #web_bg[data-type=color]
+    background: #2d3032
+
+  #web_bg[data-type=photo]:before
+    content: ""
+    position: absolute
+    top: 0
+    bottom: 0
+    left: 0
+    right: 0
+    background-color: rgba(0,0,0,0.8)
+
+  #hbe-security
+    label
+      color: #99a9bf !important
+    input
+      background-color: #616a6b
+
+
+  #mobile-sidebar
+    #mobile-sidebar-menus
+      background: #2d3035
+
+      .headline
+        color: #99a9bf !important
+      
+      .length_num
+        color: darken(#99a9bf,10) !important
+      a
+        color: #99a9bf !important
+
+    #mobile-sidebar-toc
+      background: #2d3035
+      a
+        color: #99a9bf !important
+
+  #page-header 
+    .menus_item_child
+      background-color: #2d3035 !important
+
+      &:before
+        border-color: transparent transparent #2d3035 !important
+
+      li
+        a
+          color: #99a9bf
+  
+  .bookmark--animated:before
+    background: lighten(#2d3035,20) !important
+
+    
+
+
+
+
+
+    
+
+
+
+
+
+
+

source/css/_layout/z-other.styl

@@ -1,289 +0,0 @@
-#recent-posts
-  width: 75%
-
-  .recent-post-item 
-    padding: 0
-    box-shadow: 0 4px 8px 6px rgba(7,17,27,0.06)
-    border-radius: 8px
-    transition: all 0.3s
-    background: #fff
-    margin-top: 20px
-    height: 280px
-
-    &:hover 
-      -webkit-box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
-      box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
-
-      img.post_bg
-        transform:scale(1.1)
-  
-  .is_left
-    float: left
-    border-top-left-radius: 8px
-    border-bottom-left-radius: 8px
-
-  .is_right
-    float: right
-    border-top-right-radius: 8px
-    border-bottom-right-radius: 8px
-
-  .post_cover
-    width: 45%
-    height: 280px
-    overflow: hidden
-
-  img.post_bg
-    border: 0
-    transition: all .6s
-    display: block
-    width: 100%
-    height: 100%
-    padding: 0
-    margin: 0
-    object-fit: cover
-  
-
-    &:hover
-      transform:scale(1.1)
-  
-  #pagination
-    margin-top: 2rem
-
-
-.recent-post-info 
-  padding: 50px 40px
-  display: inline-block
-  width: 55%
-  overflow hidden
-
-
-a.article-meta__categories
-  text-decoration: none
-  color: #858585
-
-  &:hover
-    color: #49b1f5 !important
-
-.content
-  display: -webkit-box
-  -webkit-line-clamp: 3
-  -webkit-box-orient: vertical
-  overflow: hidden
-  height: 90px
-
-.layout_page
-  display: flex 
-  margin: 0 auto
-  max-width: 1200px
-  align-items: flex-start
-  padding: 0 15px
-
-
-#page,.category-content,.flink
-  padding: 40px 44px 44px
-
-#page,.category-content,#archive,.tag-cloud,.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%
-
-.card_widget,#archive,.tag-cloud,#tag,.category-content,#category,#page,.flink
-
-  &:hover 
-    -webkit-box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
-    box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
-
-
-
-@media screen and (min-width: 900px) 
-  if hexo-config("aside.position") == "left"
-    #recent-posts
-      order: 2
-    
-    #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
-      width: 100% !important
-
-
-@media screen and (max-width:768px)
-  #web_bg
-    display: none 
-    
-  .recent-post-item
-    height: auto !important
-    border-radius: 8px
-
-  .post_cover 
-      width: 100% !important
-      height: 230px !important
-      border-radius: 8px !important
-           
-  .recent-post-item,#page,.tag-cloud,.flink
-    margin-top: 1px
-
-  .recent-post-item,#page,.category-content,.tag-cloud,.flink
-    box-shadow: none !important
-    background: none !important
-    padding: 0px 20px 0 !important
-  
-    &:hover 
-      -webkit-box-shadow: none
-      box-shadow: none
-  
-  #archive,#category,#tag
-    box-shadow: none !important
-    background: none !important
-    padding: 0px 30px 0 !important
-
-  
-  .layout_post
-    padding: 0 20px 0
-    border-radius: 0
-    -webkit-box-shadow: none
-    box-shadow: none
-    background: none
-    margin: 0
-
-    &:hover
-      -webkit-box-shadow: none
-      box-shadow: none
-      
-  .layout_page
-    padding: 0 !important
-  
-  #aside_content
-    display: none !important
-
-  .category-lists
-    padding: 0
-  
-  .recent-post-info 
-    padding: 20px 10px !important
-    width: 100%
-
-  #recent-posts #pagination
-    margin-bottom: 0
-
-  #nav 
-    #site-social-icons
-      display: block
-
-    &.not_index_bg
-      height: 14rem
-
-    #page_site-info
-      top: 7rem
-  
-  #top-container
-    height: 14rem
-
-    #post-info
-      bottom: 1rem
-      padding-left: 5%
-  
-  .mobile_hidden
-    display: none
-  
-    
-  canvas
-    display: none !important
-
-
-.layout_page,
-.layout_post,
-footer
-  animation: main 1s
-
-#nav,
-#top-container
-  animation: header 1s
-
-#site-title
-  animation: titlescale 1s
-
-canvas,#web_bg
-  animation: to_show 4s
-
-.card-announcement-animation
-  animation: announ_animation 1.5s infinite
-
-.scroll-down-effects
-  animation: scroll-down-effect 1.5s infinite
-
-if hexo-config("avatar_effect") == true
-  .avatar_img
-    animation: avatar_turn_around 2s linear infinite
-
-.reward-main
-  animation: donate_effcet .3s .1s ease both;
-
-
-@keyframes scroll-down-effect
-  0%
-    opacity: 0.4
-    top: 0
-  50%
-    opacity: 1
-    top: -16px
-  100%
-    opacity: 0.4
-    top: 0
-    
-@keyframes header 
-  0% 
-    opacity: 0
-    transform: translateY(-50px)
-  100% 
-    opacity: 1
-    transform: translateY(0)
-
-@keyframes main
-  0% 
-    opacity: 0
-    transform: translateY(50px)
-  100% 
-    opacity: 1
-    transform: translateY(0)
-
-@keyframes titlescale
-  0%
-    opacity: 0
-    transform: scale(0.7)
-  100% 
-    opacity: 1
-    transform: scale(1)
-
-@keyframes to_show
-  0%
-    opacity: 0
-  100%
-    opacity: 1
- 
-@keyframes avatar_turn_around
-  from
-    transform: rotate(0deg)
-  to
-    transform: rotate(360deg)
-
-@keyframes sub_menus
-  0%
-    opacity: 0
-    transform: translateY(10px)
-  100%
-    opacity: 1
-    transform: translateY(0)
-
-@keyframes donate_effcet
-  0%
-    opacity: 0
-    transform: translateY(-20px)
-  100%
-    opacity: 1
-    transform: translateY(0)

source/css/_search/algolia.styl

@@ -1,4 +1,6 @@
 #algolia-search
+  animation: titlescale 0.5s
+
   .ais-search-box
     margin: 0 auto
     max-width: 100%

source/css/_search/local-search.styl

@@ -1,4 +1,6 @@
 #local-search
+  animation: titlescale 0.5s
+
   .local-search-box
     margin: 0 auto
     max-width: 100%

source/css/var.styl

@@ -60,9 +60,9 @@ $lg = 1450px
 $sidebar-icon-top = 20px
 $sidebar-icon-left = $sidebar-icon-top - 4px
 $sidebar-icon-size = 16px
-$go-up-bottom = $sidebar-icon-top
-$go-up-right = -($sidebar-icon-left)
 $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

source/img/post_loadding.svg

@@ -0,0 +1 @@
+<svg width="200px"  height="200px"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-pacman" style="background: none;"><g ng-attr-style="display:{{config.showBean}}" style="display:block"><circle cx="74.5405" cy="50" r="4" ng-attr-fill="{{config.c2}}" fill="#a3d9ef"><animate attributeName="cx" calcMode="linear" values="95;35" keyTimes="0;1" dur="0.8" begin="-0.536s" repeatCount="indefinite"></animate><animate attributeName="fill-opacity" calcMode="linear" values="0;1;1" keyTimes="0;0.2;1" dur="0.8" begin="-0.536s" repeatCount="indefinite"></animate></circle><circle cx="94.9405" cy="50" r="4" ng-attr-fill="{{config.c2}}" fill="#a3d9ef"><animate attributeName="cx" calcMode="linear" values="95;35" keyTimes="0;1" dur="0.8" begin="-0.264s" repeatCount="indefinite"></animate><animate attributeName="fill-opacity" calcMode="linear" values="0;1;1" keyTimes="0;0.2;1" dur="0.8" begin="-0.264s" repeatCount="indefinite"></animate></circle><circle cx="54.7405" cy="50" r="4" ng-attr-fill="{{config.c2}}" fill="#a3d9ef"><animate attributeName="cx" calcMode="linear" values="95;35" keyTimes="0;1" dur="0.8" begin="0s" repeatCount="indefinite"></animate><animate attributeName="fill-opacity" calcMode="linear" values="0;1;1" keyTimes="0;0.2;1" dur="0.8" begin="0s" repeatCount="indefinite"></animate></circle></g><g ng-attr-transform="translate({{config.showBeanOffset}} 0)" transform="translate(-15 0)"><path d="M50 50L20 50A30 30 0 0 0 80 50Z" ng-attr-fill="{{config.c1}}" fill="#82bbe4" transform="rotate(29.6108 50 50)"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;45 50 50;0 50 50" keyTimes="0;0.5;1" dur="0.8s" begin="0s" repeatCount="indefinite"></animateTransform></path><path d="M50 50L20 50A30 30 0 0 1 80 50Z" ng-attr-fill="{{config.c1}}" fill="#82bbe4" transform="rotate(-29.6108 50 50)"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;-45 50 50;0 50 50" keyTimes="0;0.5;1" dur="0.8s" begin="0s" repeatCount="indefinite"></animateTransform></path></g></svg>

source/js/main.js

@@ -1,18 +1,122 @@
 $(function () {
+  
+  const is_Snackbar = GLOBAL_CONFIG.Snackbar !== undefined ? true : false
+
+  /**
+   * 當menu過多時，自動適配，避免UI錯亂
+   */
+  const ph_width = $("#page-header").width()
+  const search_width = $('#search_button').outerWidth()
+  var mw = 0;
+  for (var i = 0; i < $('#page-header .menus_item').length; i++) {
+    mw = mw + $('#page-header .menus_item').eq(i).outerWidth()
+  }
+
+  if ($('#page-header').height() > 37 || window.innerWidth < 7) {
+    header_adjust()
+  }
+
+  function header_adjust() {
+    $("#page-header .toggle-menu").addClass("is_visible")
+    $("#page-header .menus,.search span").addClass("is_invisible")
+  }
+
+  function header_adjust_back() {
+    $("#page-header .toggle-menu").removeClass("is_visible")
+    $("#page-header .menus,.search span").removeClass("is_invisible")
+  }
+
+  /**
+   * 傳入 1 sidebar打開時
+   * 傳入 2 正常狀態下
+   * 傳入 3 resize時使用
+   */
+  function is_adjust(n) {
+    var t;
+    if (n == '1') {
+      t = $('#blog_name').width() + search_width + mw > $("#page-header").width() - 300 ? true : false
+    } else if (n == '2') {
+      t = $('#blog_name').width() + search_width + mw > $("#page-header").width() ? true : false
+    } else if (n == "3") {
+      t = $('#blog_name').width() + search_width + mw > $("#page-header").width() ? true : false
+    }
+    if (t) {
+      header_adjust()
+    } else {
+      header_adjust_back()
+    }
+  }
+
+  $(window).bind("resize", function () {
+    if (window.innerWidth > 768) {
+      is_adjust(3)
+    } else {
+      header_adjust()
+    }
+  })
+
+  $('#page-header').css({'opacity':'1', 'animation':'headerNoOpacity .7s'})
+
+
+  /**
+   * 進入post頁sidebar自動打開
+   */
   if ($('#sidebar').hasClass('auto_open')) {
     if ($(".sidebar-toc__content").children().length > 0) {
+      $('#toggle-sidebar').addClass('on')
       $(".layout_post").animate({}, function () {
         {
           setTimeout(function () {
+            $("#toggle-sidebar").addClass('on');
+            open_sidebar()
+          }, 300);
+
+          is_adjust(1)
+        }
+      })
+
+    } else
+      $("#toggle-sidebar").css("display", "none")
+  } else {
+    $('#toggle-sidebar').css('opacity', '1')
+  }
+
+
+  /**
+   * 點擊左下角箭頭,顯示sidebar
+   */
+
+  function close_sidebar() {
+    $('#page-header').removeClass('open-sidebar')
+    $('body').animate({
+      paddingLeft: 0
+    }, 200)
+
+    $('#sidebar').animate({}, function () {
+      $('#sidebar').css('transform', 'translateX(0px)')
+    })
+
+    $('#toggle-sidebar').animate({}, function () {
+      $('#toggle-sidebar').css({
+        'transform': 'rotateZ(0deg)',
+        'color': '#1F2D3D',
+        'opacity': "1"
+
+      })
+    })
+
+  }
+
+  function open_sidebar() {
     $('#page-header').addClass('open-sidebar')
-            $("#toggle-sidebar").addClass('on')
     $('body').animate({
       paddingLeft: 300
     }, 200)
 
-            $('#sidebar').animate({
+    $('#sidebar').animate({}, function () {
-              left: 0
+      $('#sidebar').css('transform', 'translateX(300px)')
-            }, 200)
+    })
+
 
     $('#toggle-sidebar').animate({}, function () {
       $('#toggle-sidebar').css({
@@ -22,113 +126,37 @@ $(function () {
       })
     })
 
-          }, 200);
   }
-      })
-    } else
-      $("#toggle-sidebar").css("display", "none")
-  } else {
-    $('#toggle-sidebar').css('opacity', '1')
-  }
-
-
-  //-------------------------------------------------------------------------------------------------------
-  //sidebar
   $('#toggle-sidebar').on('click', function () {
 
     if (!isMobile() && $('#sidebar').is(':visible')) {
       var isOpen = $(this).hasClass('on')
       isOpen ? $(this).removeClass('on') : $(this).addClass('on')
       if (isOpen) {
-        $('#page-header').removeClass('open-sidebar')
+        close_sidebar()
-        $('body').animate({
+        setTimeout(function () {
-          paddingLeft: 0
+          is_adjust(2)
-        }, 200)
+        }, 300)
-
-        $('#sidebar').animate({
-          left: -300
-        }, 200)
-
-        $('#toggle-sidebar').animate({}, function () {
-          $('#toggle-sidebar').css({
-            'transform': 'rotateZ(0deg)',
-            'color': '#1F2D3D'
-          })
-        })
-
       } else {
-        $('#page-header').addClass('open-sidebar')
+        is_adjust(1)
-        $('body').animate({
+        open_sidebar()
-          paddingLeft: 300
-        }, 200)
-
-        $('#sidebar').animate({
-          left: 0
-        }, 200)
-
-        $('#toggle-sidebar').animate({}, function () {
-          $('#toggle-sidebar').css({
-            'transform': 'rotateZ(180deg)',
-            'color': '#99a9bf'
-          })
-        })
       }
     }
   })
 
-  //-----------------------------------------------------------------------------------------------------
-  // 首页fullpage添加
-  // 添加class 
-  if (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)) {} else {
-    $('.full_page .nav_bg').css('background-attachment', 'fixed');
-    $('#to_comment').css("display", "block")
-  }
-
-  //---------------------------------------------------------------------------------------------------------
 
+  /**
+   * 首頁top_img底下的箭頭
+   */
   $(".scroll-down").on("click", function () {
-
     scrollTo('#content-outer')
-
   });
 
 
-  //--------------------------------------------------------------------------------------------------------
+  /**
-  // bookmark
+   * BOOKMARK 書簽
-  $.fancyConfirm = function (opts) {
+   */
-    opts = $.extend(true, {
+  $('#bookmark-it').on("click", function () {
-      title: 'Are you sure?',
-      message: '',
-      okButton: 'OK',
-      noButton: 'Cancel',
-      callback: $.noop
-    }, opts || {});
-
-    $.fancybox.open({
-      type: 'html',
-      src: '<div class="fc-content">' +
-        '<h3>' + opts.title + '</h3>' +
-        '<p>' + opts.message + '</p>' +
-        '<p class="tright">' +
-        '<button data-value="1" data-fancybox-close class="bookmark-ok">' + opts.okButton + '</button>' +
-        '</p>' +
-        '</div>',
-      opts: {
-        animationDuration: 350,
-        animationEffect: 'material',
-        modal: true,
-        baseTpl: '<div class="fancybox-container fc-container" role="dialog" tabindex="-1">' +
-          '<div class="fancybox-bg"></div>' +
-          '<div class="fancybox-inner">' +
-          '<div class="fancybox-stage"></div>' +
-          '</div>' +
-          '</div>',
-      }
-    });
-  }
-
-  $('#bookmark-it').click(
-    function () {
     if (window.sidebar && window.sidebar.addPanel) { // Mozilla Firefox Bookmark
       window.sidebar.addPanel(document.title, window.location.href, '');
     } else if (window.external && ('AddFavorite' in window.external)) { // IE Favorite
@@ -137,19 +165,19 @@ $(function () {
       this.title = document.title;
       return true;
     } else { // webkit - safari/chrome     
-        // alert('按 ' + (navigator.userAgent.toLowerCase().indexOf('mac') != -1 ? 'Command/Cmd' : 'CTRL') + ' + D 鍵將本頁加入書籤.');
+      if (is_Snackbar) {
-        $.fancyConfirm({
+        var bookmarkText = GLOBAL_CONFIG.Snackbar.bookmark.message_prev + ' ' + (navigator.userAgent.toLowerCase().indexOf('mac') != -1 ? 'Command/Cmd' : 'CTRL') + '+ D ' + GLOBAL_CONFIG.Snackbar.bookmark.message_next + '.';
-          title: GLOBAL_CONFIG.bookmark.title + '?',
+        snackbarShow(bookmarkText)
-          message: GLOBAL_CONFIG.bookmark.message_prev + (navigator.userAgent.toLowerCase().indexOf('mac') != -1 ? 'Command/Cmd' : 'CTRL') + '+ D ' + GLOBAL_CONFIG.bookmark.message_next + '.',
+      } else {
-          okButton: "OK",
+        alert(GLOBAL_CONFIG.bookmark.message_prev + ' ' + (navigator.userAgent.toLowerCase().indexOf('mac') != -1 ? 'Command/Cmd' : 'CTRL') + '+ D ' + GLOBAL_CONFIG.bookmark.message_next + '.');
-        });
+      }
-
     }
   });
 
-  //-------------------------------------------------------------------------------------------------------
+  /**
-  //代码copy
+   * 代碼copy
-  // Add copy icon
+   * Add copy icon
+   */
   $('figure.highlight').wrap('<div class="code-area-wrap"></div>')
 
   var highlight_copy = GLOBAL_CONFIG.highlight_copy
@@ -163,6 +191,9 @@ $(function () {
       if (document.queryCommandSupported && document.queryCommandSupported('copy')) {
         try {
           document.execCommand('copy') // Security exception may be thrown by some browsers.
+          if (is_Snackbar) {
+            snackbarShow(GLOBAL_CONFIG.copy.success)
+          } else {
             $(ctx).prev('.copy-notice')
               .text(GLOBAL_CONFIG.copy.success)
               .animate({
@@ -176,7 +207,11 @@ $(function () {
                   }, 650)
                 }, 400)
               })
+          }
         } catch (ex) {
+          if (is_Snackbar) {
+            snackbarShow(GLOBAL_CONFIG.copy.success)
+          } else {
             $(ctx).prev('.copy-notice')
               .text(GLOBAL_CONFIG.copy.error)
               .animate({
@@ -192,10 +227,15 @@ $(function () {
               })
             return false
           }
+        }
+      } else {
+        if (is_Snackbar) {
+          snackbarShow(GLOBAL_CONFIG.copy.noSupport)
         } else {
           $(ctx).prev('.copy-notice').text(GLOBAL_CONFIG.copy.noSupport)
         }
       }
+    }
     // click events
     $('.code-area-wrap .fa-clipboard').on('click', function () {
       var selection = window.getSelection()
@@ -209,7 +249,9 @@ $(function () {
     })
   }
 
-  //代碼框語言識別
+  /**
+   * 代碼框語言識別
+   */
   var highlight_lang = GLOBAL_CONFIG.highlight_lang
   if (highlight_lang == 'true') {
     var $highlight_lang = $('<div class="code_lang"></div>')
@@ -231,7 +273,9 @@ $(function () {
 
     })
   }
-  //代碼收縮
+  /**
+   * 代碼收縮
+   */
   var highlight_shrink = GLOBAL_CONFIG.highlight_shrink
   if (highlight_shrink == 'true') {
     var $code_expand = $('<i class="fa fa-angle-down code-expand code-closed" aria-hidden="true"></i>')
@@ -241,19 +285,25 @@ $(function () {
   $('.code-area-wrap').prepend($code_expand)
   $('.code-area-wrap .code-expand').on('click', function () {
     if ($(this).hasClass('code-closed')) {
+      $(this).siblings('figure').find('figcaption').show();
       $(this).siblings('figure').find('table').show();
       $(this).removeClass('code-closed');
     } else {
+      $(this).siblings('figure').find('figcaption').hide();
       $(this).siblings('figure').find('table').hide();
       $(this).addClass('code-closed');
     }
   })
 
-  //---------------------------------------------------------------------------------------------------
+  /**
-  //fancybox
+   * fancybox和 medium_zoom 
-  var imgList = $(".recent-post-info  img").not('.no-fancybox');
+   */
+
+  var medium_zoom = GLOBAL_CONFIG.medium_zoom;
+  if (medium_zoom == 'false') {
+    var imgList = $("#post-content img").not('.no-fancybox');
     if (imgList.length === 0) {
-    imgList = $("#post-content img").not('.no-fancybox');
+      imgList = $(".justified-gallery img").not('.no-fancybox');
     }
 
     for (var i = 0; i < imgList.length; i++) {
@@ -267,12 +317,14 @@ $(function () {
         '" class="fancybox"></a>'
       )
 
-    var alt = imgList[i].alt
       var $wrap = $(imgList[i]).wrap($a)
+
+      var alt = imgList[i].alt
       if (alt) {
         $wrap.after('<div class="img-alt">' + alt + '</div>')
       }
     }
+
     $().fancybox({
       selector: "[data-fancybox]",
       loop: true,
@@ -281,78 +333,98 @@ $(function () {
       // wheel: false,
       buttons: ["slideShow", "fullScreen", "thumbs", "close"]
     });
-
+  } else {
-  var galleryItem = $(".gallery-item");
+    var imgList = $(".justified-gallery img");
-  var galleryList = [];
+    if (imgList.length) {
-  galleryItem.each(function (idx, elem) {
+      for (var i = 0; i < imgList.length; i++) {
-    galleryList.push({
+        var $a = $('<div></div>')
-      src: $(elem).data("url"),
+        var $wrap = $(imgList[i]).wrap($a)
-      opts: {
+      }
-        caption: $(elem).data("title")
     }
-    });
-  });
-  galleryItem.on("click", function () {
-    $.fancybox.open(
-      galleryList, {
-        loop: true,
-        transitionEffect: "slide"
-      },
-      galleryItem.index(this)
-    );
-    return false;
 
-  });
+    const zoom = mediumZoom(document.querySelectorAll('#post img,.justified-gallery img'))
+    zoom.on('open', event => {
+      let photoBg = $(document.documentElement).attr('data-theme') == 'dark' ? '#2d3032' : '#fff'
+      zoom.update({ background: photoBg })
+    })
+  }
 
-  //---------------------------------------------------------------------------------------------------------
+
-  /** head点击*/
+  /**
-  $('.toggle-menu').on('click', function () {
+   * 手機menu和toc按鈕點擊
+   * 顯示menu和toc的sidebar
+   */
+  function mobile_menu_close() {
     if ($(".toggle-menu").hasClass("open")) {
       $(".toggle-menu").removeClass("open").addClass("close");
-      $('body').addClass("is_hidden");
+      $('body').removeClass("open-mobile-menus");
-      $('.menus').animate({
+      $('#menu_mask').fadeOut()
-        right: 0
-      }, 300)
-      $('.menu_mask,.menus').css("display", "block")
     }
+
+  }
+
+  function mobile_toc_close() {
+    if ($("#mobile-toc-button").hasClass("open")) {
+      $("#mobile-toc-button").removeClass("open").addClass("close");
+      $('body').removeClass("open-mobile-toc");
+      $('#menu_mask').fadeOut();
+    }
+
+  }
+  $('.toggle-menu').on('click', function () {
+    if ($(".toggle-menu").hasClass("close")) {
+      $(".toggle-menu").removeClass("close").addClass("open");
+      $('body').addClass("open-mobile-menus");
+      $('#menu_mask').fadeIn();
+      if ($('#toggle-sidebar').hasClass('on')) {
+        close_sidebar()
+      }
+    }
+
   })
 
-  $('.menu_mask ').on('click touchstart', function () {
+  $('#mobile-toc-button').on('click', function () {
-    $(".toggle-menu").removeClass("close").addClass("open");
+    if ($("#mobile-toc-button").hasClass("close")) {
-    $('body').removeClass("is_hidden");
+      $("#mobile-toc-button").removeClass("close").addClass("open");
-    $('.menus').animate({
+      $('body').addClass("open-mobile-toc");
-      right: -250
+      $('#menu_mask').fadeIn();
-    }, 300, function () {
-      {
-        $('.menus').css({
-          'display': ''
-        })
     }
+
   })
-    $('.menu_mask').css("display", "")
+
+  $('#menu_mask').on('click touchstart', function (e) {
+    mobile_menu_close()
+    mobile_toc_close()
+
+    if ($('#toggle-sidebar').hasClass('on')) {
+      setTimeout(function () {
+        open_sidebar()
+      }, 300)
+    }
+
   })
 
   $(window).on('resize', function (e) {
     if (!$('.toggle-menu').is(':visible')) {
-      if ($(".toggle-menu").hasClass("close")) {
+      mobile_menu_close()
-        $(".toggle-menu").removeClass("close").addClass("open");
-        $('body').removeClass("is_hidden");
-        $('.menus').animate({
-          right: -250
-        }, 300)
-        $('.menu_mask').css("display", "")
     }
+    if (!$('#mobile-toc-button').is(':visible')) {
+      mobile_toc_close()
     }
+
   })
 
+  //點擊toc，收起sidebar
+  $("#mobile-sidebar-toc a").on('click', function () {
+    mobile_toc_close()
+  })
 
-  //---------------------------------------------------------------------------------------------------------
+  /**
-/** scroll 滚动 toc*/
+   *  scroll 滚动 toc
+   */
   var initTop = 0
   $('.toc-child').hide()
 
-  var is_post_bottom = ($('#post_bottom').hasClass('no_comment_show')) && ($('#post_bottom').hasClass('no_toc_show'))
-
   // main of scroll
   $(window).scroll(throttle(function (event) {
     var currentTop = $(this).scrollTop()
@@ -362,87 +434,41 @@ $(function () {
       // head position
       findHeadPosition(currentTop)
       auto_scroll_toc(currentTop)
-      
     }
     var isUp = scrollDirection(currentTop)
 
-    if ($(".toggle-menu").hasClass("open")) {
     if (currentTop > 56) {
-
       if (isUp) {
-          $('#page-header').hasClass('visible') ? $('#page-header').removeClass('visible') : console.log()
+        $('#page-header').hasClass('visible') ? $('#page-header').removeClass('visible') : ''
-          if (!is_post_bottom) {
-            $('#post_bottom').removeClass('toc_mobile_show')
-            $('#toc_mobile').hasClass('is_visible') ? $('#toc_mobile').removeClass('is_visible') : console.log()
-          }
 
       } else {
-          $('#page-header').hasClass('visible') ? console.log() : $('#page-header').addClass('visible')
+        $('#page-header').hasClass('visible') ? '' : $('#page-header').addClass('visible')
-          if (!is_post_bottom) {
-            $('#post_bottom').addClass('toc_mobile_show')
-            $('#toc_mobile').hasClass('is_visible') ? $('#toc_mobile').removeClass('is_visible') : console.log()
-          }
-
       }
       $('#page-header').addClass('fixed')
-        if ($('#go-up').css('opacity') === '0') {
 
-          $('#go-up').animate({}, function () {
-            $('#go-up').css({
-              'opacity': '1',
-              'transform': 'translateX(-30px) rotateZ(360deg)'
-            })
-          })
-        }
       if ($('#rightside').css('opacity') === '0') {
-
         $('#rightside').animate({}, function () {
-            $('#rightside').css({
+          $(this).css({
             'opacity': '1',
             'transform': 'translateX(-38px)'
           })
         })
       }
-
-
     } else {
       if (currentTop === 0) {
         $('#page-header').removeClass('fixed').removeClass('visible')
-          if (!is_post_bottom) {
-            $('#post_bottom').removeClass('toc_mobile_show')
       }
 
-        }
-
-        $('#go-up').animate({}, function () {
-          $('#go-up').css({
-            'opacity': '0',
-            'transform': 'translateX(0) rotateZ(180deg) '
-          })
-        })
-
       $('#rightside').animate({}, function () {
         $('#rightside').css({
-            'opacity': '0',
+          'opacity': '',
-            'transform': 'translateX(0)'
+          'transform': ''
         })
       })
 
     }
-    }
 
-    if (!is_post_bottom) {
+  }, 300))
-      if ($(window).width() <= 768 && $('#post_bottom').hasClass('toc_mobile_show')) {
-        $('#rightside').css('bottom', '110px')
-        $('#go-up').css('bottom', '70px')
-
-      } else {
-        $('#rightside').css('bottom', '60px')
-        $('#go-up').css('bottom', '20px')
-      }
-    }
-
-  }, 50, 100))
 
   // go up smooth scroll
   $('#go-up').on('click', function () {
@@ -546,7 +572,6 @@ $(function () {
         .find('.toc-child').hide()
     }
 
-
   }
 
   function auto_scroll_toc(currentTop) {
@@ -561,46 +586,45 @@ $(function () {
     }
   }
 
-  //閲讀模式
+  /**
+   * 閲讀模式
+   */
   $("#readmode").click(function () {
-    if (Cookies.get("night-mode") == "night") {
+    if (Cookies.get("theme") == "dark") {
-      $('body').toggleClass('night-mode');
+      $(document.documentElement).attr('data-theme') == 'dark' ? $(document.documentElement).attr('data-theme','') : $(document.documentElement).attr('data-theme','dark')
       $('body').toggleClass('read-mode');
-      $('#font_plus,#font_minus,#to_comment').toggleClass('is_visible');
       $('#to_comment').toggleClass('is_invisible');
-
     } else {
       $('body').toggleClass('read-mode');
-      $('#font_plus,#font_minus,#to_comment').toggleClass('is_visible');
       $('#to_comment').toggleClass('is_invisible');
     }
   });
 
-  //閲讀模式下字體調整
+  /**
+   * 字體調整
+   */
   $("#font_plus").click(function () {
     var font_size_record = parseFloat($('body').css('font-size'))
-    var code_size_record = parseFloat($('pre').css('font-size'))
+    var pre_size_record = parseFloat($('pre').css('font-size'))
     var code_size_record = parseFloat($('code').css('font-size'))
     $('body').css('font-size', font_size_record + 1)
-    $('pre').css('font-size', font_size_record + 1)
+    $('pre').css('font-size', pre_size_record + 1)
-    $('code').css('font-size', font_size_record + 1)
+    $('code').css('font-size', code_size_record + 1)
   });
 
   $("#font_minus").click(function () {
     var font_size_record = parseFloat($('body').css('font-size'))
-    var code_size_record = parseFloat($('pre').css('font-size'))
+    var pre_size_record = parseFloat($('pre').css('font-size'))
     var code_size_record = parseFloat($('code').css('font-size'))
     $('body').css('font-size', font_size_record - 1)
-    $('pre').css('font-size', font_size_record - 1)
+    $('pre').css('font-size', pre_size_record - 1)
-    $('code').css('font-size', font_size_record - 1)
+    $('code').css('font-size', code_size_record - 1)
   });
 
-  // 手機顯示toc
+  /**
-  $('#mobile_toc').on('click', function () {
+   * sub-menus 位置調整
-    $("#toc_mobile").toggleClass('is_visible')
+   */
-  })
 
-  // sub-menus 位置調整
   if ($(window).width() > 768) {
     $('.menus_item_child').each(function () {
       var a_width = $(this).siblings('a').outerWidth(true);
@@ -609,15 +633,172 @@ $(function () {
     })
   }
 
-  // 手機端sub-menu 展開/收縮
+  /**
+   * 手機端sub-menu 展開/收縮
+   */
   $('.menus-expand').on('click', function () {
     if ($(this).hasClass('menus-closed')) {
-        $(this).parents('.menus_item').find('.menus_item_child').show();
+      $(this).parents('.menus_item').find('.menus_item_child').slideDown();
       $(this).removeClass('menus-closed');
     } else {
-        $(this).parents('.menus_item').find('.menus_item_child').hide();
+      $(this).parents('.menus_item').find('.menus_item_child').slideUp();
       $(this).addClass('menus-closed');
     }
   })
 
+  /**
+   * rightside 點擊設置 按鈕 展開
+   */
+  $('#rightside_config').on('click', function () {
+    if ($('#rightside-config-hide').hasClass("rightside-in")) {
+      $('#rightside-config-hide').css("animation", "rightside_out_animate .3s");
+      $('#rightside-config-hide').removeClass("rightside-in")
+      $("#rightside-config-hide").animate({}, function () {
+        setTimeout(function () {
+          $('#rightside-config-hide').css({
+            "animation": "",
+            "display": ""
+          })
+        }, 300)
+      })
+    } else {
+      $('#rightside-config-hide').addClass("rightside-in")
+      $("#rightside-config-hide").animate({}, function () {
+        $('#rightside-config-hide').css("display", "block")
+      })
+
+    }
+  })
+
+  /**
+   * 調正recent_post 上下間距
+   */
+  function recent_post_padding() {
+    $(".recent-post-info").each(function () {
+      var k = $(".recent-post-item").height();
+      var e = $(this).height();
+      $(this).css({
+        "padding-top": (k - e) / 2,
+        "padding-bottom": (k - e) / 2
+      })
+    })
+  }
+
+  //recent-post-item垂直置中
+  if ($(window).width() > 768) {
+    recent_post_padding();
+  }
+
+  $(window).bind("resize", function () {
+    if ($(window).width() > 768) {
+      recent_post_padding();
+    }
+  })
+
+  /**
+   * 複製時加上版權信息
+   */
+  var copy_copyright_js = GLOBAL_CONFIG.copy_copyright_js
+  var copyright = GLOBAL_CONFIG.copyright
+  if (copyright) {
+    document.body.oncopy = event => {
+      event.preventDefault();
+      let textFont, copyFont = window.getSelection(0).toString();
+      if (copyFont.length > 45) {
+        textFont = copyFont + '\n' + '\n' + '\n' +
+          copyright.languages.author + '\n' +
+          copyright.languages.link + '\n' +
+          copyright.languages.source + '\n' +
+          copyright.languages.info;
+      } else {
+        textFont = copyFont;
+      }
+      if (event.clipboardData) {
+        return event.clipboardData.setData('text', textFont);
+      } else {
+        // 兼容IE
+        return window.clipboardData.setData("text", textFont);
+      }
+    }
+  }
+
+  /**
+   * justified-gallery 圖庫排版
+   */
+
+  if ($('.justified-gallery').length) {
+    $('.justified-gallery img').each((i, o) => {
+      let src = $(o).attr('data-src');
+      $(o).attr('src', src)
+    })
+    $('.justified-gallery > p > .fancybox,.justified-gallery > p > div').unwrap();
+    $('head').append('<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/justifiedGallery@3.7.0/dist/css/justifiedGallery.min.css">');
+    loadScript("https://cdn.jsdelivr.net/npm/justifiedGallery@3.7.0/dist/js/jquery.justifiedGallery.min.js", function () {
+      if (typeof ($.fn.justifiedGallery) === 'function') {
+        $('.justified-gallery').justifiedGallery({
+          rowHeight: 220,
+          margins: 4,
+        });
+      }
+    })
+  }
+
+  /**
+   * Darkmode
+   */
+
+  // if (autoChangeMode == '1') {
+  //   window.matchMedia("(prefers-color-scheme: dark)").addListener(function (e) {
+  //     if (e.matches) {
+  //       activateDarkMode()
+  //       change_light_icon()
+  //       Cookies.remove('theme')
+  //     } else {
+  //       activateLightMode()
+  //       change_dark_icon()
+  //       Cookies.remove('theme')
+  //     }
+  
+  //   })
+  // }
+
+  if (autoChangeMode == '1' || autoChangeMode == '2') {
+    if (Cookies.get("theme") == "dark") {
+      change_light_icon()
+    } else {
+      change_dark_icon()
+    }
+  }
+
+  function change_light_icon() {
+    $("#darkmode").removeClass("fa-moon-o").addClass("fa-sun-o");
+  }
+
+  function change_dark_icon() {
+    $("#darkmode").removeClass("fa-sun-o").addClass("fa-moon-o");
+
+  }
+
+  function switchReadMode() {
+
+    var nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
+
+    if ( nowMode == 'light') {
+      change_light_icon()
+      activateDarkMode()
+      Cookies.set('theme','dark', { expires: 2 })
+      if (is_Snackbar) snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night)
+    }else{
+      change_dark_icon()
+      activateLightMode()
+      Cookies.set('theme','light', { expires: 2 })
+      if (is_Snackbar) snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day)
+    }
+  }
+
+  $("#darkmode").click(function () {
+    switchReadMode();
+  });
+
+
 });

source/js/nightshift.js

@@ -1,35 +0,0 @@
-$(function () {
-  changeReadModel();
-
-  function switchReadMode() {
-    var next_mode = $("body").hasClass("night-mode") ? "day" : "night";
-    Cookies.set("night-mode", next_mode, {
-      expires: 7,
-      path: '/'
-    });
-    changeReadModel();
-  }
-
-  function changeReadModel() {
-
-    if (Cookies.get("night-mode") == null)
-      return
-  
-    if (Cookies.get("night-mode") == "night") {
-      $("body").addClass("night-mode");
-      $("#nightshift").removeClass("fa-moon-o").addClass("fa-sun-o");
-    }
-
-    // 非夜間模式
-    if (Cookies.get("night-mode") == "day") {
-      $("body").removeClass("night-mode");
-      $("#nightshift").removeClass("fa-sun-o").addClass("fa-moon-o");
-    }
-  }
-
-  $("#nightshift").click(function () {
-    switchReadMode();
-  });
-
-
-});

source/js/runtimeshow.js

@@ -2,7 +2,6 @@
 var start_date = document.getElementById("runtionshow").getAttribute("start_date")
 
 function show_date_time() {
-    window.setTimeout("show_date_time()", 1000);
     BirthDay=new Date(start_date);
     today=new Date();
     timeold=(today.getTime()-BirthDay.getTime());
@@ -12,5 +11,9 @@ function show_date_time() {
     webinfo_runtime_count.innerHTML= daysold + " " + GLOBAL_CONFIG.runtime_unit
 }
 
-show_date_time()
+var interval;
+show_date_time();
+clearInterval(interval);
+interval = setInterval(show_date_time, 10000);
+
     

source/js/search/algolia.js

@@ -5,8 +5,7 @@ $(function () {
 
     $('.search-dialog').animate({}, function () {
       $('.search-dialog').css({
-        'display': 'block',
+        'display': 'block'
-        'animation': 'titlescale 0.5s'
       }),300
     })
 
@@ -22,12 +21,20 @@ $(function () {
   })
 
   var closeSearch = function () {
-    $('body').css('overflow', 'auto')
+    $('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();
@@ -102,7 +109,7 @@ $(function () {
           return (
             '<hr>' +
             stats +
-            '<span class="algolia-logo pull-right">' +
+            '<span class="algolia-logo pull_right">' +
             '  <img src="' + GLOBAL_CONFIG.root + 'img/algolia.svg" alt="Algolia" />' +
             '</span>'
           )

source/js/search/local-search.js

@@ -5,8 +5,7 @@ $(function () {
     $('body').css('overflow', 'hidden')
     $('.search-dialog').animate({}, function () {
       $('.search-dialog').css({
-        'display': 'block',
+        'display': 'block'
-        'animation': 'titlescale 0.5s'
       }),300
     })
           $('#local-search-input input').focus()
@@ -27,12 +26,22 @@ $(function () {
   })
 
   var closeSearch = function () {
-    $('body').css('overflow', 'auto')
+    $('body').css('width', '')
-    $('.search-dialog').animate({}, function () {
+    $('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)

source/js/third-party/ClickShowText.js

@@ -0,0 +1,42 @@
+  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/canvas-nest.js

@@ -1,11 +1,88 @@
 ! function () {
-	var userAgentInfo = navigator.userAgent;
+  var cn = document.getElementById('canvas_nest');
-    var Agents = ["iPad", "iPhone", "Android", 
+  var mb = cn.getAttribute("mobile");
-          "SymbianOS", "Windows Phone",
+
-           "iPod", "webOS", "BlackBerry", "IEMobile"];
+  if (mb == 'false' && (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent))) {
-    for (var v = 0; v < Agents.length; v++) {
-      if (userAgentInfo.indexOf(Agents[v]) > 0) {
     return;
   }
+
+  function o(w, v, i) {
+    return w.getAttribute(v) || i
   }
-	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)}();
+
+  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

@@ -4,17 +4,15 @@
  * Version: v1.0.1
  * GitHub: https://github.com/hustcc/ribbon.js
  **/
-// changed by Molunerfinn
+
 !(function () {
-  function attr (node, attr, default_value) {
+
-    if (default_value === true) {
+  var script = document.getElementById('ribbon');
-      return node.getAttribute(attr) || default_value
+  var mb = script.getAttribute("mobile");  
-    }
+  if (mb == 'false' && (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent))) {
-    return Number(node.getAttribute(attr)) || default_value
+    return;
   }
 
-  // get user config
-  var script = document.getElementById('ribbon'),
   config = {
     z: attr(script, 'zIndex', -1), // z-index
     a: attr(script, 'alpha', 0.6), // alpha
@@ -22,6 +20,14 @@
     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,

source/js/third-party/click_heart.js

@@ -0,0 +1 @@
+!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/piao.js

@@ -1,3 +1,4 @@
+	
 	(function (name, factory) {
 		if (typeof window === "object") {
 			window[name] = factory()
@@ -310,6 +311,13 @@
 		};
 		return Factory
 	});
+
+	var cn = document.getElementById('ribbon_piao');
+	var mb = cn.getAttribute("mobile");
+	
+	if ( mb == 'false' && (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent))) {
+
+	} else {
 		new Ribbons({
 			colorSaturation: "60%",
 			colorBrightness: "50%",
@@ -322,3 +330,5 @@ new Ribbons({
 			parallaxAmount: -0.2,
 			animateSections: true
 		});
+	}
+

source/js/tw_cn.js

@@ -1,4 +1,5 @@
 var translate = GLOBAL_CONFIG.translate
+var Snackbar_tl = GLOBAL_CONFIG.Snackbar
 
 var defaultEncoding = translate.defaultEncoding; // 网站默认语言，1: 繁體中文, 2: 简体中文
 var translateDelay = translate.translateDelay; //延迟时间,若不在前, 要设定延迟翻译时间, 如100表示100ms,默认为0
@@ -10,6 +11,8 @@ var currentEncoding = defaultEncoding;
 var targetEncodingCookie = "targetEncoding" + cookieDomain.replace(/\./g, "");
 var targetEncoding = (Cookies.get(targetEncodingCookie) == null ? defaultEncoding: Cookies.get(targetEncodingCookie));
 var translateButtonObject;
+var is_Snackbar = GLOBAL_CONFIG.Snackbar !== undefined ? true : false
+
 function translateText(txt) {
     if (txt == "" || txt == null) return "";
     if (currentEncoding == 1 && targetEncoding == 2) return Simplized(txt);
@@ -39,6 +42,7 @@ function translatePage() {
             path: '/'
           });
         translateBody()
+        if (is_Snackbar) snackbarShow(Snackbar_tl.cht_to_chs)  
     } else if (targetEncoding == 2) {
         currentEncoding = 2;
         targetEncoding = 1;
@@ -48,6 +52,7 @@ function translatePage() {
             path: '/'
           });
         translateBody()
+        if (is_Snackbar) snackbarShow(Snackbar_tl.chs_to_cht)
     }
 }
 function JTPYStr() {

source/js/utils.js

@@ -1,37 +1,37 @@
-function debounce(func, wait, immediate) {
+function throttle(func, wait, options) {
-  var timeout
+  var timeout, context, args, result;
-  return function () {
+  var previous = 0;
-    var context = this
+  if (!options) options = {};
-    var args = arguments
+
   var later = function() {
-      timeout = null
+      previous = options.leading === false ? 0 : new Date().getTime();
-      if (!immediate) func.apply(context, args)
+      timeout = null;
+      func.apply(context, args);
+      if (!timeout) context = args = null;
+  };
+
+  var throttled = function() {
+      var now = new Date().getTime();
+      if (!previous && options.leading === false) previous = now;
+      var remaining = wait - (now - previous);
+      context = this;
+      args = arguments;
+      if (remaining <= 0 || remaining > wait) {
+          if (timeout) {
+              clearTimeout(timeout);
+              timeout = null;
           }
-    var callNow = immediate && !timeout
+          previous = now;
-    clearTimeout(timeout)
+          func.apply(context, args);
-    timeout = setTimeout(later, wait)
+          if (!timeout) context = args = null;
-    if (callNow) func.apply(context, args)
+      } else if (!timeout && options.trailing !== false) {
+          timeout = setTimeout(later, remaining);
       }
   };
 
-function throttle(func, wait, mustRun) {
+  return throttled;
-  var timeout
-  var startTime = new Date()
-
-  return function () {
-    var context = this
-    var args = arguments
-    var curTime = new Date()
-
-    clearTimeout(timeout)
-    if (curTime - startTime >= mustRun) {
-      func.apply(context, args)
-      startTime = curTime
-    } else {
-      timeout = setTimeout(func, wait)
 }
-  }
+
-};
 
 function isMobile() {
   var check = false;
@@ -46,7 +46,41 @@ function scrollTo(name) {
   })  
 };
 
-window.debounce = debounce
+function loadScript(url, callback) {
+  var script = document.createElement("script")
+  script.type = "text/javascript";
+  if (script.readyState) { //IE
+    script.onreadystatechange = function () {
+      if (script.readyState == "loaded" ||
+        script.readyState == "complete") {
+        script.onreadystatechange = null;
+        callback();
+      }
+    };
+  } else { //Others
+    script.onload = function () {
+      callback();
+    };
+  }
+  script.src = url;
+  document.body.appendChild(script);
+};
+
+function snackbarShow(text, showAction, duration) {
+  var showAction = (typeof showAction !== 'undefined') ? showAction : false;
+  var duration = (typeof duration !== 'undefined') ? duration : 2000;
+  var position = GLOBAL_CONFIG.Snackbar.position
+  var bg = document.documentElement.getAttribute('data-theme') === 'light' ? GLOBAL_CONFIG.Snackbar.bgLight : GLOBAL_CONFIG.Snackbar.bgDark
+  Snackbar.show({
+    text: text,
+    backgroundColor: bg,
+    showAction: showAction,
+    duration: duration,
+    pos: position
+  });
+}
+
+
 
 window.throttle = throttle