hexo升级和插入图片

插入图片失败

参考https://blog.csdn.net/u010996565/article/details/89196612 等文章的方法。

1
npm install hexo-asset-image --save

然后在文本中插入

1
2
<img src="/images/图片名"  width="50" height="50">
![](image图片名)

均无法正确显示图片。
hexo sever启动的终端可以看到如下提示

1
update link as:-->/.com//xxxx.png

打开图片的地址也是/.com//xxxx.png。
搜索到如下的网页介绍了类似的问题。
https://blog.csdn.net/xjm850552586/article/details/84101345
但是其提供的方案也无法生效。
考虑到安装 hexo-asset-image时曾经提到需要hexo4.0以上版本,而当前hexo版本是3.9,所以考虑先行升级版本

升级hexo

参考如下链接
https://www.dazhuanlan.com/2020/01/29/5e3165c116e0f/?__cf_chl_jschl_tk__=e7caf23cde91dcc1f9fc6e1006b88d0bf63de758-1584498843-0-AQ7fucDfahofVnETCllMEC0jJ8Wrecp_5-NxLutNm_NE07_6SkOP9aYE2mlgJv6oQ9Z78RVSuvf1uZBXN-AwXQ898WXTdcE5uf90w-_XCgWONaii4YIUO62_6vLfMSqvz4miZBzOpMYwmaop6pjkWnQWyhJIsJ-LkHyQXZPBRAteDLBEWZ1-gkaq3aXBT4DZl6-I2wJ_R1WFiBqHDlBlrr2treoeNxPspJpjB0L5Qzd1-8JtGPUprKEBt2KCKCjAXtWL9NZ6TJb93L6wrwpWsJdY45QkNxfwTYq6NPOPd4H3suwbWr1P_FY2lWzbk7NfwQ
使用如下步骤,将hexo升级到了4.2.0
1 清除node的cache

1
npm cache clean -f

2 安装node版本管理工具 n

1
npm install -g n

3 安装最新稳定版本的node

1
n stable

// 安装最新版本使用 n latest
// 安装指定版本的使用 n {version},例如 n 11.2.0
// 删除指定版本的node使用 n rm {version},例如 n rm 11.2.0
4 更新npm版本

1
npm install npm@latest -g

5 进入blog目录,然后执行

1
npm outdated

6 根据第5步输出,手工记录各个组件的最新版本号,然后逐一在package.json配置文件中修改版本号到最新版本。

7 更新模块

1
npm install --save

8 确认升级结果

1
hexo -v

升级后的问题解决

升级后图片仍然无法正常显示。
异常现象变为,路径正常时,网页上就直接显示路径文本,而不是显示图片。
而使用部分博客提到的语法,则生成的网页中直接就是空白(查看html文件,整段内容直接被忽略了)。

1
{% asset_img slug [title] %}

考虑到部分博客提到hexo4.0把很多插件并入了核心代码,担心插件中有冲突,于是使用下面的命令卸载掉第三方插件。

1
2
npm remove hexo-asset-link --save
npm remove hexo-asset-image --save

然后再在文件中使用markdown的语法,就能正确显示图片了。
并且主页中的图片也能正常显示,应该是hexo4.0把image link并入核心代码后做了改进(pacakge.json中显示多了一个hexo-image-link组件),解决了markdown语法的问题。

1
![Alt Text](图片文件 "Title Text")