1. 更改手機頁面的menu和toc的顯示方式和顯示特效（ipad也能看TOC)

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

_config.yml

@@ -1,29 +1,20 @@
-# Theme color for customize
-# Notice: color value must in double quotes like "#000" or may cause error!
-# ---------------
-# theme_color:
-#   enable: true
-#   main: "#49B1F5"
-#   paginator: "#00c4b6"
-#   button_hover: "#FF7242"
-#   text_selection: "#00c4b6"
-#   link_color: "#99a9bf"
-#   meta_color: '#858585'
-#   hr_color: "#A4D8FA"
-#   read-mode-bg_color: '#FAF9DE'
-#   inline-code-color: '#F47466'
 
 # Main menu navigation
-# format: xxx: /xxx/||icon
 # ---------------
+# format: xxx: 連結 || icon
+# sub-menu
+# xxx || icon:
+#   xxx || 連結 || icon
 menu:
-  Home: /||fa fa-home
+  Home: / || fa fa-home
-  Archives: /archives/||fa fa-archive
+  Archives: /archives/ || fa fa-archive
-  Tags: /tags/||fa fa-tags
+  Tags: /tags/ || fa fa-tags
-  Categories: /categories/||fa fa-folder-open
+  Categories: /categories/ || fa fa-folder-open
-  Link: /link/||fa fa-link
+  Link: /link/ || fa fa-link
-  About: /about/||fa fa-heart
+  About: /about/ || fa fa-heart
-#   #XXX: /xxx
+  List||fa fa-list:
+    - Music || /music/ || fa fa-music
+    - Movie || /movies/ || fa fa-film
 
 
 # Favicon
@@ -53,6 +44,13 @@ highlight_shrink: false #代碼框不展開，需點擊 '>' 打開
 
 code_word_wrap: false
 
+# copy setting
+# 是否禁止複製（如果禁止，highlight_copy的功能將無效)
+# copyright 複製的内容後面加上版權信息
+copy:
+  enable: false  # true 開啓 / false 禁止
+  copyright: false
+
 # social settings
 # formal: 
 #   icon: link
@@ -149,6 +147,12 @@ default_cover: https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg
 # the banner image of archive page
 archive_img: https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/Photo/archive.jpg
 
+# the banner image of tag page
+tag_img: https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/tag-bg.png
+
+# the banner image of category page
+category_img: https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/category-bg
+
 # if the photo link cannot connect,it will show that
 lodding_bg:
   flink: /img/friend_404.gif
@@ -228,6 +232,7 @@ disqus:
 #   repo:
 #   owner:
 #   admin:
+#   language:   # en , zh-CN , zh-TW
 ####   Using this js for redirect to gitalk container after login
 ####   See https://github.com/gitalk/gitalk/issues/125
 #   js: https://cdn.jsdelivr.net/gh/upupming/gitalk@36368e5dffd049e956cdbbd751ff96c28d8255cf/dist/gitalk.min.js
@@ -243,7 +248,8 @@ valine:
   avatar: monsterid # gravatar style https://valine.js.org/#/avatar
   lang: en # i18n: zh-cn/en
   placeholder: Please leave your footprints # valine comment input placeholder(like: Please leave your footprints )
-  guest_info: nick,mail,link #valine comment header inf
+  guest_info: nick,mail,link #valine comment header info
+  bg: /img/comment_bg.png  # valine background
 
 #####     Footer Settings    ####
 # ------------------------------------
@@ -258,6 +264,7 @@ ICP:
   enable: false
   url: 
   text: 
+  icon: /img/icp.png
 
 
 ####    站長驗證    ####
@@ -307,6 +314,35 @@ related_post:
 ####    美化/效果    ####
 #--------------------------------
 
+# Theme color for customize
+# Notice: color value must in double quotes like "#000" or may cause error!
+# ---------------
+# theme_color:
+#   enable: true
+#   main: "#49B1F5"
+#   paginator: "#00c4b6"
+#   button_hover: "#FF7242"
+#   text_selection: "#00c4b6"
+#   link_color: "#99a9bf"
+#   meta_color: '#858585'
+#   hr_color: "#A4D8FA"
+#   read-mode-bg_color: '#FAF9DE'
+#   inline-code-color: '#F47466'
+
+# 主頁設置
+# 默認top_img全屏，site_info在中間
+# 使用默認, 都無需填寫（建議默認）
+index_site_info_top:   #主頁標題距離頂部距離  例如 300px/300em/300rem/10%
+index_top_img_height:  #主頁top_img高度 例如 300px/300em/300rem  不能使用百分比
+
+
+# category和tag頁的UI設置
+# index 值代表 UI將與首頁的UI一樣
+# 默認跟archives頁面UI一樣
+category_ui:  # 留空或index
+tag_ui:  # 留空或index
+
+
 # 設置網站背景
 # 可設置圖片 或者 顔色
 # 圖片格式 background: url(http://xxxxxx.com/xxx.jpg)
@@ -366,14 +402,14 @@ post_beautify:
 # 全局字體
 font:
   enable: false
-  font-family: Lato, Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB,"Microsoft JhengHei", "MicrMicrosoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif
+  font-family: Lato, Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, MicrMicrosoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif
-  code-font: consolas, Menlo, "PingFang SC", "Microsoft JhengHei","Microsoft YaHei", monospace, Helvetica Neue For Number
+  code-font: consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace, Helvetica Neue For Number
 
 # 網站名字字體
 # 左上角網站名字 主頁居中網站名字
 blog_title_font: 
   font_link: https://fonts.googleapis.com/css?family=Titillium+Web #字體鏈接
-  font-family: Titillium Web, PingFang SC, Hiragino Sans GB, "Microsoft JhengHei", "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif
+  font-family: Titillium Web, PingFang SC, Hiragino Sans GB, "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif
 
 # 水平分隔綫
 hr:
@@ -383,11 +419,12 @@ hr:
 
 # 主頁subtitle
 # 打字效果
+# (如果有英文逗號' , '，請使用轉義字符 ,)
 subtitle: 
   enable: true
-  sub1: 今日事,今日畢
+  sub:
-  sub2: Never put off till tomorrow what you can do today  #如果有符號 ' ，記得前面加上 \ 
+    - 今日事,今日畢
-
+    - Never put off till tomorrow what you can do today
 
 
 

languages/default.yml

@@ -82,5 +82,15 @@ rightside:
   font_minus_title: Decrease font size
   translate_title: Traditional Chinese and Simplified Chinese Conversion
   night_mode_title: Dark Mode
+  back_to_top: Back to top
+  toc: Table of Contents
+  scroll_to_comment: Scroll to comment
+  setting: Setting
 
 runtime_unit: days
+
+copy_copyright:
+  author: Author
+  link: Link
+  source: Source
+  info: Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.

languages/en.yml

@@ -81,5 +81,15 @@ rightside:
   font_minus_title: Decrease font size
   translate_title: Traditional Chinese and Simplified Chinese Conversion
   night_mode_title: Dark Mode
+  back_to_top: Back to top
+  toc: Table of Contents
+  scroll_to_comment: Scroll to comment
+  setting: Setting
 
 runtime_unit: days
+
+copy_copyright:
+  author: Author
+  link: Link
+  source: Source
+  info: Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.

languages/zh-CN.yml

@@ -82,5 +82,15 @@ rightside:
   font_minus_title: 缩小字体
   translate_title: 简繁转换
   night_mode_title: 夜间模式
+  back_to_top: 回到顶部
+  toc: 目录
+  scroll_to_comment: 直达评论
+  setting: 设置
 
 runtime_unit: 天
+
+copy_copyright:
+  author: 作者
+  link: 链接
+  source: 来源
+  info: 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

languages/zh-TW.yml

@@ -15,7 +15,7 @@ page:
   articles: 文章總覽
   tag: 標籤
   category: 分類
-  archives: 歸檔
+  archives: 時間軸
 
 sticky: 置頂
 no_title: 無題
@@ -83,5 +83,15 @@ rightside:
   font_minus_title: 縮小字體
   translate_title: 簡繁轉換
   night_mode_title: 夜間模式
+  back_to_top: 回到頂部
+  toc: 目錄
+  scroll_to_comment: 直達評論
+  setting: 設置
 
 runtime_unit: 天
+
+copy_copyright:
+  author: 作者
+  link: 鏈接
+  source: 來源
+  info: 著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。

layout/category.pug

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

layout/flink.pug

@@ -1,6 +1,6 @@
 .flink
   each i in site.data.link
-    p.comment-word= i.class_name
+    h1= i.class_name
     .post-cards
       ul.md-links
         each item in i.link_list

layout/includes/additional-js.pug

@@ -45,49 +45,13 @@ if is_home() && theme.subtitle.enable
   script(src="https://cdn.jsdelivr.net/npm/typed.js@2.0.9")    
   script.
     var typed = new Typed(".subtitle", {
-    strings: ['!{theme.subtitle.sub1}','!{theme.subtitle.sub2}'],
+    strings: '!{theme.subtitle.sub}'.split(","),
     startDelay: 300,
     typeSpeed: 100,
     loop: true,
     backSpeed: 50
     });
 
-if is_home()  
-  script.
-    //首頁fullpage
-    function alignContent() {
-      for (var n = $(window).height(), e = document.querySelectorAll(".full_page"), i = 0; i < e.length; i++) 
-        e[i].style.height = n + "px";
-        $("#site-info").each(function () {
-          var x = $(this).height();
-          $(this).css("top", (n-x)/2)       
-        })
-    }
-
-    function recent_post_padding() {
-      $(".recent-post-info").each(function () {
-        var k = $(".recent-post-item").height();
-        var e = $(this).height();
-        $(this).css({"padding-top": (k-e)/2 , "padding-bottom": (k-e)/2 })
-      })   
-    }
-
-    alignContent();
-
-    //recent-post-item垂直置中
-    if ($(window).width() > 768) {    
-      recent_post_padding();
-    }
-     
-    $(window).bind("resize", function () {
-
-      alignContent()
-
-      if ($(window).width() > 768) {    
-        recent_post_padding();     
-      }
-    })
-
 if theme.busuanzi.site_uv || theme.busuanzi.site_pv || theme.busuanzi.page_pv
   script(async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js")
 
@@ -99,3 +63,21 @@ if theme.lazyload.enable
   script. 
     const observer = lozad(); // lazy loads elements with default selector as '.lozad'
     observer.observe();
+
+if is_home() && !theme.index_top_img_height && !theme.index_site_info_top
+  script.
+    //首頁fullpage
+    function alignContent() {
+      for (var n = $(window).height(), e = document.querySelectorAll(".full_page"), i = 0; i < e.length; i++) 
+        e[i].style.height = n + "px";
+        $("#site-info").each(function () {
+          var x = $(this).height();
+          $(this).css("top", (n-x)/2)       
+        })
+    }
+    alignContent();
+    
+    $(window).bind("resize", function () {
+      alignContent()
+    })
+

layout/includes/comments/gitalk.pug

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

layout/includes/config.pug

@@ -28,7 +28,6 @@
   }
   var translate = 'undefined';
   if (theme.translate && theme.translate.enable){
-    var defaultEncoding;
     translate = JSON.stringify({
       defaultEncoding: theme.translate.defaultEncoding,
       translateDelay: theme.translate.translateDelay,
@@ -38,7 +37,19 @@
     })
   }
 
+  var copyright = 'undefined' ;
+  if (theme.copy.enable && theme.copy.copyright){
+    copyright = JSON.stringify({      
+      languages: {
+      author: _p("copy_copyright.author") + ': ' + config.author,
+      link: _p("copy_copyright.link") + ': ' + without_html,
+      source: _p("copy_copyright.source") + ': ' + config.title,
+      info: _p("copy_copyright.info")
+      }
+    })
+  }
 
+  var copy_copyright_js = theme.copy.enable && theme.copy.copyright
 
 
 
@@ -61,8 +72,9 @@ script.
       message_prev: '!{_p("bookmark.message_prev")}',
       message_next: '!{_p("bookmark.message_next")}'
     },
-    runtime_unit: '!{_p("runtime_unit")}'
+    runtime_unit: '!{_p("runtime_unit")}',
-  
+    copyright: !{copyright},
+    copy_copyright_js: !{copy_copyright_js}
     
   }
 

layout/includes/footer.pug

@@ -19,4 +19,6 @@
   if theme.ICP.enable
     .icp
       a(href=theme.ICP.url)
+        if theme.ICP.icon
+          img.icp-icon(src=url_for(theme.ICP.icon))
         span=theme.ICP.text

layout/includes/head.pug

@@ -1,6 +1,6 @@
 - var without_index = url.replace('index.html', '')
 - var without_html = without_index.replace('.html', '')
-- var photo_check = page.cover || theme.avatar
+- var photo_check = is_post() ? page.cover || theme.avatar : theme.avatar
 - var photo_link = url_check (photo_check) ? photo_check : config.url + photo_check
 
 meta(http-equiv="x-dns-prefetch-control" content="on")
@@ -107,10 +107,16 @@ if theme.qihu_site_verification
 
 
 - var preload_archive_img = theme.archive_img ||theme.top_img || config.top_img
+- var preload_tag_img = theme.tag_img ||theme.top_img || config.top_img
+- var preload_category_img = theme.category_img ||theme.top_img || config.top_img
 - var preload_img = page.top_img || theme.top_img || config.top_img
 
 if (is_archive() && preload_archive_img) 
   link(rel="preload" href=url_for(preload_archive_img)  as="image" )
+else if (is_tag() && preload_tag_img) 
+  link(rel="preload" href=url_for(preload_tag_img)  as="image" )
+else if (is_category() && preload_category_img) 
+  link(rel="preload" href=url_for(preload_category_img)  as="image" )
 else if (!is_post() && preload_img)
   link(rel="preload" href=url_for(preload_img)  as="image" )
 

layout/includes/header.pug

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

layout/includes/layout.pug

@@ -16,9 +16,10 @@
 - config.subtitle ? home_subtitle_true = ' - ' + config.subtitle : home_subtitle_true = ''
 //- home時pageTitle顯示 JerryC - subtitle，其他顯示 pageTitle | JerryC
 - is_home() ? pageTitle = config.title + home_subtitle_true : pageTitle = pageTitle_saved
+//- 判断keywords
 
 - var pageDescription = page.description || page.title || config.description || ''
-- var pageKeywords = (config.keywords || []).join(',')
+- var pageKeywords = Array.isArray(config.keywords) ? (config.keywords).join(','):  ([]).join(',') || config.keywords
 - if (page.tags && page.tags.data) pageKeywords = page.tags.data.map(function(tag) {return tag.name;}).join(',')
 - var pageAuthor = config.email ? config.author + ',' + config.email : config.author
 - var pageCopyright = config.copyright || config.author
@@ -49,6 +50,9 @@ html(lang=config.language)
   body(class=body_class)
     if theme.fireworks && theme.fireworks.enable
       canvas.fireworks
+    include ./header.pug
+    include ./mobile-sidebar.pug
+    #body-wrap
       if theme.background
         #web_bg
       if (is_post() && page.toc != false && theme.toc.enable)      
@@ -74,10 +78,7 @@ html(lang=config.language)
       - 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))

layout/includes/menu_item.pug

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

layout/includes/mixins/UI.pug

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

layout/includes/mixins/article-sort.pug

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

layout/includes/mobile-sidebar.pug

@@ -0,0 +1,46 @@
+#mobile-sidebar
+  #menu_mask
+  #mobile-sidebar-menus
+    .mobile_author_icon
+      img.lozad.avatar_img(src=url_for(theme.avatar) onerror=`onerror=null;src='${theme.lodding_bg.flink}'`)
+    .mobile_post_data
+      if site.posts.length
+        .mobile_data_item.is_center
+          .mobile_data_link
+            a(href=url_for(config.archive_dir) + '/')
+              .headline= _p('aside.articles') 
+              .length_num= site.posts.length
+
+      if site.tags.length
+        .mobile_data_item.is_center       
+          .mobile_data_link
+            a(href=url_for(config.tag_dir) + '/' )
+              .headline= _p('aside.tags')
+              .length_num= site.tags.length
+
+      if site.categories.length
+        .mobile_data_item.is_center      
+          .mobile_data_link
+            a(href=url_for(config.category_dir) + '/')
+              .headline= _p('aside.categories') 
+              .length_num= site.categories.length
+    hr
+    .menus_items
+      include menu_item.pug
+
+
+  
+  - const showToc = is_post() && page.toc != false && theme.toc.enable
+  -
+    let tocNumber
+    if (page.toc_number !== undefined) tocNumber = page.toc_number
+    else if (theme.toc.number !== undefined) tocNumber = theme.toc.number
+    else tocNumber = true
+  -
+  if (showToc)
+    #mobile-sidebar-toc
+      .toc_mobile_headline= _p('sidebar.catalog')
+      if (page.encrypt == true)
+        .toc-div-class(style="display:none")!=toc(page.origin,{"class":"toc_mobile_items",list_number:tocNumber})
+      else 
+        !=toc(page.content,{"class":"toc_mobile_items",list_number:tocNumber})

layout/includes/nav.pug

@@ -1,5 +1,9 @@
-if (is_archive())
+if is_archive()
   - var top_img = theme.archive_img ||theme.top_img || config.top_img
+else if is_tag()
+  - var top_img = theme.tag_img ||theme.top_img || config.top_img
+else if is_category()
+  - var top_img = theme.category_img ||theme.top_img || config.top_img
 else
   - var top_img = page.top_img||theme.top_img || config.top_img
 
@@ -9,7 +13,6 @@ else
 if is_home()
   nav#nav.full_page
     .nav_bg(style=bg_img)
-    include ./header.pug
     #site-info
       #site-title
         span.blogtitle= page.title || page.tag || page.category || config.title
@@ -28,7 +31,6 @@ if is_home()
 else
   nav#nav.not_index_bg
     .nav_bg(style=bg_img)
-    include ./header.pug
     #page_site-info
       #site-title
           if (is_archive()) 

layout/includes/page_tag.pug

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

layout/includes/pagination.pug

@@ -14,7 +14,7 @@ else
     if(page.prev)
       if(page.next)
         .prev-post.pull-left
-          - var pagination_cover = page.prev.cover || random_cover()
+          - var pagination_cover = page.prev.cover
           a(href=url_for(page.prev.path))
             if theme.lazyload.enable
               img.prev_cover.lozad(data-src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` )
@@ -26,7 +26,7 @@ else
               span=page.prev.title
       else
         .prev-post.pull-full
-          - var pagination_cover = page.prev.cover || random_cover()
+          - var pagination_cover = page.prev.cover
           a(href=url_for(page.prev.path))
             if theme.lazyload.enable
               img.prev_cover.lozad(data-src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
@@ -39,7 +39,7 @@ else
     if(page.next)
       if(page.prev)
         .next-post.pull-right
-          - var pagination_cover = page.next.cover || random_cover()
+          - var pagination_cover = page.next.cover
           a(href=url_for(page.next.path))
             if theme.lazyload.enable
               img.next_cover.lozad(data-src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
@@ -50,7 +50,7 @@ else
               span=page.next.title 
       else
         .next-post.pull-full
-          - var pagination_cover = page.next.cover || random_cover()
+          - var pagination_cover = page.next.cover
           a(href=url_for(page.next.path))
             if theme.lazyload.enable
               img.next_cover.lozad(data-src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)

layout/includes/post-bottom.pug

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

layout/includes/recent-posts.pug

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

layout/includes/reward.pug

@@ -1,5 +1,5 @@
 .post-reward
-  a.reward-buttom
+  a.reward-button
     i.fa.fa-qrcode
     = ' ' + _p('donate')
     .reward-main

layout/includes/rightside.pug

@@ -1,13 +1,20 @@
 section#rightside.rightside
-  if is_post() && page.comments !== false
+  #rightside-config-hide
-    a#to_comment(href="#post-comment")
-      i.scroll_to_comment.fa.fa-comments
     if theme.readmode.enable && is_post()
       i#readmode.fa.fa-book(title=_p('rightside.readmode_title'))
     i#font_plus.fa.fa-plus(title=_p('rightside.font_plus_title'))
     i#font_minus.fa.fa-minus(title=_p('rightside.font_minus_title'))
     if theme.translate && theme.translate.enable
       a#translateLink.translate_chn_to_cht(href="javascript:translatePage();" title=_p('rightside.translate_title'))= theme.translate.default
-  if theme.nightshift.enable
+    if theme.nightshift && theme.nightshift.enable
       - var display_mode = theme.display_mode == 'night'? 'fa fa-sun-o' : 'fa fa-moon-o'
       i#nightshift.nightshift(class=display_mode title=_p('rightside.night_mode_title'))
+  #rightside-config-show
+    #rightside_config(title=_p("rightside.setting"))
+      i.fa.fa-cog(aria-hidden="true")
+    if is_post() && page.comments !== false
+      a#to_comment(href="#post-comment" title=_p("rightside.scroll_to_comment"))
+        i.scroll_to_comment.fa.fa-comments   
+    if is_post() && page.toc != false && theme.toc.enable
+      i#mobile-toc-button.fa.fa-list-ul.close(title=_p("rightside.toc") aria-hidden="true")
+    i.fa.fa-arrow-up#go-up(title=_p("rightside.back_to_top") aria-hidden="true")

layout/includes/widget/card_author.pug

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

layout/includes/widget/card_recent_post.pug

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

layout/page.pug

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

layout/post.pug

@@ -4,7 +4,6 @@ block top_img
   - var top_img =  page.top_img || page.cover || theme.post_meta.top_img || theme.post_img || theme.top_img || config.top_img
   - var bg_img = top_img !== true ? `background-image: url(${top_img})` : ''
   div#top-container(style=bg_img)
-    include ./includes/header.pug
     #post-info
       #post-title
           .posttitle=page.title || _p('no_title')
@@ -30,14 +29,15 @@ block top_img
               a(href=url_for(item.path)).post-meta__categories #[=item.name]
               if (index < page.categories.data.length - 1)
                 i.fa.fa-angle-right(aria-hidden="true")
-        if (theme.wordcount && theme.wordcount.enable)
         .post-meta-wordcount
+          if (theme.wordcount && theme.wordcount.enable)
             span= _p('post.wordcount') + ': '
             span.word-count= wordcount(page.content)
             span.post-meta__separator |
             span= _p('post.min2read', min2read(page.content, {cn: 350, en: 160}))
-            if theme.busuanzi.page_pv
+          if (theme.wordcount && theme.wordcount.enable && theme.busuanzi.page_pv)
             span.post-meta__separator |
+          if theme.busuanzi.page_pv           
             span= _p('post.page_pv') + ': '
             span#busuanzi_value_page_pv
 

layout/tag.pug

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

package.json

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

scripts/list_archives.js

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

scripts/random_cover.js

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

scripts/related_post.js

@@ -44,7 +44,7 @@ hexo.extend.helper.register('related_posts', function (currentPost, allPosts) {
   
   for (var i = 0; i < Math.min(relatedPosts.length, limit_num); i++) {
  
-    var cover = relatedPosts[i].cover || random_cover()
+    var cover = relatedPosts[i].cover
 
     result += '<div class="relatedPosts_item"><a href="' + hexo.theme.config.rootConfig.root + relatedPosts[i].path + '" title="' + relatedPosts[i].title + '">';
     result += '<img class="relatedPosts_cover '+ lazy_class + '"' + lazy_src + '="' + cover + '">';
@@ -84,16 +84,3 @@ function compare (attr) {
       return val2 - val1;
   }
 }
-
-function random_cover() {
-  var post_cover;
-  var num;
-  if (!Array.isArray(hexo.theme.config.default_cover)) {
-    post_cover = hexo.theme.config.default_cover
-    return post_cover
-  } else {
-    num = Math.floor(Math.random() * (hexo.theme.config.default_cover.length));
-    post_cover = hexo.theme.config.default_cover[num];
-    return post_cover
-  }
-}

scripts/tags.js

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

source/css/_global/index.styl

@@ -13,6 +13,12 @@ body
   font-family: $font-family
   line-height: $text-line-height
 
+  if !hexo-config('copy.enable')
+    user-select: none
+    -moz-user-select: none
+    -webkit-user-select: none
+    -ms-user-select: none
+
 *::-webkit-scrollbar
   width: 8px
   height: 8px
@@ -71,19 +77,6 @@ h6
   transition: all 0.2s
   opacity: 0
 
-#go-up
-  position: fixed
-  right: $go-up-right
-  bottom: $go-up-bottom
-  font-size: $sidebar-icon-size
-  opacity: 0
-  cursor: pointer
-  transition: all .2s
-
-.fancybox-caption
-  text-align: center
-
-
 hr
   position: relative
   margin: 2rem auto
@@ -141,85 +134,6 @@ table
   background: $selection
   color: $pale-grey
 
-.text-center
-  text-align: center
-.pull-left
-  float: left
-
-.pull-right
-  float: right
-
-@media screen and (max-width: $bg)
-  i#toggle-sidebar,
-  #sidebar
-    display: none
-
-  body
-    padding-left: 0 !important
-
-
-
-// valine 
-#vcomment
-  font-size: inherit
-  
-  input 
-    font-size: 0.65rem
-
-  button 
-    font-size: .7rem
-    padding: .3rem 1rem
-    background-color: $light-blue
-    color: #fff
-    border-color: #fff
-
-    &:hover
-      background-color: darken($light-blue, 40)
-
-
-  textarea 
-    font-size: 0.7rem
-    background: url(/img/comment_bg.png) 100% 100% no-repeat
-
-  .info
-    display: none
-  
-  .vimg
-    border: 0
-
-    &:hover
-      -moz-transform: rotate(540deg)
-      -o-transform: rotate(540deg)
-      -webkit-transform: rotate(540deg)
-      transform: rotate(540deg)
-  .vcount
-    font-size: 0.775rem
-
-  .vnum 
-    font-size: 1.1rem
-
-  .vsys
-    font-size: 80%
-  
-  .vtime
-    font-size: .65rem
-  
-  .vcontent
-    font-size: 100%
-  
-  .vat
-    font-size: .7125rem
-    color: $cyan
-    border: 1px solid $cyan
-    padding: 0 .8rem
-    border-radius: 5px
-
-    &:hover
-      background-color: alpha($cyan,0.5)
-  
-  code, pre
-    font-size: 98%
-    font-family: $code-font
 
 .full_page #site-title, 
 .full_page #site-sub-title, 
@@ -228,141 +142,15 @@ table
 #aside_content .author-info__description
   font-family: $site-name-font
 
-
+.is_right
-
-#rightside 
-  right: -38px
-  position: fixed
-  bottom: 60px
-  opacity: 0
-  transition: all .2s
-
-
-  #readmode,#font_plus,#font_minus,#to_comment
-    width: 30px
-    height: 30px
-    background-color: $light-blue
-    color: #e3e8ee
-    text-align: center
-    line-height: 29px
-    font-size: 16px
-    display: block
-    margin-bottom: 2px
-    cursor: pointer
-    text-decoration: none
-
-  #to_comment
-    display: none
-  
-  #font_minus,#font_plus
-    display: none
-
-  .translate_chn_to_cht
-    width: 30px
-    height: 30px
-    background-color: $light-blue
-    color: #e3e8ee
-    text-align: center
-    line-height: 29px
-    font-size: 16px
-    display: block
-    margin-bottom: 2px
-    cursor: pointer
-    text-decoration: none
-
-  .nightshift
-    width: 30px
-    height: 30px
-    background-color: $light-blue
-    color: #e3e8ee
-    text-align: center
-    font-size: 17px
-    display: block
-    margin-bottom: 2px
-    cursor: pointer
-    padding-top: 6px
-
-
-  a
-    &:hover  
-      color: white
-    &:after    
-      color: white
-
-  
-
-.comment_headling
-  font-size: 20px
-  font-weight: 700
-  margin-bottom: 10px
-
-
-// bookmark 樣式
-.fc-container .fancybox-bg 
-  background: #eee
-
-
-.fancybox-is-open.fc-container .fancybox-bg 
-  opacity: 0.95
-
-
-.fc-content 
-  margin: 20px
-  max-width: 550px
-  padding: 50px
-  box-shadow: 10px 10px 60px -25px
-  border-radius: 4px
-
-
-.fc-content h3 
-  margin-top: 0
-  font-size: 1.6em
-  letter-spacing: normal
-
-
-.fc-content p 
-  color: #666
-  line-height: 1.5
-
-
-.fc-content p:last-child 
-  margin-bottom: 0
-
-
-/* Custom animation */
-.fancybox-fx-material.fancybox-slide--previous,
-.fancybox-fx-material.fancybox-slide--next 
-  transform: translateY(-60px) scale(1.1)
-  opacity: 0
-
-
-.fancybox-fx-material.fancybox-slide--current 
-  opacity: 1
-  transform: translateY(0) scale(1)
-
-
-.bookmark-ok
-  background: #FF6666
-  border-width: 0
-  color: #fff
-  text-decoration: none
-  padding: 7px 20px
-  line-height: 1.5
-  border-radius: 20px
-  text-transform: uppercase
-  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif
-  font-size: 80%
-  font-weight: 700
-  margin: 5px 5px 5px 0
-  display: inline-block
-  cursor: pointer
-  outline: none
-  transition: all .2s ease-in-out
-  user-select: none
-
-.tright
   text-align: right 
 
+.is_left
+  text-align: left
+
+.is_center
+  text-align: center
+
 .is_visible
   display: block !important
 
@@ -372,12 +160,28 @@ table
 .is_hidden
   overflow: hidden
 
+.pull-left
+  float: left
+
+.pull-right
+  float: right
+
 .fireworks
   position: fixed
   z-index: -1
   pointer-events: none
 
-
 // 去掉加載黑框
 img[src=""],img:not([src])
   opacity: 0
+
+#body-wrap
+  transition: all .3s
+
+@media screen and (max-width: $bg)
+  i#toggle-sidebar,
+  #sidebar
+    display: none
+
+  body
+    padding-left: 0 !important

source/css/_layout/aside.styl

@@ -5,17 +5,12 @@
     -webkit-box-shadow: 0 4px 8px 6px rgba(7,17,27,.06)
     box-shadow: 0 4px 8px 6px rgba(7,17,27,.06)
     border-radius: 8px
-    -webkit-transition: all .3s
-    -moz-transition: all .3s
-    -o-transition: all .3s
-    -ms-transition: all .3s
     transition: all .3s
     background: #fff
     margin-top: 20px
     overflow: hidden
 
     &:hover
-      -webkit-box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
       box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
 
   .card-author
@@ -28,10 +23,8 @@
       transition: all .3s
 
       &:hover
-        -moz-transform: rotate(540deg)
-        -o-transform: rotate(540deg)
-        -webkit-transform: rotate(540deg)
         transform: rotate(540deg)
+
     .author-info
       &__name
         font-size: 1.1rem
@@ -54,10 +47,9 @@
       .headline 
         display: block
         font-size: 0.7rem
-        // letter-spacing: 1px
         margin-bottom: -21px
         text-transform: uppercase
-        color:#4c4948
+        color:$font-black
 
     #aside-social-icons
       margin: 0.5rem auto -0.7rem
@@ -66,8 +58,7 @@
 
       .social-icon 
         margin: 0 0.5rem
-        color: #4c4948
+        color: $font-black
-        /* text-shadow: 0.1rem 0.1rem 0.2rem rgba(0,0,0,0.15) */
         font-size: 1rem
         cursor: pointer
       
@@ -75,16 +66,10 @@
         transition: all 0.3s
         
         &:hover
-          -moz-transform: rotate(540deg)
-          -o-transform: rotate(540deg)
-          -webkit-transform: rotate(540deg)
           transform: rotate(540deg)
 
-
+    #bookmark-it
-    a#bookmark-it
-      display: inline-block
       margin-top: .2rem
-      padding: 0 1rem
       height: 1.6rem
       background: $light-blue
       color: #fff
@@ -94,6 +79,9 @@
       text-transform: uppercase
       z-index: 1
 
+      span
+        padding-left: 10px
+
     .toggle_change--primary,.bookmark--primary 
       color: $ruby
     
@@ -101,7 +89,7 @@
       transition-property: color
       transition-duration: 1s
 
-      &:before {
+      &:before
         content: ""
         position: absolute
         top: 0
@@ -115,18 +103,13 @@
         transition-duration: 0.5s
         transition-timing-function: ease-out
         z-index: -1
-      }
       
-      &:hover {
+      &:hover 
         color: white
 
-        &:before {
+        &:before 
           transform: scaleX(1)
           transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66)
-        }
-      }
-      
-
 
   .card-content 
     padding: 1rem 1.2rem
@@ -140,7 +123,6 @@
     flex-basis: auto
     justify-content: center
 
-
   .item_headline 
     font-size: 0.8rem
     
@@ -170,39 +152,41 @@
       &::after
         width: 100%
 
-
-
   .aside_recent_item 
       margin: 10px 0 -15px 0
     
     .aside_recent_post 
       a
         text-decoration: none
-        color: #4c4948
+        color: $font-black
 
     .aside_recent_post
       margin-bottom: 10px
       width: 100%
 
     .aside_post_cover
-      height: 70px
+      height: 66px
-      width: 70px
+      width: 66px
       float: left
+      overflow: hidden
+
     .aside_post_bg
       object-fit: cover
       width: 100%
       height: 100%
       max-width: 100%
+      padding: 0
+      transition: all .6s
 
       &:hover
         box-shadow: none
+        transform: scale(1.1)
     
     #aside_title    
-      padding-top: 4px
-    
       .aside_post_meta
         font-size: 0.6rem
-        padding-left: 5px
+        padding-left: 10px
+        color: #99a9bf
 
       .aside_post_title
         line-height: 1rem
@@ -210,14 +194,12 @@
         -webkit-line-clamp: 2
         -webkit-box-orient: vertical
         overflow: hidden
-        height: 41px
+        height: 40px
-        padding-left: 5px
+        padding-left: 10px
 
         &:hover
           color: $light-blue !important
 
-
-
   .aside_category_item,.archive-list
     list-style: none
     margin-bottom: -3px
@@ -232,14 +214,14 @@
 
   .aside_category_list,.archive-list-item
     margin-left: -40px
-    padding: 0.2rem 1rem
 
     &:hover
       background-color: $light-blue
       color: #363636
     a
       text-decoration: none
-      color: #4c4948
+      color: $font-black
+      padding: 0.2rem 1rem
   
   .aside_category_list_name,.archive-list-link
     white-space: nowrap
@@ -250,9 +232,6 @@
   .aside_category_list_link,.archive-list-item
     display: flex
   
-
-
-
   .aside_category_list_length,.archive-list-count
     float: right 
   
@@ -280,16 +259,60 @@
           float: right
           display: inline-block
 
+// bookmark 樣式
+.fc-container .fancybox-bg 
+  background: #eee
 
-@keyframes announ_animation{
+.fancybox-is-open.fc-container .fancybox-bg 
-  0%,to{
+  opacity: 0.95
-    color: #4c4948
-}
-  50%{
-    color: #FF0000
-    }
-    }
 
+.fc-content 
+  margin: 20px
+  max-width: 550px
+  padding: 50px
+  box-shadow: 10px 10px 60px -25px
+  border-radius: 4px
+
+.fc-content h3 
+  margin-top: 0
+  font-size: 1.6em
+  letter-spacing: normal
+
+.fc-content p 
+  color: #666
+  line-height: 1.5
+
+.fc-content p:last-child 
+  margin-bottom: 0
+
+/* Custom animation */
+.fancybox-fx-material.fancybox-slide--previous,
+.fancybox-fx-material.fancybox-slide--next 
+  transform: translateY(-60px) scale(1.1)
+  opacity: 0
+
+.fancybox-fx-material.fancybox-slide--current 
+  opacity: 1
+  transform: translateY(0) scale(1)
+
+.bookmark-ok
+  background: #FF6666
+  border-width: 0
+  color: #fff
+  text-decoration: none
+  padding: 7px 20px
+  line-height: 1.5
+  border-radius: 20px
+  text-transform: uppercase
+  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif
+  font-size: 80%
+  font-weight: 700
+  margin: 5px 5px 5px 0
+  display: inline-block
+  cursor: pointer
+  outline: none
+  transition: all .2s ease-in-out
+  user-select: none
 
 @media screen and (max-width: 900px) 
   .layout_page

source/css/_layout/category.styl

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

source/css/_layout/comments.styl

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

source/css/_layout/flink.styl

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

source/css/_layout/footer.styl

@@ -37,3 +37,7 @@ footer
   .footer-separator
     margin: 0 0.2rem
 
+  .icp-icon
+    padding: 0 4px
+    vertical-align: text-bottom
+

source/css/_layout/head.styl

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

source/css/_layout/mobile-sidebar.styl

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

source/css/_layout/nightshift.styl

@@ -1,5 +1,8 @@
 if hexo-config("nightshift") && hexo-config("nightshift.enable")
   .night-mode 
+    color: #99a9bf 
+    background-color: #2d3032
+
     #sidebar
       background: #2d3035 !important
       box-shadow: -0.25rem 0 0.25rem #2d3035 !important
@@ -7,6 +10,9 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable")
       &::-webkit-scrollbar-thumb
         background: lighten(#2d3035,5)
     
+    #toggle-sidebar
+      color: #99a9bf !important
+
     if hexo-config("local_search") && hexo-config("local_search.enable")
       #local-search
         background: #2d3035  
@@ -66,8 +72,12 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable")
       .vcontent.expand:after
         background: hsla(204, 5%, 22%, 1)
           
-    .recent-post-item .article-title
+    .recent-post-item
-        color: #99a9bf
+      background: #2d3032 !important
+      
+      .article-title,
+      a
+        color: #99a9bf !important
 
     #page-header
         &.fixed
@@ -144,7 +154,12 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable")
     .translate_chn_to_cht,
     .nightshift,
     #readmode,
-    #to_comment
+    #to_comment,
+    #font_plus,
+    #font_minus,
+    #rightside_config,
+    #go-up,
+    #mobile-toc-button
         background-color: #2d3035 !important
 
     img
@@ -207,12 +222,16 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable")
     #top-container a,
     #footer,
     #footer a,
-    #page-header a
+    #page-header a,
+    #page-header .toggle-menu
       color: rgba(238,238,238,.6)
     
+    #footer
+      background-color: #2d3032
+
     //打賞 分享
     .post-reward
-      .reward-buttom
+      .reward-button
         background-color: #616a6b
       .post_share
         filter: brightness(0.6)
@@ -222,20 +241,6 @@ 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
 
@@ -246,13 +251,8 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable")
         background-color: #616a6b
 
 
-  @media screen and (max-width: 768px)
+    #mobile-sidebar
-    .night-mode
+      #mobile-sidebar-menus
-      color: #99a9bf 
-      background-color: rgb(45, 48, 53)
-
-      #page-header
-        .menus
         background: #2d3035
 
         .headline
@@ -262,19 +262,12 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable")
           color: darken(#99a9bf,10) !important
         a
           color: #99a9bf !important
-        .menu-icon-first,
-        .menu-icon-second,
-        .menu-icon-third
-          background-color: #99a9bf !important
 
+      #mobile-sidebar-toc
+        background: #2d3035
+        a
+          color: #99a9bf !important
 
-  @media screen and (min-width: 768px)
-    .night-mode
-      color: #99a9bf 
-      background-color: #2d3032
-        
-      .recent-post-item
-          background: #2d3035 !important
 
     #page-header 
       .menus_item_child

source/css/_layout/note.styl

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

source/css/_layout/page.styl

@@ -125,20 +125,25 @@ galleryItemStyle(w, h)
       color: $light-blue !important
 
 .tag-cloud
-  padding: 1.5rem 1rem 2rem
+  padding: 40px 44px 44px
-  text-align: center
 
   a
     display: inline-block
     margin: 0 0.4rem
     text-decoration: none
     cursor: pointer
+    transition: all .3s
 
     &:hover
       color: $ruby !important
+      transform: scale(1.1)
 
   &__title
     font-size: 1.8rem
+    text-align: center
+
+  &-tags
+    text-align: center
 
 #tag,
 #category,
@@ -186,7 +191,7 @@ galleryItemStyle(w, h)
 
   &-item
     position: relative
-    margin-bottom: 1rem
+    margin: 0 0 1rem 0.5rem
     transition: all 0.2s ease-in-out
 
     &:hover
@@ -196,8 +201,8 @@ galleryItemStyle(w, h)
     &:before
       $w = 0.3rem
       position: absolute
-      top: 0.48rem
+      top: 1.8rem
-      left: calc(-1rem - 7px)
+      left: calc(-1rem - 17px)
       width: w = $w
       height: h = w
       border: 0.5 * w solid $light-blue
@@ -219,18 +224,55 @@ galleryItemStyle(w, h)
         border-color: $ruby
     
     &__time
-      position: absolute
-      top: 0.1rem
       color: $a-link-color
+      font-size: 0.7rem
+      padding-left: 0.4rem
 
     &__title
-      display: block
-      margin-left: 5rem
       color: $font-black
+      font-size: 0.75rem
+      height: 60px
+      overflow: hidden
+      display: -webkit-box
+      -webkit-line-clamp: 2
+      -webkit-box-orient: vertical
+      transition: all .3s
+
+      &:hover
+        color: $light-blue
+        transform: translateX(20px)
+    
+    &__img
+      img
+        height: 100%
+        width: 100%
+        object-fit: cover
+        padding: 0
+        transition: all .6s
+      
+        &:hover
+          transform: scale(1.1)
+
+    &__post
       text-decoration: none
-      font-size: 0.8rem
       cursor: pointer
 
+      &:hover
+        color: $a-link-color
+
+  &-img
+    height: 80px
+    width: 80px
+    display: inline-block
+    overflow: hidden
+  
+  &-post
+    display: inline-block
+    top: 0
+    position: absolute
+    margin-left: 1rem
+
+
 .category-lists
   padding: 1rem 0 1.5rem
 

source/css/_layout/pagination.styl

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

source/css/_layout/post.styl

@@ -385,14 +385,13 @@ img
       
 
 // 文章字體
-#post-content p {
+#post-content p
   font-size: 1.1em
-}
 
-#post-content ol, #post-content ul {
+
+#post-content ol,
+#post-content ul 
   font-size: 1em
-}
-
 
 
 @media screen and (max-width: 1024px)
@@ -400,33 +399,21 @@ img
     margin: 0 15px
     width: auto
 
-
-
-
 .layout_post 
   padding: 50px
-  -webkit-box-shadow: 0 4px 8px 6px rgba(7,17,27,0.06)
   box-shadow: 0 4px 8px 6px rgba(7,17,27,0.06)
   border-radius: 8px
-  -webkit-transition: all 0.3s
-  -moz-transition: all 0.3s
-  -o-transition: all 0.3s
-  -ms-transition: all 0.3s
   transition: all 0.3s
   background: #fff
   margin-top: 40px
   margin-bottom: 40px
 
   &:hover 
-    -webkit-box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
     box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
   
   img
-    margin:0 auto
     display:block
 
-
-
   .tag_share
     display: block
 
@@ -456,3 +443,34 @@ img
     a
       text-decoration: none
       color: $light-blue
+    
+    h1
+      margin: 0.8rem 0
+    
+    h2,
+    h3,
+    h4,
+    h5,
+    h6
+      margin: 1rem 0 0.5rem 0
+    
+    img
+      margin: 0 auto 0.8rem 
+        
+    blockquote,
+    p
+      margin: 0 0 0.8rem 0
+      
+
+    table,.note
+      margin: 0.8rem 0
+    
+    figure
+      margin: 0.8rem 0
+
+      table
+        margin: 0
+    
+    blockquote
+      p
+        margin: 0.5rem 0

source/css/_layout/post_bottom.styl

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

source/css/_layout/readmode.styl

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

source/css/_layout/reward.styl

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

source/css/_layout/rightside.styl

@@ -0,0 +1,64 @@
+#rightside 
+  right: -38px
+  position: fixed
+  bottom: 40px
+  transition: all .3s
+  opacity 0
+
+  #rightside-config-hide
+    transition: all .3s
+    display none
+
+  #readmode,
+  #font_plus,
+  #font_minus,
+  #to_comment,
+  .nightshift,
+  #mobile-toc-button,
+  #go-up,
+  #rightside_config
+    width: 30px
+    height: 30px
+    background-color: $light-blue
+    color: $white
+    text-align: center
+    line-height: 29px
+    font-size: 16px
+    display: block
+    margin-bottom: 2px
+    cursor: pointer
+    text-decoration: none
+
+    &:hover  
+      background-color: $ruby 
+  
+  #rightside_config
+    i
+      animation: avatar_turn_around 2s linear infinite
+
+  .translate_chn_to_cht
+    width: 30px
+    height: 30px
+    background-color: $light-blue
+    color: $white
+    text-align: center
+    line-height: 29px
+    font-size: 16px
+    display: block
+    margin-bottom: 2px
+    cursor: pointer
+    text-decoration: none
+
+    &:hover  
+      background-color: $ruby 
+  
+  #mobile-toc-button
+    display: none
+
+
+@media screen and (max-width: $bg)
+  #rightside 
+    #mobile-toc-button
+      display: block
+  
+

source/css/_layout/z-other.styl

@@ -42,29 +42,27 @@
     margin: 0
     object-fit: cover
 
-
     &:hover
       transform:scale(1.1)
   
   #pagination
     margin-top: 2rem
   
-
+  .recent-post-info 
-.recent-post-info 
     padding: 50px 40px
     display: inline-block
     width: 55%
     overflow hidden
 
 
-a.article-meta__categories
+  a.article-meta__categories
     text-decoration: none
     color: #858585
 
     &:hover
       color: #49b1f5 !important
 
-.content
+  .content
     display: -webkit-box
     -webkit-line-clamp: 3
     -webkit-box-orient: vertical
@@ -93,20 +91,15 @@ a.article-meta__categories
 .card_widget,#archive,.tag-cloud,#tag,.category-content,#category,#page,.flink
 
   &:hover 
-    -webkit-box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
     box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
 
 
 
 @media screen and (min-width: 900px) 
   if hexo-config("aside.position") == "left"
-    #recent-posts
+    #recent-posts,#page,.category-content,#archive,.tag-cloud,.flink,#tag,#category
       order: 2
 
-    #page,.category-content,#archive,.tag-cloud,.flink,#tag,#category
-      order: 2
-
-
 @media screen and (max-width: 900px) 
   #page,.category-content,#archive,.tag-cloud,.flink,#tag,#category
       width: 100% !important
@@ -164,11 +157,12 @@ a.article-meta__categories
   .category-lists
     padding: 0
   
+  #recent-posts
     .recent-post-info 
       padding: 20px 10px !important
       width: 100%
 
-  #recent-posts #pagination
+    #pagination
       margin-bottom: 0
 
   #nav 
@@ -202,17 +196,20 @@ footer
   animation: main 1s
 
 #nav,
-#top-container
+#top-container,
+#page-header
   animation: header 1s
 
 #site-title
   animation: titlescale 1s
 
-canvas,#web_bg
+canvas,
+#web_bg
   animation: to_show 4s
 
 .card-announcement-animation
-  animation: announ_animation 1.5s infinite
+  animation: announ_animation .8s linear infinite
+  color: #FF0000
 
 .scroll-down-effects
   animation: scroll-down-effect 1.5s infinite
@@ -222,8 +219,11 @@ if hexo-config("avatar_effect") == true
     animation: avatar_turn_around 2s linear infinite
 
 .reward-main
-  animation: donate_effcet .3s .1s ease both;
+  animation: donate_effcet .3s .1s ease both
 
+.rightside-in
+  animation: rightside_in_animate .3s
+  display: block !important
 
 @keyframes scroll-down-effect
   0%
@@ -287,3 +287,16 @@ if hexo-config("avatar_effect") == true
   100%
     opacity: 1
     transform: translateY(0)
+
+@keyframes announ_animation
+  0%,to
+    transform: scale(1)
+  50%
+    transform: scale(1.2)
+
+@keyframes rightside_in_animate
+  0%    
+    transform: translateX(28px)
+  100%
+    transform: translateX(0)
+

source/css/var.styl

@@ -60,9 +60,9 @@ $lg = 1450px
 $sidebar-icon-top = 20px
 $sidebar-icon-left = $sidebar-icon-top - 4px
 $sidebar-icon-size = 16px
-$go-up-bottom = $sidebar-icon-top
-$go-up-right = -($sidebar-icon-left)
 $web-bg = convert(hexo-config("background"))
+$index_top_img_height = convert(hexo-config('index_top_img_height')) || 100vh
+$index_site_info_top = convert(hexo-config("index_site_info_top")) || 43%
 // Global color & SVG
 $pale-blue = $theme-hr-color
 $light-blue = $theme-color

source/js/main.js

@@ -1,4 +1,8 @@
 $(function () {
+
+  /**
+   * 進入post頁sidebar自動打開
+   */
   if ($('#sidebar').hasClass('auto_open')) {
     if ($(".sidebar-toc__content").children().length > 0) {
       $(".layout_post").animate({}, function () {
@@ -32,8 +36,9 @@ $(function () {
   }
 
 
-  //-------------------------------------------------------------------------------------------------------
+  /**
-  //sidebar
+   * 點擊左下角箭頭,顯示sidebar
+   */
   $('#toggle-sidebar').on('click', function () {
 
     if (!isMobile() && $('#sidebar').is(':visible')) {
@@ -76,25 +81,25 @@ $(function () {
     }
   })
 
-  //-----------------------------------------------------------------------------------------------------
+  /**
-  // 首页fullpage添加
+   * 首頁fullpage添加
-  // 添加class 
+   * 添加class
+   */
   if (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)) {} else {
     $('.full_page .nav_bg').css('background-attachment', 'fixed');
-    $('#to_comment').css("display", "block")
   }
 
-  //---------------------------------------------------------------------------------------------------------
+  /**
-
+   * 首頁top_img底下的箭頭
+   */
   $(".scroll-down").on("click", function () {
-
     scrollTo('#content-outer')
-
   });
 
 
-  //--------------------------------------------------------------------------------------------------------
+  /**
-  // bookmark
+   * BOOKMARK 書簽
+   */
   $.fancyConfirm = function (opts) {
     opts = $.extend(true, {
       title: 'Are you sure?',
@@ -109,7 +114,7 @@ $(function () {
       src: '<div class="fc-content">' +
         '<h3>' + opts.title + '</h3>' +
         '<p>' + opts.message + '</p>' +
-        '<p class="tright">' +
+        '<p class="is_right">' +
         '<button data-value="1" data-fancybox-close class="bookmark-ok">' + opts.okButton + '</button>' +
         '</p>' +
         '</div>',
@@ -147,9 +152,10 @@ $(function () {
       }
     });
 
-  //-------------------------------------------------------------------------------------------------------
+  /**
-  //代码copy
+   * 代碼copy
-  // Add copy icon
+   * Add copy icon
+   */
   $('figure.highlight').wrap('<div class="code-area-wrap"></div>')
 
   var highlight_copy = GLOBAL_CONFIG.highlight_copy
@@ -209,7 +215,9 @@ $(function () {
     })
   }
 
-  //代碼框語言識別
+  /**
+   * 代碼框語言識別
+   */
   var highlight_lang = GLOBAL_CONFIG.highlight_lang
   if (highlight_lang == 'true') {
     var $highlight_lang = $('<div class="code_lang"></div>')
@@ -231,7 +239,9 @@ $(function () {
 
     })
   }
-  //代碼收縮
+  /**
+   * 代碼收縮
+   */
   var highlight_shrink = GLOBAL_CONFIG.highlight_shrink
   if (highlight_shrink == 'true') {
     var $code_expand = $('<i class="fa fa-angle-down code-expand code-closed" aria-hidden="true"></i>')
@@ -249,8 +259,9 @@ $(function () {
     }
   })
 
-  //---------------------------------------------------------------------------------------------------
+  /**
-  //fancybox
+   * fancybox
+   */
   var imgList = $(".recent-post-info  img").not('.no-fancybox');
   if (imgList.length === 0) {
     imgList = $("#post-content img").not('.no-fancybox');
@@ -304,55 +315,71 @@ $(function () {
 
   });
 
-  //---------------------------------------------------------------------------------------------------------
+  /**
-  /** head点击*/
+   * 手機menu和toc按鈕點擊
-  $('.toggle-menu').on('click', function () {
+   * 顯示menu和toc的sidebar
+   */
+  function mobile_menu_close() {
     if ($(".toggle-menu").hasClass("open")) {
       $(".toggle-menu").removeClass("open").addClass("close");
-      $('body').addClass("is_hidden");
+      $('body').removeClass("open-mobile-menus");
-      $('.menus').animate({
+      $('#menu_mask').fadeOut()
-        right: 0
-      }, 300)
-      $('.menu_mask,.menus').css("display", "block")
     }
+
+  }
+
+  function mobile_toc_close() {
+    if ($("#mobile-toc-button").hasClass("open")) {
+      $("#mobile-toc-button").removeClass("open").addClass("close");
+      $('body').removeClass("open-mobile-toc");
+      $('#menu_mask').fadeOut();
+    }
+
+  }
+  $('.toggle-menu').on('click', function () {
+    if ($(".toggle-menu").hasClass("close")) {
+      $(".toggle-menu").removeClass("close").addClass("open");
+      $('body').addClass("open-mobile-menus");
+      $('#menu_mask').fadeIn();
+    }
+
   })
 
-  $('.menu_mask ').on('click touchstart', function () {
+  $('#mobile-toc-button').on('click', function () {
-    $(".toggle-menu").removeClass("close").addClass("open");
+    if ($("#mobile-toc-button").hasClass("close")) {
-    $('body').removeClass("is_hidden");
+      $("#mobile-toc-button").removeClass("close").addClass("open");
-    $('.menus').animate({
+      $('body').addClass("open-mobile-toc");
-      right: -250
+      $('#menu_mask').fadeIn();
-    }, 300, function () {
-      {
-        $('.menus').css({
-          'display': ''
-        })
     }
+
   })
-    $('.menu_mask').css("display", "")
+
+  $('#menu_mask').on('click touchstart', function () {
+    mobile_menu_close()
+    mobile_toc_close()
   })
 
   $(window).on('resize', function (e) {
     if (!$('.toggle-menu').is(':visible')) {
-      if ($(".toggle-menu").hasClass("close")) {
+      mobile_menu_close()
-        $(".toggle-menu").removeClass("close").addClass("open");
-        $('body').removeClass("is_hidden");
-        $('.menus').animate({
-          right: -250
-        }, 300)
-        $('.menu_mask').css("display", "")
     }
+    if (!$('#mobile-toc-button').is(':visible')) {
+      mobile_toc_close()
     }
+
   })
 
+  //點擊toc，收起sidebar
+  $("#mobile-sidebar-toc a").on('click', function () {
+    mobile_toc_close()
+  })
 
-  //---------------------------------------------------------------------------------------------------------
+  /**
-/** scroll 滚动 toc*/
+   *  scroll 滚动 toc
+   */
   var initTop = 0
   $('.toc-child').hide()
 
-  var is_post_bottom = ($('#post_bottom').hasClass('no_comment_show')) && ($('#post_bottom').hasClass('no_toc_show'))
-
   // main of scroll
   $(window).scroll(throttle(function (event) {
     var currentTop = $(this).scrollTop()
@@ -366,81 +393,36 @@ $(function () {
     }
     var isUp = scrollDirection(currentTop)
 
-    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({
+          $(this).css({
             'opacity': '1',
             'transform': 'translateX(-38px)'
           })
         })
       }
-
-
     } else {
       if (currentTop === 0) {
         $('#page-header').removeClass('fixed').removeClass('visible')
-          if (!is_post_bottom) {
-            $('#post_bottom').removeClass('toc_mobile_show')
       }
 
-        }
-
-        $('#go-up').animate({}, function () {
-          $('#go-up').css({
-            'opacity': '0',
-            'transform': 'translateX(0) rotateZ(180deg) '
-          })
-        })
-
       $('#rightside').animate({}, function () {
         $('#rightside').css({
-            'opacity': '0',
+          'opacity': '',
-            'transform': 'translateX(0)'
+          'transform': ''
         })
       })
 
     }
-    }
-
-    if (!is_post_bottom) {
-      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))
 
@@ -546,7 +528,6 @@ $(function () {
         .find('.toc-child').hide()
     }
 
-
   }
 
   function auto_scroll_toc(currentTop) {
@@ -561,55 +542,56 @@ $(function () {
     }
   }
 
-  //閲讀模式
+  /**
+   * 閲讀模式
+   */
   $("#readmode").click(function () {
     if (Cookies.get("night-mode") == "night") {
       $('body').toggleClass('night-mode');
       $('body').toggleClass('read-mode');
-      $('#font_plus,#font_minus,#to_comment').toggleClass('is_visible');
       $('#to_comment').toggleClass('is_invisible');
-
     } else {
       $('body').toggleClass('read-mode');
-      $('#font_plus,#font_minus,#to_comment').toggleClass('is_visible');
       $('#to_comment').toggleClass('is_invisible');
     }
   });
 
-  //閲讀模式下字體調整
+  /**
+   * 字體調整
+   */
   $("#font_plus").click(function () {
     var font_size_record = parseFloat($('body').css('font-size'))
-    var code_size_record = parseFloat($('pre').css('font-size'))
+    var pre_size_record = parseFloat($('pre').css('font-size'))
     var code_size_record = parseFloat($('code').css('font-size'))
     $('body').css('font-size', font_size_record + 1)
-    $('pre').css('font-size', font_size_record + 1)
+    $('pre').css('font-size', pre_size_record + 1)
-    $('code').css('font-size', font_size_record + 1)
+    $('code').css('font-size', code_size_record + 1)
   });
 
   $("#font_minus").click(function () {
     var font_size_record = parseFloat($('body').css('font-size'))
-    var code_size_record = parseFloat($('pre').css('font-size'))
+    var pre_size_record = parseFloat($('pre').css('font-size'))
     var code_size_record = parseFloat($('code').css('font-size'))
     $('body').css('font-size', font_size_record - 1)
-    $('pre').css('font-size', font_size_record - 1)
+    $('pre').css('font-size', pre_size_record - 1)
-    $('code').css('font-size', font_size_record - 1)
+    $('code').css('font-size', code_size_record - 1)
   });
 
-  // 手機顯示toc
+  /**
-  $('#mobile_toc').on('click', function () {
+   * sub-menus 位置調整
-    $("#toc_mobile").toggleClass('is_visible')
+   */
-  })
 
-  // sub-menus 位置調整
+  if ($(window).width() > 768) {
-  if ( $(window).width() > 768 ) {
     $('.menus_item_child').each(function () {
-      var a_width= $(this).siblings('a').outerWidth(true);
+      var a_width = $(this).siblings('a').outerWidth(true);
       var child_width = $(this).outerWidth(true);
-      $(this).css("margin-left", -(child_width/ 2 - a_width/ 2))
+      $(this).css("margin-left", -(child_width / 2 - a_width / 2))
     })
   }
 
-  // 手機端sub-menu 展開/收縮
+  /**
+   * 手機端sub-menu 展開/收縮
+   */
   $('.menus-expand').on('click', function () {
     if ($(this).hasClass('menus-closed')) {
       $(this).parents('.menus_item').find('.menus_item_child').show();
@@ -620,4 +602,63 @@ $(function () {
     }
   })
 
+  /**
+   * rightside 點擊設置 按鈕 展開
+   */
+  $('#rightside_config').on('click', function () {
+    $('#rightside-config-hide').toggleClass("rightside-in")
+  })
+  
+  /**
+   * 調正recent_post 上下間距
+   */
+  function recent_post_padding() {
+    $(".recent-post-info").each(function () {
+      var k = $(".recent-post-item").height();
+      var e = $(this).height();
+      $(this).css({
+        "padding-top": (k - e) / 2,
+        "padding-bottom": (k - e) / 2
+      })
+    })
+  }
+
+  //recent-post-item垂直置中
+  if ($(window).width() > 768) {
+    recent_post_padding();
+  }
+
+  $(window).bind("resize", function () {
+    if ($(window).width() > 768) {
+      recent_post_padding();
+    }
+  })
+
+  /**
+   * 複製時加上版權信息
+   */
+  var copy_copyright_js = GLOBAL_CONFIG.copy_copyright_js
+  var copyright = GLOBAL_CONFIG.copyright
+  if (copyright) {
+    document.body.oncopy = event => {
+      event.preventDefault();
+      let textFont, copyFont = window.getSelection(0).toString();
+      if (copyFont.length > 45) {
+        textFont = copyFont + '\n' + '\n' + '\n' +
+          copyright.languages.author + '\n' +
+          copyright.languages.link + '\n' +
+          copyright.languages.source + '\n' +
+          copyright.languages.info;
+      } else {
+        textFont = copyFont;
+      }
+      if (event.clipboardData) {
+        return event.clipboardData.setData('text', textFont);
+      } else {
+        // 兼容IE
+        return window.clipboardData.setData("text", textFont);
+      }
+    }
+  }
+
 });