给自己的博客添加夜间模式
其实这个功能很久前我就在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 存储查看,下面就贴下自己的代码辣:
首先修改夜间模式的按钮:
<a class="set-view-mode" href="javascript:void(0)" title="夜间模式">
<i class="fa fa-moon-o"></i>
</a>
然后在你初始化的js函数中添加以下方法:
$(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";
}
});
});
然后就是夜间模式的样式,也有两种方法,一种是直接在页面最上层添加了一个半透明黑色遮罩(该问),还有种就是像我这种比较精细的修改,下面分别贴下代码:
.cover{
position:fixed;
top: 0px;
left: 0px;
outline:5000px solid rgba(0, 0, 0, 0.5);
z-index: 999999999999;
}
.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:由于后来数据丢失只好放一个简单的夜间模式的图了○| ̄|_


原文链接:给自己的博客添加夜间模式
诗与酒 版权所有,转载请注明出处。
zzz郵件內容zzz
博主好,JS 我用原文的代码,CSS 自己写的。但是发现个问题,夜间模式刷新时候会有短暂亮闪后才变黑色模式,这样感觉像闪光灯啊。
可以加个css渐变效果,我比较懒就没弄
也在学JavaScript,不过看了这里还是不懂,不过硬要做我也只能想到那种类点击事件存储cookie然后改变css,脚本化css类 ̄﹃ ̄
这两者原理差不多的啦|´・ω・)ノ