1. Feature: 可設置内联代码块样式 #26

2. Feature: 可設置夜間模式作爲默認樣式 3. Feature: 可設置是否顯示code language名稱 4. Feature: 可設置是否展開或關閉代碼框 5. Feature: 可設置背景圖片/顔色 6. Feature: 可設置是否顯示footer背景 7. Feature: 增加 canvas-nest.js 8. Feature: 頭像可設置效果(轉圈圈) 9. Feature: menu可設置分組 9. Fix: 優化打賞和搜索打開特效 10. Fix: 優化sidebar的打開特效，避免與文章頁特效不同步 11. Fix: 適配**hexo-blog-encrypt**，現在可以顯示toc 12. Fix: 修復設置不顯示評論時，直達評論按鈕沒有消失的bug 13. Fix: 修復post頁底欄，當沒有顯示評論，不顯示TOC，評論和toc都不顯示這三種狀態下按鈕的bug 14. Fix: 修復代碼框左右滑動時，代碼名字跟著滑動的bug 15. Fix: 其他page頁標題的字體顯示 16. Fix: 修復當設置開啓canvas_ribbons，進入網站會先顯示canvas_ribbons的bug 17. Fix: 完善夜間模式下，字體顯示問題 18. Fix: 修復代碼框複製和代碼名 z-index bug #25 19. Fix: 完善阅读模式
1. 更改版本號
2026-04-16 20:30:53 +08:00 · 2019-09-08 16:17:07 +08:00 · 2019-08-29 01:22:23 +08:00 · 2019-08-29 01:18:39 +08:00 · 2019-08-29 01:09:28 +08:00 · 2019-08-16 23:33:56 +08:00
70 changed files with 2021 additions and 3466 deletions
--- a/README.md
+++ b/README.md
@@ -12,10 +12,10 @@
 git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
 ```

-如果想要安装比较新的dev分支，可以
+如果想要安裝比較新的dev分支，可以

 ```
-git clone -b div https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
+git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
 ```

 ## 应用主题
@@ -29,8 +29,7 @@ theme: Butterfly

 ## 文档

-可查看[这里](https://jerryc.me/posts/21cfbf15)
-
+可查看或[这里](https://docs.jerryc.me/)或[这里](https://jerryc.me/posts/21cfbf15)


 ## 截图
--- a/_config.yml
+++ b/_config.yml
@@ -3,13 +3,15 @@
 # ---------------
 # theme_color:
 #   enable: true
-#   main: "#7A7FF1"
-#   paginator: "#7A7FF1"
+#   main: "#49B1F5"
+#   paginator: "#00c4b6"
 #   button_hover: "#FF7242"
-#   text_selection: "#69c46d"
-#   link_color: "#858585"
+#   text_selection: "#00c4b6"
+#   link_color: "#99a9bf"
+#   meta_color: '#858585'
 #   hr_color: "#A4D8FA"
 #   read-mode-bg_color: '#FAF9DE'
+#   inline-code-color: '#F47466'

 # Main menu navigation
 # format: xxx: /xxx/||icon
@@ -45,11 +47,13 @@ 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
+# social settings
 # formal: 
 #   icon: link
 # ---------------
@@ -57,6 +61,7 @@ social:
  fa fa-github: https://github.com/jerryc127
  fa fa-rss: /atom.xml

+####    search    ####
 # Algolia search
 # ---------------
 algolia_search:
@@ -69,7 +74,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 +99,7 @@ katex:
  hide_scrollbar: true


-
-# Analysis
+####   Analysis    ####
 # ---------------
 # baidu_analytics: 

@@ -121,14 +124,11 @@ cdn:
  css:
    fontawesome: https://cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css
    # fontawesomeV5: https://use.fontawesome.com/releases/v5.8.1/css/all.css
-    googlefont: https://fonts.googleapis.com/css?family=Titillium+Web
    fancybox: https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css
  js:
    jquery: https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js
    fancybox: https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js
    js-cookies: https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js
-    lozy: https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js
-

 # Post info settings
 # ---------------
@@ -154,7 +154,6 @@ 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 是否显示分类
@@ -177,13 +176,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:
@@ -204,8 +204,8 @@ addtoany:
    - email
    - copy_link

-# Comments System
-# ---------------
+####   Comments System    ####
+# ------------------------------------
 disqus:
  enable: false
  shortname: 
@@ -241,12 +241,12 @@ valine:
  verify: false # valine verify code (true/false)
  pageSize: 10 # comment list page size
  avatar: monsterid # gravatar style https://valine.js.org/#/avatar
-  lang: en # i18n: zh-cn/en/tw
+  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

-# Footer Settings
-# ---------------
+#####     Footer Settings    ####
+# ------------------------------------
 since: 2018

 footer_custom_text:
@@ -259,15 +259,8 @@ ICP:
  url: 
  text:

-# busuanzi count for PV / UV in site
-busuanzi:
-  site_uv: true
-  site_pv: true
-  page_pv: true
-
-
-

+####    站長驗證    ####
 # Google Webmaster tools verification setting
 # See: https://www.google.com/webmasters/
 google_site_verification:
@@ -276,10 +269,6 @@ google_site_verification:
 # See: https://www.bing.com/webmaster/
 bing_site_verification:

-# Yandex Webmaster tools verification setting
-# See: https://webmaster.yandex.ru/
-#yandex_site_verification:
-
 # Baidu Webmaster tools verification setting
 # See: https://ziyuan.baidu.com/site/
 baidu_site_verification:
@@ -288,6 +277,8 @@ baidu_site_verification:
 # see http://zhanzhang.so.com/
 qihu_site_verification:

+
+# 友情鏈接界面設置 
 Flink:
  headline: 友情鏈接
  info_headline: 我的Blog資料
@@ -297,25 +288,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:
@@ -326,11 +299,26 @@ reward:
        img: /img/alipay.jpg
        text: 支付寶

+# 推薦文章
 related_post:
  enable: true
  limit: 6 # 顯示推薦文章數目

-# canvas_ribbon
+####    美化/效果    ####
+#--------------------------------
+
+# 設置網站背景
+# 可設置圖片 或者 顔色
+# 圖片格式 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: false
@@ -339,37 +327,75 @@ canvas_ribbon:
  zIndex: -1
  click_to_change: false

-
+# 動態彩帶
 canvas_ribbon_piao:
-  enable: true
+  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

+# 網站名字字體
+# 左上角網站名字 主頁居中網站名字
+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
+
+# 水平分隔綫
+hr:
+  enable: false
+  icon: '\f21c' #fontawesome上圖標的Unicode
+  icon-top: -20px
+
 # 主頁subtitle
+# 打字效果
 subtitle: 
  enable: true
  sub1: 今日事,今日畢
-  sub2: Never put off till tomorrow what you can do today
+  sub2: 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
@@ -378,28 +404,94 @@ 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
  # 默認按鈕顯示文字
-  default: 簡
+  default: 繁
  #网站默认语言，1: 繁體中文, 2: 简体中文
-  defaultEncoding: 1
+  defaultEncoding: 2
  #延迟时间,若不在前, 要设定延迟翻译时间, 如100表示100ms,默认为0
  translateDelay: 0
  #博客网址
-  cookieDomain: "https://jerryc.me/"
+  cookieDomain: "https://xxx/"
  #當文字是簡體時，按鈕顯示的文字
  msgToTraditionalChinese: "繁"
  #當文字是繁體時，按鈕顯示的文字
  msgToSimplifiedChinese: "简"

+# 夜間模式
+nightshift:
+  enable: true

-# 鼠標點擊效果
-fireworks:
-  enable: false
+#閲讀模式
+readmode:
+  enable: true
+
+
+####    other     ####
+#------------------------------------------------

 #百度推送
 baidu_push:
-  enable: false
+  enable: false
+
+# 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
--- a/doc_CN.md
+++ b/doc_CN.md
--- a/doc_TW.md
+++ b/doc_TW.md
--- a/languages/default.yml
+++ b/languages/default.yml
@@ -19,7 +19,7 @@ page:

 sticky: Sticky
 no_title: No title
-read_more: Read more
+archives: Archives

 post:
  created: Created
@@ -50,7 +50,6 @@ pagination:
  next: Next Post

 comment: Comment
-relatedPosts_headline: Recommend

 aside:
  articles: Articles
--- a/languages/en.yml
+++ b/languages/en.yml
@@ -19,7 +19,7 @@ page:

 sticky: Sticky
 no_title: No title
-read_more: Read more
+archives: Archives

 post:
  created: Created
@@ -50,7 +50,6 @@ pagination:
  next: Next Post

 comment: Comment
-relatedPosts_headline: Recommend

 aside:
  articles: Articles
--- a/languages/zh-CN.yml
+++ b/languages/zh-CN.yml
@@ -19,7 +19,7 @@ page:

 sticky: 置顶
 no_title: 无题
-read_more: 阅读更多
+archives: 时间轴

 post:
  created: 发表于
@@ -51,7 +51,6 @@ pagination:
  next: 下一篇

 comment: 评论
-relatedPosts_headline: 相关推荐

 aside:
  articles: 文章
--- a/languages/zh-TW.yml
+++ b/languages/zh-TW.yml
@@ -20,15 +20,11 @@ page:
 sticky: 置頂
 no_title: 無題
 archives: 時間軸
-read_more: 閲讀更多
-created_date: 發表於
-update_date: 更新於

 post:
  created: 發表於
  updated: 更新於
  wordcount: 字數總計
-  commentcount: 評論數
  min2read: "閲讀時長: %s 分鐘"
  page_pv: 閲讀量
  copyright:
@@ -56,7 +52,6 @@ pagination:
  next: 下一篇

 comment: 評論
-relatedPosts_headline: 相關推薦

 aside:
  articles: 文章
--- a/layout/archive.pug
+++ b/layout/archive.pug
@@ -8,4 +8,4 @@ block content
    +articleSort(page.posts)
    include includes/pagination.pug
  #aside_content.aside_content
-      include includes/aside.pug
+    include includes/aside.pug
--- a/layout/flink.pug
+++ b/layout/flink.pug
@@ -6,7 +6,10 @@
        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 alt=item.name 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
--- a/layout/includes/additional-js.pug
+++ b/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')) 

@@ -57,7 +60,7 @@ if is_home()
        e[i].style.height = n + "px";
        $("#site-info").each(function () {
          var x = $(this).height();
-          $(this).css("top", (n-x)/2)
+          $(this).css("top", (n-x)/2)       
        })
    }

@@ -87,5 +90,12 @@ 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")
-  
-script(src="https://cdn.jsdelivr.net/npm/instant.page@1.2.2/instantpage.min.js" type="module")
+
+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();
--- a/layout/includes/aside.pug
+++ b/layout/includes/aside.pug
@@ -1,132 +1,21 @@
 if theme.aside.card_author
-  .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
-
-      .post_data.data_config
-        if site.posts.length
-          .data-item.text-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_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_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'
-        
-    
-    
-      if(theme.social)
-        .post_data.data_config
-          #aside-social-icons 
-            each url, icon in theme.social
-              a.social-icon.data-item(href=url target="_blank")
-                i(class=icon)
+  include widget/card_author.pug

 if theme.aside.card_announcement
-  .card_widget.card-announcement
-    .card-content
-      .item_headline
-        i.fa.fa-bullhorn.card-announcement-animation(aria-hidden="true")
-        span= _p('aside.card_announcement')
-      .announcement_content= theme.announcement.content
+  include widget/card_announcement.pug

 if theme.aside.card_recent_post
-  .card_widget.card-recent-post
-    .card-content
-      .item_headline
-        i.fa.fa-history(aria-hidden="true")
-        span= _p('aside.card_recent_post')
-      .aside_recent_item
-        - site.posts.sort('date', -1).limit(5).each(function(article){
-          .aside_recent_post
-            - var link = article.link || article.path
-              a(href=url_for(link))
-                - var post_cover = article.cover
-                - var default_post_cover = theme.default_cover
-                .aside_post_cover
-                  if (post_cover)
-                    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'))
-                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)
-                    - var date_type = theme.post_meta.date_type == 'updated' ? 'updated' : 'date'
-                    time.aside_post_meta.post-meta__date #[=date(article[date_type], config.date_format)]
-      
-        - })
-
+  include widget/card_recent_post.pug
+  
 if theme.aside.card_categories   
-  .card_widget.card-categories
-    .card-content
-      .item_headline
-        i.fa.fa-folder-open(aria-hidden="true")
-        span= _p('aside.card_categories')
-      ul.aside_category_item
-        - site.categories.sort('name').each(function(category){
-          li.aside_category_list
-            a.aside_category_list_link(href='/' + `${category.path}`)
-              span.aside_category_list_name= category.name
-              span.aside_category_list_length= category.length
-        - })
+  include widget/card_categories.pug

 if theme.aside.card_tags
-  .card_widget.card-tags
-    .card-content
-      .item_headline
-        i.fa.fa-tags(aria-hidden="true")
-        span= _p('aside.card_tags')
-      .card-tag-cloud!= tagcloud({min_font: 16, max_font: 24, amount: 200, color: true, start_color: '#999', end_color: '#000'})
+  include widget/card_tags.pug

 if theme.aside.card_archives
-  .card_widget.card-archives
-    .card-content
-      .item_headline
-        i.fa.fa-archive(aria-hidden="true")
-        span= _p('aside.card_archives')
-      div.archives_item!= list_archives({type:'monthly',format: 'YYYY年MM月'})
+  include widget/card_archives.pug

 if theme.aside.card_webinfo
-  .card_widget.card-webinfo
-    .card-content
-      .item_headline
-          i.fa.fa-line-chart(aria-hidden="true")
-          span= _p('aside.card_webinfo.headline')
-      .webinfo
-        .webinfo_item
-          .webinfo_article_name= _p('aside.card_webinfo.article_name') + " :"
-          .webinfo_article_count= site.posts.length      
-        if theme.runtimeshow.enable
-          .webinfo_item
-            .webinfo_runtime_name= _p('aside.card_webinfo.runtime_name') + " :"
-            #webinfo_runtime_count.webinfo_runtime_count
-            script#runtionshow(src=url_for('js/runtimeshow.js') start_date=theme.runtimeshow.start_date)       
-        
-        if theme.busuanzi.site_uv 
-          .webinfo_item       
-            .webinfo_site_uv_name= _p('aside.card_webinfo.site_uv_name') + " :"
-            .webinfo_site_uv_count#busuanzi_value_site_uv
-        if theme.busuanzi.site_pv
-          .webinfo_item
-            .webinfo_site_name= _p('aside.card_webinfo.site_pv_name') + " :"
-            .webinfo_site_pv_count#busuanzi_value_site_pv
-
+  include widget/card_webinfo.pug
+  
--- a/layout/includes/comments/disqus.pug
+++ b/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;
@@ -10,6 +10,4 @@ if theme.disqus.enable
    var d = document, s = d.createElement('script');
    s.src = "https://" + '!{theme.disqus.shortname}' +".disqus.com/embed.js";
    s.setAttribute('data-timestamp', '' + +new Date());
-    (d.head || d.body).appendChild(s);
-  if theme.disqus.count
-    script#dsq-count-scr(src="https://" + theme.disqus.shortname + ".disqus.com/count.js" async)
+    (d.head || d.body).appendChild(s);
--- a/layout/includes/comments/gitalk.pug
+++ b/layout/includes/comments/gitalk.pug
@@ -1,13 +1,13 @@
-if theme.gitment && theme.gitment.enable
-  #gitment-container
+if theme.gitalk && theme.gitalk.enable
+  #gitalk-container
  script.
-    var gitment = new Gitment({
+    var gitalk = new Gitalk({
+      clientID: '!{theme.gitalk.client_id}',
+      clientSecret: '!{theme.gitalk.client_secret}',
+      repo: '!{theme.gitalk.repo}',
+      owner: '!{theme.gitalk.owner}',
+      admin: '!{theme.gitalk.admin}',
      id: md5(decodeURI(location.pathname)),
-      owner: '!{theme.gitment.owner}',
-      repo: '!{theme.gitment.repo}',
-      oauth: {
-        client_id: '!{theme.gitment.client_id}',
-        client_secret: '!{theme.gitment.client_secret}'
-      }
+      language: '!{lang}'
    })
-    gitment.render('gitment-container')
+    gitalk.render('gitalk-container')
--- a/layout/includes/comments/gitment.pug
+++ b/layout/includes/comments/gitment.pug
@@ -2,6 +2,7 @@ if theme.gitment && theme.gitment.enable
  #gitment-container
  script.
    var gitment = new Gitment({
+      id: md5(decodeURI(location.pathname)),
      owner: '!{theme.gitment.owner}',
      repo: '!{theme.gitment.repo}',
      oauth: {
--- a/layout/includes/comments/index.pug
+++ b/layout/includes/comments/index.pug
@@ -1,40 +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
--- a/layout/includes/comments/valine.pug
+++ b/layout/includes/comments/valine.pug
@@ -1,60 +1,16 @@
 if theme.valine && theme.valine.enable
  #vcomment.vcomment
-  script(src='https://cdn1.lncld.net/static/js/3.0.4/av-min.js')
  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
    });
    guest_info = guest_info.length == 0 ? GUEST_INFO :guest_info;

-    var localeName = 'tw',
-    localeMode = {
-        head: {
-            nick: '暱稱(必填)',
-            mail: '郵箱(必填,可以收到回復提醒)',
-            link: '網址(選填)',
-        },
-        tips: {
-            comments: '評論',
-            sofa: '快來做第一個評論的人吧~',
-            busy: '還在提交中，請稍候...',
-            again: '這麼簡單也能錯，也是沒誰了.'
-        },
-        ctrl: {
-            reply: '回覆',
-            ok: '好的',
-            sure: '確認',
-            cancel: '取消',
-            confirm: '確認',
-            continue: '繼續',
-            more: '查看更多...',
-            try: '再試試?',
-            preview: '預覽',
-            emoji: '表情'
-        },
-        error: {
-            99: '初始化失敗，請檢查init中的`el`元素.',
-            100: '初始化失敗，請檢查你的AppId和AppKey.',
-            401: '未經授權的操作，請檢查你的AppId和AppKey.',
-            403: '訪問被api域名白名單拒絕，請檢查你的安全域名設置.',
-        },
-        timeago: {
-            seconds: '秒前',
-            minutes: '分鐘前',
-            hours: '小時前',
-            days: '天前',
-            now: '剛剛'
-        }
-    };
-
-    window.valine = new Valine();
-    valine.installLocale(localeName,localeMode);
-
-    valine.init({
+    window.valine = new Valine({
      el:'#vcomment',
      notify:notify,
      verify:verify,
--- a/layout/includes/config.pug
+++ b/layout/includes/config.pug
@@ -49,6 +49,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")}',
--- a/layout/includes/footer.pug
+++ b/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
--- a/layout/includes/head.pug
+++ b/layout/includes/head.pug
@@ -1,5 +1,7 @@
 - var without_index = url.replace('index.html', '')
 - var without_html = without_index.replace('.html', '')
+- var photo_check = page.cover || theme.avatar
+- var photo_link = url_check (photo_check) ? photo_check : config.url + photo_check

 meta(http-equiv="x-dns-prefetch-control" content="on")
 if theme.canonical
@@ -9,7 +11,7 @@ if theme.twitter_meta
  meta(name="twitter:card" content="summary_large_image")
  meta(name="twitter:title" content=pageTitle_no_include_blog_name)
  meta(name="twitter:description" content=pageDescription)
-  meta(name="twitter:image" content= page.cover|| theme.avatar)
+  meta(name="twitter:image" content=photo_link)

 if theme.Open_Graph_meta
  if is_post()
@@ -21,7 +23,7 @@ if theme.Open_Graph_meta
  meta(property="og:url" content=without_html)
  meta(property="og:site_name" content=config.title)
  meta(property="og:description" content=pageDescription)
-  meta(property="og:image" content= page.cover|| theme.avatar)
+  meta(property="og:image" content=photo_link)

 if theme.disable_baidu_transformation
  meta(http-equiv="Cache-Control" content="no-transform")
@@ -108,6 +110,9 @@ if theme.qihu_site_verification
 - var preload_img = page.top_img || theme.top_img || config.top_img

 if (is_archive() && preload_archive_img) 
-  link(rel="preload" href=preload_img  as="image" )
+  link(rel="preload" href=url_for(preload_archive_img)  as="image" )
 else if (!is_post() && preload_img)
-  link(rel="preload" href=preload_img  as="image" )
+  link(rel="preload" href=url_for(preload_img)  as="image" )
+
+if theme.blog_title_font.font_link
+  link(rel='stylesheet', href=url_for(theme.blog_title_font.font_link))
--- a/layout/includes/header.pug
+++ b/layout/includes/header.pug
@@ -6,14 +6,58 @@
    .menu-icon-first
    .menu-icon-second
    .menu-icon-third
-    
+  
+  .menu_mask
+  
  span.pull-right.menus
-    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(){ });
+    .mobile_author_icon
+      img.lozad.avatar_img(src=theme.avatar || url_for('/img/avatar.png') onerror=`onerror=null;src='${theme.lodding_bg.flink}'`)
+    .mobile_post_data
+      if site.posts.length
+        .mobile_data_item.text-center
+          .mobile_data_link
+            a(href=url_for(config.archive_dir) + '/')
+              .headline= _p('aside.articles') 
+              .length_num= site.posts.length
+
+      if site.tags.length
+        .mobile_data_item.text-center       
+          .mobile_data_link
+            a(href=url_for(config.tag_dir) + '/' )
+              .headline= _p('aside.tags')
+              .length_num= site.tags.length
+
+      if site.categories.length
+        .mobile_data_item.text-center      
+          .mobile_data_link
+            a(href=url_for(config.category_dir) + '/')
+              .headline= _p('aside.categories') 
+              .length_num= site.categories.length
+
+    hr
+    .menus_items
+      each value, label in theme.menu
+        if !Array.isArray(value)
+          .menus_item
+            a.site-page(href=value.split('||')[0])
+              i.fa-fw(class=value.split('||')[1])
+              span=' '+label
+        else
+          .menus_item
+            a.site-page
+              i.fa-fw(class=label.split('||')[1] aria-hidden="true")
+              span=' '+label.split('||')[0]
+              i.fa.fa-chevron-down.menus-expand(aria-hidden="true")
+            ul.menus_item_child
+              each i in value
+                li
+                  a.site-page(href=i.split('||')[1])
+                    i.fa-fw(class=i.split('||')[2])
+                    span=' '+i.split('||')[0]
+
+
+      script.
+        document.body.addEventListener('touchstart', function(){ });
  span.pull-right
    if (theme.algolia_search.enable || theme.local_search && theme.local_search.enable)
        a.site-page.social-icon.search
--- a/layout/includes/layout.pug
+++ b/layout/includes/layout.pug
@@ -7,18 +7,23 @@
 - if (is_year()) pageTitle += ': ' + page.year
 - var pageTitle_saved  //- 暫時存儲pageTitle
 - var pageTitle_no_include_blog_name //- 存儲pageTitle， 不帶 " | "，meta用
+- var home_subtitle_true //有subtitle
 //- home時顯示config.title (JerryC)，其他顯示 pageTitle。meta用
 - is_home() ? pageTitle_no_include_blog_name = config.title : pageTitle_no_include_blog_name = pageTitle
 //- 暫時存儲pageTitle
 - pageTitle ? pageTitle_saved = pageTitle + ' | ' + config.title : pageTitle_saved = config.title
+//- 是否有 config.subtitle 是各自显示
+- config.subtitle ? home_subtitle_true = ' - ' + config.subtitle : home_subtitle_true = ''
 //- home時pageTitle顯示 JerryC - subtitle，其他顯示 pageTitle | JerryC
- is_home() ? pageTitle = config.title + ' - ' + config.subtitle : pageTitle = pageTitle_saved
+- is_home() ? pageTitle = config.title + home_subtitle_true : pageTitle = pageTitle_saved

 - var pageDescription = page.description || page.title || config.description || ''
 - var pageKeywords = (config.keywords || []).join(',')
 - 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)
@@ -41,9 +46,11 @@ 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 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
@@ -63,14 +70,14 @@ html(lang=config.language)
            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
+    
+    - var footer_bg = theme.footer_bg == false ? '' : bg_img
+    footer(style=footer_bg)
      include ./footer.pug
    i.fa.fa-arrow-up#go-up(aria-hidden="true")
    include ./rightside.pug
+    if (is_post())
+      include ./post-bottom.pug
    each item in theme.cdn.js
      if item !== undefined
        script(src=url_for(item))
--- a/layout/includes/nav.pug
+++ b/layout/includes/nav.pug
@@ -7,7 +7,8 @@ else


 if is_home()
-  nav#nav.full_page(style=bg_img)
+  nav#nav.full_page
+    .nav_bg(style=bg_img)
    include ./header.pug
    #site-info
      #site-title
@@ -25,7 +26,8 @@ if is_home()
      i.fa.fa-angle-down.scroll-down-effects

 else
-  nav#nav.bg_local(style=bg_img)
+  nav#nav.not_index_bg
+    .nav_bg(style=bg_img)
    include ./header.pug
    #page_site-info
      #site-title
--- a/layout/includes/pagination.pug
+++ b/layout/includes/pagination.pug
@@ -14,43 +14,49 @@ else
    if(page.prev)
      if(page.next)
        .prev-post.pull-left
-          - var pagination_cover = page.prev.cover || theme.default_cover
+          - var pagination_cover = page.prev.cover || random_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
-              //- i.fa.fa-chevron-left   
              span=page.prev.title
      else
        .prev-post.pull-full
-          - var pagination_cover = page.prev.cover || theme.default_cover
+          - var pagination_cover = page.prev.cover || random_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
-              //- i.fa.fa-chevron-left   
              span=page.prev.title
-
          
-
    if(page.next)
      if(page.prev)
        .next-post.pull-right
-          - var pagination_cover = page.next.cover || theme.default_cover
+          - var pagination_cover = page.next.cover || random_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 
-              //- i.fa.fa-chevron-right
      else
        .next-post.pull-full
-          - var pagination_cover = page.next.cover || theme.default_cover
+          - var pagination_cover = page.next.cover || random_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 
-              //- i.fa.fa-chevron-right
-      
+              span=page.next.title      

--- a/layout/includes/post-bottom.pug
+++ b/layout/includes/post-bottom.pug
@@ -0,0 +1,17 @@
+- var no_comment_show = page.comments !== false ? '' : 'no_comment_show'
+- var no_toc_show = (is_post() && page.toc != false && theme.toc.enable) ? '' : 'no_toc_show'
+#post_bottom(class= no_comment_show + ' ' + no_toc_show)
+  #post_bottom_items
+    if page.comments !== false
+      a#mobile_to_comment(href="#post-comment")
+        i.mobile_scroll_to_comment.fa.fa-comments
+    
+    if (is_post() && page.toc != false && theme.toc.enable)
+      i#mobile_toc.fa.fa-list
+      #toc_mobile
+        .toc_mobile_headline= _p('sidebar.catalog')
+        if (page.encrypt == true)
+          .toc-div-class(style="display:none")!=toc(page.origin,{"class":"toc_mobile_items"})
+        else 
+          !=toc(page.content,{"class":"toc_mobile_items"})
+        
--- a/layout/includes/recent-posts.pug
+++ b/layout/includes/recent-posts.pug
@@ -3,25 +3,36 @@ each article , index in page.posts.data
    - var link = article.link || article.path
      if index%2 == 0
        .post_cover.is_left
-          a(href=url_for(link))
+          a(href=url_for(link) title=article.title || _p('no_title'))
            - var post_cover = article.cover
-            - var default_post_cover = theme.default_cover
+            - var default_post_cover = random_cover()
            if (post_cover)
-              img.post_bg.lozad(data-src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` title=article.title || _p('no_title'))
+              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
-              img.post_bg.lozad(data-src=`${default_post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` title=article.title || _p('no_title'))
+              if theme.lazyload.enable
+                img.post_bg.lozad(data-src=`${default_post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
+              else
+                img.post_bg(src=`${default_post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
      else
        .post_cover.is_right
-          a(href=url_for(link))
+          a(href=url_for(link) title=article.title || _p('no_title'))
            - var post_cover = article.cover
-            - var default_post_cover = theme.default_cover
+            - var default_post_cover = random_cover()
            if (post_cover)
-              img.post_bg.lozad(data-src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` title=article.title || _p('no_title'))
+              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
-              img.post_bg.lozad(data-src=`${default_post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` title=article.title || _p('no_title'))
-
+              if theme.lazyload.enable
+                img.post_bg.lozad(data-src=`${default_post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
+              else
+                img.post_bg(src=`${default_post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
    .recent-post-info   
-      a.article-title(href=url_for(link) title=article.title || _p('no_title'))= article.title || _p('no_title')
+      a.article-title(href=url_for(link) title= article.title || _p('no_title'))= article.title || _p('no_title')
      if (article.top)
        span.article-meta
          i.fa.fa-thumb-tack.article-meta__icon.sticky
@@ -51,8 +62,6 @@ each article , index in page.posts.data
        - 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

--- a/layout/includes/related-posts.pug
+++ b/layout/includes/related-posts.pug
@@ -1,6 +0,0 @@
-.relatedPosts
-  .relatedPosts_headline
-    i.fa.fa-thumbs-up(aria-hidden="true")
-    span=' ' + _p('relatedPosts_headline')
-  .relatedPosts_list!= related_posts(page,site.posts)
-  .clear_both
--- a/layout/includes/reward.pug
+++ b/layout/includes/reward.pug
@@ -6,60 +6,6 @@
      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
-
-
-
--- a/layout/includes/rightside.pug
+++ b/layout/includes/rightside.pug
@@ -1,4 +1,7 @@
 section#rightside.rightside
+  if is_post() && page.comments !== false
+    a#to_comment(href="#post-comment")
+      i.scroll_to_comment.fa.fa-comments
  if theme.readmode.enable && is_post()
    i#readmode.fa.fa-book(title=_p('rightside.readmode_title')) 
  i#font_plus.fa.fa-plus(title=_p('rightside.font_plus_title'))
@@ -6,4 +9,5 @@ section#rightside.rightside
  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'))
+    - 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'))
--- a/layout/includes/sidebar.pug
+++ b/layout/includes/sidebar.pug
@@ -16,5 +16,9 @@
        span.progress-notice= _p('sidebar.have_read')
        span.progress-num 0
        span.progress-percentage %
-        div.sidebar-toc__progress-bar
-      div.sidebar-toc__content!=toc(page.content, {list_number: tocNumber})
+        div.sidebar-toc__progress-bar      
+      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})
+      
--- a/layout/includes/third-party/canvas-nest.pug
+++ b/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))
--- a/layout/includes/widget/card_announcement.pug
+++ b/layout/includes/widget/card_announcement.pug
@@ -0,0 +1,6 @@
+.card_widget.card-announcement
+  .card-content
+    .item_headline
+      i.fa.fa-bullhorn.card-announcement-animation(aria-hidden="true")
+      span= _p('aside.card_announcement')
+    .announcement_content= theme.announcement.content
--- a/layout/includes/widget/card_archives.pug
+++ b/layout/includes/widget/card_archives.pug
@@ -0,0 +1,6 @@
+.card_widget.card-archives
+  .card-content
+    .item_headline
+      i.fa.fa-archive(aria-hidden="true")
+      span= _p('aside.card_archives')
+    div.archives_item!= list_archives({type:'monthly',format: 'YYYY年MM月'})
--- a/layout/includes/widget/card_author.pug
+++ b/layout/includes/widget/card_author.pug
@@ -0,0 +1,41 @@
+.card_widget.card-author
+  .card-content
+    .post_data
+      .data-item.text-center
+        img.lozad.avatar_img(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
+
+    .post_data.data_config
+      if site.posts.length
+        .data-item.text-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_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_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'
+      
+  
+  
+    if(theme.social)
+      .post_data.data_config
+        #aside-social-icons 
+          each url, icon in theme.social
+            a.social-icon.data-item(href=url target="_blank")
+              i(class=icon)
--- a/layout/includes/widget/card_categories.pug
+++ b/layout/includes/widget/card_categories.pug
@@ -0,0 +1,23 @@
+if site.categories.length
+  .card_widget.card-categories
+      .card-content
+        .item_headline
+          i.fa.fa-folder-open(aria-hidden="true")
+          span= _p('aside.card_categories')
+        ul.aside_category_item        
+          mixin displayCategories(parent = undefined) 
+            - site.categories.find({ parent }).sort("name").each(function(category) {
+                - var childCount = site.categories.find({ parent: category._id }).count();              
+                li.aside_category_list
+                  a.aside_category_list_link(href=url_for(category.path))
+                    span.aside_category_list_name= category.name
+                    span.aside_category_list_length= category.length
+                  
+                if childCount > 0
+                  ul.aside_category_item.child
+                    +displayCategories(category._id)
+            - })
+
+          +displayCategories()
+
+  
--- a/layout/includes/widget/card_recent_post.pug
+++ b/layout/includes/widget/card_recent_post.pug
@@ -0,0 +1,30 @@
+.card_widget.card-recent-post
+  .card-content
+    .item_headline
+      i.fa.fa-history(aria-hidden="true")
+      span= _p('aside.card_recent_post')
+    .aside_recent_item
+      - site.posts.sort('date', -1).limit(5).each(function(article){
+        .aside_recent_post
+          - 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(src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` title=article.title || _p('no_title'))
+                else
+                  if theme.lazyload.enable
+                    img.aside_post_bg.lozad(data-src=`${default_post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` title=article.title || _p('no_title'))
+                  else
+                    img.aside_post_bg(src=`${default_post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` title=article.title || _p('no_title'))
+              div#aside_title
+                .aside_post_title(href=url_for(link) title=article.title || _p('no_title'))= article.title || _p('no_title')
+                if (theme.post_meta.date_type)
+                  - var date_type = theme.post_meta.date_type == 'updated' ? 'updated' : 'date'
+                  time.aside_post_meta.post-meta__date #[=date(article[date_type], config.date_format)]
+    
+      - })
--- a/layout/includes/widget/card_tags.pug
+++ b/layout/includes/widget/card_tags.pug
@@ -0,0 +1,7 @@
+if site.tags.length
+  .card_widget.card-tags
+    .card-content
+      .item_headline
+        i.fa.fa-tags(aria-hidden="true")
+        span= _p('aside.card_tags')
+      .card-tag-cloud!= tagcloud({min_font: 16, max_font: 24, amount: 200, color: true, start_color: '#999', end_color: '#000'})
--- a/layout/includes/widget/card_webinfo.pug
+++ b/layout/includes/widget/card_webinfo.pug
@@ -0,0 +1,24 @@
+.card_widget.card-webinfo
+  .card-content
+    .item_headline
+        i.fa.fa-line-chart(aria-hidden="true")
+        span= _p('aside.card_webinfo.headline')
+    .webinfo
+      .webinfo_item
+        .webinfo_article_name= _p('aside.card_webinfo.article_name') + " :"
+        .webinfo_article_count= site.posts.length      
+      if theme.runtimeshow.enable
+        .webinfo_item
+          .webinfo_runtime_name= _p('aside.card_webinfo.runtime_name') + " :"
+          #webinfo_runtime_count.webinfo_runtime_count
+          script#runtionshow(src=url_for('js/runtimeshow.js') start_date=theme.runtimeshow.start_date)       
+      
+      if theme.busuanzi.site_uv 
+        .webinfo_item       
+          .webinfo_site_uv_name= _p('aside.card_webinfo.site_uv_name') + " :"
+          .webinfo_site_uv_count#busuanzi_value_site_uv
+      if theme.busuanzi.site_pv
+        .webinfo_item
+          .webinfo_site_name= _p('aside.card_webinfo.site_pv_name') + " :"
+          .webinfo_site_pv_count#busuanzi_value_site_pv
+
--- a/layout/index.pug
+++ b/layout/index.pug
@@ -5,4 +5,4 @@ block content
    include includes/recent-posts.pug  
    include includes/pagination.pug
  #aside_content.aside_content
-      include includes/aside.pug
+    include includes/aside.pug
--- a/layout/page.pug
+++ b/layout/page.pug
@@ -6,7 +6,7 @@ block content
      .tag-cloud__title= _p('page.tag')
        |  - 
        span.tag-cloud__amount= site.tags.length
-      .tag-cloud-tags!= tagcloud({min_font: 20, max_font: 43, amount: 200, color: true, start_color: '#A4D8FA', end_color: '#0790E8'})
+      .tag-cloud-tags!= tags(site.tags)
      if page.comments !== false
        include includes/comments/index.pug
    #aside_content.aside_content
--- a/layout/post.pug
+++ b/layout/post.pug
@@ -45,7 +45,7 @@ block top_img
 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') + ": "
@@ -71,6 +71,6 @@ block content
  include includes/pagination.pug
  
  if theme.related_post && theme.related_post.enable
-    include includes/related-posts.pug
+    != related_posts(page,site.posts)
  if page.comments !== false
    include includes/comments/index.pug
--- a/package.json
+++ b/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "hexo-theme-melody",
+  "version": "1.1.5",
+  "description": "A Hexo Theme: Butterfly"
+
+}
--- a/scripts/note.js
+++ b/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});
--- a/scripts/post-lazyload.js
+++ b/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);
--- a/scripts/random_cover.js
+++ b/scripts/random_cover.js
@@ -0,0 +1,13 @@
+hexo.extend.helper.register('random_cover', function () {
+  var cover;
+  var num;
+  if (!Array.isArray(hexo.theme.config.default_cover)) {
+    cover = hexo.theme.config.default_cover
+    return cover
+  } else {
+    num = Math.floor(Math.random() * (hexo.theme.config.default_cover.length));
+    cover = hexo.theme.config.default_cover[num];
+    return cover
+  }
+
+})
--- a/scripts/related_post.js
+++ b/scripts/related_post.js
@@ -1,38 +1,61 @@
-hexo.extend.helper.register('related_posts', function(currentPost, allPosts){
+hexo.extend.helper.register('related_posts', function (currentPost, allPosts) {
  var relatedPosts = [];
  currentPost.tags.forEach(function (tag) {
    allPosts.forEach(function (post) {
-          if (isTagRelated(tag.name, post.tags)) {
-              var relatedPost = {
-                  title: post.title,
-                  path: post.path,
-                  cover: post.cover,
-                  weight: 1
-              };
-              var index = findItem(relatedPosts, 'path', post.path);
-              if (index != -1) {
-                  relatedPosts[index].weight += 1;
-              } else{
-                  if (currentPost.path != post.path) {
-                      relatedPosts.push(relatedPost);
-                  };
-              };
+      if (isTagRelated(tag.name, post.tags)) {
+        var relatedPost = {
+          title: post.title,
+          path: post.path,
+          cover: post.cover,
+          weight: 1
+        };
+        var index = findItem(relatedPosts, 'path', post.path);
+        if (index != -1) {
+          relatedPosts[index].weight += 1;
+        } else {
+          if (currentPost.path != post.path) {
+            relatedPosts.push(relatedPost);
          };
-      });
+        };
+      };
+    });
  });
-  if (relatedPosts.length == 0) {return ''};
+  if (relatedPosts.length == 0) { return '' };
  var result = "";
  var limit_num = hexo.theme.config.related_post.limit || 6
+  var lang = hexo.theme.config.rootConfig.language;
+  var headline_lang;
+  if (lang === 'zh-CN') {
+    headline_lang = '相关推荐';
+  } else if ( lang === 'zh-TW') {
+    headline_lang = '相關推薦';
+  } else {
+    headline_lang = 'Recommend';
+  }
+    
  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_list">'
+  
  for (var i = 0; i < Math.min(relatedPosts.length, limit_num); i++) {
 
-    var cover = relatedPosts[i].cover|| hexo.theme.config.default_cover|| data.butterfly.default_cover 
-    result += '<div class="relatedPosts_item"><a href="/' + relatedPosts[i].path + '" title="' + relatedPosts[i].title +'">';
-    result += '<img class="relatedPosts_cover lozad" data-src="' + cover + '">';
+    var cover = relatedPosts[i].cover || random_cover()
+
+    result += '<div class="relatedPosts_item"><a href="' + hexo.theme.config.rootConfig.root + relatedPosts[i].path + '" title="' + relatedPosts[i].title + '">';
+    result += '<img class="relatedPosts_cover '+ lazy_class + '"' + lazy_src + '="' + cover + '">';
    result += '<div class="relatedPosts_title">' + relatedPosts[i].title + '</div>';
-    result += '</a></div>'  
-  };  // console.log(relatedPosts);
+    result += '</a></div>'
+    };
+    
+    result += '</div><div class="clear_both"></div></div>'
  return result;
+
+}
 });
 hexo.extend.helper.register('echo', function(path){
 return path;
@@ -62,3 +85,15 @@ function compare (attr) {
  }
 }

+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
+  }
+}
--- a/scripts/tags.js
+++ b/scripts/tags.js
@@ -0,0 +1,16 @@
+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;
+})
--- a/scripts/url_check.js
+++ b/scripts/url_check.js
@@ -0,0 +1,8 @@
+hexo.extend.helper.register('url_check', function (p) {
+  
+    let src = p ;
+    let reg = /^https?/ig;
+    return reg.test(src)
+    
+  
+})
--- a/source/css/_global/index.styl
+++ b/source/css/_global/index.styl
@@ -23,6 +23,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,
@@ -62,7 +75,6 @@ h6
  position: fixed
  right: $go-up-right
  bottom: $go-up-bottom
-  z-index: 100
  font-size: $sidebar-icon-size
  opacity: 0
  cursor: pointer
@@ -85,11 +97,11 @@ hr

  &:before
    position: absolute
-    top: -10px
+    top: $hr-icon-top
    left: 5%
    z-index: 1
    color: $light-blue
-    content: "\f0c4"
+    content: $hr-icon
    font: normal normal normal 14px / 1 FontAwesome
    font-size: 20px
    transition: all 1s ease-in-out
@@ -148,7 +160,9 @@ table


 // valine 
-#vcomment 
+#vcomment
+  font-size: inherit
+  
  input 
    font-size: 0.65rem

@@ -159,15 +173,16 @@ table
    color: #fff
    border-color: #fff

+    &:hover
+      background-color: darken($light-blue, 40)
+
+
  textarea 
    font-size: 0.7rem
    background: url(/img/comment_bg.png) 100% 100% no-repeat

  .info
    display: none
-
-  .vcomment
-    margin-top: 20px
  
  .vimg
    border: 0
@@ -183,11 +198,8 @@ table
  .vnum 
    font-size: 1.1rem

-  .vnick
-    font-size: 100%
-
  .vsys
-    font-size: 70%
+    font-size: 80%
  
  .vtime
    font-size: .65rem
@@ -196,31 +208,37 @@ table
    font-size: 100%
  
  .vat
-    font-size: .7125rem;
-    color: $cyan;
-    border: 1px solid $cyan;
-    padding: 0 .8rem;
-    border-radius: 5px;
-  
+    font-size: .7125rem
+    color: $cyan
+    border: 1px solid $cyan
+    padding: 0 .8rem
+    border-radius: 5px

-#site-title, #site-sub-title, 
+    &:hover
+      background-color: alpha($cyan,0.5)
+  
+  code, pre
+    font-size: 98%
+    font-family: $code-font
+
+.full_page #site-title, 
+.full_page #site-sub-title, 
 #site-name,
 #aside_content .author-info__name,
 #aside_content .author-info__description
-  font-family: 'Titillium Web',Lato,PingFang SC, Hiragino Sans GB, "Microsoft JhengHei", "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif
+  font-family: $site-name-font



 #rightside 
  right: -38px
-  z-index: 100
  position: fixed
-  bottom: 50px
-  padding-bottom: 32px
+  bottom: 60px
  opacity: 0
  transition: all .2s

-  #readmode,#font_plus,#font_minus
+
+  #readmode,#font_plus,#font_minus,#to_comment
    width: 30px
    height: 30px
    background-color: $light-blue
@@ -232,6 +250,9 @@ table
    margin-bottom: 2px
    cursor: pointer
    text-decoration: none
+
+  #to_comment
+    display: none
  
  #font_minus,#font_plus
    display: none
@@ -277,70 +298,67 @@ table


 // bookmark 樣式
-.fc-container .fancybox-bg {
-  background: #eee;
-}
+.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;
-}
+.fancybox-is-open.fc-container .fancybox-bg 
+  opacity: 0.95

-.fc-content h3 {
-  margin-top: 0;
-  font-size: 1.6em;
-  letter-spacing: normal;
-}

-.fc-content p {
-  color: #666;
-  line-height: 1.5;
-}
+.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

-.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--next 
+  transform: translateY(-60px) scale(1.1)
+  opacity: 0
+
+
+.fancybox-fx-material.fancybox-slide--current 
+  opacity: 1
+  transform: translateY(0) scale(1)

-.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;
+  background: #FF6666
+  border-width: 0
+  color: #fff
+  text-decoration: none
+  padding: 7px 20px
+  line-height: 1.5
+  border-radius: 20px
+  text-transform: uppercase
+  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif
+  font-size: 80%
+  font-weight: 700
+  margin: 5px 5px 5px 0
+  display: inline-block
+  cursor: pointer
+  outline: none
+  transition: all .2s ease-in-out
+  user-select: none

 .tright
  text-align: right 
@@ -348,7 +366,18 @@ table
 .is_visible
  display: block !important

+.is_invisible
+  display: none !important
+
+.is_hidden
+  overflow: hidden
+
 .fireworks
-  position: fixed;
-  z-index: -1;
-  pointer-events: none;
+  position: fixed
+  z-index: -1
+  pointer-events: none
+
+
+// 去掉加載黑框
+img[src=""],img:not([src])
+  opacity: 0
--- a/source/css/_highlight/highlight.styl
+++ b/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
--- a/source/css/_layout/aside.styl
+++ b/source/css/_layout/aside.styl
@@ -12,7 +12,6 @@
    transition: all .3s
    background: #fff
    margin-top: 20px
-    margin-left: 15px
    overflow: hidden

    &:hover
@@ -55,7 +54,7 @@
      .headline 
        display: block
        font-size: 0.7rem
-        letter-spacing: 1px
+        // letter-spacing: 1px
        margin-bottom: -21px
        text-transform: uppercase
        color:#4c4948
@@ -223,6 +222,13 @@
    list-style: none
    margin-bottom: -3px
    margin-block-start: 0.2rem
+  
+  .aside_category_item.child
+    margin-bottom: -3px
+    margin-block-start: 0rem
+
+    .aside_category_list
+      margin-left: -50px

  .aside_category_list,.archive-list-item
    margin-left: -40px
@@ -234,15 +240,24 @@
    a
      text-decoration: none
      color: #4c4948
+  
+  .aside_category_list_name,.archive-list-link
+    white-space: nowrap
+    overflow: hidden
+    text-overflow: ellipsis
+    flex: auto
+
+  .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
@@ -267,14 +282,11 @@


@keyframes announ_animation{
-
  0%,to{
    color: #4c4948
-
 }
  50%{
    color: #FF0000
-
    }
    }

@@ -287,6 +299,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
--- a/source/css/_layout/footer.styl
+++ b/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
--- a/source/css/_layout/head.styl
+++ b/source/css/_layout/head.styl
@@ -1,18 +1,21 @@
 #nav
  position: relative
  margin-bottom: 1rem
-  background-color: $light-blue
-  background-position: center
-  background-size: cover
-

  &.full_page
-    background-attachment: local
    height: 100vh
  
-  &.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
@@ -49,6 +52,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 +66,10 @@
  font-size: 30px
  text-align: center

+  .scroll-down-effects
+    position: absolute
+    color: #fff
+

 #page-header
  position: absolute
@@ -102,11 +114,74 @@
      .menu-icon-third 
        -webkit-transform: rotate(-45deg) translate(4px, -4px)
        transform: rotate(-45deg) translate(4px, -4px)
+  
+  .menu_mask
+    position: fixed
+    top: 0
+    bottom: 0
+    width: 100%
+    height: 110vh
+    left: 0
+    right: 0
+    background: alpha($black,0.7)
+    display: none
+  
+  .menus  
+    .mobile_author_icon
+      display: none
+      padding: 1.3rem 1.5rem 0
+      text-align: center

+  
+      img
+        height: 120px
+        width: 120px
+        display: inline-block
+        vertical-align: top
+        border-radius: 70px
+        transition: all .3s

+    .mobile_post_data
+      display: flex
+      justify-content: center
+      padding: .6rem .5rem 0
+      display: none

+      .mobile_data_item
+        flex: 1

+      .mobile_data_link 
+        a
+          text-decoration: none

+        .length_num 
+          font-size: .9rem
+          color: #000
+
+        .headline 
+          display: block
+          font-size: 0.7rem
+          // letter-spacing: .5px
+          text-transform: uppercase
+          color:#4c4948
+
+    .menus-expand
+      position: absolute
+      width: 30px !important
+      height: 30px
+      right: 0
+      padding: 6px
+      display: none
+      transform: rotate(0deg)
+      transition: all .3s
+    
+      &.menus-closed
+        transform: rotate(180deg) !important
+        transition: all .3s
+      
+    hr         
+      margin: 1rem auto
+      display: none

  a
    color: $light-grey
@@ -117,12 +192,10 @@

  .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
-
    &::after
      position: absolute
      bottom: 0
@@ -175,15 +248,59 @@
    font-weight: bold
    cursor: pointer

-@media screen and (min-width: $sm)
+@media screen and (min-width: $sm)  
  #site-title
    font-size: 2rem

  #site-sub-title
    font-size: 1.2rem

-@media screen and (max-width: $sm)
+  #page-header    
+    .menus_item
+      display: inline-block
+      padding: 0 0.5rem

+      &:hover,&:focus
+        .menus_item_child
+          display: block
+
+    .menus_item_child
+      position: absolute
+      background-color: alpha($white, 0.8)
+      padding: 8px 10px
+      width: fit-content
+      border-radius: 5px
+      box-shadow: 0 5px 20px -4px rgba(0,0,0,.5)
+      display: none
+      opacity: 1
+      animation: sub_menus .3s .1s ease both
+
+      &:before
+        content: ""
+        position: absolute
+        top: -20px
+        left: 50%
+        margin-left: -10px
+        border-width: 10px
+        border-style: solid
+        border-color: transparent transparent alpha($white, 0.8)
+
+    .menus_item_child li
+      list-style: none
+      text-align: center
+
+      a
+        color: #3b3a3a;
+        text-shadow: none;
+
+    &.fixed.visible
+      .menus_item_child
+        background-color: #ffffff
+
+        &:before
+          border-color: transparent transparent #ffffff
+
+@media screen and (max-width: $sm)
  #page-header
    padding: 10px 0.8rem

@@ -191,29 +308,61 @@
      display: block

    .menus
-      position: absolute
-      top: 3rem
-      right: 0.8rem
-      display: none
-      width: 8rem
-      background: alpha($white, 0.9)
+      position: fixed
+      top: 0
+      right: -250px
+      width: 250px
+      height 101vh
+      background: $white
      cursor: pointer
      box-shadow: 0 0 4px rgba(0, 0, 0, 0.27)
+      z-index: 1
+      overflow-y: scroll
+      display: none
+          
+      .mobile_post_data
+        display: flex

-      a
-        display: block !important
-        opacity: 1 !important
-        margin-left: 0
-        padding-top: 0.3rem
-        padding-bottom: 0.3rem
-        padding-left: 0.6rem
-        color: $font-black
-        text-shadow: none
-        font-size: 0.8rem
-        z-index: 0
+      .menus_items
+        a
+          display: block !important
+          opacity: 1 !important
+          margin: 0
+          padding: .3rem 1.5rem
+          color: $font-black
+          text-shadow: none
+          font-size: 0.8rem
+          z-index: 0
+          text-overflow: ellipsis
+          overflow: hidden
+          white-space: nowrap  
+          
+        i
+          width: 30%
+          text-align: left 

-        &:hover
-          color: $light-blue
+        span
+          width 70%
+
+          &:hover
+            color: $light-blue
+
+        .menus-expand
+          display: inline-block
+        
+        .menus_item_child
+          list-style: none
+          margin: 0
+        
+      .mobile_author_icon
+        display: block
+     
+      .menus_items 
+          padding: 0 .5rem
+          margin-bottom: 5rem                              
+              
+      hr
+        display: block 

    .search 
      right: 0.5rem
@@ -223,9 +372,8 @@
    
    &.fixed.open-sidebar 
      .search
-        display: inline-block;
-        opacity: 1;
+        display: inline-block
+        opacity: 1
+


-#page-header .site-page
-  margin-left: 1rem
--- a/source/css/_layout/nightshift.styl
+++ b/source/css/_layout/nightshift.styl
@@ -1,8 +1,5 @@
 if hexo-config("nightshift") && hexo-config("nightshift.enable")
  .night-mode 
-    footer
-      background: #2d3035
-
    #sidebar
      background: #2d3035 !important
      box-shadow: -0.25rem 0 0.25rem #2d3035 !important
@@ -39,7 +36,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,6 +45,26 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable")
      .vbtn
        background: rgb(45, 48, 53) !important      
        color: #99a9bf !important
+        border: 1px solid #99a9bf
+      
+      .vwrap
+        border: 1px solid #99a9bf
+      
+      input
+        border-bottom: 1px dashed #616a6b
+      
+      .vh
+        border-bottom: 1px dashed  #616a6b
+      
+      pre
+        background-color: #2d3035
+        border: 1px solid #99a9bf
+      
+      .vcontent.expand:before
+        background: linear-gradient(180deg,hsla(0, 0%, 0%, 0),hsl(218, 8%, 19%))
+
+      .vcontent.expand:after
+        background: hsla(204, 5%, 22%, 1)
          
    .recent-post-item .article-title
        color: #99a9bf
@@ -108,7 +125,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 +143,8 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable")

    .translate_chn_to_cht,
    .nightshift,
-    #readmode
+    #readmode,
+    #to_comment
        background-color: #2d3035 !important

    img
@@ -163,7 +180,8 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable")
      background:#2d3035

    #nav,
-    #top-container
+    #top-container,
+    footer
      &::before
        content: ""
        position: absolute
@@ -182,10 +200,14 @@ 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
      color: rgba(238,238,238,.6)

    //打賞 分享
@@ -199,22 +221,51 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable")
      
    &::-webkit-scrollbar-thumb
      background: lighten(#2d3035,5)
-    
+
+
+    #post_bottom
+      background: #2d3035
+      box-shadow: 0 -5px 6px -5px rgba(133,133,133,0)
+
+      i
+        color: #99a9bf !important
+      
+      #toc_mobile
+        background: #2d3035
+
+        a
+          color: #99a9bf !important
+
+    #web_bg
+      background-color: #2d3032
+
+    #hbe-security
+      label
+        color: #99a9bf !important
+      input
+        background-color: #616a6b
+
+
  @media screen and (max-width: 768px)
    .night-mode
      color: #99a9bf 
      background-color: rgb(45, 48, 53)

      #page-header
-        .menus 
-          a
-            color: #99a9bf 
-            background: #2d3035
-        &.fixed
-          .menu-icon-first,
-          .menu-icon-second,
-          .menu-icon-third
-            background-color: #99a9bf;
+        .menus
+          background: #2d3035
+
+          .headline
+            color: #99a9bf !important
+          
+          .length_num
+            color: darken(#99a9bf,10) !important
+        a
+          color: #99a9bf !important        
+        .menu-icon-first,
+        .menu-icon-second,
+        .menu-icon-third
+          background-color: #99a9bf !important


  @media screen and (min-width: 768px)
@@ -225,6 +276,18 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable")
      .recent-post-item
          background: #2d3035 !important

+      #page-header 
+        .menus_item_child
+          background-color: #2d3035 !important
+
+          &:before
+            border-color: transparent transparent #2d3035 !important
+
+          li
+            a
+              color: #99a9bf
+
+


    
--- a/source/css/_layout/note.styl
+++ b/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
+
+    &:last-child 
+      margin-bottom: 0
+    
+
+  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
--- a/source/css/_layout/page.styl
+++ b/source/css/_layout/page.styl
@@ -104,24 +104,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
--- a/source/css/_layout/pagination.styl
+++ b/source/css/_layout/pagination.styl
@@ -25,7 +25,6 @@
  img.prev_cover, img.next_cover
    position: absolute
    padding: 0
-    z-index: 50
    top: 0
    left: 0
    width: 100%
--- a/source/css/_layout/post.styl
+++ b/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
@@ -228,8 +376,6 @@ img
@media screen and (min-width: $md)
  .layout
    width: $content-large-width
-
-
        
 .katex-wrap
  overflow: auto
@@ -249,7 +395,7 @@ img



-@media screen and (max-width: 900px)
+@media screen and (max-width: 1024px)
  .layout 
    margin: 0 15px
    width: auto
--- a/source/css/_layout/post_bottom.styl
+++ b/source/css/_layout/post_bottom.styl
@@ -0,0 +1,70 @@
+#post_bottom
+  position: fixed
+  bottom: -50px
+  background: alpha($white, 0.8)
+  width: 100%
+  border: none
+  box-shadow: 0 -5px 6px -5px alpha($grey, 0.6)
+  display: none
+  transition: all .2s
+  cursor: pointer
+  z-index: 100
+
+  &.toc_mobile_show
+    bottom: 0
+
+  #mobile_to_comment,#mobile_toc
+    width: 50%
+    text-align: center
+    font-size: 18px
+    padding: 7px 0
+    display: inline-block
+    color: $light-black
+
+  a
+    text-decoration: none
+    color: $light-black
+
+  #toc_mobile 
+    box-shadow: 0 0 4px alpha($grey, 0.6)
+    background: $white
+    width: 50%
+    height: 70%
+    position: fixed
+    bottom: 60px
+    right: 10px
+    overflow: scroll
+    padding: 15px 10px
+    font-size: 15px
+    border-radius: 10px
+    display: none
+
+    ol,li
+      list-style: none
+      padding: 0 0 0 5px
+      margin: 0
+    
+    a
+      &:hover
+        color: $light-blue
+
+  .toc_mobile_headline 
+      text-align: center
+      font-size: 18px
+      font-weight: bold
+  
+  &.no_comment_show
+    #mobile_toc
+      width: 100%
+      padding: 16px 0
+
+    #toc_mobile
+      right: 25%
+
+  &.no_toc_show
+    #mobile_to_comment
+      width: 100%
+
+@media screen and (max-width:768px)
+  #post_bottom
+    display: block
--- a/source/css/_layout/readmode.styl
+++ b/source/css/_layout/readmode.styl
@@ -35,7 +35,7 @@ if hexo-config("readmode") && hexo-config("readmode.enable")
      
      #page-header
        &.fixed
-          background: none
+          background: alpha(darken($pale-yellow,5),0.5)
          box-shadow: none

          &.open-sidebar
@@ -99,6 +99,29 @@ if hexo-config("readmode") && hexo-config("readmode.enable")
    .copy-notice
      background: darken($pale-yellow,10)
    
+    .toc_mobile_show
+      background: alpha(darken($pale-yellow,5),0.5) !important
+      box-shadow: none !important
+      
+      #post_bottom_items
+        #mobile_to_comment
+          display: none 
+        #mobile_toc
+          width: 100%
+          padding: 16px 0
+        #toc_mobile
+          right: 25%
+          background: darken($pale-yellow,5)
+
+
+  @media screen and (min-width: 768px)
+    .read-mode
+      .menus_item_child
+        background-color: darken($pale-yellow,5) !important
+
+        &:before
+          border-color: transparent transparent darken($pale-yellow,5) !important
+



--- a/source/css/_layout/relatedposts.styl
+++ b/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)
--- a/source/css/_layout/reward.styl
+++ b/source/css/_layout/reward.styl
@@ -30,6 +30,7 @@
      left: 0
      transition: all 0.6s
      display: none
+      opacity: 1
  
      .reward-all
        margin: 0 auto
--- a/source/css/_layout/sidebar.styl
+++ b/source/css/_layout/sidebar.styl
@@ -10,8 +10,7 @@
  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,
    li
--- a/source/css/_layout/z-other.styl
+++ b/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
@@ -76,53 +71,6 @@ a.article-meta__categories
  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)
-    }
-  }
-}
-
 .layout_page
  display: flex 
  margin: 0 auto
@@ -130,8 +78,6 @@ a.article-meta__categories
  align-items: flex-start
  padding: 0 15px

-#recent-posts
-    width: 75%

 #page,.category-content,.flink
  padding: 40px 44px 44px
@@ -150,20 +96,26 @@ a.article-meta__categories
    -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
+      order: 2
+    
+    #page,.category-content,#archive,.tag-cloud,.flink,#tag,#category
+      order: 2
+

@media screen and (max-width: 900px) 
-    #page,.category-content,#archive,.tag-cloud,.flink,#tag,#category
+  #page,.category-content,#archive,.tag-cloud,.flink,#tag,#category
      width: 100% !important
+
+
+@media screen and (max-width:768px)
+  #web_bg
+    display: none 
    
-    // .recent-post-info 
-    //   padding: 40px 30px 20px
-
-
-@media screen and (max-width:768px) 
  .recent-post-item
    height: auto !important
    border-radius: 8px
@@ -202,26 +154,15 @@ a.article-meta__categories
    &:hover
      -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-post-info 
    padding: 20px 10px !important
@@ -230,14 +171,15 @@ a.article-meta__categories
  #recent-posts #pagination
    margin-bottom: 0

-  .more_setting
-    display: block !important
+  #nav 
+    #site-social-icons
+      display: block

-  #nav #site-social-icons
-    display: block
+    &.not_index_bg
+      height: 14rem

-  #page_site-info
-    padding: 7rem 1rem 5rem
+    #page_site-info
+      top: 7rem
  
  #top-container
    height: 14rem
@@ -254,11 +196,10 @@ a.article-meta__categories
    display: none !important


-
 .layout_page,
 .layout_post,
 footer
-  animation: main 1s;
+  animation: main 1s

 #nav,
 #top-container
@@ -267,86 +208,82 @@ footer
 #site-title
  animation: titlescale 1s

-.search-dialog
-  transition: all .2s
+canvas,#web_bg
+  animation: to_show 4s
+
+.card-announcement-animation
+  animation: announ_animation 1.5s infinite

 .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

-@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}
-    }
-
-@keyframes header {
-  0% {
-  opacity: 0;
-  transform: translateY(-50px)
-}
-100% {
-  opacity: 1;
-  transform: translateY(0)
-}
-
-}
+.reward-main
+  animation: donate_effcet .3s .1s ease both;


-@keyframes main {
-  0% {
-  opacity: 0;
-  transform: translateY(50px)
-}
-100% {
-  opacity: 1;
-  transform: translateY(0)
-}
-}
-
-@keyframes titlescale{
-  
-  0% {
-    // opacity:0;
-    transform: scale(0.7)
-}
-  100% {
-    // opacity:1;
-    transform: scale(1)
-}
+@keyframes 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)

-.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 titlescale
+  0%
+    opacity: 0
+    transform: scale(0.7)
+  100% 
+    opacity: 1
+    transform: scale(1)

-.code_body
-  overflow: hidden
+@keyframes to_show
+  0%
+    opacity: 0
+  100%
+    opacity: 1
+ 
+@keyframes avatar_turn_around
+  from
+    transform: rotate(0deg)
+  to
+    transform: rotate(360deg)

-@keyframes code_full_page{
-  0%{transform:scale(0)}
-  50%{transform:scale(1)}
-  80%{transform:scale(.98)}
-  100%{transform:scale(1)}}
+@keyframes sub_menus
+  0%
+    opacity: 0
+    transform: translateY(10px)
+  100%
+    opacity: 1
+    transform: translateY(0)

+@keyframes donate_effcet
+  0%
+    opacity: 0
+    transform: translateY(-20px)
+  100%
+    opacity: 1
+    transform: translateY(0)
--- a/source/css/var.styl
+++ b/source/css/var.styl
@@ -7,9 +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
@@ -20,17 +26,32 @@ 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'
  $code-font = convert(hexo-config("font.code-font")) || 'consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace, Helvetica Neue For Number'

+if hexo-config("blog_title_font.font-family")
+  $site-name-font = convert(hexo-config("blog_title_font.font-family")) || '"Titillium Web",Lato,PingFang SC, Hiragino Sans GB, "Microsoft JhengHei", "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif'
+
+
+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
 $font-color = #1F2D3D
 $rem = 20px
 $font-family = $font-family
 $code-font = $code-font
+$site-name-font = $site-name-font
 $text-line-height = 2
 $sm = 768px
 $bg = 1024px
@@ -41,6 +62,7 @@ $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"))
 // Global color & SVG
 $pale-blue = $theme-hr-color
 $light-blue = $theme-color
@@ -67,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
@@ -74,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
@@ -90,3 +113,74 @@ $img-border-padding = 4px
 // sidebar
 $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%);
+
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -9,11 +9,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)',
@@ -45,11 +45,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 +61,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)',
@@ -82,11 +80,12 @@ $(function () {
  // 首页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');
+    $('#to_comment').css("display", "block")
  }

  //---------------------------------------------------------------------------------------------------------
-  
+
  $(".scroll-down").on("click", function () {

    scrollTo('#content-outer')
@@ -94,37 +93,6 @@ $(function () {
  });


-  //--------------------------------------------------------------------------------------------------------
-  // tags 隨機大小 顔色
-  var list = document.querySelectorAll(".tag-cloud .tag-cloud-tags a");
-
-  if ($(window).width() > 768) {
-    Array.prototype.forEach.call(list, (item, index) => {
-      item.style.fontSize = Math.floor(Math.random() * 20 + 15) + "px"; //15 ~ 35
-      item.style.color =
-        "rgb(" +
-        Math.floor(Math.random() * 201) +
-        ", " +
-        Math.floor(Math.random() * 201) +
-        ", " +
-        Math.floor(Math.random() * 201) +
-        ")"; // 0,0,0 -> 200,200,200
-    });
-  } else {
-    Array.prototype.forEach.call(list, (item, index) => {
-      item.style.fontSize = Math.floor(Math.random() * 13 + 15) + "px"; //15 ~ 28
-      item.style.color =
-        "rgb(" +
-        Math.floor(Math.random() * 201) +
-        ", " +
-        Math.floor(Math.random() * 201) +
-        ", " +
-        Math.floor(Math.random() * 201) +
-        ")"; // 0,0,0 -> 200,200,200
-    });
-  }
-
-
  //--------------------------------------------------------------------------------------------------------
  // bookmark
  $.fancyConfirm = function (opts) {
@@ -182,10 +150,10 @@ $(function () {
  //-------------------------------------------------------------------------------------------------------
  //代码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)
@@ -240,27 +208,71 @@ $(function () {
      selection.removeAllRanges()
    })
  }
+
+  //代碼框語言識別
+  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");
+  var imgList = $(".recent-post-info  img").not('.no-fancybox');
  if (imgList.length === 0) {
-    imgList = $("#post-content img");
+    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 +
+      lazyload_src +
      '" data-fancybox="group" data-caption="' +
      imgList[i].alt +
      '" class="fancybox"></a>'
-    );
-    var alt = imgList[i].alt;
-    var $wrap = $(imgList[i]).wrap($a);
+    )
+
+    var alt = imgList[i].alt
+    var $wrap = $(imgList[i]).wrap($a)
    if (alt) {
-      $wrap.after('<div class="img-alt">' + alt + "</div>");
+      $wrap.after('<div class="img-alt">' + alt + '</div>')
    }
  }
-
  $().fancybox({
    selector: "[data-fancybox]",
    loop: true,
@@ -292,55 +304,55 @@ $(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 () {
-    if (!$('.menus').is(':visible')) {
+    if ($(".toggle-menu").hasClass("open")) {
      $(".toggle-menu").removeClass("open").addClass("close");
-      $('.menus').slideDown(300)
-    } else {
-      $(".toggle-menu").removeClass("close").addClass("open");
-      $('.menus').slideUp(200)
+      $('body').addClass("is_hidden");
+      $('.menus').animate({
+        right: 0
+      }, 300)
+      $('.menu_mask,.menus').css("display", "block")
    }
  })

-  $(document).on('click touchstart', function (e) {
-    var flag = $('.menus')[0].contains(e.target) || $('.toggle-menu')[0].contains(e.target)
-    if (!flag && $('.toggle-menu').is(':visible')) {
-      $(".toggle-menu").removeClass("close").addClass("open");
-      $('.menus').slideUp(200)
-    }
+  $('.menu_mask ').on('click touchstart', function () {
+    $(".toggle-menu").removeClass("close").addClass("open");
+    $('body').removeClass("is_hidden");
+    $('.menus').animate({
+      right: -250
+    }, 300, function () {
+      {
+        $('.menus').css({
+          'display': ''
+        })
+      }
+    })
+    $('.menu_mask').css("display", "")
  })

-
  $(window).on('resize', function (e) {
    if (!$('.toggle-menu').is(':visible')) {
-      if (!$('.menus').is(':visible')) {
-        $(".toggle-menu").removeClass("open").addClass("close");
-        $('.menus').slideDown(300)
+      if ($(".toggle-menu").hasClass("close")) {
+        $(".toggle-menu").removeClass("close").addClass("open");
+        $('body').removeClass("is_hidden");
+        $('.menus').animate({
+          right: -250
+        }, 300)
+        $('.menu_mask').css("display", "")
      }
    }
  })

+
  //---------------------------------------------------------------------------------------------------------
-  /** scroll 滚动 toc*/
+/** scroll 滚动 toc*/
  var initTop = 0
  $('.toc-child').hide()

+  var is_post_bottom = ($('#post_bottom').hasClass('no_comment_show')) && ($('#post_bottom').hasClass('no_toc_show'))
+
  // main of scroll
  $(window).scroll(throttle(function (event) {
    var currentTop = $(this).scrollTop()
@@ -349,55 +361,87 @@ $(function () {
      scrollPercent(currentTop)
      // head position
      findHeadPosition(currentTop)
+      auto_scroll_toc(currentTop)
+      
    }
    var isUp = scrollDirection(currentTop)
-    if (currentTop > 56) {
-      if (isUp) {
-        $('#page-header').hasClass('visible') ? $('#page-header').removeClass('visible') : console.log()
+
+    if ($(".toggle-menu").hasClass("open")) {
+      if (currentTop > 56) {
+
+        if (isUp) {
+          $('#page-header').hasClass('visible') ? $('#page-header').removeClass('visible') : console.log()
+          if (!is_post_bottom) {
+            $('#post_bottom').removeClass('toc_mobile_show')
+            $('#toc_mobile').hasClass('is_visible') ? $('#toc_mobile').removeClass('is_visible') : console.log()
+          }
+
+        } else {
+          $('#page-header').hasClass('visible') ? console.log() : $('#page-header').addClass('visible')
+          if (!is_post_bottom) {
+            $('#post_bottom').addClass('toc_mobile_show')
+            $('#toc_mobile').hasClass('is_visible') ? $('#toc_mobile').removeClass('is_visible') : console.log()
+          }
+
+        }
+        $('#page-header').addClass('fixed')
+        if ($('#go-up').css('opacity') === '0') {
+
+          $('#go-up').animate({}, function () {
+            $('#go-up').css({
+              'opacity': '1',
+              'transform': 'translateX(-30px) rotateZ(360deg)'
+            })
+          })
+        }
+        if ($('#rightside').css('opacity') === '0') {
+
+          $('#rightside').animate({}, function () {
+            $('#rightside').css({
+              'opacity': '1',
+              'transform': 'translateX(-38px)'
+            })
+          })
+        }
+
+
      } else {
-        $('#page-header').hasClass('visible') ? console.log() : $('#page-header').addClass('visible')
-      }
-      $('#page-header').addClass('fixed')
-      if ($('#go-up').css('opacity') === '0') {
+        if (currentTop === 0) {
+          $('#page-header').removeClass('fixed').removeClass('visible')
+          if (!is_post_bottom) {
+            $('#post_bottom').removeClass('toc_mobile_show')
+          }
+
+        }

        $('#go-up').animate({}, function () {
          $('#go-up').css({
-            'opacity': '1',
-            'transform': 'translateX(-30px) rotateZ(360deg)'
+            'opacity': '0',
+            'transform': 'translateX(0) rotateZ(180deg) '
          })
        })
-      }
-      if ($('#rightside').css('opacity') === '0') {

        $('#rightside').animate({}, function () {
          $('#rightside').css({
-            'opacity': '1',
-            'transform': 'translateX(-38px)'
+            'opacity': '0',
+            'transform': 'translateX(0)'
          })
        })
+
      }
-
-
-    } else {
-      if (currentTop === 0) {
-        $('#page-header').removeClass('fixed').removeClass('visible')
-      }
-
-      $('#go-up').animate({}, function () {
-        $('#go-up').css({
-          'opacity': '0',
-          'transform': 'translateX(0) rotateZ(180deg) '
-        })
-      })
-
-      $('#rightside').animate({}, function () {
-        $('#rightside').css({
-          'opacity': '0',
-          'transform': 'translateX(0)'
-        })
-      })
-
    }
+
+    if (!is_post_bottom) {
+      if ($(window).width() <= 768 && $('#post_bottom').hasClass('toc_mobile_show')) {
+        $('#rightside').css('bottom', '110px')
+        $('#go-up').css('bottom', '70px')
+
+      } else {
+        $('#rightside').css('bottom', '60px')
+        $('#go-up').css('bottom', '20px')
+      }
+    }
+
  }, 50, 100))

  // go up smooth scroll
@@ -406,9 +450,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) {
@@ -501,41 +545,79 @@ $(function () {
        // Hide their respective list of subsections
        .find('.toc-child').hide()
    }
+
+
  }

-  //代碼框雙擊全屏
-  $('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');
+      $('#font_plus,#font_minus,#to_comment').toggleClass('is_visible');
+      $('#to_comment').toggleClass('is_invisible');

    } else {
      $('body').toggleClass('read-mode');
-      $('#font_plus,#font_minus').toggleClass('is_visible');
+      $('#font_plus,#font_minus,#to_comment').toggleClass('is_visible');
+      $('#to_comment').toggleClass('is_invisible');
    }
-
  });

-
  //閲讀模式下字體調整
  $("#font_plus").click(function () {
    var font_size_record = parseFloat($('body').css('font-size'))
+    var code_size_record = parseFloat($('pre').css('font-size'))
+    var code_size_record = parseFloat($('code').css('font-size'))
    $('body').css('font-size', font_size_record + 1)
+    $('pre').css('font-size', font_size_record + 1)
+    $('code').css('font-size', font_size_record + 1)
  });

  $("#font_minus").click(function () {
    var font_size_record = parseFloat($('body').css('font-size'))
+    var code_size_record = parseFloat($('pre').css('font-size'))
+    var code_size_record = parseFloat($('code').css('font-size'))
    $('body').css('font-size', font_size_record - 1)
+    $('pre').css('font-size', font_size_record - 1)
+    $('code').css('font-size', font_size_record - 1)
  });
+
+  // 手機顯示toc
+  $('#mobile_toc').on('click', function () {
+    $("#toc_mobile").toggleClass('is_visible')
+  })
+
+  // 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');
+      }
+    })
+  
 });
--- a/source/js/nightshift.js
+++ b/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");
--- a/source/js/search/algolia.js
+++ b/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()
--- a/source/js/search/local-search.js
+++ b/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()
  
--- a/source/js/third-party/canvas-nest.js
+++ b/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)}();
				`@@ -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))`