大概也许可能这是近期博客要增加的最后一个功能了,主题背景切换以前折腾博客时搞过一次,再次重新启用相对上次来说顺利多了,唯一卡壳的地方竟然是关于 li 水平居中的问题!这个功能一直是自己比较喜欢的,博客也许别人逗留的时间非常短,而自己却经常去看它,再好的主题样式看久了也会麻木,所以偶尔简单换一换背景色,瞬间眼睛会舒服很多......


背景切换功能扒自设计笔记的 iDevs 主题,当切换背景后只要不去清空浏览器 cookie 关闭浏览器下次打开网站时会自动使用切换后的背景颜色。
因实现步骤比较多这里简单做下记录以备不时之需。
1.将如下 js 代码放入主题 js 文件中:

jQuery(document).ready(function(){var cookieClass=getCookie('class');jQuery("body").attr("id",cookieClass);jQuery(".skin i").each(function(){jQuery(this).click(function(){var className=jQuery(this).attr("class");jQuery("body").attr("id",className,30);function SetCookie(name,value,day){var exp=new Date();exp.setTime(exp.getTime()+day*24*60*60*1000);document.cookie=name+"="+escape(value)+";expires="+exp.toGMTString()}SetCookie("class",className,30)})})});function getCookie(name){var nameEQ=name+"=";var ca=document.cookie.split(';');for(var i=0;i<ca.length;i++){var c=ca[i];while(c.charAt(0)==' ')c=c.substring(1,c.length);if(c.indexOf(nameEQ)==0)return c.substring(nameEQ.length,c.length)}return null}

2.在主页 index.php head 标签内添加内联 css 样式如下:

<style>
 #red {background: #f45;}
 #yellow {background: #FFE27A;}
 #green {background: #5DA;}
 #blue {background: #3cf;}
 </style>

3.在需要显示切换按钮的位置加入如下代码:

 <div class="skin">
 <i class="null"></i>
 <i class="red"></i>
 <i class="yellow"></i>
 <i class="green"></i>
 <i class="blue"></i>
 </div> 

4.将 body 标签内增加 ID 如下所示:

<body id="null">

5.将如下 css 代码放入主题 style.css 文件中:

.skin {text-align: center;}
.skin .red,.skin .yellow,.skin .green,.skin .blue,.skin .null{width:12px;height:12px;margin-left: 8px;background:#f55;border-radius:100px;box-shadow:0 0 0 1px rgba(0,0,0,.12) inset;cursor:pointer;display: inline-block;}
.skin .yellow {background:#fc1;}
.skin .green {background:#5da;}
.skin .blue {background:#3cf;}
.skin .null {background-color: #d6d6d6;}

6.用 css 在 style.css 文件中设置 body 标签你喜欢的默认颜色:

body{background-color: #d6d6d6;}

7.当浏览器尺寸变小看不到背景时在 style.css 文件中设置隐藏切换背景按钮:

@media screen and (max-width:1095px){.skin{display:none}}
  1. sys
    sys 2018-01-05 02:00 pm回复

    记得你那个主题是有个斑斑点点的背景来着

    1. 沉沦
      沉沦 2018-01-05 02:14 pm回复

      额,你好强的记忆力,确实有!只是一个按钮引用了一张背景图片。

© 2018 Socode