为Ghost博客加入夜间模式

在做云图书的,用户反馈中提到夜间模式非常多,所以在做自己的博客时,首先想到的功能也是加入夜间模式。做法很简单,如下:

1.在模板中加入两个css的引用,先将夜间模式设置为无效,后续用js来控制。

<link id = "day" title = "day" rel="stylesheet" type="text/css" href="{{asset "css/screen.css"}}" />

<link id = "night" title="night" rel="stylesheet" type="text/css" href="{{asset "css/screenNight.css"}}" disabled />  

2.加入两个按钮dayImage和nightImage来进行切换,并使用cookie来保存用户的设置,保存在myStyle这个cookie名下。
注意cookie的path为/,这样才能在全局页面都可以找到这个cookie. 代码可以直接查看本站点的代码进行阅读。

以下为night.js中的代码。

(function( $ ){`
  var cookie_style = $.cookie("mystyle"); //给cookie加一个标识符
  if (cookie_style == null) {  //如果cookie为空,就显示白天的样式
    $("link[title='" + cookie_style + "']").removeAttr("disabled"); //显示title为day的css
    $("link[title='night']").attr("disabled", "disabled"); //隐藏title为night的css

    $("#dayImage").hide();
    $("#nightImage").show();
  } else if (cookie_style == "day") { //如果cookie为day,就显示白天的样式
    $("link[title='day']").removeAttr("disabled");
    $("link[title='night']").attr("disabled", "disabled");

    $("#dayImage").hide();
    $("#nightImage").show();
  } else { //如果cookie为night,就显示夜间的样式
    $("link[title='night']").removeAttr("disabled");
    $("link[title='day']").attr("disabled", "disabled");

    $("#nightImage").hide();
    $("#dayImage").show();
  }


  $('body').delegate('#nightImage', 'click', function() {
    var style = 'night'; //把day的值赋予给style
    $("link[title='" + style + "']").removeAttr("disabled");  //显示title为night的css
    $("link[title='day']").attr("disabled", "disabled"); //隐藏title为day的css

    $.cookie("mystyle", style, {
      path:'/',
      expires:10//设置cookie的有效期是10天
    });
    $("#nightImage").hide();
    $("#dayImage").show();
  });
  $('body').delegate('#dayImage', 'click', function() {
    var style =  'day' //把day的值赋予给style
    $("link[title='" + style + "']").removeAttr("disabled"); //显示title为day的css
    $("link[title='night']").attr("disabled", "disabled"); //隐藏title为night的css
    $.cookie("mystyle", style, {
      path:'/',
      expires:10//设置cookie的有效期是10天
    });
    $("#dayImage").hide();
    $("#nightImage").show();

  });

})( window.jQuery);

另外为了随时可以切换,将按钮的位置改为了

#styleButtons {
    position: fixed;
    margin-left: 100px;
    padding-top: 5px;

}
comments powered by Disqus