InfiniteWing

Till Dreams Come True

  • 2017-07-08
    網站設計►Hexo

    Hexo文章相關設定

    1. 前言
    2. 關鍵字的重要性
    3. 圖片資產

    前言

    將我的個人網站push到GitHub上之後,我試著學了Markdown語法,然後也很順利的透過谷哥找到了一款好用的Markdown編輯器─MarkdownPad 2。就在我寫前一篇文章寫到一半的時候,突然想到其他使用Hexo的blogger,他們文章前面好像都會有類似文章目錄的區塊,於是乎我就找了一下有沒有相關的套件可以使用。

    關鍵字的重要性

    我只能說,我當初的搜尋條件絕對是下錯了,不然就是沒有仔細看…我那時以為沒有這種功能的套件,於是乎就興沖沖的自己寫了一個以html格式為基準的目錄功能。因為懶得再寫js來自動爬header,因此我寫的東西在每個header上都要手動加上id…

    結果昨天我心血來潮,又重新查了一下官方文件,最後在官方網站的輔助函數中找到了我要的功能:

    toc,解析內容中的標題標籤 (h1~h6) 並插入目錄。

    1
    <%- toc(str, [options]) %>

    好吧,原來Hexo3早就有提供這個功能,那我前天是在忙些什麼啊(翻桌)!

    下次應該看清楚文件的...

    既然知道了官方有提供這個功能,於是就可以修改在themes\landscape\layout_partial\目錄下的article.ejs檔案,在你要的地方加上toc這個輔助函數,
    然後Hexo就會自動在上方產生你的文章目錄:

    article.ejs
    1
    2
    3
    4
    5
    6
    7
    8
    <div class="article-entry" itemprop="articleBody">
    <div class="post-toc-outer">
    <div class="post-toc">
    <%- toc(post.content, {list_number: false}) %>
    </div>
    </div>
    ...
    </div>

    圖片資產

    如果要寫出一篇生動有趣的文章,裡面的圖片絕對是不可或缺的要件之一。參考官網上有關資產資料夾的設定後,很快地就能將圖片加入你的文章當中。

    首先,你要修改部落格的_config.yml檔案,修改或加入這一行”post_asset_folder: true”,如此一來以後每當你新增一個文章,Hexo就會自動幫你產生那則文章的資料夾,你只要把你要的圖片丟到那個資料夾底下,接著在文章中呼叫:

    1
    { % asset_img 你的圖片.格式 圖片說明 %}

    接著你就可以看到美美的圖片出現在自己的文章當中了!

    完結灑花!
    To be continued..
    Posted at 2017-07-08 06:01:29
    Share 留言
    • Hexo
    • 經驗
    • 網站設計
    下一篇
    遊戲人生
    上一篇
    [FreeBSD] 以ssmtp搭配Gamil實現ssh登入自動提醒

    InfiniteWing

    Where Do We Come From?
    What Are We?
    Where Are We Going?

    最新文章

    • 有感而發 - 2018-08-24
    • 楓之谷APP開發日誌 ─ 小結 - 2018-08-21
    • 龍王的工作 - 2018-02-05
    • WSDM - KKBox's Churn Prediction Challenge - 2018-01-01
    • 在GCP安裝python3,運作pytorch - 2017-12-13

    分類

    • Big Data11
      • Cloud Computing3
      • Competition6
      • Deep Learning2
    • FreeBSD1
      • 系統防護1
    • Kaggle1
      • Notebook1
    • 個人作品9
      • 小說創作1
      • 楓之谷APP8
    • 生活4
      • 心情日記4
    • 網站設計2
      • Hexo2
    • 論文寫作1
    • 輕小說1
      • 心得1

    標籤雲

    Android APP8 Big Data11 CNN2 Cloud Computing3 Deep Learning2 FreeBSD1 GCP3 Hexo2 Kaggle9 Keras2 Notebook4 PCHome個人新聞台2 Visualization1 WSDM1 ssmtp1 個人作品9 夢想1 小說1 心得1 心情4 日常1 童年8 第一次3 系統防護1 經驗14 網站設計2 論文寫作1 資訊安全1 輕小說1 龍王的工作1

    彙整

    • 八月 20182
    • 二月 20181
    • 一月 20181
    • 十二月 20171
    • 十一月 20171
    • 十月 20171
    • 九月 20171
    • 八月 20174
    • 七月 20179
    • 二月 20171
    • 一月 20172
    • 十一月 20151
    • 十月 20152
    • 九月 20151
    • 三月 20141
    • 六月 20131
    © 2020 InfiniteWing all rights reserved.
    Powered by Hexo
  • Home
  • About
  • Archives
  • Work
  • Gallery