hexo乾貨系列 （八）hexo文章自動隱藏側邊欄

使用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());  
//*******************************
中間還有一些**。。這裡不展示
//******************************

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

如果頁面寬度大於1024就觸發c.click()，也就是觸發了隱藏側邊欄的方法。

原本的**c.click(function(){})裡面只是簡單的隱藏和顯示了圖示，最關鍵的目錄對應的沒有顯示，因為預設隱藏的。

沒錯，這就是問題的關鍵所在，所以我這裡新增上了顯示這個div的**，正確**如下：

var m = $('#main'),

a = $('#asidepart'), //側邊欄
c = $('.closeaside'),//隱藏側邊欄
o = $('.openaside'); //顯示側邊欄
c.click(function());  
//*******************************
中間還有一些**。。這裡不展示
//******************************

\themes\jacman\_config.yml裡面修改close_aside屬性為true

close_aside: true  #close sidebar in post page if true

$('#toc.toc-aside').css('display', 'block').addclass('fadein'); //這個是我新加的，修改點

hexo新增 hexo 如何給文章新增目錄

我用hexo寫了乙個blog 安裝了 hexo toc外掛程式,使用next主題,使用然後寫了如下 markdown檔案 title live photo 初見 date 2016 03 09 15 20 08 tags ios 閒話 live photos 是 ios 9 的乙個新特性，它提供相對...

hexo新建文章

搭建完成部落格後，小夥伴們應該都躍躍欲試寫部落格文章了，那麼我們就開始行動吧 首先，在hexo專案的根目錄下執行建立命令 hexo new hexo new article info created home git hexo blog source posts hexo new article.m...

Hexo系列教程（二） Hexo的本地搭建

我的hexo的搭建環境是win7 32位台式電腦。一 安裝git 二 安裝node.js 三 安裝hexo 1.使用npm命令即可直接安裝 可以直接在螢幕任意地方直接右鍵 git bash here，或者安裝git bash客戶端開啟也行 npm install g hexo 2.在本地路徑建立乙個...