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

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

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

其中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>中即可。

版权属于：东哥笔记

本文链接：https://ddceo.com/blog/388.html

自2017年12月26日起，『转载以及大段采集进行后续编辑』须注明本文标题和链接！否则禁止所有转载和采集行为！