Hexo + Next 踩坑配置记录

一番配置后深感付出与时间不成正比，缺乏css知识的情况下更是如此。再者选择Next的主题就是为了精简，故待后续有时间了再做配置更新。

以下代码块若未曾指定文件，默认命令行操作

博客操作

增加新标签页

• 新增加的界面位于博客主目录下的 source 中

hexo new page tags
hexo new page categories

创建文章

hexo new "文章"

此时创建的文章开头默认是没有categories的，设置成默认，打开blog/scaffolds/post.md

blog/scaffolds/post.md

---
title: {{ title }}
date: {{ date }}
tags:
categories:
---

启动本地服务器

hexo s

此时修改本地文章内容可以直接刷新界面看到更改 一天后才发现 :)

配置

• Next官方中文文档配置部分有些不适合更新的版本
• 中文的 language 设置应当为 zh-CN 而非 zh-Hans
• 网上大部分配置提到的路径为：
  • 博客配置文件blog/_config.yml
  • 主题配置文件blog/themes/next/_config.yml
• 现可统一配置在blog/source/_data/next.yml中，没有该目录则新建
  将需要改变的地方copy至next.yml即可

博客配置

设置404界面

hexo new page 404

自定义blog/source/404/index.md即可

更改代码块颜色

在blog/themes/next/source/css/_variables/base.styl进行修改

设置命令行快捷键以同步仓库

• 因为没什么时间再去看别人博客学习更方便的同步方法，先挖个坑下半年再说
  Mac系统open -a xcode ~/.zshrc，会vim用vim
  将以下内容添加至zsh配置文件，bash一样，alias后是别名的设置，按自己需求改个顺手的就行

~/.zshrc

alias bls="ls -h ~/Blog/source/_posts" # 查看 blog 已有文章
alias bv="vim ~/Blog/source/_posts" # 编辑文章
alias rab="ra ~/Blog/source/_posts" # 利用 ranger 查看文件并打开，需下载 ranger，并设置别名 ra
alias hn="
cd ~/Blog # 创建文章
hexo n "
alias hd=" # 同步仓库
cd ~/Blog
hexo clean
hexo g
hexo d
cd -
"
"

交换归档和首页的索引

blog/source/_data/next.yml

archive_dir: / # archives
index_generator:
  path: 'archives'

主题自带简单配置

头像设置

创建文件夹存放图片

pwd # 确认一下现在是否在博客目录
cd source
mkdir images

把图片放置在blog/source/images目录下

blog/source/_data/next.yml

url：/images/yourimage.jpg
rounded: true # 修改头像图片为圆形
# opacity # 控制头像透明度 0-1
rotated: false # 鼠标移至是否会旋转

打开代码块复制功能

blog/source/_data/next.yml

copy_button:
  enable: true

关闭右下角back to top功能

blog/source/_data/next.yml

back2top:
  enable: false

网站开始时间

blog/source/_data/next.yml

footer:
  since: 2021

修改文章底部tags标识#->图标

blog/source/_data/next.yml

tag_icon: true

增加字数统计 & 时长估计

npm install hexo-word-counter

blog/source/_data/next.yml

symbols_count_time:
  symbols: true
  time: true
  total_symbols: false
  total_time: false

增加相关文章功能

回到博客根目录

npm install hexo-related-popular-posts --save

next/_config.yml

related_posts:
  enable: true
  title: # 默认为相关文章

Tips: 该功能以tags为参考

关闭侧栏目录数字编号

blog/source/_data/next.yml

toc:
  number: false  # 关闭目录中的数字编号

icon 替换

去 Font Awesome 官网 找对应代码

关闭动态效果

blog/source/_data/next.yml

motion:
  enable:false

搭建参考

hexo的next主题个性化教程:打造炫酷网站
Next官方中文文档
next官方文档

Hexo-NexT 主题个性优化
Hexo 搭建个人博客系列：基础建站篇