Hexo和Next主题升级到最新版

发表于 分类于

 

配置HEXO环境

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
# 先下载解压NodeJS
wget https://nodejs.org/download/release/v22.14.0/node-v22.14.0-win-x64.zip
C:\Soft\7ZIP\7z.exe x C:\Users\leux\Downloads\node-v22.14.0-win-x64.zip -oC:\Soft
ren node-v22.14.0-win-x64 Nodejs

# 再安装初始化Hexo
cd C:\Soft\Nodejs
set PATH=%PATH%;C:\Soft\Nodejs	# 临时设置Windows环境变量
npm install hexo-cli -g		# 安装Hexo到 C:\Soft\Nodejs\node_modules
hexo init www			# 此步需要git命令来克隆源码
cd C:\Soft\Nodejs\www
npm install			# 将依赖安装到到 C:\Soft\Nodejs\www\node_modules

hexo server			# 开启Hexo服务器
hexo clean			# 清理public目录
hexo generate			# 生成public目录

# 修改Hexo的基本配置：www/_config.yml
#################################################
title: 云端笔记
subtitle: '学习的备忘录'
description: '好记性不如烂笔头'
keywords: 云端笔记, leux, 零壹, 云端, 备忘录, 笔记
author: leux
language: zh-CN
timezone: ''

url: https://leux.cn
permalink: doc/:title.html

theme: next
#################################################

安装NEXT主题

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
63
64
65
66
67
68
69
70
71
72
73
74
75
# 既可手动下载主题解压到 C:\Soft\Nodejs\www\themes
# https://github.com/next-theme/hexo-theme-next/archive/refs/tags/v8.22.0.zip

# 也可使用NPM自动安装主题指定版本
cd C:\Soft\Nodejs\www
npm install hexo-theme-next@8.22.0

# 修改Next主题配置：www/node_modules/hexo-theme-next/_config.yml
##################################################################################################
minify: true		# 是否允许压缩 Hexo 生成的文件
scheme: Gemini		# 主题的视图方案

open_graph:		# 是否在社交媒体上显示网页的预览内容
  enable: false
  options:

menu:			# 菜单栏中显示的页面
  home: / || fa fa-home
  archives: /archives/ || fa fa-archive
  categories: /categories/ || fa fa-th
  tags: /tags/ || fa fa-tags

menu_settings:		# 菜单栏中显示图标，菜单栏中显示对应数目
  icons: true
  badges: true

social_icons:		# 侧边栏中是否显示社交链接的图标
  enable: false
  icons_only: false
  transition: false

footer:			# 页尾显示的内容
  since: 2016
  icon:
    name: fa fa-user
    animated: false
    #color: "#ff0000"
  copyright:
  powered: false
  beian:
    enable: true
    icp: 粤ICP备19106113号

post_meta:		# 是否显示帖子的描述文本、创建日期、更新日期、类别
  item_text: true
  created_at: true
  updated_at:
    enable: false
    another_day: false
  categories: true

symbols_count_time:	# 是否显示字数和预计阅读所需时间，需额外安装插件 hexo-word-counter
  separated_meta: false
  item_text_total: false

tag_icon: true		# 是否将文章底部标签左侧的符号 # 替换成图标

back2top:		# 是否启用返回页首按钮，是否将按钮放在侧边栏中，是否在按钮中显示滚动百分比
  enable: true
  sidebar: true
  scrollpercent: true

pjax: true		# 是否启用 PJAX 支持

motion:			# 关闭动画效果
  enable: false

baidu_analytics: abcdefghijklmnopqrstuvwxyz123456	# 百度统计

vendors:		# 静态资源的CDN提供方，internal 为Next内部资源CDN提供方，plugins 为第三方插件CDN提供方
  # Available values: local | jsdelivr | unpkg | cdnjs | custom
  internal: custom
  plugins: custom
  custom_cdn_url: https://s4.zstatic.net/ajax/libs/${cdnjs_name}/${version}/${cdnjs_file}
##################################################################################################

分类与标签页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 不创建的话侧边栏中的分类与标签页面点击无反应
hexo new page tags		# 创建标签页面
hexo new page categories	# 创建分类页面

# 创建后还需要添加 type: "***" 到其中，否则页面空白，最后文件的路径及内容如下
C:\Soft\Nodejs\www\source\tags\index.md
---
title: 标签分类
date: 2025-03-22 13:51:52
type: "tags"
---

C:\Soft\Nodejs\www\source\categories\index.md
---
title: 页面分类
date: 2025-03-22 13:51:52
type: "categories"
---

添加本地搜索项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
cd C:\Soft\Nodejs\www
npm install hexo-generator-searchdb

# 先修改Hexo配置：www/_config.yml
search:
  path: search.xml	# 默认情况下文件路径是 /search.xml，如果文件扩展名为 .json，则输出格式为 JSON。
  field: post		# 要搜索的搜索范围，post 仅搜索所有帖子，page 只搜索所有页面，all 将涵盖您博客的所有帖子和页面
  content: false	# 是否包含每篇文章的全部内容， 如果为 false 则生成的结果仅包含标题和其他元信息，不包括内容
  format: raw		# 页面内容的形式，html 被缩小的原始html字符串，striptags 原始html字符串被删减并删除所有标签，raw 每个帖子或页面的Markdown文本

# 再修改Next配置：hexo-theme-next/_config.yml
local_search:
  enable: true
  trigger: auto		# auto 输入触发搜索。manual 按回车键或搜索按钮触发搜索
  top_n_per_article: 1	# 显示每篇文章的前 n 个结果，通过设置为 -1 显示所有结果
  unescape: false	# 将 html 字符串转义为可读字符串
  preload: false	# 在页面加载时预加载搜索数据

首页显示的摘要

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
# 由于在Next 7.6中已经移除自动将主页中的文章摘录的功能，即无法使用 auto_excerpt 这一特性
-auto_excerpt:
-  enable: false
-  length: 150


方法一：手动写概述

---
title: 让首页显示部分内容
date: 2020-02-23 22:55:10
description: 这是显示在首页的概述，正文内容均会被隐藏。
---


方法二：文章截断，在需要截断的地方加入：<!--more-->
# 首页就会显示这条以上的所有内容（如果为空则显示全文），隐藏接下来的所有内容。
# 旧的md文档仅需在第8行添加：&nbsp;<!--more--> 即可实现空概述，在Linux下将当前目录下所有.md文件中插入
sed -i "7a &nbsp;<\!--more-->\n" `find -type f -name "*.md"`


方法三：使用 hexo-excerpt 插件来完成

npm install hexo-excerpt --save

# 在Hexo配置文件 _config.yml 中添加以下代码：
excerpt:
  depth: 3				# 摘录的深度，即生成的摘录内容所包含的层级标题数量
  excerpt_excludes: []			# 不生成摘录的页面列表
  more_excludes: []			# 不使用<!-- more -->标签的页面列表
  hideWholePostExcerpts: true		# 是否隐藏全文摘录（当文章较短时，可能不需要摘录）

# 在主题配置文件 hexo-theme-next/_config.yml 中，启用摘录描述和阅读全文按钮选项:
excerpt_description: true		# 是否在摘录下方显示文章描述
read_more_btn: true			# 是否显示阅读全文按钮

修改字体的大小

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
# 既可修改主题配置 theme/next/_config.yml 中font的size，默认NexT使用微软雅黑字体
font:
  enable: true
  global:
    external: true
    family: Lato
    size: .75

# 也可修改主题样式 hexo-theme-next/source/css/_variables/base.styl 中第104~112的font-size-base后面的 , em) : 1em; 改为 , em) : .875em;
// 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;	# sidebar中字体的大小，【首页】【归档】【分类】【标签】【搜索】
$font-size-small          = .875em;	# 代码块，文章目录，和最后的footer字体大小
$font-size-medium         = 1em;
$font-size-large          = 1.125em;	# 标题和文章内容的字体大小
$font-size-larger         = 1.25em;
$font-size-largest        = 1.5em;	# 文章标题的字体大小

# 关于em和px间的换算：.625em=10px	.75em=12px	.8125em=13px	0.875em=14px	1em=16px

# 以前用的V6版中设置的值如下
// Font size
$font-size-base           = 14px
$font-size-base           = unit(hexo-config('font.global.size'), px) if hexo-config('font.global.size') is a 'unit'
$font-size-small          = $font-size-base - 2px
$font-size-smaller        = $font-size-base - 4px
$font-size-large          = $font-size-base + 2px
$font-size-larger         = $font-size-base + 4px

修改主题的宽度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Pisces和Gemini样式请修改：hexo-theme-next/source/css/_variables/Pisces.styl 中第13~14行的如下值：
$content-desktop              = 'calc(100% - %s)' % unit($content-desktop-padding / 2, 'px');
//$content-desktop-large      = 1160px;
//$content-desktop-largest    = 73%;
$content-desktop-large        = 85em;
$content-desktop-largest      = 85%;

# Muse和Mist样式请修改：hexo-theme-next/source/css/_variables/base.styl 中第198~200行的如下值：
$content-desktop              = 700px;
$content-desktop-large        = 800px;
$content-desktop-largest      = 900px;

# 以前用的V6版中的值如下，修改宽度教程：https://xlline.github.io/2019/06/19/Hexo-postwidth/
$main-desktop                 = 960px
$main-desktop-large           = 1200px

其他相关的知识

  1. 为文章页面最下面的tags添加展示图标 # hexo ，在主题配置文件中更改 tag_icon: true 。或者打开 themes/next/layout/_macro/post.swig 文件,搜索 rel="tag"># ,将那个 # 换成 <i class="fa fa-tag"></i> 即可显示图标

  2. 修改Hexo默认的端口号，既可以 hexo server -p 80 时指定，也可修改 www/node_modules/hexo-server/index.js 中默认的 port: 4000