Hexo+Typora写文章时图片显示问题

爪哇程序人生
2,748 阅读4分钟

这是我参与8月更文挑战的第18天，活动详情查看：8月更文挑战

之前我们学习了如何使用Hexo+GitHub Pages搭建自己的静态博客，而在博客中写文章是要先在本地编辑完成后发布到远程仓库。Typora是一款支持实时预览的本地MarkDown文本编辑器，兼容windows、Linux和Mac，且完全免费的，因此作为自己本地的记录工具是非常方便的。

1. Typora+Hexo

实际使用过程中，使用Hexo+GitHub Pages实现远程静态博客功能，本地使用Typora进行编辑记录，完成后发布到GitHub。

但是，如果本地使用了图片等资源，而Typora中图片的引用路径和远程仓库中图片路径是不一致的，因此往往会出现在本地正常显示的图片上传至远程后出现图片无效的问题。

为了保证远程博客文章中图片的正常显示，我们需要对Typora进行一定处理。

2. Typora中图片路径

Typora中的图片路径可以进行自定义设置，打开 文件 -> 偏好设置，选择图像，可以在右侧看到设置内容。

本地使用Typora编辑内容时，可以设置插入图片时是否复制图片

  • 如果不复制图片，则路径为复制图片的源路径（Typora缓存路径） 不复制图片
  • 如果设置复制图片，则会根据设置的路径将图片复制进去，并进行引用（默认为当前文章所在位置的相对路径）
    • 如果要使用绝对路径，则会使用计算机本地的绝对路径

3. 设置文章根目录

Typora中可以针对文章设置根目录，设置后当前文章会以根目录为准，所有资源的绝对路径可使用根目录的相对路径来表示

  1. 工具栏设置文章根目录
  2. 使用表头格式内容进行设置（最终都是使用该方式实现的）

4. Hexo框架中图片引用路径

使用Hexo博客框架时，文章中的图片路径有两种情况

  1. Hexo中新增文章存放路径均是在hexoBlog/source/_post 文件夹下
  2. 默认配置： Hexo默认情况下，使用的图片路径为 hexoBlog/sopurce/imgs ，放在imgs文件夹下的图片都可以使用 /imgs/.../photo.png 来进行引用

5. 更改默认配置

Hexo的图片位置可以在全局配置文件 _config.yml 中进行修改

#默认是false，
#修改为true代表每次创建文件会同时在相同位置创建一个同名文件夹
#同名文件夹中资源可以直接使用路径进行访问，如： photo.png
post_asset_floder: true

6. Typora和Hexo一致性处理

为了让文章中的图片在本地编辑时可用，发布到远程依然可用，我们可以进行一致性设置。 首先们在Typora中设置复制图片时保存的路径，为了便于管理图片，我们使用了在 HexoBlog/source/imgs 下的同名文件夹来保存当前文章对应的图片信息。

  1. 设置图片复制路径为img文件夹下文章同名文件夹中

    • 这是一个绝对路径，表示本地Hexo的项目Blog项目中的source文件夹下面找到文章的同名文件夹（${filename}），所有图片放入同名文件夹中，然后在Typora中进行资源的引用。

  2. 为了引用时与Hexo引用一致，我们设置当前文章的根目录为source文件夹 image.png

    • 设置后文章表头会出现如下信息：此处是使用的相对路径进行的设置

  3. 设置完成之后，我们在本地文章中复制插入图片时，图片的引用路径会变成如下

    • 这个路径正是Hexo框架的默认图片引用路径，在上传至远程仓库时会正确匹配到图片进行显示。

7. 最后

这样我们就完成了一致处理，可以在本地编辑文章、添加图片，在将博客发布到远程时会将我们本地的图片资源进行同步，我们在远程网络访问时也可以正确显示图片信息。

avatar
文章
阅读
粉丝