Contents

Display pictures correctly in Typora and Hugo

背景

Typora 可以便捷地将文件保存在本地,但是如果不合理配置,无法适应静态网页生成器(如:Hugo)的静态文件存储方式。所以需要通过 Typora 强大的配置方式解决这个问题。

目标

将文件存放在项目目录中的 static/images 目录下,同时保证能在 Typora 和 Hugo 生成的网站中可见。

配置 Typora

Typora 有两个选项需要配置:

  1. 图片读取的根路径。通过指定这个参数,可以使图片文件以绝对路径的方式在 Markdown 文件中显示,从而适配生成网站中图片的 URL。
  2. 图片的自动存放路径。

指定图片根路径

依次点击Format->Image-> Use Image Root Path,选择 hugo项目的static 目录作为根路径。

/images/2021-09-23-在Typora和Hugo中正确显示图片/image-20210923221325847.png

设置图片自动存放路径

在设置(File->Preferences)中选择 Image 栏,将 static/images` 的绝对路径设置为图片插入地址。

/images/2021-09-23-在Typora和Hugo中正确显示图片/image-20210923221749069.png

也可以通过语法加入图片子目录,更好地管理图片。

/images/2021-09-23-在Typora和Hugo中正确显示图片/image-20210923222112469.png

经过如上配置,截图便可通过 command+v 自动保存在 static/images 目录中。

Hugo 默认读取的路径为 static,符合要求。此时拉起站点,就可以正常显示图片了!

参考