Hexo站点与Next主题配置

发表于 更新于 分类于

记录下Hexo站点与Next主题配置以及第三方插件的使用

版本

Hexo 7.1.1
Next 8.19.2

说明

假设项目目录名为 hexo，那么 ./_config.yml 称为 站点配置文件；我的 Next 主题是通过npm方式安装，./node_modules/hexo-theme-next/_config.yml （通过 git clone 下载的在 themes/next/目录下）称为 主题配置文件

只记录改动的地方，没记录的默认值

Hexo站点文件配置

站点信息

1
2
3
4
5
6
7
8
# Site
title: 雨园博客
subtitle: ''
description: 不积跬步无以至千里，不积小流，无以成江海
keywords: 雨园,雨园博客,Python,Hexo
author: 雨园
language: zh-CN
timezone: Asia/Shanghai

title：网站标题
subtitle：网站副标题
description：网站描述
keywords：网站关键字
author：作者
language：语言
timezone：时区

URL

1
2
3
4
# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://www.gaoyuanqi.cn
permalink: :urlname/

url：网址
permalink：文章的永久链接，我这里改成了 :urlname/，这样我可以在文章最上方以 --- 分隔的区域内添加 urlname: 来自定义链接

举个例子，demo.md 文件内容为：

1
2
3
4
5
---
title: demo
urlname:
- python
---

那么 demo.md 文章的永久链接为 https://www.gaoyuanqi.cn/python/

写作

1
2
# Writing
new_post_name: :year/:month/:title.md # File name of new posts

new_post_name：新文章的文件名称，我这里改成 :year/:month/:title.md 便于文章 在 ./source/_posts/ 目录下按年月分类

举个例子，执行 hexo n 'demo' 命令会创建 ./source/_posts/2024/03/demo.md

部署

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/one-command-deploy
mentdeploy:  
  type: git  
  repository: 远程仓库地址
  branch: 部署分支

为 Front-matter 自动添加变量

我经常在 Front-matter 也就是文章最上方 以 --- 分隔的区域内添加一些变量：

1
2
3
4
5
6
7
8
9
---
title: demo
date: 2020-06-04 11:29:18
updated:
categories:
tags:
urlname:
keywords:
---

我希望能够自动添加这些变量，可以通过修改 ./scaffolds/post.md 来实现：

1
2
3
4
5
6
7
8
9
---
title: {{ title }}
date: {{ date }}
updated: {{ date }}
categories: 
tags: 
urlname: 
keywords: 
---

这样只要 hexo n 'demo' 就会自动添加了

Next主题文件配置

通过npm安装Next

1
2
cd hexo
npm install hexo-theme-next

主题配置文件 _config.yml 在 ./node_modules/hexo-theme-next/ 目录下

启用Next主题

在 站点配置文件 中修改：

1
theme: next

Next样式

1
2
3
4
5
# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini

菜单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
menu:
  home: / || fa fa-home  
  #about: /about/ || fa fa-user  
  tags: /tags/ || fa fa-tags         
  categories: /categories/ || fa fa-th  
  archives: /archives/|| fa fa-archive  
  #schedule: /schedule/ || fa fa-calendar  
  #sitemap: /sitemap.xml || fa fa-sitemap  
  #commonweal: /404/ || fa fa-heartbeat
  # Enable / Disable menu icons / item badges.

menu_settings:  
  icons: true  
  badges: true

home：首页
about：关于
tage：标签
categories：分类
archives：归档
schedule：日程表
sitemap：站点地图
commonweal：公益404
badges ：显示数目

关闭文章目录序号

1
2
toc:
  number: false

代码块设置

1
2
3
4
5
6
7
8
9
10
11
12
codeblock:
  #https://theme-next.js.org/highlight/
  theme:
    light: base16/harmonic16-light
    dark: base16/horizon-dark
  prism:
    light: prism
    dark: prism-dark
  copy_button:
    enable: true
    # Available values: default | flat | mac
    style: mac

light：浅色模式下的样式
dark：深色模式下的样式
enable：开启一键复制按钮
style：代码块样式

头像

1
2
3
4
5
# Sidebar Avatar
avatar:  # Replace the default image and set the url here.
url: /images/avatar.png  # If true, the avatar will be dispalyed in circle.
rounded: true  # If true, the avatar will be rotated with the cursor.
rotated: true

url：头像链接放在./node_modules/hexo-theme-next/source/images/ 目录下的头像
rounded：true 是圆形头像，false 是正方形头像
rotated：为 true 时头像会随着光标旋转，为 false 时头像不会随着光标旋转

标题栏ico

1
2
3
favicon:
  small: /images/favicon.ico
  medium: /images/favicon.ico

favicon.ico 放在 ./node_modules/hexo-theme-next/source/images/ 目录下

页脚

1
2
3
4
footer:                                                
  since: 2020
  icon:
    animated: true

since：建站时间
animated：图标动画化

添加百度统计

在百度统计 https://tongji.baidu.com/main/setting/10000202674/home/site/index 添加网站，然后点击 获取代码，复制代码中 js? 之后的值

11

1
2
# Baidu Analytics
baidu_analytics: 5a76194671a38a6e2d9a3ac4f922817

添加谷歌分析

访问 https://analytics.google.com/analytics/web/ 右上角找到 跟踪代码管理器 > Google代码 > 代码ID

10

1
2
google_analytics:
  tracking_id: G-4RDMKB4RC6

##其它问题

Next标签页无法点击或者找不到

hexo目录下执行：

1
hexo new page "tags"

然后修改 ./source/tags/index.md ：

1
2
---                                                  title: tags                                          date: 2024-03-30 17:07:01
type: "tags"                                         ---

Next分类页无法点击或者找不到

hexo目录下执行：

1
hexo new page "categories"

然后修改 ./source/categories/index.md ：

1
2
3
4
---                                                  title: categories
date: 2024-03-30 17:09:34
type: "categories"
---

插件

添加站内搜索

hexo目录下执行：

1
npm install hexo-generator-searchdb --save

站点配置文件 添加：

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

Next 主题配置文件 修改：

1
2
local_search:
  enable: true

添加站点地图

hexo目录下执行：

1
2
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save

可以两个都安装，也可以选择一个
区别在于前者生成所有网址，后者只有文章网址生成sitemap

然后执行：

1
2
hexo clean
hexo g

会在 ./public 目录下生成 sitemap.xml 或 baidusitemap.xml

参考资料