hexo 插件 - hexo-excerpt-block

🔸簡介

當你使用 hexo 架站時,是否曾經被內建的摘要標示困擾呢?這裡介紹兩款插件來幫你簡單標記摘要。

🔸1. 內建作法

前幾日因為看到部落格首頁,每篇底下都是「No Post Excerpt」看了也是頗空虛, 所以稍微研究了一下 hexo 的摘要,發現內建的摘要是在文章中插入<!-- more -->, 在這個標籤之前的內容都將被視為「文章摘要」。

1
2
3
4
5
6
7
8
9
10
11
---
title: hexo 摘要節錄插件 - hexo-excerpt-block
tags: 專案介紹
---
![封面](cover.png)
## hexo 插件 - hexo-excerpt-block
前幾日因為看到部落格首頁,每篇底下都是「No Post Excerpt」看了也是頗空虛。
<!-- more -->
內容

摘要判定 (會被 render 過):

1
2
3
![封面](cover.png)
## hexo 插件 - hexo-excerpt-block
前幾日因為看到部落格首頁,每篇底下都是「No Post Excerpt」看了也是頗空虛。

內容判定:

1
2
3
4
5
![封面](cover.png)
## hexo 插件 - hexo-excerpt-block
前幾日因為看到部落格首頁,每篇底下都是「No Post Excerpt」看了也是頗空虛。
內容

但是這個內建的作法沒什麼彈性,萬一你想要的摘要段落位於文章中間,或是開頭有個大大的封面圖片, 用這個方法將會導致摘要會包含前頭不重要的部分,或是也包含大大的封面。

🔸2. hexo-less

所以為了解決這個問題,我在 npm 上搜尋了一下,找到了一款很不錯的套件「hexo-less」, 這能夠在文章前頭加上一塊「獨立」的文章摘要,與內建的方法相同,插入<!-- less -->, 在標籤前的摘要也將不會作為文章「內容」, 用法與內建作法一樣,只是呈現的方式有異。

1
2
3
4
5
6
7
8
9
10
11
12
13
---
title: hexo 摘要節錄插件 - hexo-excerpt-block
tags: 專案介紹
---
這是一篇超級棒的文章!
<!-- less -->
![封面](cover.png)
## hexo 插件 - hexo-excerpt-block
前幾日因為看到部落格首頁,每篇底下都是「No Post Excerpt」看了也是頗空虛。
內容

摘要判定:

1
這是一篇超級棒的文章!

內容判定:

1
2
3
4
5
![封面](cover.png)
## hexo 插件 - hexo-excerpt-block
前幾日因為看到部落格首頁,每篇底下都是「No Post Excerpt」看了也是頗空虛。
內容

這款套件可以簡單的做到「自定義」一塊獨立的摘要內容,適合在你想要引人入勝、聳到的摘要時, 但卻不想在文章用一樣浮誇的內容,不過當你只是想要標記文章中的某一段作為摘要呢?

🔸3. hexo-excerpt-block

俗話說得好,老王賣瓜,其實這是我從上面那款插件修改來的呵呵。這其實算是內建摘要標記的加強版, 只要用兩個 <!-- block --> 包起來,中間的部分就會被視為摘要。

1
2
3
4
5
6
7
8
9
10
11
---
title: hexo 摘要節錄插件 - hexo-excerpt-block
tags: 專案介紹
---
![封面](cover.png)
## hexo 插件 - hexo-excerpt-block
<!-- block -->
前幾日因為看到部落格首頁,每篇底下都是「No Post Excerpt」看了也是頗空虛。
<!-- block -->
內容

摘要判定:

1
前幾日因為看到部落格首頁,每篇底下都是「No Post Excerpt」看了也是頗空虛。

內容判定:

1
2
3
4
5
![封面](cover.png)
## hexo 插件 - hexo-excerpt-block
前幾日因為看到部落格首頁,每篇底下都是「No Post Excerpt」看了也是頗空虛。
內容

<!-- block -->之間的內容將會被保留視為內容,也同時被視為摘要,你可以視為摘要區塊, 安裝方法也很簡單,npm i hexo-excerpt-block --save就可以了,hexo 會自動引用。