Hexo主題Butterfly 我都加了哪些插件【Butterfly 美化教學#4】

今天這個文章會整理一些我加入的插件也會稍微講一下加入插件後的外觀差別醬子

((其實原本是要寫上上一篇文章裡了只是因為覺得上一篇寫的太長了, 個人是不太喜歡把一篇文章寫的太長
((所以習慣就是寫到一個長度後把剩下的內容寫到下一篇

廢話就差不多到這裡拉 (｡･∀･)ﾉﾞ
以下是一些我裝上的插件:

首頁輪播圖 (Swiper)

這也是我個人最喜翻基本上不會拿掉的一個插件
看起來大概像是以下這樣:

畫面預覽

插件安裝&使用方式:

安裝方式

首先先在你的 cmd 打上以下代碼 (你可以直接複製以下的代碼並貼上你的cmd裡面)

1	npm install hexo-butterfly-swiper --save

這樣你就獲得了一個名為 hexo-butterfly-swiper 的插件拉
該插件也應該要出現在你的 node_modules 裡面

然後在你的 config.yml 裡面加入以下的代碼:

# hexo-butterfly-swiper
# see https://akilar.top/posts/8e1264d1/
swiper:
  enable: true # 开关
  priority: 5 #过滤器优先权
  enable_page: / # 应用页面
  timemode: date #date/updated
  layout: # 挂载容器类型
    type: id
    name: recent-posts
    index: 0
  default_descr: (●'◡'●)
  swiper_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.css
  swiper_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js 
  custom_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.css
  custom_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper_init.js

以上的代碼是我自己的位置搭
你可以將以上的代碼自由更換成自己想要的樣子

稍微介紹一下如何更改好了

enable: true - 使用 | 改成 enable: false 則不使用該插件
priority: 5 - 就像介紹寫的這代表優先度, 數字越小就越早執行
timemode: date - 在 swiper上顯示的時間
- date = 文章建立時間
- updated = 文章最後更新時間
default_descr: (●'◡'●): 默認顯示的文章介紹 - 該介紹會在文章沒有任何 description, readmore 或是 excerpt 標誌的情況下顯示
- 我現在的默認描述是: (●’◡’●) -> 敲可愛的齁
其他東西技術力不足,　不建議更改搭

使用方式

要如何決定哪些文章會顯示在首頁呢?
這個就要看你如何定義你的文章的 front matter 拉

定義方式:

1	swiper_index: 1

在 front matter 的地方加入 swiper_index 就可以囉
後面的數字越大該文章就會越早顯示

首頁磁鐵 (Magnet)

這也是我個人看了挺喜歡的一個改動
可以顯示類似下圖這樣的東東:

外觀範例

安裝方式

首先先在你的 cmd 打上以下代碼 (你可以直接複製以下的代碼並貼上你的cmd裡面)

1	npm i hexo-magnet --save

這樣你就獲得了一個名為 hexo-magnet 的插件拉
該插件也應該要出現在你的 node_modules 裡面

然後在你的 config.yml 裡面加類似入以下的代碼:

magnet:
  enable: true
  priority: 2
  enable_page: all
  type: categories
  devide: 2
  display:
    - name: Hexo
      display_name: Hexo
      icon: ▶