还在美化博客吗?试试一键更换博客主题吧!

很多小伙伴是不是对于自己的博客主题用久了就会产生些许厌烦呢?每个人都会有,也就是贝勃定律。那么为了解决这样的问题呢,许多小伙伴就会再次的更改自己的样式。这样一来,原来的博客样式就会被丢弃,这样是及其不有好的。第二个原因呢就是不同人群不同的年龄段不同的性格等外界因素,都会对于事物的喜感而不同。为了让广大地球同步都能够愉快的再我的小窝愉快的玩耍,于是这篇文章出生了。

使用前提

已经获得js权限,如果还没有话呢,就需要向官方大大申请了。呐~给你邮箱contact@cnblogs.com

效果预览

样式动态预览

深夜黑主题:。超级美丽漂亮可爱的小姐姐主题:。阔耐的动漫主题:,或者点击博客左上角进行预览。

功能实现

实现思路

本质上讲,“皮肤主题更换”就是通过脚本修改页面配色、图片亮度等,因此我们把问题拆开为三部分进行分析:

  • 动态修改页面配色、图片亮度
  • 具体的样式内容
  • 使用 JavaScript 动态修改页面配色、图片亮度 。

关键代码


function switchModelMode(){
    var model = document.cookie.replace(/(?:(?:^|.*;\s*)model\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
    if(model == '0'){
        document.body.classList.add('model');
        document.cookie = "model=1;path=/"
        console.log('皮肤模式开启');
    }else{
        document.body.classList.remove('model');
        document.cookie = "model=0;path=/"
        console.log('皮肤模式关闭');
    }
}


(function(){

        var model = document.cookie.replace(/(?:(?:^|.*;\s*)model\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
        if(model == '0'){
            document.body.classList.remove('model');
        }else if(model == '1'){
            document.body.classList.add('model');
        }
  
})();

利用JS中Element.classListadd()remove()方法,正好满足我们的需求,且支持绝大多数浏览器(IE10以上支持)
但先别急着写,在皮肤更改的时,注意一个小的细节还:更改后的这个状态应被保存下来一直生效,或持续到本次会话结束,此事我们便可以利用cookie来解决这个问题。

注意到model,接下来的样式中我们将多次使用它。

具体的样式

在上面的代码中,我们控制了body的class,这是所有页面元素的祖先元素。更改皮肤模式时候,body的class值含有model,因此在编写夜间模式的样式时,在样式选择器前加body.night即可,可酌情使用!important,在下面的样式中,大家可以根据自己的博客主题的class 或 id 名称写样式。
例如:

//body样式
body.model{
    background-color: #263238;
    color: #aaa;
}
//class 样式
body.model .footer {
 
    color: #aaa;
}
//ID 样式
body.model #footer {
    color: #aaa;
   border: 1px solid #52646d !important;
}

如何在博客园中使用

  • 样式可以直接写在自定义css中,也可以用link标签引入。
  • 上面的js代码可以写在侧边栏
  • 调用可以是使用按钮或是链接的方式,即调用js方法。例如:
阔耐的动漫主题:<input type="button" value="开启/关闭ercy模式" onclick="switchModelErcyMode();">。

最后说明

因为时间的原因,很多样式做的不尽人意,欢迎大家批评指正,后续的样式我会一点点修改,此文章仅供大家参考,同时也欢迎大家在评论区交流。只要你熟悉css样式,那么便可以随心所欲的写出你想要得到的任何主题的样式!
其实这个和夜间模式有异曲同工之妙,思路上是完全一致的。

posted @ 2019-07-22 09:53 YJLAugus 阅读(...) 评论(...) 编辑 收藏