Hexo 主題

主題選擇

官方的主題：https://hexo.io/themes/
Hexo github 上整理：https://github.com/hexojs/hexo/wiki/Sites
NexT：https://theme-next.iissnan.com/

個人是選擇 NexT，以下也是以此主題來說明如何套用和設定。

替換主題

下載主題並解壓縮後，放入 themes 資料夾裡。

開啟 _config.ym。

找到以下這段，並將主題資料夾名稱替換上去。

1	theme: hexo-theme-next-master

指令重啟即可。

1	$ hexo server

基本個人設定

服務啟動後，Blog 更換主題，但還缺少中文語言、個人資訊、功能等。

在 _config.yml 修改以下：

// Site
title: Zac Blog // 網站標題
subtitle: 'I think, therefore I am' // 網站副標題
description: 'I think, therefore I am' // 網站敘述
keywords: Zac Blog // 關鍵字
author: Zac // 網站作者
language: zh-TW // 網站語系

// URL
url: https://bgismygf.github.io/ //輸入您的網站 URL

主題設定

以下設定是位置是存放在 themes/主題資料夾/_config.yml，請勿搞混。

Favicon

將 ico 圖檔放入 themes\主題名稱\source\images，再將檔名修改。

1
2
3

favicon:
  small: /images/favicon-16x16.ico
  medium: /images/favicon-32x32.ico

主題樣式

打開其中一個註解即可，個人使用第一個。

// Schemes
scheme: Muse // 打開註解
#scheme: Mist
#scheme: Pisces
#scheme: Gemini

側欄左右設定

1
2
3

sidebar:
  // Sidebar Position.
  position: left

側欄個人圖片

// Sidebar Avatar
avatar:
  url: // 圖片連結
  rounded: true // 圖片外框，true 就圓形，false 就方形
  rotated: false // true 時，滑鼠指著圖片時會轉圈

增加標籤、分類功能

將 tags 和 categories 取消註解狀態，這動作可讓首頁多了標籤和分類的按鈕。

1
2
3

menu:
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th

找到以下這段並調整成 true，調整後在側欄會出現文章、標籤、分類的按鈕。
如果沒出現標籤、分類按鈕，是因為現有的文章未使用標籤、分類。

1 2	// Posts / Categories / Tags in sidebar. site_state: true

接著，依序輸入下方指令：

1 2	$ hexo new page tags // 產生標籤頁面 $ hexo new page categories // 產生分類頁面

source 資料夾裡會出現 categories 和 tags 資料夾，各自都有 index.md，打開後各自在 date 下方加入 type，即可完成。

tags / index.md

1
2
3

title: tags
date: 2020-03-30 20:50:00
type: "tags"

categories / index.md

1
2
3

title: categories
date: 2020-03-30 20:50:00
type: "categories"

側欄連結

以下依據個人需求去開啟註解，啟動功能。

其他網站連結

social:
  GitHub: https://github.com/yourname || github
  E-Mail: mailto:yourname@gmail.com || envelope

  social_icons:
  enable: true
  icons_only: true // 是否只留 icons
  transition: false

其他網站連結 2

title 可更換成自定義名稱，連結可往下增加。

links_settings:
  icon: link
  title: Links
// Available values: block | inline
  layout: block // 排列方式

links:
  title: http://yoursite.com

左下瀏覽進度

1	scrollpercent: true

右上 Github 圖示連結

// Follow me on GitHub` banner in the top-right corner.
github_banner:
  enable: true
  permalink: // 你的 Github 連結
  title: Follow me on GitHub

如果要修改成其他 icon，可在 fontawesome 中挑選。

footer:
  icon:
    name: fa fa-heart // icon 樣式
    animated: true // icon 動畫
    color: "#ff0000" // icon 顏色

去除底部的 Powered by Hexo & NexT 字樣

1 2	// Powered by Hexo & NexT powered: false

結語

主題設定到這告一段落，如果有新發現會再更新，也感謝以下網站的分享教學：