1. Feature: 手機menu界面重新設計

2. Feature: 文章頁增加美化（原 melody主題功能),並增加更改標題前綴圖標和顔色 3. Feature: PC端增加直達評論按鈕 4. Feature: 可以對單獨文章設置是否顯示版權信息 5. Fix: 修復閲讀模式下，調整字體大小對代碼無效的bug 6. Fix: 調整Valine字體顯示問題 7. Fix: 修正夜間模式下Valine的適配問題 8. Fix: 修復Valine設置notify和verify無效的bug (thx @VincentTV ) 9. Remove: 去掉主題"閲讀更多"按鈕
2026-04-08 12:07:06 +08:00 · 2019-08-29 01:09:28 +08:00
parent 3bf033c9e4
commit da8ffda39b
23 changed files with 346 additions and 236 deletions
--- a/_config.yml
+++ b/_config.yml
@@ -435,4 +435,10 @@ note:
 #圖片懶加載
 lazyload:
  enable: true
-  script: https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js
+  script: https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js
+
+# 美化post頁顯示
+post_beautify:
+  enable: false
+  title-prefix-icon: '\f0c1'
+  title-prefix-icon-color: "#F47466"
--- a/languages/default.yml
+++ b/languages/default.yml
@@ -20,7 +20,6 @@ page:
 sticky: Sticky
 no_title: No title
 archives: Archives
-read_more: Read more

 post:
  created: Created
--- a/languages/en.yml
+++ b/languages/en.yml
@@ -20,7 +20,6 @@ page:
 sticky: Sticky
 no_title: No title
 archives: Archives
-read_more: Read more

 post:
  created: Created
--- a/languages/zh-CN.yml
+++ b/languages/zh-CN.yml
@@ -20,7 +20,6 @@ page:
 sticky: 置顶
 no_title: 无题
 archives: 时间轴
-read_more: 阅读更多

 post:
  created: 发表于
--- a/languages/zh-TW.yml
+++ b/languages/zh-TW.yml
@@ -20,7 +20,6 @@ page:
 sticky: 置頂
 no_title: 無題
 archives: 時間軸
-read_more: 閲讀更多

 post:
  created: 發表於
--- a/layout/includes/comments/valine.pug
+++ b/layout/includes/comments/valine.pug
@@ -2,8 +2,8 @@ if theme.valine && theme.valine.enable
  #vcomment.vcomment
  script(src='https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js')
  script.
-    var notify = '#{ theme.valine.notify }' == true ? true : false;
-    var verify = '#{ theme.valine.verify }' == true ? true : false;
+    var notify = #{ theme.valine.notify } == true ? true : false;
+    var verify = #{ theme.valine.verify } == true ? true : false;
    var GUEST_INFO = ['nick','mail','link'];
    var guest_info = '#{ theme.valine.guest_info }'.split(',').filter(function(item){
      return GUEST_INFO.indexOf(item) > -1
--- a/layout/includes/header.pug
+++ b/layout/includes/header.pug
@@ -6,11 +6,34 @@
    .menu-icon-first
    .menu-icon-second
    .menu-icon-third
-    
+  
+  .menu_mask
+  
  span.pull-right.menus
    .mobile_author_icon
      img.lozad(src=theme.avatar || url_for('/img/avatar.png') onerror=`onerror=null;src='${theme.lodding_bg.flink}'`)
-      .mobile_author-info__description= config.description
+    .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_item
      each value, label in theme.menu
--- a/layout/includes/post-bottom.pug
+++ b/layout/includes/post-bottom.pug
@@ -1,7 +1,7 @@
 #post_bottom
  #post_bottom_items
-    a#to_comment(href="#post-comment")
-      i.scroll_to_comment.fa.fa-comments
+    a#mobile_to_comment(href="#post-comment")
+      i.mobile_scroll_to_comment.fa.fa-comments
    i#mobile_toc.fa.fa-list
    #toc_mobile
      .toc_mobile_headline= _p('sidebar.catalog')
--- a/layout/includes/recent-posts.pug
+++ b/layout/includes/recent-posts.pug
@@ -62,8 +62,6 @@ each article , index in page.posts.data
        - let expert = content.substring(0, theme.auto_excerpt.length) 
        - content.length > theme.auto_excerpt.length ? expert += ' ...' : ''
        .content!= expert
-        .more_setting
-          a.more.more--border.more--primary.more--animated(href=url_for(link) + '#more' style="margin-top: 14px")= _p('read_more')
      else
        .content!= article.description

--- a/layout/includes/rightside.pug
+++ b/layout/includes/rightside.pug
@@ -1,4 +1,7 @@
 section#rightside.rightside
+  if is_post()
+    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'))
--- a/layout/post.pug
+++ b/layout/post.pug
@@ -45,7 +45,7 @@ block top_img
 block content
  article#post(class="")
    #post-content.article-container!= page.content
-  if (theme.post_copyright && theme.post_copyright.enable)
+  if (theme.post_copyright && theme.post_copyright.enable && page.copyright != false)
    .post-copyright
      .post-copyright__author
        span.post-copyright-meta= _p('post.copyright.author') + ": "
--- a/package.json
+++ b/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "hexo-theme-melody",
+  "version": "1.0.0",
+  "description": "A Hexo Theme: Butterfly"
+
+}
--- a/source/css/_global/index.styl
+++ b/source/css/_global/index.styl
@@ -160,6 +160,10 @@ table
    color: #fff
    border-color: #fff

+    &:hover
+      background-color: darken($light-blue, 40)
+
+
  textarea 
    font-size: 0.7rem
    background: url(/img/comment_bg.png) 100% 100% no-repeat
@@ -181,11 +185,8 @@ table
  .vnum 
    font-size: 1.1rem

-  .vnick
-    font-size: 100%
-
  .vsys
-    font-size: 70%
+    font-size: 80%
  
  .vtime
    font-size: .65rem
@@ -194,12 +195,18 @@ table
    font-size: 100%
  
  .vat
-    font-size: .7125rem;
-    color: $cyan;
-    border: 1px solid $cyan;
-    padding: 0 .8rem;
-    border-radius: 5px;
+    font-size: .7125rem
+    color: $cyan
+    border: 1px solid $cyan
+    padding: 0 .8rem
+    border-radius: 5px
+
+    &:hover
+      background-color: alpha($cyan,0.5)
  
+  code, pre
+    font-size: 98%
+    font-family: $code-font

 #site-title, #site-sub-title, 
 #site-name,
@@ -216,7 +223,8 @@ table
  opacity: 0
  transition: all .2s

-  #readmode,#font_plus,#font_minus
+
+  #readmode,#font_plus,#font_minus,#to_comment
    width: 30px
    height: 30px
    background-color: $light-blue
@@ -228,6 +236,9 @@ table
    margin-bottom: 2px
    cursor: pointer
    text-decoration: none
+
+  #to_comment
+    display: none
  
  #font_minus,#font_plus
    display: none
@@ -344,6 +355,9 @@ table
 .is_visible
  display: block !important

+.is_invisible
+  display: none !important
+
 .fireworks
  position: fixed
  z-index: -1
--- a/source/css/_layout/aside.styl
+++ b/source/css/_layout/aside.styl
@@ -54,7 +54,7 @@
      .headline 
        display: block
        font-size: 0.7rem
-        letter-spacing: 1px
+        // letter-spacing: 1px
        margin-bottom: -21px
        text-transform: uppercase
        color:#4c4948
--- a/source/css/_layout/footer.styl
+++ b/source/css/_layout/footer.styl
@@ -2,11 +2,8 @@ footer
  margin-top: 1rem
  background: $light-blue
  background-attachment: local
-
-  &.footer-bg
-    background-position: bottom
-    background-size: cover
-
+  background-position: bottom
+  background-size: cover

 #footer
  padding: 1.2rem 1rem 1rem
--- a/source/css/_layout/head.styl
+++ b/source/css/_layout/head.styl
@@ -103,11 +103,23 @@
        -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: 3rem 1.5rem 0
+      padding: 1.3rem 1.5rem 0
      text-align: center
+
  
      img
        height: 120px
@@ -115,24 +127,35 @@
        display: inline-block
        vertical-align: top
        border-radius: 70px
-        -webkit-transition: all .3s
-        -moz-transition: all .3s
-        -o-transition: all .3s
-        -ms-transition: all .3s
        transition: all .3s

+    .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
+      
    hr         
      margin: 1rem auto
      display: none
-    
-    &.menu_open
-      display: block
-      animation: menu_open .3s
-
-    &.menu_close
-      animation: menu_close .3s
-      display: block
-

  a
    color: $light-grey
@@ -210,7 +233,6 @@
    font-size: 1.2rem

@media screen and (max-width: $sm)
-
  #page-header
    padding: 10px 0.8rem

@@ -220,41 +242,49 @@
    .menus
      position: fixed
      top: 0
-      right: 0
-      width: 100%
+      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: auto
+      z-index: 1
+      overflow-y: scroll
      display: none
+          
+      .mobile_post_data
+        display: flex

-      a
-        display: inline-block !important
-        opacity: 1 !important
-        // margin-left: 0
-        // padding-top: 0.3rem
-        // padding-bottom: 0.3rem
-        // padding-left: 0.6rem
-        margin: 0
-        padding: .5rem 1rem
-        color: $font-black
-        text-shadow: none
-        font-size: 0.8rem
-        z-index: 0
+      .menus_item
+        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
-      
+          &:hover
+            color: $light-blue
+        
      .mobile_author_icon
        display: block
     
      .menus_item 
          padding: 0 .5rem
-          margin-bottom: 4rem
-          text-align: center 
+          margin-bottom: 5rem                              
              
      hr
        display: block 
@@ -267,5 +297,5 @@
    
    &.fixed.open-sidebar 
      .search
-        display: inline-block;
-        opacity: 1;
+        display: inline-block
+        opacity: 1
--- a/source/css/_layout/nightshift.styl
+++ b/source/css/_layout/nightshift.styl
@@ -39,7 +39,7 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable")

    // 評論
    #vcomment
-      * 
+      p,a,textarea,.vemoji-btn,.vpreview-btn,input,path,.vcount,.vnum,.vtime,.vsys,.vsys,.vnick
        color: #99a9bf !important
      
      .vsys
@@ -48,6 +48,26 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable")
      .vbtn
        background: rgb(45, 48, 53) !important      
        color: #99a9bf !important
+        border: 1px solid #99a9bf
+      
+      .vwrap
+        border: 1px solid #99a9bf
+      
+      input
+        border-bottom: 1px dashed #616a6b
+      
+      .vh
+        border-bottom: 1px dashed  #616a6b
+      
+      pre
+        background-color: #2d3035
+        border: 1px solid #99a9bf
+      
+      .vcontent.expand:before
+        background: linear-gradient(180deg,hsla(0, 0%, 0%, 0),hsl(218, 8%, 19%))
+
+      .vcontent.expand:after
+        background: hsla(204, 5%, 22%, 1)
          
    .recent-post-item .article-title
        color: #99a9bf
@@ -126,7 +146,8 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable")

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

    img
@@ -199,8 +220,6 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable")
    &::-webkit-scrollbar-thumb
      background: lighten(#2d3035,5)

-    .more
-      background-color: #616a6b

    #post_bottom
      background: #2d3035
@@ -223,6 +242,12 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable")
      #page-header
        .menus
          background: #2d3035
+
+          .headline
+            color: #99a9bf !important
+          
+          .length_num
+            color: darken(#99a9bf,10) !important
        a
          color: #99a9bf !important        
        .menu-icon-first,
--- a/source/css/_layout/page.styl
+++ b/source/css/_layout/page.styl
@@ -104,24 +104,6 @@ galleryItemStyle(w, h)

  time
    color: $grey
-  
-  .more_setting
-    display: none
-
-  .more
-    display: inline-block
-    padding: 0 1rem
-    height: h = 1.6rem
-    // background: $light-blue
-    // color: $white
-    text-align: center
-    text-decoration: none
-    line-height: h
-    cursor: pointer
-    // transition: all 0.2s ease-in-out
-
-    // &:hover
-    //   background: $ruby

  .article-title
    margin-bottom: 0.3rem
--- a/source/css/_layout/post.styl
+++ b/source/css/_layout/post.styl
@@ -1,3 +1,18 @@
+if hexo-config("post_beautify.enable")
+  headStyle(fontsize)
+    padding-left: unit(fontsize + 0.3, "rem")
+  
+    code 
+      font-size: unit(fontsize, "rem")
+
+    &:before
+      top: calc(50% - unit(fontsize / 2 - 0.05, "rem"))
+      font-size: unit(fontsize, "rem")
+
+    &:hover
+      padding-left: unit(fontsize + 0.2, "rem")
+
+
 #post-title
  font-size: 1.4rem

@@ -100,22 +115,130 @@
 #post-content
  margin-bottom: 1rem

-  ol,
-  ul
-    margin-top: 0.4rem
-    counter-reset: li
+  if hexo-config("post_beautify.enable")
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6
+      cursor: pointer
+      transition: all 0.2s ease-out

-    p
-      margin: 0
+      &:before
+        position: absolute
+        top: calc(50% - 0.35rem)
+        left: 0
+        color: $title-prefix-icon-color
+        content: $title-prefix-icon
+        font: normal normal normal 14px / 1 FontAwesome
+        font-size: 0.8rem
+        transition: all 0.2s ease-out
+
+      &:hover
+        padding-left: 1.1rem
+
+        &:before
+          color: $light-blue
+
+    h1
+      headStyle(1)
+
+    h2
+      headStyle(0.9)
+
+    h3
+      headStyle(0.8)
+
+    h4
+      headStyle(0.7)
+
+    h5
+      headStyle(0.6)
+
+    h6
+      headStyle(0.6)

    ol,
    ul
-      padding-left: 0.5rem
+      margin-top: 0.4rem
+      padding: 0 0 0 0.8rem
+      list-style: none
+      counter-reset: li

-    li
-      position: relative
-      margin: 0.3rem 0
-      padding-left: 0.3rem
+      p
+        margin: 0
+
+      ol,
+      ul
+        padding-left: 0.5rem
+
+      li
+        position: relative
+        margin: 0.2rem 0
+        padding: 0.1rem 0.5rem 0.1rem 1.5rem
+
+        &:hover
+          &:before
+            transform: rotate(360deg)
+
+        &:before
+          position: absolute
+          top: 0
+          left: 0
+          background: $light-blue
+          color: $white
+          cursor: pointer
+          transition: all 0.3s ease-out
+
+    ol
+      > li
+        &:before
+          margin-top: 0.2rem
+          width: w = 1.2rem
+          height: h = w
+          border-radius: 0.5 * w
+          content: counter(li)
+          counter-increment: li
+          text-align: center
+          font-size: 0.6rem
+          line-height: h
+
+    ul
+      > li
+        &:hover
+          &:before
+            border-color: $ruby
+
+        &:before
+          $w = 0.3rem
+          top: 10px
+          margin-left: 0.45rem
+          width: w = $w
+          height: h = w
+          border: 0.5 * w solid $light-blue
+          border-radius: w
+          background: $white
+          content: ""
+          line-height: h
+
+  else
+    ol,
+    ul
+      margin-top: 0.4rem
+      counter-reset: li
+
+      p
+        margin: 0
+
+      ol,
+      ul
+        padding-left: 0.5rem
+
+      li
+        position: relative
+        margin: 0.3rem 0
+        padding-left: 0.3rem

 a
  color: $a-link-color
--- a/source/css/_layout/post_bottom.styl
+++ b/source/css/_layout/post_bottom.styl
@@ -12,7 +12,7 @@
  &.toc_mobile_show
    bottom: 0

-  #to_comment,#mobile_toc
+  #mobile_to_comment,#mobile_toc
    width: 50%
    text-align: center
    font-size: 18px
--- a/source/css/_layout/z-other.styl
+++ b/source/css/_layout/z-other.styl
@@ -71,53 +71,6 @@ a.article-meta__categories
  overflow: hidden
  height: 90px

-.more {
-  position: relative
-  letter-spacing: 1.2px
-  text-transform: uppercase
-  overflow: hidden
-  z-index: 1
-  background-color: $light-blue
-
-  &:focus {
-    outline: none
-  }
-}
-
-.more--primary {
-  color: $white
-}
-
-.more--animated {
-  transition-property: color
-  transition-duration: 0.5s
-
-  &:before {
-    content: ""
-    position: absolute
-    top: 0
-    left: 0
-    right: 0
-    bottom: 0
-    background: $ruby
-    transform: scaleX(0)
-    transform-origin: 0 50%
-    transition-property: transform
-    transition-duration: 0.5s
-    transition-timing-function: ease-out
-    z-index: -1
-  }
-
-  &:hover {
-    color: white
-
-    &:before {
-      transform: scaleX(1)
-      transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66)
-    }
-  }
-}
-
 .layout_page
  display: flex 
  margin: 0 auto
@@ -221,9 +174,6 @@ a.article-meta__categories
  #recent-posts #pagination
    margin-bottom: 0

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

@@ -337,25 +287,3 @@ footer
  50%{transform:scale(1)}
  80%{transform:scale(.98)}
  100%{transform:scale(1)}}
-
-
-
-@keyframes menu_open{
-  0% {
-    transform: scale(0)
-  }
-  100% {
-    transform: scale(1)
-  }  
-  }
-
-@keyframes menu_close{
-0% {
-  transform: scale(1)
-  display: block
-}
-100% {
-  transform: scale(0)
-  display: none
-}
-}
--- a/source/css/var.styl
+++ b/source/css/var.styl
@@ -13,6 +13,8 @@ $site-name-font = "Titillium Web", Lato,PingFang SC, Hiragino Sans GB, "Microsof
 //hr icon
 $hr-icon = '\f0c4'
 $hr-icon-top = -10px
+$title-prefix-icon = '\f0c1'
+$title-prefix-icon-color = #F47466

 if hexo-config("theme_color") && hexo-config("theme_color.enable")
  $theme-color = convert(hexo-config("theme_color.main")) || #49B1F5
@@ -36,6 +38,10 @@ if hexo-config("hr") && hexo-config("hr.enable")
  $hr-icon = hexo-config("hr.icon") || '\f0c4'
  $hr-icon-top = convert(hexo-config("hr.icon-top")) || -10px

+if hexo-config("post_beautify.enable")
+  $title-prefix-icon = hexo-config("post_beautify.title-prefix-icon") || '\f0c1'
+  $title-prefix-icon-color= convert(hexo-config("post_beautify.title-prefix-icon-color")) || #F47466
+

 // Global Variables
 $font-size = 14px
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -82,7 +82,8 @@ $(function () {
  // 首页fullpage添加
  // 添加class 
  if (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)) { } else {
-    $('.full_page').css('background-attachment', 'fixed')
+    $('.full_page').css('background-attachment', 'fixed');
+    $('#to_comment').css("display", "block")
  }

  //---------------------------------------------------------------------------------------------------------
@@ -267,80 +268,41 @@ $(function () {
  //---------------------------------------------------------------------------------------------------------
  /** head点击*/
  $('.toggle-menu').on('click', function () {
-
    if ($(".toggle-menu").hasClass("open")) {
      $(".toggle-menu").removeClass("open").addClass("close");
-      $("#page-header #site-name,#page-header .search").css({ 'color': '#3b3a3a', 'text-shadow': 'none' })
-      $(".toggle-menu *").css({ 'background-color': '#3b3a3a', 'text-shadow': 'none' });
      $('body').addClass("is_hidden");
-      $('.menus').addClass("menu_open");
-      fixbg_menu();
-    } else {
-      $(".toggle-menu").removeClass("close").addClass("open");
-      $("#page-header #site-name,#page-header .search").css({ 'color': '', 'text-shadow': '' });
-      $(".toggle-menu *").css({ 'background-color': '', 'text-shadow': '' });
-      $('body').removeClass("is_hidden");
-      $('.menus').removeClass("menu_open").addClass('menu_close');
-      setTimeout(function () {
-        $('.menus').removeClass("menu_close")
-        
-      }, 300)
+      $('.menus').animate({
+        right: 0
+      }, 300 )
+      $('.menu_mask,.menus').css("display","block")
    }
  })

-  function fixbg_menu() {
-    const fixScroll = (scrollEl) => {
-      let startY
-      scrollEl.addEventListener('touchstart', function (event) {
-        // 如果多於1根手指點擊屏幕,則不處理
-        if (event.targetTouches.length > 1) {
-          return
-        }
-        // 儲存手指的初始位置
-        startY = event.targetTouches[0].clientY
-      }, false)
-      scrollEl.addEventListener('touchmove', function (event) {
-        if (event.targetTouches.length > 1) {
-          return
-        }
-        // 判斷手指滑動方向, y大於0時向下滑動, 小於0時向上滑動
-        const y = event.targetTouches[0].clientY - startY
-        // 如果到頂時繼續向下拉
-        if (scrollEl.scrollTop <= 0 && y > 0) {
-          // 重置滾動距離為最小值
-          scrollEl.scrollTop = 0
-          // 阻止滾動
-          event.preventDefault()
-        }
-        // 如果到底時繼續上滑  
-        const maxScrollTop = scrollEl.scrollHeight - scrollEl.clientHeight
-        if (maxScrollTop - scrollEl.scrollTop <= 0 && y < 0) {
-          scrollEl.scrollTop = maxScrollTop
-          event.preventDefault()
-        }
-      }, {
-          passive: false
-        })
+  $('.menu_mask ').on('click touchstart', function () {
+    $(".toggle-menu").removeClass("close").addClass("open");
+    $('body').removeClass("is_hidden");
+    $('.menus').animate({
+      right: -250
+    }, 300,function () {
+      {$('.menus').css({ 'display': ''})
    }
-    const scrollEl = document.querySelector(".menus");
-    fixScroll(scrollEl)
-  }
-
-  
+  })
+    $('.menu_mask').css("display","")
+  })

  $(window).on('resize', function (e) {
    if (!$('.toggle-menu').is(':visible')) {
      if ($(".toggle-menu").hasClass("close")) {
        $(".toggle-menu").removeClass("close").addClass("open");
-        $("#page-header #site-name,#page-header .search").css({ 'color': '', 'text-shadow': '' });
-        $(".toggle-menu *").css({ 'background-color': '', 'text-shadow': '' });
        $('body').removeClass("is_hidden");
-        $('.menus').removeClass("menu_open");
-      }
+        $('.menus').animate({
+          right: -250
+        }, 300)
+        $('.menu_mask').css("display","")
+          }
    }
  } )   

- 

  //---------------------------------------------------------------------------------------------------------
  /** scroll 滚动 toc*/
@@ -554,14 +516,17 @@ $(function () {
  //閲讀模式
  $("#readmode").click(function () {

+
    if (Cookies.get("night-mode") == "night") {
      $('body').toggleClass('night-mode');
      $('body').toggleClass('read-mode');
-      $('#font_plus,#font_minus').toggleClass('is_visible');
+      $('#font_plus,#font_minus,#to_comment').toggleClass('is_visible');
+      $('#to_comment').toggleClass('is_invisible');

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

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

  $("#font_minus").click(function () {
    var font_size_record = parseFloat($('body').css('font-size'))
+    var code_size_record = parseFloat($('pre').css('font-size'))
+    var code_size_record = parseFloat($('code').css('font-size'))
    $('body').css('font-size', font_size_record - 1)
+    $('pre').css('font-size', font_size_record - 1)
+    $('code').css('font-size', font_size_record - 1)
  });