0%

Hexo 新增文章和頁面 (二)

此篇會如何在 Hexo 使用 new 新增指令。

範例的環境版本

hexo 版本:6.0.1
hexo-cli 版本:4.3.0
next 版本:7.8.0

新增指令

新增文章、草稿、草稿三種語法都一樣是使用 new 指令,只差別在 layout 參數。

指令

hexo new [layout] <title>

參數

title:文章標題

  • 若文章標題包含空格,需使用 引號 刮起來(雙引號、單引號都可以),否則會以最後一個空格後面的字作為 title。

layout:模板種類,有以下三種不同的種類

  • draft.md(新增草稿)
  • page.md(新增頁面)
  • post.md(預設值,新增文章)

如果沒有加上 layout 參數,則會帶入根目錄 _config.yml 檔案中的 default_layout 參數,預設為 post。

再下新增指令前,還需要先暸解一些設定以及檔案路徑。

存放路徑

新增的文章會存放於根目錄 source/_post 路徑底下,會用 .md 檔作為筆記的副檔名。

如果想獲取已發佈的文章,則可以直接複製 source/_post 資料夾,就可以獲得發佈過的 md 檔案。

設置模版參數

根目錄 scaffolds 資料夾中的 layout 檔案(draft.md、page.md、post.md),分別代表三種種 layout 模板的設置。

模版參數種類

參數是 Front-matter,檔案最上方以 --- 分隔的區域)作為模版預設樣式的參數。

常用的四種參數

  • title:會自動帶上當 title 值,並以 h1 tag 的方式呈現。
  • date:會自動帶上當下日期。
  • categories:分類(多筆會用 破折號 - 的方式輸入)。
  • tags:分類(多筆會用 破折號 - 的方式輸入)。
示範 scaffolds 中如何用 {{}} 設置 Front-matter 參數
1
2
3
4
5
6
7
8
---
title: {{ title }} // 預設值,文章名稱(會自動帶入)
date: {{ date }} // 預設值,文章時間(會自動帶入)
tags: {{ tags }} // 標籤
categories: {{ categories }} // 分類
thumbnail: // 預覽圖
banner: // 文章開頭圖
---

其他參數請參考官方文件

新增頁面

此小節也會介紹如何解決上一篇文章結尾提到的徑錯誤(例如:Cannot GET/about/)。

語法

  • hexo new page <title>

下方會演釋如何透過指令建立 menu 所需頁面,以及建立後需要設置什麼?

Step1:輸入新增頁面指令

  • 示範新增 tags 頁面
hexo new page tags

tags 畫面

這樣路徑就不會錯誤拉,只是會發現空空如也,那是因為還需要設置對應的 type 參數。

Step2:修改 index.md 中 Front-matter 參數 type

進入根目錄 source 資料夾中,剛剛新增的 tags 資料夾底下,會有一個 index.md,這隻檔案使用 Front-matter(檔案最上方以 — 分隔的區域) 作為模版預設樣式的參數。

  • title:會自動帶入指令中的 title(tags)
  • date:會自動帶入檔案檔案建立日期
  • type: 才會對應類別的文章
source/tags/index.md
1
2
3
4
5
---
title: tags
date: 2022-04-25 13:15:09
type: tags
---

tags 畫面

延伸閱讀:ray 大 試著學 Hexo - 新增頁面

文章中有提到如何去除模板,不使用預設產生的樣板而是改用手刻的 .html 檔案。

新增文章

語法

hexo new <title>

下方如何透過指令新增文章,以及建立後需要設置什麼?

Step1:新增文章

hexo new <title>

Step2:清除快取檔案 (db.json) 和已產生的靜態檔案 (public)

hexo cl

Step3:產生靜態檔案以及重新部署

hexo d -g

示範新增文章需要做的三個指令

hexo new '架設部落格 Hexo 部署 Github (零)'
hexo cl
hexo d -g

那如何在文章中添加圖片以及刪除文章呢?

刪除文章

Step1:直接刪除路徑 ./source/_posts 對應的文章 .md 檔案。

Step2:清除快取檔案和已產生的靜態檔案。

hexo cl

Step3:重新部署

hexo d -g

文章圖片

Hexo 本身並沒有提供上傳圖片的功能,因此需要另外尋找上傳圖片的服務,下面介紹兩種方法。

方法一:在創建文章時會 自動產生 一個和文章同名的資料夾,用於存放圖片。

透過部署時一併上傳到 github。

Step1:搜尋 Writing
Step2:修改 post_asset_folder 參數(預設是 false)

_config.yml
1
2
- post_asset_folder: false
+ post_asset_folder: true

後期不建議使用這種方式,因為 github repository 限制 5GB,當文件大小超過 50 MB 將收到警告,無法上傳超過 100 MB 的文件。

src:GitHub、Gitlab、Gitee的容量及文件大小限制

方法二:上傳其它圖片空間在用圖片超連結的方式插入到文章的 md 檔案。

免費圖片空間:ImgurUpload.cc、firebase

Step1:上傳圖片到免費空間中
Step2:複製圖片連結
Step3:插入到文章中

1
![type](https://imgur.com/bRVlExe.png)

免費圖片空間注意事項

  1. 是否有時間限制(例如:超過 60 天沒有瀏覽就刪除)
  2. 圖片是否可外連(例如:有些空間是不支援直接獲取圖片連結)
  3. 圖片流量限制(例如:限制圖片的讀取數量以及流出數量)

新增草稿

草稿優勢為,預設不會被編譯出來,下方會介紹兩種不會被編譯的方法。

指令

hexo new draft <title>

方法一:_drafts 資料夾(草稿資料夾)內的文章

新增的草稿會存放於 _drafts 資料夾中,若資料夾不存在則會自動生成一個。

Step1:輸入新增草稿文章指令

hexo new draft <title>

方法二:新增底線開頭資料夾

Step1:根目錄 source/_post 資料夾內,新增底線開頭的資料夾(例如:_草稿、_draft)
Step2:將還沒有要發布的文章手動搬移到到該資料夾底下

草稿資料夾

那如果寫完了怎麼轉成文章?

草稿轉文章

下面介紹兩種方法。

方法一:手動搬移

  • 將草稿文章手動搬移到 source/_post 資料夾中。

方法二:輸入 publish 指令

hexo publish draft <title>

有限制,僅適用於存在 _drafts 資料夾底下的草稿,因為會自動從 source/_drafts 尋找對應的草稿文章,因此不在該資料夾底下則會搜尋不到。

草稿 error

編譯草稿

上面有提到,預設是不會將編譯草稿編譯出來,但如果要讓本地端 server 看見還是有辦法可以將其編譯出來的,下方介紹兩種方法。

方法一:reu server 時帶入 --draft

hexo s --draft

方法二:修改根目錄 _config.yml 中的 render_drafts 參數(預設為 false)

1
2
-render_drafts: false
+render_drafts: true

但要注意使用方法二,運行時會出現警告提醒。(可以忽略沒關係)

WARN 警告提示

reference

試著學 Hexo - 新增頁面