前言:看到很多很多博主都添加了夜间模式,自己也想添加上,刚好看见ZM沫. - Life record .博客有写如何添加,且方法简单明了,便转载过来了!

这里也只是讲主题添加夜间阅读模式的思路,大神别见怪,小萌新只有这点水平,哈哈!

首先在站点的</head>处引入以下代码:

<!-- 夜间模式切换判断css代码 -->
<script type="text/javascript">
function getCSS()
{
        datetoday = new Date();
        timenow=datetoday.getTime();
        datetoday.setTime(timenow);
        thehour = datetoday.getHours();
        if (thehour<5)
            display = "<?php $this->options->themeUrl('/css/night.css'); ?>";
       else if (thehour>19)
            display = "<?php $this->options->themeUrl('/css/night.css'); ?>"; 
        else if (thehour>5)
            display = "<?php $this->options->themeUrl('/css/day.css'); ?>"; 
        else if (thehour<19)
            display = "<?php $this->options->themeUrl('/css/day.css'); ?>"; 
var css = '<';
        css+='link rel="stylesheet" href='+display+' \/';
        css+='>';
        document.write(css);
}
</script>
<!-- 夜间模式触发 -->
<script type="text/javascript">
window.onload=getCSS();
</script>

其中,第一段javascript的作用是利用if函数来判断现在时间从而对应加载夜间模式css或白天模式css。

 if (thehour<5)
            display = "<?php $this->options->themeUrl('/css/night.css'); ?>";
       else if (thehour>19)
            display = "<?php $this->options->themeUrl('/css/night.css'); ?>"; 
        else if (thehour>5)
            display = "<?php $this->options->themeUrl('/css/day.css'); ?>"; 
        else if (thehour<19)
            display = "<?php $this->options->themeUrl('/css/day.css'); ?>"; 

以上这段代码就是判断时间的代码,如果时间在下午7点至上午5点之间,就加载夜间模式css,时间在上午5点至下午7点之间,就加载白天模式css,这么说就应该很好懂了。

第二段javascript的作用就是加载触发,这个你只要知道就可以了,具体的原理还是google吧!

以上是最轻松的部分搞定,基本都是复制+黏贴!下面就是体力活了,没啥技术含量,改自己的css,如果主题不是你写的,这里给和我一样的萌新们提供一个思路:F12查css,然后改造。

声明:本文转载于ZM沫. - Life record .,版权归原作者所有.