前言
使用Jacman主題的時候發現打開具體文章后，側邊欄還是會展示，我想要的效果是自動隱藏側邊欄，並且展示目錄。但是當我修改了主題配置文件里面close_aside屬性為true的時候，發現側邊欄隱藏了，但是目錄沒出來。於是就有了這篇文章，讓我帶你一步步明白原理並解決問題~
正文
側邊欄的代碼結構
如圖：
- 為顯示側邊欄按鈕,對應的是openaside，默認隱藏
- 為文章目錄,對應的是to和toc-aside，默認隱藏
- 為側邊欄,對應的是asidepart，默認是展示
實現自動隱藏側邊欄
那我們現在要做得就是打算一打開具體文章，默認先顯示成文字目錄，而不是側邊欄
要實現這個就要通過js來改變，我查找了對應的文件，發現在 \themes\jacman\layout\_partial\after_footer.ejs這里有相關代碼：
var m = $('#main'),
a = $('#asidepart'), //側邊欄
c = $('.closeaside'),//隱藏側邊欄
o = $('.openaside'); //顯示側邊欄
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布局里面默認關閉側邊欄
如果頁面寬度大於1024就觸發c.click()，也就是觸發了隱藏側邊欄的方法。
原本的代碼c.click(function(){})里面只是簡單的隱藏和顯示了圖標，最關鍵的目錄對應的<div id="toc" class="toc-aside">沒有顯示，因為默認隱藏的。
沒錯，這就是問題的關鍵所在，所以我這里添加上了顯示這個div的代碼，正確代碼如下：
var m = $('#main'),
a = $('#asidepart'), //側邊欄
c = $('.closeaside'),//隱藏側邊欄
o = $('.openaside'); //顯示側邊欄
c.click(function(){
a.addClass('fadeOut').css('display', 'none');
o.css('display', 'block').addClass('fadeIn');
var m = $('#main'),
a = $('#asidepart'), //側邊欄
c = $('.closeaside'),//隱藏側邊欄
o = $('.openaside'); //顯示側邊欄
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();
}
<% } %>
好了搞定,默認打開文章的效果如下：
總結
如果你沒看懂的話也沒關系，概括起來就修改兩個地方
\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'); //這個是我新加的，修改點
最近擼了個java的公眾號，學習資源超級多，視頻，電子書，最新開發工具一個都不能少，已全部分享到百度雲盤，求資源共享，打造一個學習方便，工作方便的java公眾號，開源開源，有需求的可以關注~撒花
