友人C

给typecho博客加上切换夜间模式的按钮(cookie版)
从 绛木子-仿简书主题里面扒出来的。 感谢Hran 大好人 帮忙修改了代码 如发现bug 先清除一次coo...
扫描右侧二维码阅读全文
04
2016/09

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

3309879937.jpg

  • 绛木子-仿简书主题里面扒出来的。
  • 感谢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; 
} 

最后css文件根据自己模板自行修改即可!

点开夜间按钮自动给body添加了night-modeclass样式,因为body是在最上层的。所以底部的所有样式,都可以通过 组合选择符 和 后代选择符 进行替换css样式!

终于修改好夜间模式的CSS了,大家可以测试,有什么问题恳请在评论区告知我,谢谢!

我写的CSS文件地址(有注释):https://www.ihewro.com/usr/themes/lpisme/style.css

其他细节可能需要根据自己主题进行适配。本主题 Lpisme需要修改usr/themes/lpisme/js/functions.js文件。

修改后的文件地址:https://www.ihewro.com/js/functions.js

最后修改:2016 年 10 月 29 日 05 : 29 PM
如果觉得我的文章对你有用,请随意赞赏

37 条评论

  1. 郑永

    夜间模式还可以么?

  2. 唯灵

    改夜间这个要增加好多css样式呢,(╯‵□′)╯︵┴─┴

  3. illn

    这么好的东西居然不添加到现在的主题中 一篇篇的翻下来

    1. 友人C
      @illn

      之前折腾另一个主题写的,以后可能会加上的!

      1. 唯灵
        @友人C

        handsome主题会增加这个功能吗(๑•̀ㅁ•́ฅ)

  4. Deerweak

    很不错,方便

    1. 一日
  5. 临时工阿k
    博主,赶紧把你博客的代码交出来,饶你不肛
    1. 一日
      @临时工阿k

      博客哪部分代码呀?

      1. 临时工阿k
        @一日

        夜间的,我们需要py交易一下。

        1. 一日
          @临时工阿k

          需要的代码上面都写啦,什么不明白的可以写出来,我可以看看#

          1. 临时工阿k
            @一日

            来,互加QQ交易一下。。

            1. 一日
              @临时工阿k

              关于我的界面有我的QQ奥

  6. 拾叁同学
    如果能像Hran的主题到时间就自动切换就好了。另外代码不是很看的懂,能否加博主QQ学习一下?
    1. 一日
      @拾叁同学

      到时间切换应该也不太难吧。明天扒一下hran的代码看看。可以的呀,QQ就在关于我的页面里

  7. 默歌

    不错哟~#[玫瑰]

发表评论