Hexo6 升級踩坑指南

Createsequence發表於2024-03-21
Hexo

前言

這一年多好久沒有更新自己的部落格了，攢了不少筆記要整理，剛好換了電腦需要重新配環境，於是決定趁這個機會給自己用來搭建部落格的 hexo 和 next 主題升個級（其實是重新安裝），然後把筆記整理整理潤色一下重新發到部落格上。

雖然這兩者的安裝已經非常傻瓜式了，但是實際上一通操作下來還是踩了一些坑，於是決定簡單整理一下以便後續查閱。

這篇文章寫於 2023 年中旬，截止到目前 2024 年 3 月，hexo 7.0 正式版已經發布有一段時間的，經過慎重的考慮，筆者決定還是回到部落格園，不自己折騰了 orz

一、安裝 Hexo

按官方文件安裝 Hexo：https://hexo.io/zh-cn/docs/
在根目錄的 /source/_post 資料夾中放上文章或資料夾即可。

二、安裝 Next 主題

可以選擇直接 npm install hexo-theme-next --save 安裝，也可以直接將 hexo 原始碼拉到根目錄的 /theme 資料夾，比較方便後續升級和 diy：

cd 根目錄
git clone <https://github.com/next-theme/hexo-theme-next> themes/next

在 hexo 配置檔案中指定 theme: next 後，執行 hexo server -g 命令即可在本地服務預覽內容。
更多內容參見： https://blog.pantato.com/2022/08/18/hexo部落格next8-0主題深度配置/

三、踩坑

1、標籤、分類目錄不顯示

預設情況下，next 主題只開放文章和歸檔兩個選單欄，左側選單欄頭像下的“標籤”和“分類”根本無法點選，需要額外的配置才可以使用。
在配置檔案中開啟選單欄
首先，確認在 next 主題的配置檔案中開啟了對應的側邊欄選單：

menu:
	home: / || fa fa-home # 主頁
	tags: /tags/ || fa fa-tags # 標籤
	categories: /categories/ || fa fa-th # 分類
	archives: /archives/ || fa fa-archive # 歸檔

建立頁面
配置後頁面點選分類後會顯示 Can not get /tags/ （大概是這個報錯）表示找不到頁面，此時則需要進入 hexo 根目錄，並執行下述命令建立頁面：

hexo new page "categories"
hexo new page "tags"

此時根目錄的 /source 目錄下會分別出現兩個資料夾 categories 和 tags ，裡面都有一個 index.md 檔案，點選進入後為其新增 type ：

---
title: categories
date: 2023-08-11 16:22:41
type: categories # 填寫對應的頁面型別
---

此時重新編譯執行即可。

2、生成摘要

next6 以上的版本就沒有整合自動摘要外掛了，對此官方也給出了一些處理方式，參見：https://github.com/next-theme/hexo-theme-next/issues/4 中的 auto_excerpt 部分內容。
在文章頭部配置
你可以直接在文章的 md 檔案頭部裡面配置:

---
title: next5主題自定義摘要
date: 2020-12-21
tags: [雜七亂八]
categories: [雜七亂八]
description: 這裡是一段摘要
---

在文章內容中新增 <!-- more -->

或者在文章的內容中新增 <!-- more --> 然後在其之前的內容將會自動提取為摘要。

安裝hexo-excerpt外掛

也可以透過 npm install hexo-excerpt --save 命令安裝 hexo-excerpt 外掛，然後重啟專案後即可生效。安裝外掛後，可按文件在 hexo 配置檔案中配置相應引數：

excerpt:
  depth: 3
  excerpt_excludes: []
  more_excludes: []
  hideWholePostExcerpts: true

透過 js 手動擷取
若不滿意可參照我以前的思路編寫 js 手動擷取：https://www.cnblogs.com/Createsequence/p/14407015.html
不過在 hexo8 中由於頁面佈局調整，因此 js 也需要調整：

window.onload = function() {
  return getAbstract();
}

/**
 * 擷取摘要
 */
function getAbstract() {
    let arts = document.getElementsByTagName('article');
    if (arts.length <= 1) {
        console.log("不在主頁！");
        return ;
    }
    for (let i = 0; i < arts.length; i++) {
        let dom = arts[i];
        // process post body
        let button = dom.getElementsByClassName("post-button")[0];
        let body = dom.getElementsByClassName("post-body")[0];
        body.removeChild(button);

        // resolve abstract content
        let content = body.textContent;
        content = content.substring(0, 250) + "......";
        body.innerHTML = content;

        // append post button
        body.appendChild(button);
    }
}

3、樣式

如果對預設的樣式不滿意，可以進入 next 主題的根目錄下的 /source/css/_variables/base.styl 檔案調整相應的引數。比如我覺得預設的字型有點太大了，就可以修改字型配置的檔案：

// Font size
$font-size-base           = (hexo-config('font.enable') and hexo-config('font.global.size') is a 'unit') ? unit(hexo-config('font.global.size'), em) : 1em;
$font-size-smallest       = .75em;
$font-size-smaller        = .8125em;
$font-size-small          = .875em;
$font-size-medium         = 1em;
$font-size-large          = .9em; // ，預設為 1.125em
$font-size-larger         = 1em; // 預設為 1.25 em
$font-size-largest        = 1.25em; // 預設為 1.5em

4、指定檔案輸出路徑

如果需要改變 hexo generate 命令生成的靜態檔案的輸出路徑，可以參照 https://github.com/hexojs/hexo/issues/1585，直接修改 hexo 配置檔案中下述部分即可：

# Directory
source_dir: source
public_dir: ./../docs # 原本為 public，即 hexo 根目錄的 public 資料夾下
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

相關文章