Hexo版本升级和Next主题升级之坑

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：

缘起

差不多用了一年hexo的3.2.0版本，next主题版本也用的5.0的，本来用的好好的，但是最近访问其他人的博客，发现访问速度比我的提升了不止一点点，遂决定折腾一番。

过程

Hexo版本升级

Hexo版本升级可以通过npm实现，相关命令如下：
先全局升级hexo-cli：-g表示全局升级。hexo本身是一个静态博客生成工具，具备编译Markdown、拼接主题模板、生成 HTML、上传 Git 等基本功能。hexo-cli能够将这些功能封装为命令，提供给用户通过hexo server / hexo deploy等命令调用的模块。CLI = Command Line Interface命令行界面。

1
npm i hexo-cli -g

然后直接输入：(其实这个命令应该不正确)，输入之后发现出现了一系列的warn。

1
npm update

再输入hexo vesion查看当前版本，发现版本已经更新成功了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
hexo: 3.7.1    # 之前为3.2.0
hexo-cli: 1.1.0
os: Windows_NT 10.0.16299 win32 x64
http_parser: 2.8.0
node: 8.11.3
v8: 6.2.414.54
uv: 1.19.1
zlib: 1.2.11
ares: 1.10.1-DEV
modules: 57
nghttp2: 1.32.0
napi: 3
openssl: 1.0.2o
icu: 60.1
unicode: 10.0
cldr: 32.0
tz: 2017c

但是其实上面的更新命令并不是很准确。
　　1. npm-check检查更新

1
2
npm install -g npm-check
npm-check

　　2. npm-upgrade更新

1
2
npm install -g npm-upgrade
npm-upgrade

　　3. 更新全局包：

1
npm update <name> -g

　　4. 更新生产环境依赖包：

1
npm update <name> --save

save参数：npm install X –save:

  • 会把X包安装到node_modules目录中
  • 会在package.json的dependencies属性下添加X
  • 之后运行npm install命令时，会自动安装X到node_modules目录中

如果不加save参数的话，之后把X包安装到node_modules目录中，不会添加到dependencies文件中。再查看hexo文件夹下面的dependencies文件,可以看到hexo的版本已经更新了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": "3.7.1"
  },
  "dependencies": {
    "hexo": "^3.7.1",
    "hexo-deployer-git": "^0.3.1",
    "hexo-fs": "^0.2.3",
    "hexo-generator-archive": "^0.1.5",
    "hexo-generator-category": "^0.1.3",
    "hexo-generator-index": "^0.2.1",
    "hexo-generator-tag": "^0.2.0",
    "hexo-renderer-ejs": "^0.3.1",
    "hexo-renderer-marked": "^0.3.2",
    "hexo-renderer-stylus": "^0.3.3",
    "hexo-server": "^0.3.2"
  }
}

Next主题升级

因为5.0版本和6.0版本差别还是比较大，直接按照官网给的方法更新。参考官方文档。之前的5.0版本仍然可以用，相当于重新克隆了一个新的6.0版本。

  • 克隆新的 v6.x 仓库到任一异于 next 的目录（如 next-reloaded名称可以自定义）：

    1
    $ git clone https://github.com/theme-next/hexo-theme-next themes/next-reloaded

  • 然后在 Hexo 的主配置文件中设置主题：

    1
    theme: next-reloaded

然后进入配置文件_config.yml,配置相关设置。

问题

就在将主题配置好之后，输入命令：

1
2
hexo g
hexo s

在本地服务器上测试运行，这时发现页面内容没有显示，侧边栏内容可以完整显示，文章位置的内容还在只是没有显示。
显示问题
第一反应是hexo和Next版本的问题，在网上也看很多由于版本引起的问题，可能是版本太高和之前的模块不兼容造成的，有部分页面没有渲染。然后就寻找版本回退的方法，将hexo版本退回到3.2.0,使用命令：

1
npm install -g hexo@版本号

回退之后，在3.2.0版本下重新运行，发现这个问题还是存在。想到可能是Node.js版本的问题，node版本也很久没有更新了，都处理8.0的稳定版，我用的还是6.0版本。试着用命令更新：

1
2
3
npm cache clean -f  # 清除node.js的cache
npm install-g n
n stable

一顿更新之后，发现问题还是存在，之前能用的版本现在也不能用了，有点重新安装配置的冲动了。

解决

也就是突然的灵光一闪，既然是显示的问题，为什么不能打开浏览器看看源码到底是怎么样的呢？按下F12查看网页源码，发现果然出现了很多错误。第一个错误就是什么fancybox，大概是什么lib文件没有找到，让我想起来_config.yml有一个fancybox配置选项。
问题详情
打开配置文件查看：我在这里给它设置为了true,然后查找错误的那个路径。

1
2
3
4
5
# Fancybox. There is support for old version 2 and new version 3.
# Please, choose only any one variant, do not need to install both.
# For install 2.x: https://github.com/theme-next/theme-next-fancybox
# For install 3.x: https://github.com/theme-next/theme-next-fancybox3
fancybox: true

发现果然没有找到fancybox的相关内容,打开官网文档中的链接看看有没有什么信息。

文件路径

官方文档中详细给出了fancybox的安装步骤，安装这个步骤进行安装。

安装步骤

再打开之前那个路径：发现已经多了fancybox文件夹。

lib文件

然后再重新生成页面，在本地服务器运行，发现问题已经解决了，访问速度确实也得到了提升。以后遇到这种问题要多查官方文档，很多东西在文档中写了很清楚的，只是当时没有注意到，还就是要注意解决问题的思考维度，不要把思维固化。