0%

Hexo -- 如何撰寫和客製化自己的部落格

使用以下指令,hexo 就會自動生成 md 檔,接下來直接寫 Markdown 語法就可以完成部落格,就是這麼簡單。

1
hexo new <your md file name>

新增文章

1
hexo new [layout] <title>  //如果 <title> 包含空格的話,請使用引號括起來。 ex: hexo new "my post"

如果沒有設定 [layout] 則會使用 _config.yml 中的 default_layout 設定代替,預設是用 post,也因此可以修改 scaffolds 內的 post.md 來控制生成的 md 檔預設會長什麼樣。
scaffolds-post.md

文章中站內連結

Hexo 可以使用內建的標籤插件(Tag Plugins)post_link 來達成站內文章的連接。

1
{% post_link filename [title] %}

範例:

1
2
- {% post_link hexo-blog "Hexo + GitHub Pages 建立部落格" %}
- {% post_link hexo-theme-NexT "Hexo Theme -- NexT" %}

Alternate Theme Config

Hexo 主題是一個獨立的專案,同時也有一個獨立的 _config.yml 檔案,我們可以直接修改 這一個 config 檔案來客製化主題,但也因為更動這一檔案,每一次 theme 版本更新時我們都需要小心的比對有甚麼不一樣再 pull 以更新 theme 的版本。

簡單來說就因為我們想要變更 theme 的設定,造成我們必須花心力去維護自己的設定檔和作者撰寫的 theme 的功能和外觀,很顯然我們有其他的選擇。

  1. 將 theme 的 _config.yml 所需要的設定搬到專案跟目錄的 _config.yml:

    Supported since Hexo 2.8.2

    1
    2
    3
    4
    5
    6
    # _config.yml
    theme: "my-theme"
    theme_config:
    bio: "My awesome bio"
    foo:
    bar: 'a'
    1
    2
    3
    4
    5
    # themes/my-theme/_config.yml
    bio: "Some generic bio"
    logo: "a-cool-image.png"
    foo:
    baz: 'b'

    theme 的 config 最終會編譯成這樣:

    1
    2
    3
    4
    5
    6
    7
    8
    {
    bio: "My awesome bio",
    logo: "a-cool-image.png",
    foo: {
    bar: "a",
    baz: "b"
    }
    }
  2. 另外在專案跟目錄新增 _config.[theme].yml 這一檔案

    Supported since Hexo 5.0.0

    1
    2
    # _config.yml
    theme: "my-theme"
    1
    2
    3
    4
    # _config.my-theme.yml
    bio: "My awesome bio"
    foo:
    bar: 'a'
    1
    2
    3
    4
    5
    # themes/my-theme/_config.yml
    bio: "Some generic bio"
    logo: "a-cool-image.png"
    foo:
    baz: 'b'

    theme 的 config 最終結果:

    1
    2
    3
    4
    5
    6
    7
    8
    {
    bio: "My awesome bio",
    logo: "a-cool-image.png",
    foo: {
    bar: "a",
    baz: "b"
    }
    }

Hexo 官網 強烈建議 將 theme 的設定放置於同一個檔案,但是考慮到有人可能有 theme 的設定分開儲存的需要,以下資訊十分重要(權限排序):

主站的 _congig.yml 權力 > _config.[theme].yml > theme 內建的 _config.yml

更換主題

  1. 官方主題
  2. 最夯的 NexT
  3. Hexo github 上整理

Hexo 更換主題非常簡單,基本上將喜歡的主題下載到專案中的 themes,並設定 Hexo 專案根目錄的 _config.yml 即可替換。

主題 – NexT

目前較多人使用的主題,外觀簡約且可調整的細節也很豐富,最重要的是教學、文件和功能都非常的齊全(本文章是使用 NexTv7.8.0)。
現階段 NexT 有兩個版本 v6 以後和 v5.1.x 的版本(舊版):
舊版官網:
舊版官網

舊版 GitHub:
舊版GitHub

新版 GitHub (官網):
新版GitHub

安裝 NexT

  1. 先從 GitHub clone 專案到根目錄的 themes 資料夾:

    1
    git clone https://github.com/theme-next/hexo-theme-next themes/next
  2. 更改 _config.yml 內 theme 為 next
    Hexo更換主題NexT

  3. 在終端機重新執行

1
hexo s //開起本地端的網站,方便預覽成果

NexT 預設畫面( Hexo Theme -- NexT 進階配置 ):
NexT 預設畫面

參考資料

  1. 如何搭建個人 Blog 使用 Hexo + Gitpage
  2. (17) 試著學 Hexo - NexT 主題篇 - NexT
  3. Hexo - 前端也能建置部落格!更換主題與發表文章篇
  4. Hexo 官網