Hexo Next 安装部署及配置示例

环境信息

  • Hexo 6.2.0
  • Next 8.12.2

Hexo 查看版本方式: npm list
Next 版本信息可在文件 themes/next/package.json 中查看

安装

安装指定版本的 Hexo

假如要安装 7.0.0 版本的 Hexo,参考以下命令

npm install -g [email protected]

hexo init myblog --version 7.0.0

Hexo 常用配置

首页按照更新时间排序

更改主配置文件 _config.yml 中的以下部分(index_generator.order_by):

_config.yml
index_generator:
path: ''
per_page: 10
order_by: -updated

代码块不显示行号

更改 Hexo 配置文件 _config.yml,修改以下配置

_config.yml
highlight:
enable: true
line_number: false

line_number 值改为 false

配置站点地图

通过设置站点地图( sitemap ),可以让搜索引擎获取你的页面信息,这样可以增加别人搜索到你的几率,具体配置参考官网步骤
官网说明

Next 主题常用配置

调整页面显示宽度

针对 Next 中的主题方案PiscesGemini, 更改 Next 主题中的文件 themes/next/source/css/_variables/Pisces.styl [1]

Pisces.styl
$content-desktop-large        = 90em;
$content-desktop-largest = 90%;

启用 gitalk 评论系统

具体配置 参考文章

修改默认图标

修改菜单图标

修改默认的菜单图标为以下图标

Next 使用的图标来自 Font Awesome

Font Awesome 是一套绝佳的图标字体库和CSS框架。 [3]

Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。

在主题配置文件 _config.next.yml 中,菜单配置由三部分构成: 菜单的显示名称: 菜单的访问链接 || 菜单使用的图标

menu:
home: / || fa fa-earth-americas
categories: /categories/ || fa fa-folder-tree
tags: /tags/ || fa fa-tornado
archives: /archives/ || fa fa-rectangle-list

要修改菜单的图标,可以在 Font Awesome 官网搜索到对应的图标,修改主题配置文件中的图标名称为如上所示。

fa : 使用此种图标,菜单的显示名称 和图标中间会包含空格,如 fa fa-folder-tree

fa-solid : 使用此种图标,菜单的显示名称 和图标中间不包含空格,如 fa-solid fa-folder-tree

有些图标直接使用时,如 fa-brands fa-docker Docker 图标,菜单的显示名称会和图标紧贴在一起,中间无空格,可以再添加 fa 样式,使菜单名称和图标之间有空格,比如 fa fa-brands fa-docker

脚注