修改总览

默认的pacman主题首页在>1024宽度的显示布局为左侧约2/3为主栏，右侧1/3为边栏，边栏上有按钮可以实现边栏的手动隐藏和显示。本次修改的目的是默认不显示边栏并且把主栏水平居中显示，已达到我对对称的追求。

具体实现

由于没学过网页编程具体的知识，所以请教了hexo主题jacman的作者@黑桃夹克 关于实现这个功能该改哪个文件，得知是themes/pacman/layout/_partial下的after_footer.ejs这个文件的开头部分。

读了读代码猜了猜试了试，最终方案： 其中第19-24、29-31行即为添加处。找准相对位置添加后即可实现网页加载后自动按隐藏边栏按钮以及网页大小改变后也会判断是否隐藏边栏。

<script src="<%- config.root %>js/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.navbar').click(function(){
$('header nav').toggleClass('shownav');
});
var myWidth = 0;
function getSize(){
if( typeof( window.innerWidth ) == 'number' ) {
myWidth = window.innerWidth;
} else if( document.documentElement && document.documentElement.clientWidth) {
myWidth = document.documentElement.clientWidth;
};
};
var m = $('#main'),
a = $('#asidepart'),
c = $('.closeaside'),
o = $('.openaside');
getSize();
if (myWidth >= 1024) {
a.addClass('fadeOut').css('display', 'none');
o.css('display', 'block').addClass('fadeIn');
m.addClass('moveMain');
}
$(window).resize(function(){
getSize();
if (myWidth >= 1024) {
$('header nav').removeClass('shownav');
a.addClass('fadeOut').css('display', 'none');
o.css('display', 'block').addClass('fadeIn');
m.addClass('moveMain');
}else
{
m.removeClass('moveMain');
a.css('display', 'block').removeClass('fadeOut');
o.css('display', 'none');
<% if( is_post()&&(page.toc !== false) && theme.toc.aside){ %>
$('#toc.toc-aside').css('display', 'none');
<% } %>
}
});
后面原样未动，略。

不足

这种修改相当于添加了个自动按隐藏按钮的功能，所以每次网页加载完成后会看到按按钮的效果，感觉有点别扭。主要是能力有限，不懂网页加载时的默认状态怎么控制，所以只能先修改成这个，通过二次调整实现目的。

文章目录