为emlog添加开关侧边栏

最近挺流行全屏只有文章的这种博客布局,今天看了下自己的博客,发现emlog修改其实也很简单,因为侧边栏在一个aside标签中,只要把侧边栏隐藏掉,然后把文章页面铺满全屏就行了,所以可以使用js做一个开关

一、查找文章div和侧边栏div

首先可以通过谷歌浏览器先找到文章div和侧边栏div

屏幕快照 2016-11-14 下午7.33.31.png

其中content就是主体页面。而sidebar pull-right则是侧边栏的div

二、添加隐藏的css

在view.css文件中增加content的css

.contentoff {margin-right:0px;padding:27px}

三、添加控制开关的js

通过修改这两个节点的class来调整样式,可以新创建一个js文件,比如widages.js,然后头文件header.php导入该js文件

<script type='text/javascript' src='<?php echo TEMPLATE_URL; ?>static/widages.js'></script>

widages.js的内容

function closeWidge()
{
    var width=window.innerWidth||document.documentElement.clientWidth;
    if(width<960)
    {
        alert("手机版不能开启侧边栏");
        return false;
    }
    else{
        if(document.querySelector(".sidebar.pull-right").style.display=="none")
        {
            document.querySelector(".sidebar.pull-right").style.display="block";
            document.querySelector(".contentoff").setAttribute("class","content");
            document.getElementById("openside").innerHTML='<i class="fa fa-hand-o-right"></i>隐藏侧边栏 >>';
        }
        else{
            document.querySelector(".content").setAttribute("class","contentoff");
            document.querySelector(".sidebar.pull-right").style.display="none";
            document.getElementById("openside").innerHTML='<i class="fa fa-hand-o-left"></i>显示侧边栏 >>';
        }
     }
 };

判断width是因为手机版如果又关闭再开启了侧边栏会遮住主体页面,所以关闭手机版的开关。

四、添加开关按钮

在echo合适的位置,增加开关按钮

<a href="javascript:void(0)" onclick="closeWidge()" title="侧边栏" id="openside" style="color:red;font-size:18px;font-weight:bold;float:right"><i class="fa fa-hand-o-right"></i>隐藏侧边栏 >></a>

五、优化

这里是弄的默认的样式,contentoff的样式可以自己美化下,js则可以通过压缩工具压缩一下,来达到更快的目的。如果不想新创建js文件,那么这个js函数也可以写在echo_log.php中,只要写在<script type="text/javascript"></script>中即可。

Last modification:January 1st, 1970 at 08:00 am
如果看了这个文章可以让你少加会班,可以请我喝杯可乐
已打赏名单
微信公众号

Leave a Comment