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 中的主题方案Pisces或Gemini, 更改 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

脚注