Display pictures correctly in Typora and Hugo
Contents
背景
Typora 可以便捷地将文件保存在本地,但是如果不合理配置,无法适应静态网页生成器(如:Hugo)的静态文件存储方式。所以需要通过 Typora 强大的配置方式解决这个问题。
目标
将文件存放在项目目录中的 static/images
目录下,同时保证能在 Typora 和 Hugo 生成的网站中可见。
配置 Typora
Typora 有两个选项需要配置:
- 图片读取的根路径。通过指定这个参数,可以使图片文件以绝对路径的方式在 Markdown 文件中显示,从而适配生成网站中图片的 URL。
- 图片的自动存放路径。
指定图片根路径
依次点击Format
->Image
-> Use Image Root Path
,选择 hugo项目的static
目录作为根路径。
设置图片自动存放路径
在设置(File
->Preferences
)中选择 Image 栏,将
static/images` 的绝对路径设置为图片插入地址。
也可以通过语法加入图片子目录,更好地管理图片。
经过如上配置,截图便可通过 command+v 自动保存在 static/images
目录中。
Hugo 默认读取的路径为 static
,符合要求。此时拉起站点,就可以正常显示图片了!