第2页 - 给typecho博客加上切换夜间模式的按钮(cookie版)

给typecho博客加上切换夜间模式的按钮(cookie版)

友人C

2016 年 09 月 04 日

47549 次浏览

39 条评论

369字数

typecho

从绛木子-仿简书主题里面扒出来的。
感谢Hran 大好人帮忙修改了代码
如发现bug 先清除一次cookie，然后再试一次，仍发现情况，恳请在评论区告诉我！
效果见底部的小太阳按钮，含记录cookie功能（2016/10/1 后更换了模板不再有此功能）

现在！贴出代码给出一点点分析。已存备用。

在我想要显示的位置：底部(foot.php)，加上一个调用php 的代码

    <a class="btn-read-mode" href="#"><i class="<?php getReadMode(true);?>"></i></a>

在funtion.php 添加这个代码

function getReadMode($icon=false){
    $class = $_COOKIE['read-mode'];//获取cookie
    if($icon){
        $class = $class == 'night' ? 'fa fa-moon-o' : 'fa fa-sun-o';
    }else{
        $class = 'night' == $class ? 'night-mode' : '';
    }
    echo $class;
}

在foot.php加上 js代码，触发点击按钮的事件

function switchReadMode() { //切换显示模式
    var btn = $('.btn-read-mode');
    var next_mode = $('body').hasClass('night-mode') ? 'day': 'night';
    var mode = next_mode == 'day' ? '': 'night-mode';
    var icon = next_mode == 'day' ? 'fa fa-sun-o': 'fa fa-moon-o';
    if (next_mode == 'day') {
        $('body').removeClass('night-mode');
    } else {
        $('body').addClass('night-mode');
    }
    btn.find('i').attr('class', icon);
    setCookie("read-mode", next_mode);
}

$('.btn-read-mode').click(function(e) {
    e.preventDefault();//阻止点击打开超链接"#"事件
    switchReadMode();
});//这个触发事件主体


function setCookie(name,value) 
{ 
    var Days = 30; 
    var exp = new Date(); 
    exp.setTime(exp.getTime() + Days*24*60*60*1000);
    var path = ';path=/'; 
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString() + path; 
}