前言

本文跟上上期文章一样，也是搬运自站长csdn里的某个文章

1.准备工作

  • 一个hexo博客
  • 一个已经部署好hexo的github仓库
  • 一个代码编辑器（推荐vscode）

2.安装hexo主题(以solitude为例)

2.1 安装主题

在[BlogRoot]输入以下命令：

1
git clone -b main https://github.com/everfu/hexo-theme-solitude.git themes/solitude

2.2 应用主题

在[BlogRoot]下的_config.yml把第99行的内容改成以下内容：

1
theme: solitude

除此之外还要安装Pug和Stylus的渲染器。

1
npm install hexo-renderer-pug hexo-renderer-stylus --save

然后把主题的配置文件复制到博客根目录下。

Linux/mac：

1
cp -rf ./themes/solitude/_config.yml ./_config.solitude.yml

windows:

1
copy .\themes\solitude\_config.yml .\_config.solitude.yml

3.配置站点和主题

具体可以去主题官方文档看看

3.1 站点配置

_config.yml:

1
2
3
4
5
6
7
8
# Site
title: # 博客标题
subtitle: '' # 博客子标题
description: '' # 博客简介
keywords: # 博客关键词
author: # 站点作者
language: # 站点语言（默认是en）
timezone: '' # 时区

_config.solitude.yml:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 站点设置
# Site settings
site:
  # Logo
  name:
    # 显示类型 （i_class/text/img）
    # Display type (i_class/text/img)
    class: text
    # 具体内容 例如：solitude st-logo / Efu / /img/logo.png
    # Specific content, for example: solitude st-logo / Efu / /img/logo.png
    custom: Solitude
  # 网页 Icon
  # Web icon
  siteIcon: /img/pwa/favicon.ico
  # 页脚的Logo、加载动画默认的logo
  # Logo in the footer, default logo for loading animation
  icon: /img/pwa/favicon.ico

3.2 导航栏配置

左上角group：

1
2
3
4
5
6
7
8
9
# 导航栏左侧
# Left side of the navigation bar
group:
  # 分类名称: 链接地址 || 图标
  # Category name: link address || icon
  项目:
    # 子菜单名称: 链接地址 || 图标
    # Submenu name: link address || icon
    Solitude: https://github.com/everfu/hexo-theme-solitude || https://7.isyangs.cn/1/65eb200ee4dea-1.png

中间菜单：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
menu:
  Home: / # name: link
  Article: # name
    Archives: /archives/ || fas fa-folder-closed # item name: link || icon
    Categories: /categories/ || fas fa-clone
    Tags: /tags/ || fas fa-tags
  Friends:
    Moments: /moments/ || fas fa-wifi
    Links: /links/ || fas fa-user-group
    Treasure: javascript:travelling() || fas fa-gift
  Myself:
    Equipment: /equipment/ || fas fa-laptop
    Toobox: /tlink/ || fas fa-toolbox
    Music: /music/ || fas fa-music
  About: /about/

右上角按钮：

1
2
3
4
5
6
7
8
right: # right button
  random: false # Random article
  custom:
  #  - name: Start # name
  #    url: https://www.travellings.cn/go.html # Jump link
  #    icon: fas fa-train # Icon
  #    onclick: # Click event
  #    id: travellings_button # id

3.3 首页顶部配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
# 首页顶部样式
# Home top style
hometop:
  enable: false # 是否打开 / if enable
  # banner display
  banner:
    # 左上角显示大文字
    # Large text displayed in the upper left corner
    # tip：可使用html标签
    # tip: html tags be used
    title: 宁静致远<br>热爱生活
    # 左上角显示小文字
    # Small text displayed in the upper left corner
    url: Hexo Theme Solitude
    # 轮播icon
    # Carousel icon
    # tip: 76x76 size
    icon:
      # HTML: # 名字 / Name
      #   img: https://7.isyangs.cn/34/65f2e42921677-34.png # 图片 / Image
      #   color: "#e9572b" # 背景色 / Background color
      # JS:
      #   img: https://7.isyangs.cn/34/65f2e43ceddda-34.png
      #   color: "#f7cb4f"
      # Docker:
      #   img: https://7.isyangs.cn/34/65f2e45462045-34.png
      #   color: "#57b6e6"
      # Flutter:
      #   img: https://7.isyangs.cn/34/65f2e47acbe98-34.png
      #   color: "#ffffff"
      # WebPack:
      #   img: https://7.isyangs.cn/34/65f2e488bf8ed-34.png
      #   color: "#2e3a41"
      # Git:
      #   img: https://7.isyangs.cn/34/65f2e499066fa-34.png
      #   color: "#df5b40"

  # 左下跳转按钮
  # Banner lower left jump button
  group:
    # 热门: /tags/热门/ || st-fire-fill || linear-gradient(to right,#f65,#ffbf37)
    # 教程: /tags/教程/ || st-book-mark-fill || linear-gradient(to right,#358bff,#15c6ff)
    # 精选: /tags/精选/ || st-star-smile-fill || linear-gradient(to right,#18e7ae,#1eebeb)

  # 右侧置顶列表（在文章的front matter中添加“recommend: true”）
  # Right top list (add "recommend: true" in the front matter of the article)
  recommendList:
    # 左上角显示文字
    # Large text displayed in the upper left corner
    sup: 置顶
    # 左下角大字
    # Large text in the lower left corner
    title: Solitude 主题文档
    # 点击跳转链接
    # Click the jump link
    url: https://solitude.js.org/
    # 显示背景图片
    # Display background image
    img: /img/default.png
    # 阴影颜色
    # Shadow color
    color: none

3.4 本地搜索

在`[BlogRoot]输入以下命令：

1
npm install hexo-generator-search --save

然后回车，在_config.yml最底端添加以下内容：

1
2
3
4
search:
  path: search.xml
  field: post
  content: true

然后在主题配置文件开启搜索功能。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 搜索
# search
# warning：开启前需要安装搜索插件
# warning: You need to install the search plugin before turning it on
search:
  enable: true
  type: local # 选择local
  # 推荐标签
  # Recommended tags
  tags:
  # - Solitude
  # - Hexo
  algolia:
  # hits:
  # per_page: 6
  local:
    preload: false
    CDN:

4.把添加主题后的hexo博客部署到GitHub

请确保你已经安装hexo-deployer-git且已经配置好_config.yml的deploy配置项还有git的ssh公钥。

1
2
3
hexo clean
hexo generate
hexo deploy

等待一分钟左右，再次访问<giithub_user_name>.github.io，你会发现博客已经应用好主题了。