Hexo 備忘錄

這篇文章記錄自己使用 hexo 經驗備忘錄,內容適合第一次接觸 hexo 寫文章網友們做為參考。如果有發現特別補充的事,歡迎在下面 DISQUS 留言討論。

hexo 怎麼唸

依照 hexo 作者 zespia 的文章 Hexo 颯爽登場! 提到:

Hexo 的發音很類似於 へそ(肚臍) - zespia

所以發音是 へ(he)そ(so),中文應該就是「黑索」

完整發佈

可以在 package.josn 新增

"scripts": {
    "deploy": "hexo clean & hexo g & hexo d"
}

然後透過

$ npm run deploy

來進行比較完整的發佈動作

閱讀更多

文章內容可以透過這樣寫法,讓列表只顯示文章的部分內容

我是列表才會顯示的部分

<!-- more -->

我是繼續閱讀才會顯的部分

插入圖片

需要先將 _config.yml 中的 post_asset_folder 設定為 true,詳細參考 Hexo 資產資料夾

{% asset_img demo.jpg [我是圖片說明] %}

如此一來會輸出 HTML 為

<img src="Markdown檔案名稱/demo.jpg" alt="我是圖片說明" />

如果想要使用比較符合 Markdown 的寫法,可以安裝 hexo-asset-image 插件,就可以改成下面寫法

![我是圖片說明](Markdown檔案名稱/demo.jpg)

建議讓 資源資料夾檔案名稱 以及文章標題 title: 都命名相同的名稱,資料夾範例結構如下:

  • 《source》
    • 《_posts》
      • 《Hexo 使用筆記》
      • Hexo 使用筆記.md

Hexo 使用筆記.md 的 meta 範例內容為:

---
title: Hexo 使用筆記
date: 1991-01-01
tags:
---

插入 Youtebe 影片

只要給 youtebe 的 videoId 即可

{% youtube X85DcsKHaUo %} 

如果需要指定播放時間範圍,可以這樣寫:

{% youtube wlt3-yM-weE?start=53&end=59 %}

當然也支援內嵌作法

<iframe width="560" height="315" src="https://www.youtube.com/embed/X85DcsKHaUo" frameborder="0" allowfullscreen></iframe>

不過如想要統一使用 Markdown 寫作風格,有網友認為不要使用 iFrame 的作法,改用:

[![IMAGE ALT TEXT](http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE "Video Title")

詳細可以參考此篇文 Is it possible to embed Youtube/Vimeo videos in Markdown using a C# Markdown library

插入 UML 圖型

先安裝插件 hexo-tag-plantuml,可以使用語法

1
2
3
{% plantuml %}
Bob->Alice : hello
{% endplantuml %}

來畫出 UML 圖型

語法的使用方式參考 plantuml

目錄

  1. 1. hexo 怎麼唸
  2. 2. 完整發佈
  3. 3. 閱讀更多
  4. 4. 插入圖片
  5. 5. 插入 Youtebe 影片
  6. 6. 插入 UML 圖型