1. 安裝主題 (Theme)
Hexo 有很多 免費主題 可以選擇
上面的圖片是預覽,下面的藍色連結是主題的 GitHub 頁面
選好主題後,通常會有安裝說明,照著做就可以,在 Hexo 根目錄下執行
cd themes
git clone <link>.git <theme> --depth=1
<link> 是主題的 GitHub 連結,<theme> 是你想要的主題資料夾名稱
--depth=1是只下載最新的 commit,節省空間
這裡以 ParticleX 為例:
git clone https://github.com/theme-particlex/hexo-theme-particlex.git particlex --depth=1
安裝完成後,在 Hexo 根目錄 _config.yml 中設定主題名稱,就可以切換主題了,一般主題在 GitHub 頁面會有說明
theme: particlex
2. 建立特殊頁面
有些主題會有特殊頁面,例如關於我 (About Me)、標籤 (Tags)、分類 (Categories) 等等
2.1 分類頁 (Categories)
hexo new page categories
打開 source/categories/index.md,在 --- 括起來的地方添加 type: categories
2.2 標籤頁 (Tags)
hexo new page tags
打開 source/tags/index.md,在 --- 括起來的地方添加 type: tags
2.3 關於我 (About Me)
hexo new page about
打開 source/about/index.md,在 --- 括起來的地方添加 type: about
3. 安裝外掛 (Plugin)
Hexo 有很多外掛可以使用,這裡介紹幾個常用的
3.1 網站地圖 (Sitemap) hexo-generator-sitemap
npm install hexo-generator-sitemap --save
安裝完成後,在 Hexo 根目錄 _config.yml 中添加以下設定
sitemap:
path:
- sitemap.xml
- sitemap.txt
template: ./sitemap_template.xml
template_txt: ./sitemap_template.txt
rel: false
tags: true
categories: true
path:設定網站地圖的路徑,可以設定多個template/template_txt:設定網站地圖的模板,可以自訂預設 xml 範本&預設 txt 範本rel:添加rel-sitemap標籤到<head>,預設為falsetags/categories:是否包含標籤和分類頁,預設為true
排除文章/頁面:
在文章/頁面的front-matter中添加sitemap: false
title: "不包含在網站地圖的文章"
date: 2024-06-01 12:00:00
sitemap: false
3.2 懶加載圖片 (Lazy Load Images) hexo-lazyload-image
npm install hexo-lazyload-image --save
安裝完成後,在 Hexo 根目錄 _config.yml 中添加以下設定
lazyload:
enable: true
onlypost: false # optional
loadingImg: # optional eg ./images/loading.gif
isSPA: false # optional
preloadRatio: 3 # optional, default is 1
enable:啟用懶加載功能onlypost:如果為true,則只有來自文章或頁面的圖片會被懶加載; 如果為false,則所有圖片都會被懶加載,包括主題的圖片,但不包括來自 CSS 的背景圖片loadingImg:設定加載中的佔位圖片,可以是本地圖片或線上圖片isSPA:如果為true,則在滾動過程中搜尋每個圖像以支援 SPA 頁面,但會影響效能; 如果為false,則只在頁面加載時搜尋圖像,不支援 SPA 頁面,但效能較好preloadRatio:設定預加載的比例,數值越大,圖片越早被加載,預設為1
排除文章/頁面:
在文章/頁面的front-matter中添加lazyimage: false
# In your post's front matter
---
title: My Post with Non-Lazy Loaded Images
lazyimage: no
---
# In your site's config file
onlypost: true
本文取自 Hexo 博客搭建教程 II | Argvchs の小窝 改寫