最近想搭建一套基于 Playwright 的自动化数据抓取工作流，从安装到验证踩了不少坑，也积累了一些实战经验。这篇文章记录完整的安装过程、常见问题以及实际测试结论，供后续查阅。

问题一

首先是在创建第一条中文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/背景图/文章目录索引

创建好了博客之后，就要开始写文章了，这里记录一下如何在hexo上创建一篇文章。

首先前提是已经创建了一个博客，以及了解了需要在博客关联的本地仓库的文件夹里调用GIT BASH HERE来创建文章。有关于如何创建博客，可以参考知乎上的这篇文章：从零开始搭建个人博客（超详细）。

创建文章

在本地仓库的文件夹里调用GIT BASH HERE，输入如下命令：

1

hexo new "你的文章名"

调用GIT BASH HERE的方法如下图所示：

在Git Bash里输入命令后，会在本地仓库的文件夹里生成一个markdown文件，会在source/_posts文件夹里生成一个markdown文件，如下图所示：

编辑这个markdown文件，就可以开始写文章了。