0%

在创建第一条post时遇到的问题

问题一

首先是在创建第一条中文post时,出现了上传到网页后,post内容出现了乱码的情况。

原因

这个问题出现的原因是由于创建的markdown文件的编码格式不是utf-8,而是ANSI。

解决方法

这个问题的解决方法是在创建markdown文件时,选择utf-8编码格式。如果已经创建了markdown文件,可以在vscode中,选择文件-首选项-设置,然后在搜索框中输入“files.encoding”,然后选择“utf-8”。或者使用记事本打开markdown文件,然后另存为,选择utf-8编码格式。

这一问题参考了:

Hexo解决中文乱码问题


问题二

发布的博客中的图片无法显示。显示出一个裂开的符号。

原因

创建markdown文件是,插入图片的语法是![图片名称](图片路径/图片名称.jpg),而图片路径是相对于markdown文件的路径,而不是相对于网页的路径。网页中是无法链接到电脑中的图片的。

解决方法

在这里可以使用hexo的插件hexo-renderer-marked,这个插件可以将markdown文件中的图片路径转换为网页中的图片路径。有一些解决方案使用使用的是插件hexo-assets-image,但是我在调试过程中安装又卸载了这个插件后,再次安装hexo-renderer-marked插件时,出现了错误,所以我选择了hexo-renderer-marked插件。

安装之后,需要在hexo的配置文件_config.yml中修改一些配置,具体如下:

1
2
3
4
post_asset_folder: true
marked:
prependRoot: true
postAsset: true

其中,post_asset_folder: true表示开启文章资源文件夹,marked表示使用marked插件,prependRoot表示在图片路径前面加上根路径,postAsset表示在图片路径前面加上文章资源文件夹路径。第二到第四行的配置是在hexo的配置文件_config.yml中自行添加的。

还要注意的是,使用这个插件后,markdown文件中插入图片的语法是![图片名称](图片名称.jpg),而不是![图片名称](图片路径/图片名称.jpg)。这个很重要,不然会出现图片无法显示的情况。使用这个语法后,编写markdown时图片是无法显示的,但是发布到网页后,图片就可以显示了。以及本地图片资源需要放在source文件夹下的post文件夹中的markdown文件同名文件夹中,而不是放在source文件夹下的images文件夹中。

如果觉得在编辑markdown文件时,图片无法显示很难受,可以考虑使用typora这个编辑器,这个编辑器可以在编辑markdown文件时,将图片显示出来。具体的设置可以参考hexo博客如何插入图片这一文章。

这一问题的解决方法还参考了一下方法:

[Hexo博客搭建]第4章 Hexo图片显示问题

Hexo博客样式问题填坑向第1弹(本地图片无法显示/Cannot GET xxx/背景图/文章目录索引