给自己的博客添加夜间模式

其实这个功能很久前我就在hexo上实现了,但是为什么要在这里再写一下呢?很简单,因为要水一发啊2333

目前,我和该问童鞋一共研究出两种方法,来记录夜间模式的状态,该问童鞋采用的是cookie技术,这种方法可以精细的设定存储的时间,适用于wordpress,感兴趣的童鞋欢迎前去萌萌哒该问的设置夜间模式的相关文章查看,而我当初使用的则是hexo,cookies值会重复记录,经过研究,我发现了一种新的方法:H5的Web存储方法,并且经过今天的实践,在wordpress和hexo上均可使用,但是时间只有两种选择(具体哪两种请往下看)~

在W3School中,HTML5的Web存储方法是这么定义的:

在客户端存储数据

HTML5 提供了两种在客户端存储数据的新方法:

  • localStorage – 没有时间限制的数据存储
  • sessionStorage – 针对一个 session 的数据存储

之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。

在 HTML5 中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据。

HTML5 使用 JavaScript 来存储和访问数据。

localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除

具体的应用例子请前往HTML 5 Web 存储查看,下面就贴下自己的代码辣:

首先修改夜间模式的按钮:

html<a class="set-view-mode" href="javascript:void(0)" title="夜间模式">
    <i class="fa fa-moon-o"></i>
</a>

然后在你初始化的js函数中添加以下方法:

JavaScript$(function(){
    btn = $('.set-view-mode');
    if(sessionStorage.mode=="night"){
        $('body').addClass('night-mode');
        btn.find('i').attr('class','fa fa-sun-o');
    }
    $('.set-view-mode').click(function(){
        var next_mode = $('body').hasClass('night-mode') ? 'day':'night';
        if(next_mode!='day'){
            $('body').addClass('night-mode');
            btn.find('i').attr('class','fa fa-sun-o');
            sessionStorage.mode="night";   
        }else{
            $('body').removeClass('night-mode');
            btn.find('i').attr('class','fa fa-moon-o');
            sessionStorage.mode="day";
        }
    });			
});

然后就是夜间模式的样式,也有两种方法,一种是直接在页面最上层添加了一个半透明黑色遮罩(该问),还有种就是像我这种比较精细的修改,下面分别贴下代码:

CSS.cover{
    position:fixed;
    top: 0px;
    left: 0px;
    outline:5000px solid rgba(0, 0, 0, 0.5);
    z-index: 999999999999;
}
CSS.set-view-mode {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 300;
    background: #E6E6EB;
    width: 45px;
    height: 45px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    color: #FFF;
    opacity: .8;
    text-align: center;
}

.set-view-mode i {
    width: 100%;
    height: 100%;
    display: block;
    line-height: 45px;
    font-size: 24px;
    color: #999;
}

.night-mode {
    background-image: none!important;
    background-color: #3F3F3F!important;
    color:#999!important;
}
.night-mode a:hover {
    color: #3f3f3f!important; 
}
.night-mode #header_menu > li > a ,
.night-mode #header .logo a,
.night-mode #footer,
.night-mode #footer a,
.night-mode .widget_recent_comments li .comment-text {
    color: #999;
}
.night-mode .panel .panel-header h1,
.night-mode .panel .panel-header h2,
.night-mode .panel .panel-header h3,
.night-mode .panel .panel-header h4,
.night-mode .panel .panel-header h1 .dashicons, 
.night-mode .panel .panel-header h2 .dashicons, 
.night-mode .panel .panel-header h3 .dashicons, 
.night-mode .panel .panel-header h4 .dashicons,
.night-mode .ca-body p,
.night-mode .comments-list li .right-box > p,
.night-mode .context span,
.night-mode .context a {
    color: #333;
}
.night-mode #commentform #comment {
    background: #999;
}
.night-mode #commentform .comment-form-smiley {
    background: #3f3f3f;
}
.night-mode input[type=submit],.night-mode button {
    background: #3f3f3f;
    color: #999;
}
.night-mode .dashicons-smiley:before {
    color: #999;
}
.night-mode #header .search-form .search-submit {
    background: #333;
    color: #999;
}
.night-mode .panel,.night-mode .panel .panel-header,.night-mode .ca-container {
    background: rgba(255,255,255,0.2);
}
.night-mode .panel-header .post-meta-box {
    background: #606060!important;
}
.night-mode #post-box .post-title {
    background: #999;
    border-color: #999;
}
.night-mode #header .search-form .search-text {
    background: #584b4b;
}

大功告成!放一张预览图:(当然,我只改了一些主要的样式,欢迎大家补充~)
PS:由于后来数据丢失只好放一个简单的夜间模式的图了○| ̄|_