前言
使用Jacman主題的時候發(fā)現(xiàn)打開具體文章后，側(cè)邊欄還是會展示，我想要的效果是自動隱藏側(cè)邊欄，并且展示目錄。但是當我修改了主題配置文件里面close_aside屬性為true的時候，發(fā)現(xiàn)側(cè)邊欄隱藏了，但是目錄沒出來。于是就有了這篇文章，讓我?guī)阋徊讲矫靼自聿⒔鉀Q問題~
正文
側(cè)邊欄的代碼結(jié)構(gòu)
如圖：
- 為顯示側(cè)邊欄按鈕,對應的是openaside，默認隱藏
- 為文章目錄,對應的是to和toc-aside，默認隱藏
- 為側(cè)邊欄,對應的是asidepart，默認是展示
實現(xiàn)自動隱藏側(cè)邊欄
那我們現(xiàn)在要做得就是打算一打開具體文章，默認先顯示成文字目錄，而不是側(cè)邊欄
要實現(xiàn)這個就要通過js來改變，我查找了對應的文件，發(fā)現(xiàn)在 \themes\jacman\layout\_partial\after_footer.ejs這里有相關代碼：
var m = $('#main'),
a = $('#asidepart'), //側(cè)邊欄
c = $('.closeaside'),//隱藏側(cè)邊欄
o = $('.openaside'); //顯示側(cè)邊欄
c.click(function(){
a.addClass('fadeOut').css('display', 'none');
o.css('display', 'block').addClass('fadeIn');
m.addClass('moveMain');
});
//*******************************
中間還有一些代碼。。這里不展示
//******************************
<% if (is_post() && theme.close_aside) { %>
getSize();
if (myWidth >= 1024) {
c.click();
}
<% } %>
上面代碼可以看出來
is_post()用來判斷當前是否post布局，大家記住我們博文詳情頁默認是post布局，所以為true.
theme.close_aside這個是在主題配置文件_config.yml下面對應的配置：
close_aside: true #close sidebar in post page if true
mathjax: false #enable mathjax if true
我這邊close_aside就設置了true，在post布局里面默認關閉側(cè)邊欄
如果頁面寬度大于1024就觸發(fā)c.click()，也就是觸發(fā)了隱藏側(cè)邊欄的方法。
原本的代碼c.click(function(){})里面只是簡單的隱藏和顯示了圖標，最關鍵的目錄對應的<div id="toc" class="toc-aside">沒有顯示，因為默認隱藏的。
沒錯，這就是問題的關鍵所在，所以我這里添加上了顯示這個div的代碼，正確代碼如下：
var m = $('#main'),
a = $('#asidepart'), //側(cè)邊欄
c = $('.closeaside'),//隱藏側(cè)邊欄
o = $('.openaside'); //顯示側(cè)邊欄
c.click(function(){
a.addClass('fadeOut').css('display', 'none');
o.css('display', 'block').addClass('fadeIn');
var m = $('#main'),
a = $('#asidepart'), //側(cè)邊欄
c = $('.closeaside'),//隱藏側(cè)邊欄
o = $('.openaside'); //顯示側(cè)邊欄
c.click(function(){
a.addClass('fadeOut').css('display', 'none');
o.css('display', 'block').addClass('fadeIn');
$('#toc.toc-aside').css('display', 'block').addClass('fadeIn'); //這個是我新加的，修改點
m.addClass('moveMain');
});
//*******************************
中間還有一些代碼。。這里不展示
//******************************
<% if (is_post() && theme.close_aside) { %>
getSize();
if (myWidth >= 1024) {
c.click();
}
<% } %>
好了搞定,默認打開文章的效果如下：
總結(jié)
如果你沒看懂的話也沒關系，概括起來就修改兩個地方
-
\themes\jacman\_config.yml里面修改close_aside屬性為true
close_aside: true #close sidebar in post page if true
-
\themes\jacman\layout\_partial\after_footer.ejs里面添加下面的代碼，具體添加在哪里，看看文章里面有提到
$('#toc.toc-aside').css('display', 'block').addClass('fadeIn'); //這個是我新加的，修改點
