WordPress轉移Hexo-後篇

前情提要

佛要金裝，人要衣裝
主題佈置對於部落格來說
也是一樣的道理

搜尋Hexo主題花了滿多時間
原本滿喜歡 Next主題
但是真的是太多人用了
只好作罷

查了半天
最後看到有人推薦 butterfly
除了畫面炫砲，功能齊全
重點是文件非常詳細
把玩了一下，真心覺得不錯
就決定是他了

本篇文章是針對Hexo主題設定
關於Hexo的基礎建立，可以參考上一篇文章
WordPress轉移Hexo-前篇

安裝主題

這邊使用npm的安裝方式
而不是用git clone

1	npm install hexo-theme-butterfly

修改 _config.yml 的 theme
預設會是lnadscape，改為butterfly
接著執行 hexo serve
應該就可以在 http://localhost:4000
看到已經主題已經更換
hexo-2-1
hexo-2-2

新增分類、標籤

雖然在右欄可以看到Tags和Categories
但實際按下去會顯示404
因為我們還沒新增該頁的markdown
hexo-2-3

在source資料夾底下
新增 categories 資料夾
在資料夾裡面新增 index.md如下

---
title: 分類 
date: 2019-04-01 22:52:41
type: "categories"
---

然後新增 tags 資料夾
一樣在資料夾新增 index.md

---
title: 標籤
date: 2019-04-01 22:52:41
type: "tags"
---

hexo-2-4-1

如果你的文章有分類或是Tag
就可以從剛剛的連結過去了
hexo-2-4
hexo-2-5

設定 Hexo config

主設定

butterfly主題有支援繁體中文
所以直接使用zh-TW即可

# Site
title: Hexo-Demo-2 # 顯示於主頁面的文字
subtitle: 
description: 
keywords: 
author: Frank
language: zh-TW # 主題的設定會變成中文
timezone: ''

文章網址

再來是網址的permalink
預設會是 :year/:month/:day/:title/
文章網址就會長得像是 /2023/04/12/hello-word
但我個人習慣使用分類
所以會改成 :category/:name/

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: http://frank58246.gitlab.io/hexo-demo-2
permalink: :category/:name/

分類對應

文章分類使用中文的話
在複製時網址會被encode
比較不美觀
設定 category_map 可以解決這個問題

# Category & Tag
default_category: uncategorized
category_map:
  軟體開發: programming # 一個分類一列

例如一篇文章的 front-matter 如下

---
title: "Hello, Vim"
date: "2022-09-25"
categories: 
  - "軟體開發"
tags: 
  - "vim"
  - "vimium"
---

搭配category_map的設定
網址就會從原本的 /%E8%BB%9F%E9%AB%94%E9%96%8B%E7%99%BC/hello-vim/
變成 /programming/hello-vim/

設定 butterfly config

在根目錄新增一個 _config.butterfly.yml
因為本次範例是由npm安裝
並不是把source code載到專案裡面
所以這個config的要手動新增
hexo-2-10

加入導覽列

雖然不知道為啥沒有archives的資料夾
歸檔頁面還是跑得出來，真的神奇

menu:
  首頁: / || fas fa-home
  分類: /categories/ || fas fa-folder-open
  歸檔: /archives/ || fas fa-archive
  標籤: /tags/ || fas fa-tags

hexo-2-9

加入副標題

這個應該是butterfly主題最特殊的地方之一
可以在首頁顯示打字效果的副標題
hexo-2-6

subtitle:
  enable: true
  # Typewriter Effect (打字效果)
  effect: true
  # loop (循環打字)
  loop: true
  # source調用第三方服務
  # source: false 關閉調用
  # source: 1  調用搏天api的隨機語錄（簡體）
  # source: 2  調用一言網的一句話（簡體）
  # source: 3  調用一句網（簡體）
  # source: 4  調用今日詩詞（簡體）
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  source: false
  # 如果有英文逗號' , ',請使用轉義字元 &#44;
  # 如果有英文雙引號' " ',請使用轉義字元 &quot;
  # 開頭不允許轉義字元，如需要，請把整個句子用雙引號包住
  # 如果關閉打字效果，subtitle只會顯示sub的第一行文字
  sub:
   - 花有重開日，人無再少年
   - 今人不見古時月，今月曾經照古人

關閉分享

預設文章底下會有一排分享的logo
因為用不到所以就關掉它
hexo-2-7

1
2
3

sharejs:
  enable: false
  #sites: facebook,twitter

文章meta

預設的會帶入修改日期
這邊把它關掉
hexo-2-8

post_meta:
  page:
    date_type: created # created or updated or both 主页文章日期是创建日或者更新日或都显示
    date_format: date # date/relative 显示日期还是相对日期
    categories: true # true or false 主页是否显示分类
    tags: true # true or false 主页是否显示标签
    label: true # true or false 显示描述性文字
  post:
    date_type: created # created or updated or both 文章页日期是创建日或者更新日或都显示
    date_format: date # date/relative 显示日期还是相对日期
    categories: true # true or false 文章页是否显示分类
    tags: true # true or false 文章页是否显示标签
    label: true # true or false 显示描述性文字