給Hexo博客添加文章目錄

2020-12-11 hojun

前言

因為JSimple主題沒有自帶目錄,所以需要自己動手給hexo博客文章添加目錄功能。

第一步 查閱hexo文檔

在Hexo官網 文檔>自定義>輔助函數>最下面,可以找到toc這個函數,看其介紹能知道它就是來實現文章目錄的。

第二步 決定目錄位置

根據博客瀏覽文章的頁面,決定將目錄放在右上角空白處。

第三步 編寫主題模板

首先,找到文章模板頁面,博主這裡是在\themes\jsimple\layout_widget\common-article.ejs這個文件中,插入需要的代碼。(因為toc需要post變量,所以我們把post傳入)

這裡博主採用的是局部模板和局部變量,把目錄當成一塊獨立的組件分離了出去。(你也可以不用分離,直接在當前文件中寫詳細的代碼)

既然用到了局部模板,我們就要新建一個toc.ejs的模板,其中插入的代碼如下:

其中,list_number: false表示目錄不顯示編號。

出來html標籤,我們還需要css樣式來布局目錄的位置大小等。

css如下:

將css引入頁面即可。

效果預覽

相關焦點

  • 【簡歷加分】hexo框架搭建個人博客站點,手把手教學.
    最近,粉絲們在金九銀十期間也是不斷的面試,有比較多的畢業生說我在這個期間出多一些面試題,上幾期都是傾向於面試文章,這期出一次簡歷加分項操作,使用hexo框架搭建個人博客。當hexo初始化完後,你就能看你當前目錄下多出了很多有關hexo項目的文件:
  • 「分享」|hexo搭建個人博客
    >scaffolds:生成文章的一些模板source:用來存放你的文章themes:主題_config.yml: 框架的配置文件配置nginx這一步比較瑣碎,包括設置項目的根目錄,配置http跳轉https,自定義404頁面,gzip壓縮提高加載速度等等。不過在進行這些之前,最關鍵的前置步驟是需要有一個可以用的域名,指已備案,且添加解析記錄到你的雲主機,並且申請ssl證書上傳到伺服器中。
  • 唯美主題hexo-sakura使用教程
    老實說我目前也不是很有條理233333333~1、主題下載安裝hexo-theme-sakura建議下載壓縮包格式,因為除了主題內容還有些source的配置對新手來說比較太麻煩,直接下載解壓就省去這些麻煩咯。下載好後解壓到博客根目錄(不是主題目錄哦,重複的選擇替換)。
  • 「教程篇」Hexo+ NexT 博客美化配置教程|第七篇
    4.文章添加結束標記在路徑:themes\next\layout\_macro下新建passage-end-tag.swig文件。>enabled: true # 是否開啟文末的本文結束標記保存後本地預覽,打開文章後會發現文章結束時出現以下效果。
  • 基於Hexo+GiteePages搭建的個人Blog教程
    Hexo和GiteePages是什麼 Hexo簡單一點來說,Hexo就是一個快速、簡潔且高效的博客框架。官方網站:https://hexo.io/Tip:由於微信公眾平臺不允許進行非微信文章外鏈,需要進行複製打開,以下網址同理.GiteePagesGiteePages是碼雲的一個和GitHub Pages類似的免費的靜態頁面託管服務。
  • 一文詳解Hexo+Github小白建站
    Hexo 是一個快速、簡潔且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在幾秒內,即可利用靚麗的主題生成靜態網頁。不會使用Markdown的技術員不是一個好的技術員,其功能及其強大,大大加快了寫作及排版的速度,同時完美的解決了江湖上令人頭闊疼的傳言:寫文一小時,排版兩小時。(小聲嗶嗶:該訂閱號中所有的文章都是基於Markdown來進行編寫和排版的哦!)
  • 小白如何使用Nodejs+Hexo快速搭建個人網站:Hexo詳細使用教程2
    本篇文章接著上篇文章繼續講解Hexo詳細使用教程,在上篇文章中已經講解了怎樣發表一篇文章。主題的設置我們現在的個人網站使用的是Hexo默認的主題,可能有點醜,不那麼美觀,不過Hexo的主題是有很多供我們選擇的,我們可以選擇一個我們喜歡的主題,直接百度搜索Hexo 主題。
  • 小白如何使用Nodejs+Hexo快速搭建個人網站
    則在安裝的時候添加到環境變量出現了問題,可以手動添加到環境變量即可。git命令也是顯示版本號則表示git安裝成功, 如果也是顯示出不是內部或外部命令,也不是可運行的程序或批處理文件,也是一樣手動將其添加到環境變量即可。
  • 厲害了|一秒切換Hexo中英文,厲害了!
    我是小小,今天是本周的第二篇,本篇將會著重講解關於如何切換Hexo中英文Hexo 配置增加英文配置首先在根目錄下增加 _config-en.yml其配置項# Sitetitle: TITLEsubtitle: SUBTITLEdescription: DESCRIPTIONkeywords: KEYWORDSlanguage: en# URLurl
  • 程式設計師要不要寫博客?如何寫博客?十年 bloger 經驗分享!
    目前也積累了有 400+篇文章,不過感覺真正有質量的文章也就幾十來篇。折騰過很多 blog 程序,陸陸續續遷移了好幾個版本,歷史文章也」捨不得」丟棄,也一直保留。其實好多文章在我現在看來好像價值不大,但仍然捨不得拋棄,畢竟當初辛辛苦苦 po 出來的。感興趣的同學可以通過 「www.tanglei.name」 這個網址進行訪問。
  • 怎樣給wordpress網站分類目錄頁面,添加文章列表和分頁效果?
    今天,我們再來給wordpress網站的分類目錄頁模板archive.php文件添加左側數據的調用。一般情況下,wordpress網站的分類目錄頁面,展示的是該分類下的文章列表,所以,本節課我們將介紹如何給wordpress網站分類頁面調用文章列表和分頁效果?下面,一起來看看吧(具體請觀看我在本站發表的《wordpress網站分類目錄,如何添加文章列表和分頁效果?
  • 支持文章、頁面、自定義文章的WordPress目錄插件:Easy Table of Contents
    偶爾看到有些個人博客網站的文章頁上顯示有該篇文章的目錄,特別是對於某些長篇文章來說有文章目錄還是相當不錯的。
  • Hexo-miccall主題及html5up站點推薦
    首先向大大家推薦hexo的miccall主題。Customizable100% Free under the Creative Commons中文描述:製作漂亮的HTML5網站模板:完全響應 基於智能HTML5 + CSS3 超級可定製 知識共享下的 100%免費頁面效果如下:希望這篇文章能給你帶來知識和樂趣
  • 論文如何添加目錄
    目錄需要word自動生成。第一:打開word文檔。先在裡面編輯好自己的文章內容。第二:點擊引用,然後再點擊目錄,這時候就可以在下面的內容裡將目錄生成了,非常簡單。第三:選擇手動目錄。目錄可以手動也可以自動,如果想靈活修改的話,選擇手動目錄是最好的,這樣也能讓word文檔變得更加充實一些。接著對裡面的內容進行添加即可。第四:如果是想用自動生成目錄的話,自己在寫論文的過程中要寫好下面的標題,大標題和小標題都要寫好,這樣才能更好地將論文的題目提取。
  • Word圖表目錄怎麼添加?
    你知道如何在Word中給圖片或者表格添加目錄嗎
  • 寫博客,你還在堅持嗎
    總想著如果哪一天自己也能有自己的博客,那該多好呀。於是,就瘋狂地在網上學習如何創建自己的博客。一開始,會通過註冊一些專門的博客網站,例如CSDN等,然後在上面放上自己的個人信息,然後到處宣揚,感覺很有面子的樣子。
  • 教程| 如何搭建個人博客網站
    今天為大家帶來一篇教程《如何搭建個人博客網站》,喜歡的同學可以研究一下。install php-pecl-memcache php-eaccelerator然後重啟httpd服務 service httpd restart然後進入默認網站目錄
  • 博客營銷技巧之五:博客文章的字數有什麼要求
    在上篇文章裡,我們分享了的博客營銷的之文章標題的技巧,對於一篇文章來說,完成後到底會不會有人看,其中標題佔了很大的比重,如果標題沒有一點吸引力,那麼文章被點擊的概率就會大大降低。如果文章的標題超級吸引人,那麼這篇文章也就成功了一半。
  • PPT目錄設計的幾種方法
    PPT可以有目錄,也可以沒有目錄。