1. fix algolia_search bug #1

2. add read mode

source/css/_global/index.styl

@@ -220,6 +220,22 @@ table
   opacity: 0
   transition: all .2s
 
+  #readmode,#font_plus,#font_minus
+    width: 30px
+    height: 30px
+    background-color: #49b1f5
+    color: #e3e8ee
+    text-align: center
+    line-height: 29px
+    font-size: 16px
+    display: block
+    margin-bottom: 2px
+    cursor: pointer
+    text-decoration: none
+  
+  #font_minus,#font_plus
+    display: none
+
   .translate_chn_to_cht
     width: 30px
     height: 30px
@@ -340,6 +356,5 @@ table
 .tright
   text-align: right 
 
-
-
-
+.is_visible
+  display: block !important

source/css/_layout/readmode.styl

@@ -0,0 +1,113 @@
+.read-mode
+  background: $pale-yellow
+  padding: 0 !important
+
+  #sidebar,
+  #toggle-sidebar
+    display: none
+
+  #top-container
+    background-image: none !important
+    height: 14rem
+    background-color: $pale-yellow
+
+    a
+      color: #4c4948
+
+
+    &:before
+      opacity: 0
+    
+    #site-name,
+    .site-page
+      text-shadow: none
+      color: #4c4948
+    
+    #post-info
+      text-align: center
+      padding: 0
+      color: #4c4948
+    
+    #post-title,
+    #post-meta
+      text-shadow: none
+    
+    #page-header
+      &.fixed
+        background: none
+        box-shadow: none
+
+        &.open-sidebar
+          .site-page
+            display: inline-block
+            opacity: 1
+      
+      .toggle-menu 
+        .menu-icon-first,
+        .menu-icon-second,
+        .menu-icon-third
+          background-color: #4c4948
+
+  .layout_post
+    box-shadow: none
+    background: $pale-yellow
+
+    &:hover
+      box-shadow: none
+    
+    .article-container 
+      pre,
+      .highlight
+        background: darken($pale-yellow,5);
+      
+      .highlight
+        &:after
+          background: darken($pale-yellow,10);
+        table 
+          &:after
+            background: darken($pale-yellow,10);
+  
+  
+  blockquote
+    border-left: 0.2rem solid #d6dbdf
+    background-color: rgba(102,128,153,.05)
+  
+  #rightside
+    #to_comment,#nightshift
+      display: none
+    
+  canvas
+    display: none !important
+  
+  footer,
+  #post-comment,
+  hr,
+  .relatedPosts,
+  #pagination,
+  .post-reward,
+  .tag_share,
+  .post-copyright
+    display: none
+  
+  &::-webkit-scrollbar-thumb
+    background: darken($pale-yellow,15)
+
+  *::-webkit-scrollbar-thumb
+    background: darken($pale-yellow,15)
+  
+
+
+
+
+
+
+
+
+
+
+
+  
+
+
+
+    

source/css/nightshift.styl

@@ -6,6 +6,9 @@
     background: #2d3035 !important
     box-shadow: -0.25rem 0 0.25rem #2d3035 !important
 
+    &::-webkit-scrollbar-thumb
+      background: lighten(#2d3035,5)
+
   if hexo-config("local_search") && hexo-config("local_search.enable")
     #local-search
       background: #2d3035  
@@ -96,6 +99,9 @@
           &:after,.copy-notice
               background: rgb(27, 38, 59) 
       
+      &::-webkit-scrollbar-thumb
+        background: lighten(#1B2631,10)
+      
   .copy-notice
       background: rgb(27, 38, 59) 
 
@@ -119,7 +125,8 @@
 
   .translate_chn_to_cht,
   .nightshift,
-  #to_comment
+  #to_comment,
+  #readmode
       background-color: #2d3035 !important
 
   img
@@ -188,10 +195,10 @@
       filter: brightness(0.6)
     img
       filter: brightness(1)
-
-      
+     
+  &::-webkit-scrollbar-thumb
+    background: lighten(#2d3035,5)
   
-
 @media screen and (max-width: 768px)
   .night-mode
     color: #99a9bf 

source/css/var.styl

@@ -6,6 +6,7 @@ $theme-text-selection-color = #00c4b6
 $theme-meta-color = #858585
 $theme-link-color = #99a9bf
 $theme-hr-color = #A4D8FA
+$theme-read-mode-bg-color = #FAF9DE
 
 if hexo-config("theme_color") && hexo-config("theme_color.enable")
   $theme-color = convert(hexo-config("theme_color.main")) || #49B1F5
@@ -15,6 +16,7 @@ if hexo-config("theme_color") && hexo-config("theme_color.enable")
   $theme-link-color = convert(hexo-config("theme_color.link_color")) || #99a9bf
   $theme-meta-color = convert(hexo-config("theme_color.meta_color")) || #858585
   $theme-hr-color = convert(hexo-config("theme_color.hr_color")) || #A4D8FA
+  $theme-read-mode-bg-color = convert(hexo-config("theme_color.read-mode-bg_color")) || #FAF9DE
 
 // Global Variables
 $font-size = 14px
@@ -56,6 +58,7 @@ $dark-black = #000000
 $pale-grey = #F7F7F7
 $light-grey = #EEEEEE
 $grey = $theme-meta-color
+$pale-yellow = $theme-read-mode-bg-color
 $white = #FFFFFF
 $dark-white = #F9F9F9
 $font-black = #4C4948

source/js/main.js

@@ -25,14 +25,12 @@ $(function () {
           }, 200);
         }
       })
-    }
-    else
+    } else
       $("#toggle-sidebar").css("display", "none")
-  }
-  else {
+  } else {
     $('#toggle-sidebar').css('opacity', '1')
   }
- 
+
 
   //-------------------------------------------------------------------------------------------------------
   //sidebar
@@ -83,8 +81,7 @@ $(function () {
   //-----------------------------------------------------------------------------------------------------
   // 首页fullpage添加
   // 添加class 
-  if (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)) {
-  } else {
+  if (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)) {} else {
     $('.full_page').css('background-attachment', 'fixed')
   }
 
@@ -144,11 +141,10 @@ $(function () {
       noButton: 'Cancel',
       callback: $.noop
     }, opts || {});
-  
+
     $.fancybox.open({
       type: 'html',
-      src:
-        '<div class="fc-content">' +
+      src: '<div class="fc-content">' +
         '<h3>' + opts.title + '</h3>' +
         '<p>' + opts.message + '</p>' +
         '<p class="tright">' +
@@ -159,8 +155,7 @@ $(function () {
         animationDuration: 350,
         animationEffect: 'material',
         modal: true,
-        baseTpl:
-          '<div class="fancybox-container fc-container" role="dialog" tabindex="-1">' +
+        baseTpl: '<div class="fancybox-container fc-container" role="dialog" tabindex="-1">' +
           '<div class="fancybox-bg"></div>' +
           '<div class="fancybox-inner">' +
           '<div class="fancybox-stage"></div>' +
@@ -169,7 +164,7 @@ $(function () {
       }
     });
   }
-  
+
   $('#bookmark-it').click(
     function () {
       if (window.sidebar && window.sidebar.addPanel) { // Mozilla Firefox Bookmark
@@ -183,8 +178,7 @@ $(function () {
         // alert('按 ' + (navigator.userAgent.toLowerCase().indexOf('mac') != -1 ? 'Command/Cmd' : 'CTRL') + ' + D 鍵將本頁加入書籤.');
         $.fancyConfirm({
           title: "添加書籤？",
-          message:
-            '按 ' + (navigator.userAgent.toLowerCase().indexOf('mac') != -1 ? 'Command/Cmd' : 'CTRL') + ' + D 鍵將本頁加入書籤.',
+          message: '按 ' + (navigator.userAgent.toLowerCase().indexOf('mac') != -1 ? 'Command/Cmd' : 'CTRL') + ' + D 鍵將本頁加入書籤.',
           okButton: "OK",
         });
 
@@ -292,7 +286,7 @@ $(function () {
       galleryItem.index(this)
     );
     return false;
-    
+
   });
 
   //--------------------------------------------------------------------------------------------------------
@@ -507,12 +501,41 @@ $(function () {
   }
 
   //代碼框雙擊全屏
-    $('figure').on('dblclick', function(e) {
-      if (e.target !== this)
-          return;
-      $(this).toggleClass('code_full_page');
-      $('body').toggleClass('code_body');
-    });
-  
+  $('figure').on('dblclick', function (e) {
+    if (e.target !== this)
+      return;
+    $(this).toggleClass('code_full_page');
+    $('body').toggleClass('code_body');
+  });
 
+
+  //閲讀模式
+  $("#readmode").click(function () {
+
+    if (Cookies.get("night-mode") == "night") {
+      $('body').toggleClass('night-mode');
+      $('body').toggleClass('read-mode');
+      $('#font_plus,#font_minus').toggleClass('is_visible');
+
+    }
+     else {
+      $('body').toggleClass('read-mode');
+      $('#font_plus,#font_minus').toggleClass('is_visible');
+    }
+
+  });
+
+  
+ //閲讀模式下字體調整
+  $("#font_plus").click(function () {
+    var font_size_record = parseFloat($('body').css('font-size'))     
+    $('body').css('font-size',font_size_record + 1)    
+    }
+  );
+
+  $("#font_minus").click(function () {
+    var font_size_record = parseFloat($('body').css('font-size'))     
+    $('body').css('font-size',font_size_record - 1)    
+    }
+  );
 });

source/js/nightshift.js

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