更改版本號

2. 可設置禁止複製網站内容
3. 可設置複製時，内容自動加上版權信息
4. 可修改tag的top_img
5. 可修改category的top_img
6. 可修改valine的背景
7. archives頁UI優化
8. ICP增加icon #37
9. 可設置主頁top_img的高度
10. 可設置主頁site-info的位置
11. category頁和tag頁的UI可以設置與主頁UI一樣 #31
12. 主頁subtitle可設置多個句子（不再限制2個） #37
13. 設置menu時，頭尾添加空格不受影響
14. 調整post頁的佈局
15. 书签添加icon
16. 公告icon效果
17. 首頁歸檔模塊，可設置數量限制，會顯示'查看更多'按鈕
18. 右下角按鈕調整。
19. 修复文章cover隨機图片生成，同一篇文章，不同地方的cover顯示不一样的bug
20. 修復gitalk語言設置無效的bug #35
21. 修復post頁面，當沒有設置word count時，閲讀量前有'|"
22. 修复sub-menu在safari的显示问题
23. 修复tags页评论居中问题
24. 修复header a hover 白色问题
25. 修復夜間模式下footer的顔色bug
26. 修復英文語言下，書簽英文顯示不完整的問題

_config.yml

@@ -1,27 +1,20 @@
-# Theme color for customize
-# Notice: color value must in double quotes like "#000" or may cause error!
-# ---------------
-# theme_color:
-#   enable: true
-#   main: "#7A7FF1"
-#   paginator: "#7A7FF1"
-#   button_hover: "#FF7242"
-#   text_selection: "#69c46d"
-#   link_color: "#858585"
-#   hr_color: "#A4D8FA"
-#   read-mode-bg_color: '#FAF9DE'
 
 # 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
-  Tags: /tags/||fa fa-tags
-  Categories: /categories/||fa fa-folder-open
-  Link: /link/||fa fa-link
-  About: /about/||fa fa-heart
-#   #XXX: /xxx
+  Home: / || fa fa-home
+  Archives: /archives/ || fa fa-archive
+  Tags: /tags/ || fa fa-tags
+  Categories: /categories/ || fa fa-folder-open
+  Link: /link/ || fa fa-link
+  About: /about/ || fa fa-heart
+  List||fa fa-list:
+    - Music || /music/ || fa fa-music
+    - Movie || /movies/ || fa fa-film
 
 
 # Favicon
@@ -45,11 +38,20 @@ favicon: /img/favicon.ico
 # Highlight theme
 # ---------------
 highlight_theme: light
-highlight_copy: true
+highlight_copy: false #代碼複製按鈕
+highlight_lang: true #代碼語言顯示
+highlight_shrink: false #代碼框不展開，需點擊 '>' 打開
 
 code_word_wrap: false
 
-# Nav settings
+# copy setting
+# 是否禁止複製（如果禁止，highlight_copy的功能將無效)
+# copyright 複製的内容後面加上版權信息
+copy:
+  enable: false  # true 開啓 / false 禁止
+  copyright: false
+
+# social settings
 # formal: 
 #   icon: link
 # ---------------
@@ -57,6 +59,7 @@ social:
   fa fa-github: https://github.com/jerryc127
   fa fa-rss: /atom.xml
 
+####    search    ####
 # Algolia search
 # ---------------
 algolia_search:
@@ -69,7 +72,6 @@ algolia_search:
     hits_empty: "We didn't find any results for the search: ${query}" # if there are no result
     hits_stats: "${hits} results found in ${time} ms"
 
-
 # Local search
 # Please see doc for more details: https://jerryc.me/posts/21cfbf15/#本地搜索
 # ---------------
@@ -95,8 +97,7 @@ katex:
   hide_scrollbar: true
 
 
-
-# Analysis
+####   Analysis    ####
 # ---------------
 # baidu_analytics: 
 
@@ -126,8 +127,6 @@ cdn:
     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
-    lozy: https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js
-
 
 # Post info settings
 # ---------------
@@ -148,12 +147,17 @@ 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
+
 # if the photo link cannot connect,it will show that
 lodding_bg:
   flink: /img/friend_404.gif
   post_page: /img/404.jpg
 
-
 post_meta:
   date_type: both # or created or updated 文章日期是创建日或者更新日或都显示
   categories: true # or false 是否显示分类
@@ -176,13 +180,14 @@ post_copyright:
   license: CC BY-NC-SA 4.0
   license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/
 
+# 自動節選
 auto_excerpt:
   enable: true
   length: 150
 
 
-# Share System
-# ---------------
+####    Share System    ####
+# -----------------------------------------
 addThis:
   enable: false
   pubid:
@@ -203,8 +208,8 @@ addtoany:
     - email
     - copy_link
 
-# Comments System
-# ---------------
+####   Comments System    ####
+# ------------------------------------
 disqus:
   enable: false
   shortname: 
@@ -227,6 +232,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
@@ -242,10 +248,11 @@ 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
-# ---------------
+#####     Footer Settings    ####
+# ------------------------------------
 since: 2018
 
 footer_custom_text:
@@ -257,16 +264,10 @@ ICP:
   enable: false
   url: 
   text: 
-
-# busuanzi count for PV / UV in site
-busuanzi:
-  site_uv: true
-  site_pv: true
-  page_pv: true
-
-
+  icon: /img/icp.png
 
 
+####    站長驗證    ####
 # Google Webmaster tools verification setting
 # See: https://www.google.com/webmasters/
 google_site_verification:
@@ -283,6 +284,8 @@ baidu_site_verification:
 # see http://zhanzhang.so.com/
 qihu_site_verification:
 
+
+# 友情鏈接界面設置 
 Flink:
   headline: 友情鏈接
   info_headline: 我的Blog資料
@@ -292,25 +295,7 @@ Flink:
   info: Blog 簡介： 今日事,今日畢
   comment: 如果需要交換友鏈,請留言
 
- 
-
-runtimeshow:
-  enable: true
-  start_date: 6/7/2018 00:00:00
-
-
-nightshift:
-  enable: true
-
-
-activate_power_mode:
-  enable: false
-
-
-
-announcement:
-  content: 感謝訪問本站，若喜歡請收藏 ^_^
-
+# 打賞按鈕
 reward:
   enable: true
   QR_code:
@@ -321,65 +306,133 @@ reward:
         img: /img/alipay.jpg
         text: 支付寶
 
+# 推薦文章
 related_post:
   enable: true
   limit: 6 # 顯示推薦文章數目
 
-# canvas_ribbon
+####    美化/效果    ####
+#--------------------------------
+
+# 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)
+# 顔色 background: '#49B202'
+# 留空 顯示白色
+background:
+
+# footer是否顯示圖片背景(與top_img一致)
+footer_bg: false
+
+
+# canvas_ribbon 禁止彩帶背景
 # See: https://github.com/hustcc/ribbon.js
 canvas_ribbon:
-  enable: true
+  enable: false
   size: 150
   alpha: 0.6
   zIndex: -1
   click_to_change: false
 
-
+# 動態彩帶
 canvas_ribbon_piao:
   enable: false
 
+# canvas_nest
+# https://github.com/hustcc/canvas-nest.js
+canvas_nest:
+  enable: false
+  color: '0,0,255' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
+  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
 
-# 避免重複網址分散seo
-canonical: true
+# 打字效果
+activate_power_mode:
+  enable: false
 
-# 禁止百度轉碼
-disable_baidu_transformation: true
+# 鼠標點擊效果
+fireworks:
+  enable: false
 
-twitter_meta: true
-Open_Graph_meta: true
+# 頭像會一直轉圈
+avatar_effect: false
 
-#閲讀模式
-readmode:
-  enable: true
+# 網站顯示模式
+# day 默認模式
+# night 黑暗模式（不建議）
+display_mode: day
 
-#全局字體
+# 美化post頁顯示
+post_beautify:
+  enable: false
+  title-prefix-icon: '\f0c1'
+  title-prefix-icon-color: "#F47466"
+
+# 全局字體
 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
-  code-font: consolas, Menlo, "PingFang SC", "Microsoft JhengHei","Microsoft YaHei", monospace, Helvetica Neue For Number
+  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 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_link: https://fonts.googleapis.com/css?family=Titillium+Web #字體鏈接
+  font-family: Titillium Web, PingFang SC, Hiragino Sans GB, "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif
 
-#水平分隔綫
+# 水平分隔綫
 hr:
   enable: false
-  #fontawesome上圖標的Unicode
-  icon: '\f21c'
+  icon: '\f21c' #fontawesome上圖標的Unicode
   icon-top: -20px
 
 # 主頁subtitle
+# 打字效果
+# (如果有英文逗號' , '，請使用轉義字符 ,)
 subtitle: 
   enable: true
-  sub1: 今日事,今日畢
-  sub2: Never put off till tomorrow what you can do today
+  sub:
+    - 今日事,今日畢
+    - Never put off till tomorrow what you can do today
 
-#側邊欄顯示設置
+
+
+####    側邊欄    ####
+#-------------------------------------
+# 側邊欄顯示設置
 aside:
+  position: right # left or right
   card_author: true
   card_announcement: true
   card_recent_post: true
@@ -388,8 +441,28 @@ aside:
   card_archives: true
   card_webinfo: true
 
+# 網站公告
+announcement:
+  content: 感謝訪問本站，若喜歡請收藏 ^_^
 
-## chinese traditional to Simplified
+# busuanzi count for PV / UV in site
+# 訪問人數
+busuanzi:
+  site_uv: true
+  site_pv: true
+  page_pv: true
+
+# 網頁開通時間
+# 格式: 月/日/年 時間
+# 也可以寫成 年/月/日 時間
+runtimeshow:
+  enable: true
+  start_date: 6/7/2018 00:00:00
+
+
+####   右下角按鈕  ####
+#----------------------------------------------
+# 簡繁轉換
 translate:
   enable: true
   # 默認按鈕顯示文字
@@ -405,16 +478,57 @@ translate:
   #當文字是繁體時，按鈕顯示的文字
   msgToSimplifiedChinese: "简"
 
+# 夜間模式
+nightshift:
+  enable: true
 
-# 鼠標點擊效果
-fireworks:
-  enable: false
+#閲讀模式
+readmode:
+  enable: true
+
+
+####    other     ####
+#------------------------------------------------
 
 #百度推送
 baidu_push:
   enable: false
 
-#https://instant.page/
-#prefetch預加載
+# https://instant.page/
+# prefetch預加載
 instantpage:
   enable: true
+
+# Note (Bootstrap Callout)
+# https://muse.theme-next.org/docs/tag-plugins/note
+note:
+  # Note tag style values:
+  #  - simple    bs-callout old alert style. Default.
+  #  - 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
+  icons: true
+  border_radius: 3
+  # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
+  # Offset also applied to label tag variables. This option can work with disabled note tag.
+  light_bg_offset: 0
+
+# 圖片懶加載
+lazyload:
+  enable: true
+  script: https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js
+
+# 避免重複網址分散seo
+canonical: true
+
+# 禁止百度轉碼
+disable_baidu_transformation: true
+
+# twitter分享自動帶上樣式
+# https://i.loli.net/2019/09/08/qm3RfvUCKbct1Wz.png
+twitter_meta: true
+
+# facebook QQ 等 分享自動帶上樣式
+# https://i.loli.net/2019/09/08/2wbFJEKloisRvhj.png
+Open_Graph_meta: true

languages/default.yml

@@ -20,7 +20,6 @@ page:
 sticky: Sticky
 no_title: No title
 archives: Archives
-read_more: Read more
 
 post:
   created: Created
@@ -83,5 +82,15 @@ 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.

languages/en.yml

@@ -20,7 +20,6 @@ page:
 sticky: Sticky
 no_title: No title
 archives: Archives
-read_more: Read more
 
 post:
   created: Created
@@ -82,5 +81,15 @@ 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.

languages/zh-CN.yml

@@ -20,7 +20,6 @@ page:
 sticky: 置顶
 no_title: 无题
 archives: 时间轴
-read_more: 阅读更多
 
 post:
   created: 发表于
@@ -83,5 +82,15 @@ 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: 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

languages/zh-TW.yml

@@ -15,12 +15,11 @@ page:
   articles: 文章總覽
   tag: 標籤
   category: 分類
-  archives: 歸檔
+  archives: 時間軸
 
 sticky: 置頂
 no_title: 無題
 archives: 時間軸
-read_more: 閲讀更多
 
 post:
   created: 發表於
@@ -84,5 +83,15 @@ 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: 著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。

layout/category.pug

@@ -1,11 +1,19 @@
 extends includes/layout.pug
 
 block content
-  include ./includes/mixins/article-sort.pug
-  #category
-    .article-sort-title= _p('page.category') + ' - ' + page.category
-    +articleSort(page.posts)
-    include includes/pagination.pug
-  #aside_content.aside_content
-    include includes/aside.pug
+  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
+      +articleSort(page.posts)
+      include includes/pagination.pug
+    #aside_content.aside_content
+      include includes/aside.pug
     

layout/flink.pug

@@ -1,12 +1,15 @@
 .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")
-              img.lozad(data-src=item.avatar onerror=`onerror=null;src='${theme.lodding_bg.flink}'` height="72px")
+              if theme.lazyload.enable
+                img.lozad(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 
                 <br/>
               div(class="md-links-des")=item.descr

layout/includes/additional-js.pug

@@ -22,6 +22,9 @@ if (theme.canvas_ribbon && theme.canvas_ribbon.enable)
 if (theme.canvas_ribbon_piao && theme.canvas_ribbon_piao.enable)
   include ./third-party/canvas-ribbon-piao.pug
 
+if (theme.canvas_nest && theme.canvas_nest.enable)
+  include ./third-party/canvas-nest.pug 
+
 if theme.baidu_push && theme.baidu_push.enable
   script(src=url_for('js/baidupush.js')) 
 
@@ -42,14 +45,26 @@ 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}'],
+    strings: '!{theme.subtitle.sub}'.split(","),
     startDelay: 300,
     typeSpeed: 100,
     loop: true,
     backSpeed: 50
     });
 
-if is_home()  
+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")
+
+if theme.instantpage.enable
+  script(src="https://cdn.jsdelivr.net/npm/instant.page@1.2.2/instantpage.min.js" type="module")
+
+if theme.lazyload.enable
+  script(src=url_for(theme.lazyload.script))
+  script. 
+    const observer = lozad(); // lazy loads elements with default selector as '.lozad'
+    observer.observe();
+
+if is_home() && !theme.index_top_img_height && !theme.index_site_info_top
   script.
     //首頁fullpage
     function alignContent() {
@@ -60,33 +75,9 @@ if is_home()
           $(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")
-
-if theme.instantpage.enable
-  script(src="https://cdn.jsdelivr.net/npm/instant.page@1.2.2/instantpage.min.js" type="module")

layout/includes/comments/disqus.pug

@@ -1,4 +1,4 @@
-if theme.disqus.enable
+if theme.disqus && theme.disqus.enable
   #disqus_thread
   script.
     var unused = null;

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/index.pug

@@ -1,35 +1,35 @@
-if theme.disqus.enable
+if theme.disqus && theme.disqus.enable
   hr
   #post-comment
     .comment_headling
       i.fa.fa-comments.fa-fw(aria-hidden="true")
-      span= _p('comment')
+      span= ' ' + _p('comment')
     include ./disqus.pug
 else if theme.laibili && theme.laibili.enable
   hr
   #post-comment
     .comment_headling
       i.fa.fa-comments.fa-fw(aria-hidden="true")
-      span= _p('comment')
+      span= ' ' + _p('comment')
     include ./laibili.pug
 else if theme.gitment && theme.gitment.enable
   hr
   #post-comment
     .comment_headling
       i.fa.fa-comments.fa-fw(aria-hidden="true")
-      span= _p('comment')
+      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')
+      span= ' ' +  _p('comment')
     include ./gitalk.pug
 else if theme.valine && theme.valine.enable
   hr
   #post-comment
     .comment_headling
       i.fa.fa-comments.fa-fw(aria-hidden="true")
-      span= _p('comment')
+      span= ' ' +  _p('comment')
     include ./valine.pug

layout/includes/comments/valine.pug

@@ -2,8 +2,8 @@ if theme.valine && theme.valine.enable
   #vcomment.vcomment
   script(src='https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js')
   script.
-    var notify = '#{ theme.valine.notify }' == true ? true : false;
-    var verify = '#{ theme.valine.verify }' == true ? true : false;
+    var notify = #{ theme.valine.notify } == true ? true : false;
+    var verify = #{ theme.valine.verify } == true ? true : false;
     var GUEST_INFO = ['nick','mail','link'];
     var guest_info = '#{ theme.valine.guest_info }'.split(',').filter(function(item){
       return GUEST_INFO.indexOf(item) > -1

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,7 +37,19 @@
     })
   }
 
+  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
 
 
 
@@ -49,6 +60,8 @@ script.
     localSearch: !{localSearch},
     translate: !{translate},
     highlight_copy: '!{theme.highlight_copy}',
+    highlight_lang: '!{theme.highlight_lang}',
+    highlight_shrink: '!{theme.highlight_shrink}',
     copy: {
       success: '!{_p("copy.success")}',
       error: '!{_p("copy.error")}',
@@ -59,8 +72,9 @@ script.
       message_prev: '!{_p("bookmark.message_prev")}',
       message_next: '!{_p("bookmark.message_next")}'
     },
-    runtime_unit: '!{_p("runtime_unit")}'
-  
+    runtime_unit: '!{_p("runtime_unit")}',
+    copyright: !{copyright},
+    copy_copyright_js: !{copy_copyright_js}
     
   }
 

layout/includes/footer.pug

@@ -1,4 +1,4 @@
-#footer.layout
+#footer
   - 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/head.pug

@@ -1,6 +1,6 @@
 - 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")
@@ -107,10 +107,16 @@ if theme.qihu_site_verification
 
 
 - var preload_archive_img = theme.archive_img ||theme.top_img || config.top_img
+- var preload_tag_img = theme.tag_img ||theme.top_img || config.top_img
+- var preload_category_img = theme.category_img ||theme.top_img || config.top_img
 - var preload_img = page.top_img || theme.top_img || config.top_img
 
 if (is_archive() && preload_archive_img) 
   link(rel="preload" href=url_for(preload_archive_img)  as="image" )
+else if (is_tag() && preload_tag_img) 
+  link(rel="preload" href=url_for(preload_tag_img)  as="image" )
+else if (is_category() && preload_category_img) 
+  link(rel="preload" href=url_for(preload_category_img)  as="image" )
 else if (!is_post() && preload_img)
   link(rel="preload" href=url_for(preload_img)  as="image" )
 

layout/includes/header.pug

@@ -1,26 +1,13 @@
-#page-header
-  span.pull-left 
-    a#site-name.blog_title(href=url_for('/')) #[=config.title]
-  //- i.fa.fa-bars.toggle-menu.pull-right(aria-hidden="true")
-  .open.toggle-menu.pull-right
-    .menu-icon-first
-    .menu-icon-second
-    .menu-icon-third
-    
-  span.pull-right.menus
-    .mobile_author_icon
-      img.lozad(data-src=theme.avatar || url_for('/img/avatar.png') onerror=`onerror=null;src='${theme.lodding_bg.flink}'`)
-      .mobile_author-info__description= config.description
-    hr
-    .menus_item
-      each value, label in theme.menu
-        a.site-page(href=value.split('||')[0])
-          i.fa-fw(class=value.split('||')[1])
-          span=' '+label
-      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
-          span=' '+_p('search')
+#header  
+  #page-header
+    span#blog_name.pull-left
+      a#site-name.blog_title(href=url_for('/')) #[=config.title]
+    i.fa.fa-bars.fa-fw.toggle-menu.pull-right.close(aria-hidden="true")
+    span.pull-right.menus
+      .menus_items
+        include menu_item.pug
+    span#search_button.pull-right
+      if (theme.algolia_search.enable || theme.local_search && theme.local_search.enable)
+          a.site-page.social-icon.search
+            i.fa.fa-search.fa-fw
+            span=' '+_p('search')

layout/includes/layout.pug

@@ -16,12 +16,15 @@
 - 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)
@@ -44,35 +47,37 @@ html(lang=config.language)
         link(rel='stylesheet', href=item)
     include ./head.pug
     include ./config.pug
-  body
+  body(class=body_class)
     if theme.fireworks && theme.fireworks.enable
       canvas.fireworks
-    if (is_post() && page.toc != false && theme.toc.enable)
-      i.fa.fa-arrow-right#toggle-sidebar(aria-hidden="true")
-      include ./sidebar.pug
-    if (!is_post())
-      include ./nav.pug
-    #content-outer
-      block top_img
+    include ./header.pug
+    include ./mobile-sidebar.pug
+    #body-wrap
+      if theme.background
+        #web_bg
+      if (is_post() && page.toc != false && theme.toc.enable)      
+        i.fa.fa-arrow-right#toggle-sidebar(aria-hidden="true")      
+        include ./sidebar.pug
       if (!is_post())
-        #content-inner.layout_page
-          if body
-            div!= body
-          else
-            block content
-      else
-        #content-inner.layout.layout_post    
-          if body
-            div!= body
-          else
-            block content
-    //- - var top_img = page.top_img || theme.post_meta.top_img || theme.top_img || config.top_img || true
-    //- - var bg_img = top_img !== true ? `background-image: url(${top_img})` : ''
-    //- - var footer_bg_class= bg_img ? 'footer-bg' : ''
-    //- footer(style=bg_img class=footer_bg_class)
-    footer
-      include ./footer.pug
-    i.fa.fa-arrow-up#go-up(aria-hidden="true")
+        include ./nav.pug
+      #content-outer
+        block top_img
+        if (!is_post())
+          #content-inner.layout_page
+            if body
+              div!= body
+            else
+              block content
+        else
+          #content-inner.layout.layout_post    
+            if body
+              div!= body
+            else
+              block content
+      
+      - var footer_bg = theme.footer_bg == false ? '' : bg_img
+      footer(style=footer_bg)
+        include ./footer.pug    
     include ./rightside.pug
     each item in theme.cdn.js
       if item !== undefined

layout/includes/menu_item.pug

@@ -0,0 +1,20 @@
+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])
+script.
+  document.body.addEventListener('touchstart', function(){ });

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.is_left
+            a(href=url_for(link) title=article.title || _p('no_title'))
+              - var post_cover = article.cover
+              if theme.lazyload.enable
+                img.post_bg.lozad(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.is_right
+            a(href=url_for(link) title=article.title || _p('no_title'))
+              - var post_cover = article.cover
+              if theme.lazyload.enable
+                img.post_bg.lozad(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
-        time.article-sort-item__time= date(article.date)
-        a.article-sort-item__title(href=url_for(article.path))= article.title || 'No Title'
+        .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)
+            .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.lozad.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,5 +1,9 @@
-if (is_archive())
+if is_archive()
   - var top_img = theme.archive_img ||theme.top_img || config.top_img
+else if is_tag()
+  - var top_img = theme.tag_img ||theme.top_img || config.top_img
+else if is_category()
+  - var top_img = theme.category_img ||theme.top_img || config.top_img
 else
   - var top_img = page.top_img||theme.top_img || config.top_img
 
@@ -7,8 +11,8 @@ else
 
 
 if is_home()
-  nav#nav.full_page(style=bg_img)
-    include ./header.pug
+  nav#nav.full_page
+    .nav_bg(style=bg_img)
     #site-info
       #site-title
         span.blogtitle= page.title || page.tag || page.category || config.title
@@ -25,8 +29,8 @@ if is_home()
       i.fa.fa-angle-down.scroll-down-effects
 
 else
-  nav#nav.bg_local(style=bg_img)
-    include ./header.pug
+  nav#nav.not_index_bg
+    .nav_bg(style=bg_img)
     #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

@@ -14,37 +14,48 @@ else
     if(page.prev)
       if(page.next)
         .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))
-            img.prev_cover.lozad(data-src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` )
+            if theme.lazyload.enable
+              img.prev_cover.lozad(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')
             .prev_info
               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))
-            img.prev_cover.lozad(data-src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
+            if theme.lazyload.enable
+              img.prev_cover.lozad(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')
             .prev_info
               span=page.prev.title
           
-          
-
     if(page.next)
       if(page.prev)
         .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))
-            img.next_cover.lozad(data-src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
+            if theme.lazyload.enable
+              img.next_cover.lozad(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')
             .next_info
               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))
-            img.next_cover.lozad(data-src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
+            if theme.lazyload.enable
+              img.next_cover.lozad(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')
             .next_info
               span=page.next.title      

layout/includes/recent-posts.pug

@@ -5,21 +5,18 @@ each article , index in page.posts.data
         .post_cover.is_left
           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}'`)
             else
-              img.post_bg.lozad(data-src=`${default_post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
+              img.post_bg(src=`${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}'`)
             else
-              img.post_bg.lozad(data-src=`${default_post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
-
+              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 (article.top)
@@ -38,21 +35,11 @@ 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) 
         - content.length > theme.auto_excerpt.length ? expert += ' ...' : ''
         .content!= expert
-        .more_setting
-          a.more.more--border.more--primary.more--animated(href=url_for(link) + '#more' style="margin-top: 14px")= _p('read_more')
       else
         .content!= article.description
 

layout/includes/reward.pug

@@ -1,65 +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(data-src=(item.itemlist||item).img)
+            img.lozad.post-qr-code__img(src=(item.itemlist||item).img)
             .post-qr-code__desc=(item.itemlist||item).text
 
-
-
-//- donate-share样式1
-//- .post-reward-share
-//-   .post-reward
-//-     a.reward-buttom
-//-       i.fa.fa-qrcode
-//-       = ' ' + _p('donate')
-//-     .reward-main
-//-       ul.reward-all
-//-         each item in theme.QR_code
-//-           li.reward-item
-//-             img.lozad.post-qr-code__img(data-src=(item.itemlist||item).img)
-//-             .post-qr-code__desc=(item.itemlist||item).text
-  
-//-   .post-share
-//-     include share/index.pug
-//-     a.share-buttom
-//-       i.fa.fa-share-alt
-//-       = ' ' + _p('share')
-
-//- donate-share样式1
-//- #social
-//-   .social-main
-//-     span.social-donate
-//-       a#social-donate
-//-         i.fa.fa-qrcode
-//-         = _p('donate')
-
-
-//-     .circle
-//-       .circle-empty
-//-         span
-//-       span.circle_item
-//-         a(style="cursor:pointer")
-
-//-     .social-sharebutton
-//-       span.share-s
-//-         a(href="javascript:void(0)" id="share-s" title=_p('share'))
-//-           i.fa.fa-share-alt
-//-           = _p('share')
-//-       include share/index.pug
-
-
-//- if (theme.QR_code)
-//-   if (theme.QR_code.length > 0)
-//-     .post-qr-code
-//-         each item in theme.QR_code
-//-           .post-qr-code-item
-//-             img.lozad.post-qr-code__img(data-src=(item.itemlist||item).img)
-//-             .post-qr-code__desc=(item.itemlist||item).text
-
-
-

layout/includes/rightside.pug

@@ -1,9 +1,20 @@
 section#rightside.rightside
-  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
-  if theme.nightshift.enable
-    i#nightshift.fa.fa-moon-o.nightshift(title=_p('rightside.night_mode_title'))
+  #rightside-config-hide
+    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
+    if theme.nightshift && theme.nightshift.enable
+      - var display_mode = theme.display_mode == 'night'? 'fa fa-sun-o' : 'fa fa-moon-o'
+      i#nightshift.nightshift(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
+      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/sidebar.pug

@@ -17,4 +17,8 @@
         span.progress-num 0
         span.progress-percentage %
         div.sidebar-toc__progress-bar      
-      div.sidebar-toc__content!=toc(page.content, {list_number: tocNumber})
+      if (page.encrypt == true)
+        div.sidebar-toc__content.toc-div-class(style="display:none")!=toc(page.origin, {list_number: tocNumber})
+      else 
+        div.sidebar-toc__content!=toc(page.content, {list_number: tocNumber})
+      

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

@@ -0,0 +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))

layout/includes/widget/card_author.pug

@@ -1,35 +1,37 @@
 .card_widget.card-author
   .card-content
     .post_data
-      .data-item.text-center
-        img.lozad(data-src=theme.avatar || url_for('/img/avatar.png') onerror=`onerror=null;src='${theme.lodding_bg.flink}'`)
-        p.author-info__name.text-center= config.author
-        p.author-info__description.text-center= config.description
+      .data-item.is_center
+        img.lozad.avatar_img(src=url_for(theme.avatar) onerror=`onerror=null;src='${theme.lodding_bg.flink}'`)
+        p.author-info__name.is_center= config.author
+        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
-      a#bookmark-it.data-item.bookmark.bookmarke--primary.bookmark--animated(href="javascript:;" title= _p('aside.card_bookmark') )=  _p('aside.card_bookmark') || 'Follow Me'
+    .post_data.is_center
+      a#bookmark-it.data-item.bookmark.bookmarke--primary.bookmark--animated(href="javascript:;" title= _p('aside.card_bookmark') )
+        i.fa.fa-bookmark(aria-hidden="true")
+        span= _p('aside.card_bookmark') || 'Follow Me'
       
   
   

layout/includes/widget/card_recent_post.pug

@@ -9,12 +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'))
                 else
-                  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'))
+                  img.aside_post_bg(src=`${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/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

@@ -4,7 +4,6 @@ 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 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,22 +29,23 @@ 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
+        .post-meta-wordcount
+          if (theme.wordcount && theme.wordcount.enable)
             span= _p('post.wordcount') + ': '
             span.word-count= wordcount(page.content)
             span.post-meta__separator |
             span= _p('post.min2read', min2read(page.content, {cn: 350, en: 160}))
-            if theme.busuanzi.page_pv
-              span.post-meta__separator |
-              span= _p('post.page_pv') + ': '
-              span#busuanzi_value_page_pv
+          if (theme.wordcount && theme.wordcount.enable && theme.busuanzi.page_pv)
+            span.post-meta__separator |
+          if theme.busuanzi.page_pv           
+            span= _p('post.page_pv') + ': '
+            span#busuanzi_value_page_pv
 
 
 block content
   article#post(class="")
     #post-content.article-container!= page.content
-  if (theme.post_copyright && theme.post_copyright.enable)
+  if (theme.post_copyright && theme.post_copyright.enable && page.copyright != false)
     .post-copyright
       .post-copyright__author
         span.post-copyright-meta= _p('post.copyright.author') + ": "

layout/tag.pug

@@ -1,10 +1,18 @@
 extends includes/layout.pug
 
 block content
-  include ./includes/mixins/article-sort.pug
-  #tag
-    .article-sort-title= _p('page.tag') + ' - ' + page.tag
-    +articleSort(page.posts)
-    include includes/pagination.pug
-  #aside_content.aside_content
-    include includes/aside.pug
+  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
+      +articleSort(page.posts)
+      include includes/pagination.pug
+    #aside_content.aside_content
+      include includes/aside.pug

package.json

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

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/note.js

@@ -0,0 +1,15 @@
+/**
+ * note.js
+ * transplant from hexo-theme-next
+ */
+
+'use strict';
+
+function postNote(args, content) {
+  return `<div class="note ${args.join(' ')}">
+            ${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')}
+          </div>`;
+}
+
+hexo.extend.tag.register('note', postNote, {ends: true});
+hexo.extend.tag.register('subnote', postNote, {ends: true});

scripts/post-lazyload.js

@@ -0,0 +1,20 @@
+'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.load(data.content, {decodeEntities: false});
+  const images = $('img');
+  if (!images.length) return;
+
+  images.each((i, o) => {
+    let src = $(o).attr('src');
+    $(o).attr('data-src', src).removeAttr('src');
+    $(o).addClass('lozad');
+  });
+
+  data.content = $.html();
+}, 100);

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

@@ -34,18 +34,20 @@ 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  = ''
 
   if (relatedPosts.length > 0) {
     result += '<div class="relatedPosts">'
-    result += '<div class="relatedPosts_headline"><i class="fa fa-fw fa-thumbs-up" aria-hidden="true"></i><span>' + headline_lang + '</span></div>'
+    result += '<div class="relatedPosts_headline"><i class="fa fa-fw fa-thumbs-up" aria-hidden="true"></i><span>' + ' ' + headline_lang + '</span></div>'
     result += '<div class="relatedPosts_list">'
   
   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 lozad" data-src="' + cover + '">';
+    result += '<img class="relatedPosts_cover '+ lazy_class + '"' + lazy_src + '="' + cover + '">';
     result += '<div class="relatedPosts_title">' + relatedPosts[i].title + '</div>';
     result += '</a></div>'
     };
@@ -82,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,12 @@ 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
+
 *::-webkit-scrollbar
   width: 8px
   height: 8px
@@ -23,6 +29,19 @@ body
 *::-webkit-scrollbar-track
   background-color: transparent
 
+
+#web_bg
+  background: $web-bg
+  height: 100%
+  width: 100%
+  background-size: cover
+  position: fixed
+  z-index: -999
+  background-attachment: local
+  background-repeat: no-repeat
+  background-position: center
+  
+
 h1,
 h2,
 h3,
@@ -58,20 +77,6 @@ h6
   transition: all 0.2s
   opacity: 0
 
-#go-up
-  position: fixed
-  right: $go-up-right
-  bottom: $go-up-bottom
-  z-index: 100
-  font-size: $sidebar-icon-size
-  opacity: 0
-  cursor: pointer
-  transition: all .2s
-
-.fancybox-caption
-  text-align: center
-
-
 hr
   position: relative
   margin: 2rem auto
@@ -129,14 +134,50 @@ table
   background: $selection
   color: $pale-grey
 
-.text-center
+
+.full_page #site-title, 
+.full_page #site-sub-title, 
+#site-name,
+#aside_content .author-info__name,
+#aside_content .author-info__description
+  font-family: $site-name-font
+
+.is_right
+  text-align: right 
+
+.is_left
+  text-align: left
+
+.is_center
   text-align: center
+
+.is_visible
+  display: block !important
+
+.is_invisible
+  display: none !important
+
+.is_hidden
+  overflow: hidden
+
 .pull-left
   float: left
 
 .pull-right
   float: right
 
+.fireworks
+  position: fixed
+  z-index: -1
+  pointer-events: none
+
+// 去掉加載黑框
+img[src=""],img:not([src])
+  opacity: 0
+
+#body-wrap
+  transition: all .3s
+
 @media screen and (max-width: $bg)
   i#toggle-sidebar,
   #sidebar
@@ -144,215 +185,3 @@ table
 
   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
-
-  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
-
-  .vnick
-    font-size: 100%
-
-  .vsys
-    font-size: 70%
-  
-  .vtime
-    font-size: .65rem
-  
-  .vcontent
-    font-size: 100%
-  
-  .vat
-    font-size: .7125rem;
-    color: $cyan;
-    border: 1px solid $cyan;
-    padding: 0 .8rem;
-    border-radius: 5px;
-  
-
-#site-title, #site-sub-title, 
-#site-name,
-#aside_content .author-info__name,
-#aside_content .author-info__description
-  font-family: $site-name-font
-
-
-
-#rightside 
-  right: -38px
-  z-index: 100
-  position: fixed
-  bottom: 50px
-  padding-bottom: 32px
-  opacity: 0
-  transition: all .2s
-
-  #readmode,#font_plus,#font_minus
-    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
-  
-  #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;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-
-.tright
-  text-align: right 
-
-.is_visible
-  display: block !important
-
-.fireworks
-  position: fixed
-  z-index: -1
-  pointer-events: none
-
-
-// 去掉加載黑框
-img[src=""],img:not([src])
-  opacity: 0

source/css/_highlight/highlight.styl

@@ -2,21 +2,8 @@
 @require "theme"
 @require "diff"
 
-languages = "js" "javascript" "python" "ruby" "xml" "html" "css" "perl" "sql" "coffeescript" "java" "scala" "kotlin" "c" "c\+\+" "go" "less" "sass" "scss" "stylus" "styl" "typescript" "ts" "bash" "yml" "yaml" "gradle" "groovy" "ejs" "swig" "markdown"
 wordWrap = !hexo-config("rootConfig.highlight.line_number") && hexo-config("code_word_wrap")
 
-loopForLanguages()
-  for lang in languages
-    .article-container
-      figure.highlight
-        &{"." + lang}
-          table
-            &:before
-              content: lang
-
-loopForLanguages()
-
-// Placeholder: $code-block
 $code-block
   overflow: auto
   margin: 1rem 0
@@ -102,18 +89,8 @@ blockquote
       width: auto
       border: none
 
-      &:before
-        position: absolute
-        z-index: 1
-        display: inline-block
-        margin-top: -1.4rem
-        padding: 0 0.7rem
-        width: 5rem
-        color: $highlight-foreground
-        content: "Code"
-        font-weight: bold
-        font-size: 0.8rem
-        line-height: 1.4rem
+      if hexo-config('highlight_shrink') == true
+        display: none
 
       &:after
         position: absolute

source/css/_layout/aside.styl

@@ -5,18 +5,12 @@
     -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
-    margin-left: 15px
     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
@@ -29,10 +23,8 @@
       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
@@ -55,10 +47,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
@@ -67,8 +58,7 @@
 
       .social-icon 
         margin: 0 0.5rem
-        color: #4c4948
-        /* text-shadow: 0.1rem 0.1rem 0.2rem rgba(0,0,0,0.15) */
+        color: $font-black
         font-size: 1rem
         cursor: pointer
       
@@ -76,16 +66,10 @@
         transition: all 0.3s
         
         &:hover
-          -moz-transform: rotate(540deg)
-          -o-transform: rotate(540deg)
-          -webkit-transform: rotate(540deg)
           transform: rotate(540deg)
 
-
-    a#bookmark-it
-      display: inline-block
+    #bookmark-it
       margin-top: .2rem
-      padding: 0 1rem
       height: 1.6rem
       background: $light-blue
       color: #fff
@@ -95,6 +79,9 @@
       text-transform: uppercase
       z-index: 1
 
+      span
+        padding-left: 10px
+
     .toggle_change--primary,.bookmark--primary 
       color: $ruby
     
@@ -102,7 +89,7 @@
       transition-property: color
       transition-duration: 1s
 
-      &:before {
+      &:before
         content: ""
         position: absolute
         top: 0
@@ -116,18 +103,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
@@ -141,7 +123,6 @@
     flex-basis: auto
     justify-content: center
 
-
   .item_headline 
     font-size: 0.8rem
     
@@ -171,39 +152,41 @@
       &::after
         width: 100%
 
-
-
   .aside_recent_item 
       margin: 10px 0 -15px 0
     
     .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
-      width: 70px
+      height: 66px
+      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
@@ -211,14 +194,12 @@
         -webkit-line-clamp: 2
         -webkit-box-orient: vertical
         overflow: hidden
-        height: 41px
-        padding-left: 5px
+        height: 40px
+        padding-left: 10px
 
         &:hover
           color: $light-blue !important
 
-
-
   .aside_category_item,.archive-list
     list-style: none
     margin-bottom: -3px
@@ -233,14 +214,14 @@
 
   .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
   
   .aside_category_list_name,.archive-list-link
     white-space: nowrap
@@ -251,18 +232,12 @@
   .aside_category_list_link,.archive-list-item
     display: flex
   
-
-
-
   .aside_category_list_length,.archive-list-count
     float: right 
   
   .card-archives
     margin-bottom: 20px
   
-  .card-announcement-animation
-    animation: announ_animation 1.5s infinite
-  
   .card-webinfo
     .webinfo
       padding: 0.2rem 1rem
@@ -284,16 +259,60 @@
           float: right
           display: inline-block
 
+// bookmark 樣式
+.fc-container .fancybox-bg 
+  background: #eee
 
-@keyframes announ_animation{
-  0%,to{
-    color: #4c4948
-}
-  50%{
-    color: #FF0000
-    }
-    }
+.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
 
 @media screen and (max-width: 900px) 
   .layout_page
@@ -303,6 +322,14 @@
     width: 100% !important
   
   .card_widget
-    margin-left: 0 !important
+    margin-left: 0 
+    margin-right: 0 
 
 
+@media screen and (min-width: 900px) 
+  #aside_content    
+    .card_widget
+        if hexo-config("aside.position") == "right"
+          margin-left: 15px
+        else 
+          margin-right: 15px

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,65 @@
 #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 
@@ -44,9 +41,6 @@
     &: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 +52,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 +84,7 @@
   .post-cards 
       margin-top: 5px
       min-height: 100px
-      padding: 15px
+      padding: 0 15px
       border-radius: 15px
   
   .comment-word
@@ -121,8 +111,6 @@
       li 
         width: calc(100%/2 - 14px)   
 
-
-
 @media screen and (max-width:600px)
   .flink
     .md-links 

source/css/_layout/footer.styl

@@ -2,16 +2,29 @@ footer
   margin-top: 1rem
   background: $light-blue
   background-attachment: local
+  background-position: bottom
+  background-size: cover
+  position: relative
 
-  &.footer-bg
-    background-position: bottom
-    background-size: cover
+  if hexo-config('footer_bg') != false
+    &:before
+      position: absolute
+      bottom: 0
+      left: 0
+      display: block
+      content: ''
+      width: 100%
+      height: 100%
+      opacity: 0.5
+      background-color: #394245
+      background-image: linear-gradient(234deg, #394245 0%, #000 100%)
 
 
 #footer
   padding: 1.2rem 1rem 1rem
   color: $light-grey
   text-align: center
+  position: relative
 
   a
     color: $light-grey
@@ -24,3 +37,7 @@ footer
   .footer-separator
     margin: 0 0.2rem
 
+  .icp-icon
+    padding: 0 4px
+    vertical-align: text-bottom
+

source/css/_layout/head.styl

@@ -1,18 +1,20 @@
 #nav
   position: relative
   margin-bottom: 1rem
-  background-color: $light-blue
-  background-position: center
-  background-size: cover
-
 
   &.full_page
-    background-attachment: local
-    height: 100vh
+    height: $index_top_img_height
   
-  &.bg_local
+  .nav_bg
+    width: 100%
+    height: 100%
+    background-color: $light-blue
+    background-position: center
+    background-size: cover
     background-attachment: local
 
+  &.not_index_bg
+    height: 20rem
 
   #site-social-icons
     margin: 0 auto
@@ -33,7 +35,7 @@
 #site-info
   position: absolute
   width: 100%
-  top: 43%
+  top: $index_site_info_top
 
 #site-title,
 #site-sub-title
@@ -49,6 +51,11 @@
 #site-sub-title
   font-size: 0.8rem
 
+#page_site-info
+  position: absolute
+  top: 10rem
+  width: 100%
+
 .scroll-down
   position: absolute
   bottom: 0
@@ -58,6 +65,12 @@
   font-size: 30px
   text-align: center
 
+  .scroll-down-effects
+    position: absolute
+    color: $white
+
+#header
+  position: relative
 
 #page-header
   position: absolute
@@ -67,76 +80,17 @@
   width: 100%
   border: none
   font-size: 18px
-  transition: all 0.2s ease-in-out
+  transition: all .3s
 
   .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)
-  
-  .menus  
-    .mobile_author_icon
-      display: none
-      padding: 3rem 1.5rem 0
-      text-align: center
-  
-      img
-        height: 120px
-        width: 120px
-        display: inline-block
-        vertical-align: top
-        border-radius: 70px
-        -webkit-transition: all .3s
-        -moz-transition: all .3s
-        -o-transition: all .3s
-        -ms-transition: all .3s
-        transition: all .3s
-
-    hr         
-      margin: 1rem auto
-      display: none
-    
-    &.menu_open
-      display: block
-      animation: menu_open .3s
-
-    &.menu_close
-      animation: menu_close .3s
-      display: block
-
-
-
-
-
   a
     color: $light-grey
     text-decoration: none
@@ -144,30 +98,6 @@
     &:hover
       color: $white
 
-  .site-page
-    position: relative
-    margin-left: 0.6rem
-    padding-bottom: 0.3rem
-    text-shadow: 0.05rem 0.05rem 0.1rem rgba(0, 0, 0, 0.3)
-    font-size: 0.7rem
-    cursor: pointer
-    margin-left: 1rem
-
-    &::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
-      &::after
-        width: 100%
-
   &.fixed
     position: fixed
     top: -60px
@@ -182,29 +112,96 @@
         opacity: 0
 
     a,
-    #site-name
+    #site-name,
+    .toggle-menu
       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
+      &: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)
+      padding: 8px 10px
+      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)
+
+      li
+        list-style: none
+        text-align: center
+
+        a
+          color: #3b3a3a
+          text-shadow: none
+
+.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
+
+  &::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
+    &::after
+      width: 100%
+
+
 @media screen and (min-width: $sm)  
   #site-title
     font-size: 2rem
@@ -212,63 +209,25 @@
   #site-sub-title
     font-size: 1.2rem
 
-@media screen and (max-width: $sm)
 
+@media screen and (max-width: $sm)
   #page-header
     padding: 10px 0.8rem
 
+    .menus
+      display: none
+
     .toggle-menu
       display: block
 
-    .menus
-      position: fixed
-      top: 0
-      right: 0
-      width: 100%
-      height 101vh
-      background: $white
-      cursor: pointer
-      box-shadow: 0 0 4px rgba(0, 0, 0, 0.27)
-      z-index: -1
-      overflow: auto
-      display: none
-
-      a
-        display: inline-block !important
-        opacity: 1 !important
-        // margin-left: 0
-        // padding-top: 0.3rem
-        // padding-bottom: 0.3rem
-        // padding-left: 0.6rem
-        margin: 0
-        padding: .5rem 1rem
-        color: $font-black
-        text-shadow: none
-        font-size: 0.8rem
-        z-index: 0
-
-
-        &:hover
-          color: $light-blue
-      
-      .mobile_author_icon
-        display: block
-     
-      .menus_item 
-          padding: 0 .5rem
-          margin-bottom: 4rem
-          text-align: center 
-              
-      hr
-        display: block 
-
     .search 
-      right: 0.5rem
-
       span
         display none
   
-    &.fixed.open-sidebar 
-      .search
-        display: inline-block;
-        opacity: 1;
+@media screen and (max-width: $bg)
+  #page-header
+    &.fixed
+      &.open-sidebar
+        .site-page
+          display: inline-block
+          opacity: 1

source/css/_layout/mobile-sidebar.styl

@@ -0,0 +1,163 @@
+#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: all .3s
+    display: none
+
+  #mobile-sidebar-menus
+    .mobile_author_icon
+      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
+
+      .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: 15px 10px
+
+    ol,li
+      list-style: none
+      padding: 0 0 0 5px
+      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
+  #mobile-sidebar
+    #mobile-sidebar-menus
+      transform: translateX(-254px)
+
+.open-mobile-toc
+  #mobile-sidebar
+    #mobile-sidebar-toc
+      transform: translateX(-254px)
+
+@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,7 +1,7 @@
 if hexo-config("nightshift") && hexo-config("nightshift.enable")
   .night-mode 
-    footer
-      background: #2d3035
+    color: #99a9bf 
+    background-color: #2d3032
 
     #sidebar
       background: #2d3035 !important
@@ -10,6 +10,9 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable")
       &::-webkit-scrollbar-thumb
         background: lighten(#2d3035,5)
     
+    #toggle-sidebar
+      color: #99a9bf !important
+
     if hexo-config("local_search") && hexo-config("local_search.enable")
       #local-search
         background: #2d3035  
@@ -39,7 +42,7 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable")
 
     // 評論
     #vcomment
-      * 
+      p,a,textarea,.vemoji-btn,.vpreview-btn,input,path,.vcount,.vnum,.vtime,.vsys,.vsys,.vnick
         color: #99a9bf !important
       
       .vsys
@@ -48,9 +51,33 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable")
       .vbtn
         background: rgb(45, 48, 53) !important      
         color: #99a9bf !important
+        border: 1px solid #99a9bf
       
-    .recent-post-item .article-title
-        color: #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
+      background: #2d3032 !important
+      
+      .article-title,
+      a
+        color: #99a9bf !important
 
     #page-header
         &.fixed
@@ -108,7 +135,6 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable")
         background: rgb(27, 38, 59) 
 
     .post-cards,.md-links-item
-        // background: #2d3035
         a
             color: #99a9bf
 
@@ -127,7 +153,13 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable")
 
     .translate_chn_to_cht,
     .nightshift,
-    #readmode
+    #readmode,
+    #to_comment,
+    #font_plus,
+    #font_minus,
+    #rightside_config,
+    #go-up,
+    #mobile-toc-button
         background-color: #2d3035 !important
 
     img
@@ -163,7 +195,8 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable")
       background:#2d3035
 
     #nav,
-    #top-container
+    #top-container,
+    footer
       &::before
         content: ""
         position: absolute
@@ -182,15 +215,23 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable")
 
     #site-info .blogtitle, 
     span.subtitle,
+    #site-title,
     #post-info .posttitle,
     #post-info #post-meta,
     #site-social-icons i,
-    #top-container a
+    #top-container a,
+    #footer,
+    #footer a,
+    #page-header a,
+    #page-header .toggle-menu
       color: rgba(238,238,238,.6)
     
+    #footer
+      background-color: #2d3032
+
     //打賞 分享
     .post-reward
-      .reward-buttom
+      .reward-button
         background-color: #616a6b
       .post_share
         filter: brightness(0.6)
@@ -200,32 +241,45 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable")
     &::-webkit-scrollbar-thumb
       background: lighten(#2d3035,5)
 
-    .more
-      background-color: #616a6b
-    
-  @media screen and (max-width: 768px)
-    .night-mode
-      color: #99a9bf 
-      background-color: rgb(45, 48, 53)
-
-      #page-header
-        .menus
-          background: #2d3035
-        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 
+    #web_bg
       background-color: #2d3032
 
-      .recent-post-item
-          background: #2d3035 !important
+    #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
+
 
 
 

source/css/_layout/note.styl

@@ -0,0 +1,256 @@
+.note 
+  $note-icons = hexo-config('note.icons')
+  $note-style = hexo-config('note.style')
+  margin: 10px 0
+  padding: 15px
+  position: relative
+
+  if ($note-style == 'simple') 
+    border: 1px solid $light-grey
+    border-left-width: 5px
+  
+
+  if ($note-style == 'modern') 
+    background-color: $whitesmoke
+    border: 1px solid transparent
+  
+
+  if ($note-style == 'flat') 
+    background-color: lighten($light-grey, 65%)
+    border: initial
+    border-left: 5px solid $light-grey
+  
+
+  if (hexo-config('note.border_radius') is a 'unit') 
+    border-radius: unit(hexo-config('note.border_radius'), px)
+  
+
+  h2, h3, h4, h5, h6 
+    if ($note-icons) 
+      margin-top: 3px
+    else 
+      margin-top: 0
+    
+
+    border-bottom: initial
+    margin-bottom: 0
+    padding-top: 0 !important
+  
+
+  p, ul, ol, table, pre, blockquote, img 
+    &:first-child 
+      margin-top: 0 !important
+
+    &:last-child 
+      margin-bottom: 0 !important
+    
+
+  if ($note-icons) 
+    &:not(.no-icon) 
+      padding-left: 45px
+
+      &::before 
+        font-family: 'FontAwesome'
+        font-size: larger
+        left: 15px
+        position: absolute
+        top: 13px
+      
+  &.default 
+    if ($note-style == 'flat') 
+      background-color: $note-default-bg
+    
+
+    if ($note-style == 'modern') 
+      background-color: $note-modern-default-bg
+      border-color: $note-modern-default-border
+      color: $note-modern-default-text
+
+      a, span.exturl 
+        &:not(.btn) 
+          border-bottom: 1px solid $note-modern-default-text
+          color: $note-modern-default-text
+
+          &:hover 
+            border-bottom: 1px solid $note-modern-default-hover
+            color: $note-modern-default-hover
+          
+    if ($note-style != 'modern') 
+      border-left-color: $note-default-border
+
+      h2, h3, h4, h5, h6 
+        color: $note-default-text
+      
+    if ($note-icons) 
+      &:not(.no-icon) 
+        &::before 
+          content: $note-default-icon
+
+          if ($note-style != 'modern') 
+            color: $note-default-text
+
+  &.primary 
+    if ($note-style == 'flat') 
+      background-color: $note-primary-bg
+    
+
+    if ($note-style == 'modern') 
+      background-color: $note-modern-primary-bg
+      border-color: $note-modern-primary-border
+      color: $note-modern-primary-text
+
+      a, span.exturl 
+        &:not(.btn) 
+          border-bottom: 1px solid $note-modern-primary-text
+          color: $note-modern-primary-text
+
+          &:hover 
+            border-bottom: 1px solid $note-modern-primary-hover
+            color: $note-modern-primary-hover
+          
+    if ($note-style != 'modern') 
+      border-left-color: $note-primary-border
+
+      h2, h3, h4, h5, h6 
+        color: $note-primary-text
+      
+    if ($note-icons) 
+      &:not(.no-icon) 
+        &::before 
+          content: $note-primary-icon
+
+          if ($note-style != 'modern') 
+            color: $note-primary-text
+          
+  &.info 
+    if ($note-style == 'flat') 
+      background-color: $note-info-bg
+    
+
+    if ($note-style == 'modern') 
+      background-color: $note-modern-info-bg
+      border-color: $note-modern-info-border
+      color: $note-modern-info-text
+
+      a, span.exturl 
+        &:not(.btn) 
+          border-bottom: 1px solid $note-modern-info-text
+          color: $note-modern-info-text
+
+          &:hover 
+            border-bottom: 1px solid $note-modern-info-hover
+            color: $note-modern-info-hover
+          
+    if ($note-style != 'modern') 
+      border-left-color: $note-info-border
+
+      h2, h3, h4, h5, h6 
+        color: $note-info-text
+      
+    if ($note-icons) 
+      &:not(.no-icon) 
+        &::before 
+          content: $note-info-icon
+
+          if ($note-style != 'modern') 
+            color: $note-info-text
+          
+  &.success 
+    if ($note-style == 'flat') 
+      background-color: $note-success-bg
+    
+
+    if ($note-style == 'modern') 
+      background-color: $note-modern-success-bg
+      border-color: $note-modern-success-border
+      color: $note-modern-success-text
+
+      a, span.exturl 
+        &:not(.btn) 
+          border-bottom: 1px solid $note-modern-success-text
+          color: $note-modern-success-text
+
+          &:hover 
+            border-bottom: 1px solid $note-modern-success-hover
+            color: $note-modern-success-hover
+          
+    if ($note-style != 'modern') 
+      border-left-color: $note-success-border
+
+      h2, h3, h4, h5, h6 
+        color: $note-success-text
+      
+    if ($note-icons) 
+      &:not(.no-icon) 
+        &::before 
+          content: $note-success-icon
+
+          if ($note-style != 'modern') 
+            color: $note-success-text
+          
+  &.warning 
+    if ($note-style == 'flat') 
+      background-color: $note-warning-bg
+    
+
+    if ($note-style == 'modern') 
+      background-color: $note-modern-warning-bg
+      border-color: $note-modern-warning-border
+      color: $note-modern-warning-text
+
+      a, span.exturl 
+        &:not(.btn) 
+          border-bottom: 1px solid $note-modern-warning-text
+          color: $note-modern-warning-text
+
+          &:hover 
+            border-bottom: 1px solid $note-modern-warning-hover
+            color: $note-modern-warning-hover
+          
+    if ($note-style != 'modern') 
+      border-left-color: $note-warning-border
+
+      h2, h3, h4, h5, h6 
+        color: $note-warning-text
+      
+    if ($note-icons) 
+      &:not(.no-icon) 
+        &::before 
+          content: $note-warning-icon
+
+          if ($note-style != 'modern') 
+            color: $note-warning-text
+          
+  &.danger 
+    if ($note-style == 'flat') 
+      background-color: $note-danger-bg
+    
+
+    if ($note-style == 'modern') 
+      background-color: $note-modern-danger-bg
+      border-color: $note-modern-danger-border
+      color: $note-modern-danger-text
+
+      a, span.exturl 
+        &:not(.btn) 
+          border-bottom: 1px solid $note-modern-danger-text
+          color: $note-modern-danger-text
+
+          &:hover 
+            border-bottom: 1px solid $note-modern-danger-hover
+            color: $note-modern-danger-hover
+          
+
+    if ($note-style != 'modern') 
+      border-left-color: $note-danger-border
+
+      h2, h3, h4, h5, h6 
+        color: $note-danger-text
+
+    if ($note-icons) 
+      &:not(.no-icon) 
+        &::before 
+          content: $note-danger-icon
+
+          if ($note-style != 'modern') 
+            color: $note-danger-text

source/css/_layout/page.styl

@@ -105,24 +105,6 @@ galleryItemStyle(w, h)
   time
     color: $grey
 
-  .more_setting
-    display: none
-
-  .more
-    display: inline-block
-    padding: 0 1rem
-    height: h = 1.6rem
-    // background: $light-blue
-    // color: $white
-    text-align: center
-    text-decoration: none
-    line-height: h
-    cursor: pointer
-    // transition: all 0.2s ease-in-out
-
-    // &:hover
-    //   background: $ruby
-
   .article-title
     margin-bottom: 0.3rem
     color: $black
@@ -143,20 +125,25 @@ galleryItemStyle(w, h)
       color: $light-blue !important
 
 .tag-cloud
-  padding: 1.5rem 1rem 2rem
-  text-align: center
+  padding: 40px 44px 44px
 
   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,
@@ -204,7 +191,7 @@ galleryItemStyle(w, h)
 
   &-item
     position: relative
-    margin-bottom: 1rem
+    margin: 0 0 1rem 0.5rem
     transition: all 0.2s ease-in-out
 
     &:hover
@@ -214,8 +201,8 @@ galleryItemStyle(w, h)
     &:before
       $w = 0.3rem
       position: absolute
-      top: 0.48rem
-      left: calc(-1rem - 7px)
+      top: 1.8rem
+      left: calc(-1rem - 17px)
       width: w = $w
       height: h = w
       border: 0.5 * w solid $light-blue
@@ -237,18 +224,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
 

source/css/_layout/pagination.styl

@@ -22,10 +22,10 @@
       color: $white
       cursor: default
 
-  img.prev_cover, img.next_cover
+  img.prev_cover,
+  img.next_cover
     position: absolute
     padding: 0
-    z-index: 50
     top: 0
     left: 0
     width: 100%

source/css/_layout/post.styl

@@ -1,3 +1,18 @@
+if hexo-config("post_beautify.enable")
+  headStyle(fontsize)
+    padding-left: unit(fontsize + 0.3, "rem")
+  
+    code 
+      font-size: unit(fontsize, "rem")
+
+    &:before
+      top: calc(50% - unit(fontsize / 2 - 0.05, "rem"))
+      font-size: unit(fontsize, "rem")
+
+    &:hover
+      padding-left: unit(fontsize + 0.2, "rem")
+
+
 #post-title
   font-size: 1.4rem
 
@@ -100,22 +115,130 @@
 #post-content
   margin-bottom: 1rem
 
-  ol,
-  ul
-    margin-top: 0.4rem
-    counter-reset: li
+  if hexo-config("post_beautify.enable")
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6
+      cursor: pointer
+      transition: all 0.2s ease-out
 
-    p
-      margin: 0
+      &:before
+        position: absolute
+        top: calc(50% - 0.35rem)
+        left: 0
+        color: $title-prefix-icon-color
+        content: $title-prefix-icon
+        font: normal normal normal 14px / 1 FontAwesome
+        font-size: 0.8rem
+        transition: all 0.2s ease-out
+
+      &:hover
+        padding-left: 1.1rem
+
+        &:before
+          color: $light-blue
+
+    h1
+      headStyle(1)
+
+    h2
+      headStyle(0.9)
+
+    h3
+      headStyle(0.8)
+
+    h4
+      headStyle(0.7)
+
+    h5
+      headStyle(0.6)
+
+    h6
+      headStyle(0.6)
 
     ol,
     ul
-      padding-left: 0.5rem
+      margin-top: 0.4rem
+      padding: 0 0 0 0.8rem
+      list-style: none
+      counter-reset: li
 
-    li
-      position: relative
-      margin: 0.3rem 0
-      padding-left: 0.3rem
+      p
+        margin: 0
+
+      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: rotate(360deg)
+
+        &:before
+          position: absolute
+          top: 0
+          left: 0
+          background: $light-blue
+          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
+      > li
+        &:hover
+          &:before
+            border-color: $ruby
+
+        &:before
+          $w = 0.3rem
+          top: 10px
+          margin-left: 0.45rem
+          width: w = $w
+          height: h = w
+          border: 0.5 * w solid $light-blue
+          border-radius: w
+          background: $white
+          content: ""
+          line-height: h
+
+  else
+    ol,
+    ul
+      margin-top: 0.4rem
+      counter-reset: li
+
+      p
+        margin: 0
+
+      ol,
+      ul
+        padding-left: 0.5rem
+
+      li
+        position: relative
+        margin: 0.3rem 0
+        padding-left: 0.3rem
 
 a
   color: $a-link-color
@@ -162,6 +285,31 @@ img
   &:hover
     color: darken($highlight-aqua, 20%)
 
+.code_lang
+  position: absolute
+  font-weight: bold;
+  font-size: 0.8rem;
+  line-height: 1.4rem;
+  color: $highlight-foreground
+  left: 30px
+  z-index: 1
+  cursor: pointer
+
+.code-expand
+  position: absolute
+  top: 0
+  color: $highlight-foreground
+  padding: 7px 10px
+  z-index: 1
+  cursor: pointer
+  transition: all .3s
+  transform: rotate(0deg)
+
+.code-closed
+  transform: rotate(-90deg) !important
+  transition: all .3s
+
+
 .copy-notice
   position: absolute
   top: 0
@@ -229,8 +377,6 @@ img
   .layout
     width: $content-large-width
         
-
-        
 .katex-wrap
   overflow: auto
   if hexo-config("katex") && hexo-config("katex.hide_scrollbar")
@@ -239,48 +385,35 @@ 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: 900px)
+@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-bottom: 40px
 
   &: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
 
@@ -310,3 +443,34 @@ img
     a
       text-decoration: none
       color: $light-blue
+    
+    h1
+      margin: 0.8rem 0
+    
+    h2,
+    h3,
+    h4,
+    h5,
+    h6
+      margin: 1rem 0 0.5rem 0
+    
+    img
+      margin: 0 auto 0.8rem 
+        
+    blockquote,
+    p
+      margin: 0 0 0.8rem 0
+      
+
+    table,.note
+      margin: 0.8rem 0
+    
+    figure
+      margin: 0.8rem 0
+
+      table
+        margin: 0
+    
+    blockquote
+      p
+        margin: 0.5rem 0

source/css/_layout/readmode.styl

@@ -7,47 +7,49 @@ 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
         text-shadow: none
       
-      #page-header
-        &.fixed
-          background: none
-          box-shadow: none
+    #page-header
+      &.fixed
+        background: alpha(darken($pale-yellow,5),0.5)
+        box-shadow: none
 
-          &.open-sidebar
-            .site-page
-              display: inline-block
-              opacity: 1
+        &.open-sidebar
+          .site-page
+            display: inline-block
+            opacity: 1
         
-        .toggle-menu 
-          .menu-icon-first,
-          .menu-icon-second,
-          .menu-icon-third
-            background-color: #4c4948
 
     .layout_post
       box-shadow: none
@@ -113,5 +115,3 @@ if hexo-config("readmode") && hexo-config("readmode.enable")
 
 
       
-
-      

source/css/_layout/relatedposts.styl

@@ -21,10 +21,6 @@
 
   .relatedPosts_cover
     border: 0
-    -webkit-transition: all 0.6s
-    -moz-transition: all 0.6s
-    -o-transition: all 0.6s
-    -ms-transition: all 0.6s
     transition: all 0.6s
     display: block
     width: 100%
@@ -35,21 +31,21 @@
     object-fit: cover
 
   .relatedPosts_title
-      color: #fff
-      position: absolute
-      left: 0
-      right: 0
-      top: 45%
-      height: 60px
-      padding: 0 30px
-      display: -webkit-box
-      -webkit-line-clamp: 2
-      -webkit-box-orient: vertical
-      overflow: hidden
-      max-width: 100%
-      width: 100%
-      margin: 0 auto
-      text-align: center
+    color: #fff
+    position: absolute
+    left: 0
+    right: 0
+    top: 45%
+    height: 60px
+    padding: 0 30px
+    display: -webkit-box
+    -webkit-line-clamp: 2
+    -webkit-box-orient: vertical
+    overflow: hidden
+    max-width: 100%
+    width: 100%
+    margin: 0 auto
+    text-align: center
 
   .relatedPosts_headline
     font-size: 20px
@@ -60,7 +56,6 @@
     clear: both
 
 
-
 @media screen and (max-width:768px) 
   .relatedPosts_item
     width: calc(100%/2 - 4px)

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
@@ -30,6 +30,7 @@
       left: 0
       transition: all 0.6s
       display: none
+      opacity: 1
   
       .reward-all
         margin: 0 auto

source/css/_layout/rightside.styl

@@ -0,0 +1,64 @@
+#rightside 
+  right: -38px
+  position: fixed
+  bottom: 40px
+  transition: all .3s
+  opacity 0
+
+  #rightside-config-hide
+    transition: all .3s
+    display none
+
+  #readmode,
+  #font_plus,
+  #font_minus,
+  #to_comment,
+  .nightshift,
+  #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,7 +10,6 @@
   background: $sidebar-background
   box-shadow: -0.25rem 0 0.25rem rgba(232, 237, 250, 0.6) inset
   opacity:  0.9
-  transition: all 0.2s
   
   .sidebar-toc
     ol,

source/css/_layout/z-other.styl

@@ -1,12 +1,10 @@
 #recent-posts
+  width: 75%
+
   .recent-post-item 
     padding: 0
     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: 20px
@@ -34,9 +32,6 @@
     height: 280px
     overflow: hidden
 
-    
-    
-
   img.post_bg
     border: 0
     transition: all .6s
@@ -47,81 +42,32 @@
     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
+  .recent-post-info 
+    padding: 50px 40px
+    display: inline-block
+    width: 55%
+    overflow hidden
 
 
-a.article-meta__categories
-  text-decoration: none
-  color: #858585
+  a.article-meta__categories
+    text-decoration: none
+    color: #858585
 
-  &:hover
-    color: #49b1f5 !important
+    &:hover
+      color: #49b1f5 !important
 
-.content
-  display: -webkit-box
-  -webkit-line-clamp: 3
-  -webkit-box-orient: vertical
-  overflow: hidden
-  height: 90px
-
-.more {
-  position: relative
-  letter-spacing: 1.2px
-  text-transform: uppercase
-  overflow: hidden
-  z-index: 1
-  background-color: $light-blue
-
-  &:focus {
-    outline: none
-  }
-}
-
-.more--primary {
-  color: $white
-}
-
-.more--animated {
-  transition-property: color
-  transition-duration: 0.5s
-
-  &:before {
-    content: ""
-    position: absolute
-    top: 0
-    left: 0
-    right: 0
-    bottom: 0
-    background: $ruby
-    transform: scaleX(0)
-    transform-origin: 0 50%
-    transition-property: transform
-    transition-duration: 0.5s
-    transition-timing-function: ease-out
-    z-index: -1
-  }
-
-  &:hover {
-    color: white
-
-    &:before {
-      transform: scaleX(1)
-      transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66)
-    }
-  }
-}
+  .content
+    display: -webkit-box
+    -webkit-line-clamp: 3
+    -webkit-box-orient: vertical
+    overflow: hidden
+    height: 90px
 
 .layout_page
   display: flex 
@@ -130,8 +76,6 @@ a.article-meta__categories
   align-items: flex-start
   padding: 0 15px
 
-#recent-posts
-    width: 75%
 
 #page,.category-content,.flink
   padding: 40px 44px 44px
@@ -147,31 +91,32 @@ a.article-meta__categories
 .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)
 
-#page_site-info
-  padding: 10rem 1rem 7rem
-  #site-title
-    font-family: PingFang SC, Hiragino Sans GB, "Microsoft JhengHei", "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif
+
+
+@media screen and (min-width: 900px) 
+  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
+  #page,.category-content,#archive,.tag-cloud,.flink,#tag,#category
       width: 100% !important
 
-    // .recent-post-info 
-    //   padding: 40px 30px 20px
-
 
 @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
+    width: 100% !important
+    height: 230px !important
+    border-radius: 8px !important
            
   .recent-post-item,#page,.tag-cloud,.flink
     margin-top: 1px
@@ -203,41 +148,32 @@ a.article-meta__categories
       -webkit-box-shadow: none
       box-shadow: none
       
-    
   .layout_page
     padding: 0 !important
   
   #aside_content
     display: none !important
-    // .card_widget
-    //   box-shadow: none
-    //   border-radius: 0
-    //   border-top: 1px dashed #a4d8fa
-
-    //   &:hover
-    //     box-shadow: none
-
 
   .category-lists
     padding: 0
   
+  #recent-posts
+    .recent-post-info 
+      padding: 20px 10px !important
+      width: 100%
 
+    #pagination
+      margin-bottom: 0
 
-  .recent-post-info 
-    padding: 20px 10px !important
-    width: 100%
+  #nav 
+    #site-social-icons
+      display: block
 
-  #recent-posts #pagination
-    margin-bottom: 0
+    &.not_index_bg
+      height: 14rem
 
-  .more_setting
-    display: block !important
-
-  #nav #site-social-icons
-    display: block
-
-  #page_site-info
-    padding: 7rem 1rem 5rem
+    #page_site-info
+      top: 7rem
   
   #top-container
     height: 14rem
@@ -254,122 +190,113 @@ a.article-meta__categories
     display: none !important
 
 
-
 .layout_page,
 .layout_post,
 footer
-  animation: main 1s;
+  animation: main 1s
 
 #nav,
-#top-container
+#top-container,
+#page-header
   animation: header 1s
 
 #site-title
   animation: titlescale 1s
 
-.search-dialog
-  transition: all .2s
+canvas,
+#web_bg
+  animation: to_show 4s
+
+.card-announcement-animation
+  animation: announ_animation .8s linear infinite
+  color: #FF0000
 
 .scroll-down-effects
-  -webkit-animation: pulse 1.5s infinite
-  animation: pulse 1.5s infinite
-  // font-size: 28px
-  position: absolute
-  color: #fff
+  animation: scroll-down-effect 1.5s infinite
 
-.is_hidden
-  overflow: hidden
-@keyframes pulse{
+if hexo-config("avatar_effect") == true
+  .avatar_img
+    animation: avatar_turn_around 2s linear infinite
 
-  0%,to{
-    // -ms-filter:"alpha(opacity=40)"
-    // filter:alpha(opacity=40)
-    opacity:.4
-    top:0}
-  50%{
-    // -ms-filter:none
-    // -webkit-filter:none
-    // filter:none
-    opacity:1
-    top:-16px}
-    }
+.reward-main
+  animation: donate_effcet .3s .1s ease both
 
-@keyframes header {
-  0% {
-  opacity: 0;
-  transform: translateY(-50px)
-}
-100% {
-  opacity: 1;
-  transform: translateY(0)
-}
+.rightside-in
+  animation: rightside_in_animate .3s
+  display: block !important
 
-}
+@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 main
+  0% 
+    opacity: 0
+    transform: translateY(50px)
+  100% 
+    opacity: 1
+    transform: translateY(0)
 
-@keyframes titlescale{
-  
-  0% {
-    // opacity:0;
+@keyframes titlescale
+  0%
+    opacity: 0
     transform: scale(0.7)
-}
-  100% {
-    // opacity:1;
+  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)
 
-.article-container .code_full_page
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  min-width: 100%;
-  z-index: 9999;
-  margin: 0;
-  animation: code_full_page 1s;
+@keyframes sub_menus
+  0%
+    opacity: 0
+    transform: translateY(10px)
+  100%
+    opacity: 1
+    transform: translateY(0)
 
-.code_body
-  overflow: hidden
+@keyframes donate_effcet
+  0%
+    opacity: 0
+    transform: translateY(-20px)
+  100%
+    opacity: 1
+    transform: translateY(0)
 
-@keyframes code_full_page{
-  0%{transform:scale(0)}
-  50%{transform:scale(1)}
-  80%{transform:scale(.98)}
-  100%{transform:scale(1)}}
-
-
-
-@keyframes menu_open{
-  0% {
-    transform: scale(0)
-  }
-  100% {
+@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 menu_close{
-0% {
-  transform: scale(1)
-  display: block
-}
-100% {
-  transform: scale(0)
-  display: none
-}
-}

source/css/var.styl

@@ -7,12 +7,15 @@ $theme-meta-color = #858585
 $theme-link-color = #99a9bf
 $theme-hr-color = #A4D8FA
 $theme-read-mode-bg-color = #FAF9DE
+$inline-code-color = #F47466
 $font-family= Lato, Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif
 $code-font = consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace, Helvetica Neue For Number
 $site-name-font = "Titillium Web", Lato,PingFang SC, Hiragino Sans GB, "Microsoft JhengHei", "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif
 //hr icon
 $hr-icon = '\f0c4'
 $hr-icon-top = -10px
+$title-prefix-icon = '\f0c1'
+$title-prefix-icon-color = #F47466
 
 if hexo-config("theme_color") && hexo-config("theme_color.enable")
   $theme-color = convert(hexo-config("theme_color.main")) || #49B1F5
@@ -23,6 +26,7 @@ if hexo-config("theme_color") && hexo-config("theme_color.enable")
   $theme-meta-color = convert(hexo-config("theme_color.meta_color")) || #858585
   $theme-hr-color = convert(hexo-config("theme_color.hr_color")) || #A4D8FA
   $theme-read-mode-bg-color = convert(hexo-config("theme_color.read-mode-bg_color")) || #FAF9DE
+  $inline-code-color = convert(hexo-config("theme_color.inline-code-color")) || #F47466
 
 if hexo-config("font") && hexo-config("font.enable")
   $font-family = convert(hexo-config("font.font-family")) || 'Lato, Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif'
@@ -36,6 +40,10 @@ if hexo-config("hr") && hexo-config("hr.enable")
   $hr-icon = hexo-config("hr.icon") || '\f0c4'
   $hr-icon-top = convert(hexo-config("hr.icon-top")) || -10px
 
+if hexo-config("post_beautify.enable")
+  $title-prefix-icon = hexo-config("post_beautify.title-prefix-icon") || '\f0c1'
+  $title-prefix-icon-color= convert(hexo-config("post_beautify.title-prefix-icon-color")) || #F47466
+
 
 // Global Variables
 $font-size = 14px
@@ -52,8 +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
@@ -80,6 +89,7 @@ $light-grey = #EEEEEE
 $grey = $theme-meta-color
 $pale-yellow = $theme-read-mode-bg-color
 $white = #FFFFFF
+$whitesmoke   = #f5f5f5;
 $dark-white = #F9F9F9
 $font-black = #4C4948
 $selection = $theme-text-selection-color
@@ -87,7 +97,7 @@ $selection = $theme-text-selection-color
 // code
 $code-font-size = $font-size
 $code-font-family = $font-family
-$code-foreground = $font-color
+$code-foreground = $inline-code-color
 $code-background = rgba(27, 31, 35, 0.05)
 $line-height-code-block = 20px
 $blockquote-color = #6a737d
@@ -104,4 +114,73 @@ $img-border-padding = 4px
 $sidebar-width = 300px
 $sidebar-background = #f6f8fa
 
+// Note colors
+// --------------------------------------------------
+hexo-config('note.light_bg_offset') is a 'unit' ? ($lbg = unit(hexo-config('note.light_bg_offset'),"%")) : ($lbg = 0);
+
+// Default
+$note-default-border        = #777;
+$note-default-bg            = lighten(spin($note-default-border, 0), 94% + $lbg);
+$note-default-text          = $note-default-border;
+$note-default-icon          = "\f0a9";
+
+$note-modern-default-border = #e1e1e1;
+$note-modern-default-bg     = lighten(spin($note-modern-default-border, 10), 60% + ($lbg * 4));
+$note-modern-default-text   = #666;
+$note-modern-default-hover  = darken(spin($note-modern-default-text, -10), 32%);
+
+// Primary
+$note-primary-border        = #6f42c1;
+$note-primary-bg            = lighten(spin($note-primary-border, 10), 92% + $lbg);
+$note-primary-text          = $note-primary-border;
+$note-primary-icon          = "\f055";
+
+$note-modern-primary-border = #e1c2ff;
+$note-modern-primary-bg     = lighten(spin($note-modern-primary-border, 10), 40% + ($lbg * 4));
+$note-modern-primary-text   = #6f42c1;
+$note-modern-primary-hover  = darken(spin($note-modern-primary-text, -10), 22%);
+
+// Info
+$note-info-border           = #428bca;
+$note-info-bg               = lighten(spin($note-info-border, -10), 91% + $lbg);
+$note-info-text             = $note-info-border;
+$note-info-icon             = "\f05a";
+
+$note-modern-info-border    = #b3e5ef;
+$note-modern-info-bg        = lighten(spin($note-modern-info-border, 10), 50% + ($lbg * 4));
+$note-modern-info-text      = #31708f;
+$note-modern-info-hover     = darken(spin($note-modern-info-text, -10), 32%);
+
+// Success
+$note-success-border        = #5cb85c;
+$note-success-bg            = lighten(spin($note-success-border, 10), 90% + $lbg);
+$note-success-text          = $note-success-border;
+$note-success-icon          = "\f058";
+
+$note-modern-success-border = #d0e6be;
+$note-modern-success-bg     = lighten(spin($note-modern-success-border, 10), 40% + ($lbg * 4));
+$note-modern-success-text   = #3c763d;
+$note-modern-success-hover  = darken(spin($note-modern-success-text, -10), 27%);
+
+// Warning
+$note-warning-border        = #f0ad4e;
+$note-warning-bg            = lighten(spin($note-warning-border, 10), 88% + $lbg);
+$note-warning-text          = $note-warning-border;
+$note-warning-icon          = "\f06a";
+
+$note-modern-warning-border = #fae4cd;
+$note-modern-warning-bg     = lighten(spin($note-modern-warning-border, 10), 43% + ($lbg * 4));
+$note-modern-warning-text   = #8a6d3b;
+$note-modern-warning-hover  = darken(spin($note-modern-warning-text, -10), 18%);
+
+// Danger
+$note-danger-border         = #d9534f;
+$note-danger-bg             = lighten(spin($note-danger-border, -10), 92% + $lbg);
+$note-danger-text           = $note-danger-border;
+$note-danger-icon           = "\f056";
+
+$note-modern-danger-border  = #ebcdd2;
+$note-modern-danger-bg      = lighten(spin($note-modern-danger-border, 10), 35% + ($lbg * 4));
+$note-modern-danger-text    = #a94442;
+$note-modern-danger-hover   = darken(spin($note-modern-danger-text, -10), 22%);
 

source/js/main.js

@@ -1,5 +1,9 @@
 $(function () {
-  if ($('#sidebar').hasClass('auto_open') ) {
+
+  /**
+   * 進入post頁sidebar自動打開
+   */
+  if ($('#sidebar').hasClass('auto_open')) {
     if ($(".sidebar-toc__content").children().length > 0) {
       $(".layout_post").animate({}, function () {
         {
@@ -9,11 +13,11 @@ $(function () {
             $('body').animate({
               paddingLeft: 300
             }, 200)
-            $('#sidebar').animate({}, function () {
-              $('#sidebar').css({
-                'transform': 'translateX(300px)'
-              }, 200)
-            })
+
+            $('#sidebar').animate({
+              left: 0
+            }, 200)
+
             $('#toggle-sidebar').animate({}, function () {
               $('#toggle-sidebar').css({
                 'transform': 'rotateZ(180deg)',
@@ -32,8 +36,9 @@ $(function () {
   }
 
 
-  //-------------------------------------------------------------------------------------------------------
-  //sidebar
+  /**
+   * 點擊左下角箭頭,顯示sidebar
+   */
   $('#toggle-sidebar').on('click', function () {
 
     if (!isMobile() && $('#sidebar').is(':visible')) {
@@ -45,11 +50,9 @@ $(function () {
           paddingLeft: 0
         }, 200)
 
-        $('#sidebar').animate({}, function () {
-          $('#sidebar').css({
-            'transform': 'translateX(0px)'
-          })
-        })
+        $('#sidebar').animate({
+          left: -300
+        }, 200)
 
         $('#toggle-sidebar').animate({}, function () {
           $('#toggle-sidebar').css({
@@ -63,11 +66,11 @@ $(function () {
         $('body').animate({
           paddingLeft: 300
         }, 200)
-        $('#sidebar').animate({}, function () {
-          $('#sidebar').css({
-            'transform': 'translateX(300px)'
-          })
-        })
+
+        $('#sidebar').animate({
+          left: 0
+        }, 200)
+
         $('#toggle-sidebar').animate({}, function () {
           $('#toggle-sidebar').css({
             'transform': 'rotateZ(180deg)',
@@ -78,24 +81,25 @@ $(function () {
     }
   })
 
-  //-----------------------------------------------------------------------------------------------------
-  // 首页fullpage添加
-  // 添加class 
+  /**
+   * 首頁fullpage添加
+   * 添加class
+   */
   if (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)) {} else {
-    $('.full_page').css('background-attachment', 'fixed')
+    $('.full_page .nav_bg').css('background-attachment', 'fixed');
   }
 
-  //---------------------------------------------------------------------------------------------------------
-  
+  /**
+   * 首頁top_img底下的箭頭
+   */
   $(".scroll-down").on("click", function () {
-
     scrollTo('#content-outer')
-
   });
 
 
-  //--------------------------------------------------------------------------------------------------------
-  // bookmark
+  /**
+   * BOOKMARK 書簽
+   */
   $.fancyConfirm = function (opts) {
     opts = $.extend(true, {
       title: 'Are you sure?',
@@ -110,7 +114,7 @@ $(function () {
       src: '<div class="fc-content">' +
         '<h3>' + opts.title + '</h3>' +
         '<p>' + opts.message + '</p>' +
-        '<p class="tright">' +
+        '<p class="is_right">' +
         '<button data-value="1" data-fancybox-close class="bookmark-ok">' + opts.okButton + '</button>' +
         '</p>' +
         '</div>',
@@ -148,13 +152,14 @@ $(function () {
       }
     });
 
-  //-------------------------------------------------------------------------------------------------------
-  //代码copy
-  // Add copy icon
+  /**
+   * 代碼copy
+   * Add copy icon
+   */
+  $('figure.highlight').wrap('<div class="code-area-wrap"></div>')
 
   var highlight_copy = GLOBAL_CONFIG.highlight_copy
   if (highlight_copy == 'true') {
-    $('figure.highlight').wrap('<div class="code-area-wrap"></div>')
     var $copyIcon = $('<i class="fa fa-clipboard" aria-hidden="true"></i>')
     var $notice = $('<div class="copy-notice"></div>')
     $('.code-area-wrap').prepend($copyIcon)
@@ -209,21 +214,70 @@ $(function () {
       selection.removeAllRanges()
     })
   }
-  //---------------------------------------------------------------------------------------------------
-  //fancybox
+
+  /**
+   * 代碼框語言識別
+   */
+  var highlight_lang = GLOBAL_CONFIG.highlight_lang
+  if (highlight_lang == 'true') {
+    var $highlight_lang = $('<div class="code_lang"></div>')
+    $('figure').before($highlight_lang)
+    var lang_name_index
+    var lang_name
+    $('figure').each(function () {
+      lang_name_index = lang_name = $(this).attr('class').split(' ')[1];
+      if (lang_name_index == 'js')
+        lang_name = 'javascript'
+      if (lang_name_index == 'md')
+        lang_name = 'markdown'
+      if (lang_name_index == 'plain')
+        lang_name = 'code'
+      if (lang_name_index == 'py')
+        lang_name = 'python'
+
+      $(this).siblings(".code_lang").text(lang_name)
+
+    })
+  }
+  /**
+   * 代碼收縮
+   */
+  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>')
+  } else {
+    var $code_expand = $('<i class="fa fa-angle-down code-expand" aria-hidden="true"></i>')
+  }
+  $('.code-area-wrap').prepend($code_expand)
+  $('.code-area-wrap .code-expand').on('click', function () {
+    if ($(this).hasClass('code-closed')) {
+      $(this).siblings('figure').find('table').show();
+      $(this).removeClass('code-closed');
+    } else {
+      $(this).siblings('figure').find('table').hide();
+      $(this).addClass('code-closed');
+    }
+  })
+
+  /**
+   * fancybox
+   */
   var imgList = $(".recent-post-info  img").not('.no-fancybox');
   if (imgList.length === 0) {
     imgList = $("#post-content img").not('.no-fancybox');
   }
 
   for (var i = 0; i < imgList.length; i++) {
+    var lazyload_src = imgList[i].src ? imgList[i].src : imgList.eq(i).attr("data-src")
+
     var $a = $(
       '<a href="' +
-        imgList[i].src +
-        '" data-fancybox="group" data-caption="' +
-        imgList[i].alt +
-        '" class="fancybox"></a>'
+      lazyload_src +
+      '" data-fancybox="group" data-caption="' +
+      imgList[i].alt +
+      '" class="fancybox"></a>'
     )
+
     var alt = imgList[i].alt
     var $wrap = $(imgList[i]).wrap($a)
     if (alt) {
@@ -261,98 +315,68 @@ $(function () {
 
   });
 
-  //--------------------------------------------------------------------------------------------------------
-  //lazy懶加載
-  //把img的src删除，添加data-src,用于lozad.js
-  var $img = $("#post img");
-  $img.addClass("lozad");
-  $img.each(function () {
-    var src_link = $(this).attr("src");
-    $(this).attr("data-src", src_link);
-    $(this).removeAttr("src");
-  })
-
-  const observer = lozad(); // lazy loads elements with default selector as '.lozad'
-  observer.observe();
-
-  //---------------------------------------------------------------------------------------------------------
-  /** 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");
-      $("#page-header #site-name,#page-header .search").css({'color':'#3b3a3a','text-shadow': 'none'})
-      $(".toggle-menu *").css({ 'background-color': '#3b3a3a', 'text-shadow': 'none' });
-      $('body').addClass("is_hidden");
-      $('.menus').addClass("menu_open");
-      fixbg_menu();
-    } else {
-      $(".toggle-menu").removeClass("close").addClass("open");
-      $("#page-header #site-name,#page-header .search").css({ 'color': '', 'text-shadow': '' });
-      $(".toggle-menu *").css({ 'background-color': '', 'text-shadow': '' });
-      $('body').removeClass("is_hidden");
-      $('.menus').removeClass("menu_open").addClass('menu_close');
-      setTimeout(function () {
-        $('.menus').removeClass("menu_close")
-        
-      }, 300)
+      $('body').removeClass("open-mobile-menus");
+      $('#menu_mask').fadeOut()
     }
-  })
 
-  function fixbg_menu() {
-    const fixScroll = (scrollEl) => {
-      let startY
-      scrollEl.addEventListener('touchstart', function (event) {
-        // 如果多於1根手指點擊屏幕,則不處理
-        if (event.targetTouches.length > 1) {
-          return
-        }
-        // 儲存手指的初始位置
-        startY = event.targetTouches[0].clientY
-      }, false)
-      scrollEl.addEventListener('touchmove', function (event) {
-        if (event.targetTouches.length > 1) {
-          return
-        }
-        // 判斷手指滑動方向, y大於0時向下滑動, 小於0時向上滑動
-        const y = event.targetTouches[0].clientY - startY
-        // 如果到頂時繼續向下拉
-        if (scrollEl.scrollTop <= 0 && y > 0) {
-          // 重置滾動距離為最小值
-          scrollEl.scrollTop = 0
-          // 阻止滾動
-          event.preventDefault()
-        }
-        // 如果到底時繼續上滑  
-        const maxScrollTop = scrollEl.scrollHeight - scrollEl.clientHeight
-        if (maxScrollTop - scrollEl.scrollTop <= 0 && y < 0) {
-          scrollEl.scrollTop = maxScrollTop
-          event.preventDefault()
-        }
-      }, {
-          passive: false
-        })
-    }
-    const scrollEl = document.querySelector(".menus");
-    fixScroll(scrollEl)
   }
 
+  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();
+    }
+
+  })
+
+  $('#mobile-toc-button').on('click', function () {
+    if ($("#mobile-toc-button").hasClass("close")) {
+      $("#mobile-toc-button").removeClass("close").addClass("open");
+      $('body').addClass("open-mobile-toc");
+      $('#menu_mask').fadeIn();
+    }
+
+  })
+
+  $('#menu_mask').on('click touchstart', function () {
+    mobile_menu_close()
+    mobile_toc_close()
+  })
 
   $(window).on('resize', function (e) {
     if (!$('.toggle-menu').is(':visible')) {
-      if ($(".toggle-menu").hasClass("close")) {
-      $(".toggle-menu").removeClass("close").addClass("open");
-      $("#page-header #site-name,#page-header .search").css({ 'color': '', 'text-shadow': '' });
-      $(".toggle-menu *").css({ 'background-color': '', 'text-shadow': '' });
-      $('body').removeClass("is_hidden");
-      $('.menus').removeClass("menu_open");
+      mobile_menu_close()
     }
+    if (!$('#mobile-toc-button').is(':visible')) {
+      mobile_toc_close()
     }
+
   })
 
-  //---------------------------------------------------------------------------------------------------------
-  /** scroll 滚动 toc*/
+  //點擊toc，收起sidebar
+  $("#mobile-sidebar-toc a").on('click', function () {
+    mobile_toc_close()
+  })
+
+  /**
+   *  scroll 滚动 toc
+   */
   var initTop = 0
   $('.toc-child').hide()
 
@@ -364,58 +388,42 @@ $(function () {
       scrollPercent(currentTop)
       // 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()
-        } else {
-          $('#page-header').hasClass('visible') ? console.log() : $('#page-header').addClass('visible')
-        }
-        $('#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({
-              'opacity': '1',
-              'transform': 'translateX(-38px)'
-            })
-          })
-        }
-
+    if (currentTop > 56) {
+      if (isUp) {
+        $('#page-header').hasClass('visible') ? $('#page-header').removeClass('visible') : console.log()
 
       } else {
-        if (currentTop === 0) {
-          $('#page-header').removeClass('fixed').removeClass('visible')
-        }
-
-        $('#go-up').animate({}, function () {
-          $('#go-up').css({
-            'opacity': '0',
-            'transform': 'translateX(0) rotateZ(180deg) '
-          })
-        })
+        $('#page-header').hasClass('visible') ? console.log() : $('#page-header').addClass('visible')
+      }
+      $('#page-header').addClass('fixed')
 
+      if ($('#rightside').css('opacity') === '0') {
         $('#rightside').animate({}, function () {
-          $('#rightside').css({
-            'opacity': '0',
-            'transform': 'translateX(0)'
+          $(this).css({
+            'opacity': '1',
+            'transform': 'translateX(-38px)'
           })
         })
       }
+    } else {
+      if (currentTop === 0) {
+        $('#page-header').removeClass('fixed').removeClass('visible')
+      }
+
+      $('#rightside').animate({}, function () {
+        $('#rightside').css({
+          'opacity': '',
+          'transform': ''
+        })
+      })
+
     }
+
   }, 50, 100))
 
   // go up smooth scroll
@@ -424,9 +432,9 @@ $(function () {
   })
 
   // head scroll
-  $('#post-content').find('h1,h2,h3,h4,h5,h6').on('click', function (e) {
-    scrollToHead('#' + $(this).attr('id'))
-  })
+  // $('#post-content').find('h1,h2,h3,h4,h5,h6').on('click', function (e) {
+  //   scrollToHead('#' + $(this).attr('id'))
+  // })
 
   // head scroll
   $('.toc-link').on('click', function (e) {
@@ -520,52 +528,137 @@ $(function () {
         .find('.toc-child').hide()
     }
 
-    if ($('.toc-link').hasClass('active')){
-      var active_position = $(".active").offset().top;
-      var sidebar_scrolltop = $("#sidebar").scrollTop();
-      if (active_position > (top + $(window).height() - 50)) {             
-        $("#sidebar").scrollTop(sidebar_scrolltop + 100);
-      } else if (active_position < top + 50)
-      {
-        $("#sidebar").scrollTop(sidebar_scrolltop - 100);
-        }
-    }
-
   }
 
-  //代碼框雙擊全屏
-  $('figure').on('dblclick', function (e) {
-    if (e.target !== this)
-      return;
-    $(this).toggleClass('code_full_page');
-    $('body').toggleClass('code_body');
-  });
+  function auto_scroll_toc(currentTop) {
+    if ($('.toc-link').hasClass('active')) {
+      var active_position = $(".active").offset().top;
+      var sidebar_scrolltop = $("#sidebar").scrollTop();
+      if (active_position > (currentTop + $(window).height() - 50)) {
+        $("#sidebar").scrollTop(sidebar_scrolltop + 100);
+      } else if (active_position < currentTop + 50) {
+        $("#sidebar").scrollTop(sidebar_scrolltop - 100);
+      }
+    }
+  }
 
-
-  //閲讀模式
+  /**
+   * 閲讀模式
+   */
   $("#readmode").click(function () {
-
     if (Cookies.get("night-mode") == "night") {
       $('body').toggleClass('night-mode');
       $('body').toggleClass('read-mode');
-      $('#font_plus,#font_minus').toggleClass('is_visible');
-
+      $('#to_comment').toggleClass('is_invisible');
     } else {
       $('body').toggleClass('read-mode');
-      $('#font_plus,#font_minus').toggleClass('is_visible');
+      $('#to_comment').toggleClass('is_invisible');
     }
-
   });
 
-
-  //閲讀模式下字體調整
+  /**
+   * 字體調整
+   */
   $("#font_plus").click(function () {
     var font_size_record = parseFloat($('body').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', pre_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 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', pre_size_record - 1)
+    $('code').css('font-size', code_size_record - 1)
   });
+
+  /**
+   * sub-menus 位置調整
+   */
+
+  if ($(window).width() > 768) {
+    $('.menus_item_child').each(function () {
+      var a_width = $(this).siblings('a').outerWidth(true);
+      var child_width = $(this).outerWidth(true);
+      $(this).css("margin-left", -(child_width / 2 - a_width / 2))
+    })
+  }
+
+  /**
+   * 手機端sub-menu 展開/收縮
+   */
+  $('.menus-expand').on('click', function () {
+    if ($(this).hasClass('menus-closed')) {
+      $(this).parents('.menus_item').find('.menus_item_child').show();
+      $(this).removeClass('menus-closed');
+    } else {
+      $(this).parents('.menus_item').find('.menus_item_child').hide();
+      $(this).addClass('menus-closed');
+    }
+  })
+
+  /**
+   * rightside 點擊設置 按鈕 展開
+   */
+  $('#rightside_config').on('click', function () {
+    $('#rightside-config-hide').toggleClass("rightside-in")
+  })
+  
+  /**
+   * 調正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);
+      }
+    }
+  }
+
 });

source/js/nightshift.js

@@ -11,6 +11,10 @@ $(function () {
   }
 
   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");

source/js/search/algolia.js

@@ -7,7 +7,7 @@ $(function () {
       $('.search-dialog').css({
         'display': 'block',
         'animation': 'titlescale 0.5s'
-      })
+      }),300
     })
 
     $('.ais-search-box--input').focus()

source/js/search/local-search.js

@@ -7,7 +7,7 @@ $(function () {
       $('.search-dialog').css({
         'display': 'block',
         'animation': 'titlescale 0.5s'
-      })
+      }),300
     })
           $('#local-search-input input').focus()
   

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

@@ -0,0 +1,11 @@
+!function(){
+	var userAgentInfo = navigator.userAgent;
+    var Agents = ["iPad", "iPhone", "Android", 
+          "SymbianOS", "Windows Phone",
+           "iPod", "webOS", "BlackBerry", "IEMobile"];
+    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 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)}();