很早以前发现 hugo server
命令在本地预览时不能显示相文章相对路径下的图片。但是普通web服务器是可以显示的一直都不知道是什么原因,之前也曾花费大量时间翻遍整个hugo论坛,也没有找到解决方案,因为我的 emacs
可以直接预览图片,发布后也能正常显示图片,后来也就不去管它了。但是今天非常偶然的发现原来 hugo server
也可能预览相对路径的下图片。
目前我的文章目录结构如下:
$ tree content/
content/
|-- about.org
`-- posts
`-- Tech
|-- checksum-offload.org
|-- cpu.org
|-- cpu.assets
| |-- core-threads-283x300.jpg
| |-- cores-hand.jpg
| |-- cpu-with-cores.png
| |-- logical-cpu.png
| |-- mainboard-notes.jpg
| |-- mainboard.jpg
| |-- quad-core-processor.jpg
| |-- quad_core_hyperthreading_cpu.png
| |-- single-core-ht.png
| `-- socket-cpu-cores.png
|-- debian.org
`-- x230i.org
如果文章有配图,那么图片资源就会存储到相应的资源目录中,比如文章名称是 cpu.org
,那么资源目录就是 cpu.assets
, 在文章中引用图片就可以用相对路径来实现如 ./cpu.assets/mainboard.jpg
。
网上好多都是先把图片上传到图床,然后获取图片的绝对链接再插入文章中。这种情况其实有一些弊端,比如不联网的情况下,就无法预览图片,如果图床挂了,想要迁移文章的图片那就非常困难。而原始文章用相对图片,发布时候可以根据需要采用本地图片,或者是动态替换成指定的图床链接。
大多数情况, 我都是通过命令 =hugo server= 来启动服务,然后通过打 http://localhost:1313
来预览内容,这种情况下却不能显示相对路径下的图片。
今天忽然想看看到底是什么原因导致 =hugo= 不能预览相对路径下的图片,简单看了下 hugo
的参数,发现有 --debug
选项,那么就试一下,看看浏览器请求不到图片的时候 hugo
是不是什么什么报错的日志吧,于是我就用命令 hugo server -debug
来启动 hugo
然后打开浏览器,这个时候,神奇的事情发生了,相对图片竟然显示出来了。而 hugo
程序,并没有任何特殊的输出,这个时候我把 hugo
停掉,又重新输入一遍,并且加上了 -v
参数 hugo server --debug -v
, 启动的过程中,明显多输出了一些信息,这个时候我再打开浏览器,刷新页面,突然发现加了 -v
参数后,图片竟然又不显示了。这是什么情况?然后我又把 =-v= 参数去掉,再次输入 hugo server --debug
这个时候,再刷新浏览器,发现图片依然不显示。这就奇怪了,怎么会有这样情况呢?
我翻了一下自己的命令记录,发现了一个问题,那就是我第一次输命令的时候, deubg
前面应该有两个减号 -
结果我输入成了一个,这就变成了 hugo server -debug
和 hugo server --debug
的区别。那么 -debug
和 --debug
有什么区别呢?
-d, --destination string filesystem path to write files to
--debug debug output
原来 -debug
的意思是 -d
选项后接 ebug
这个参数。指定了这个参数后, hugo server -debug
会有一个提示:
Serving pages from D:\Home\nBox\blog.leenzhu.com\ebug
一开始以这个先项有点类似于设定web服务的root目录,但是我本地不存在 =ebug= 这样的目录,我后来又试了在 =-d= 接其它的内容:
hugo server -de
hugo server -dx
hugo server -d.
hugo server -dpublic
发现无论指定什么字符串都没有任何影响,网页浏览正常,图片显示正常。后来打开目录才发现,原来 -d
的作用就是把网站临时发布到其指定的目录中,大概是不指定 -d
先项的情况下,页面的渲染都是在内存中的,所有内存中只有页面数据,不是会有页面同目录的资源数据,而指定渲染目录后, hugo
会把相关资源以及渲染结果都输出到指定目录中,然后以这个目录为 web
服务的根目录,这样就可以正常显示所有相关资源了。
至少目前为止我需要功能能满足了,其它就不管了,也算是一个意外的收获了。
- 附(<2022-11-16 Wed>)
今天测试发现图片竟然不能显示了。发现原来启用 uglyurls = true
和不启用,文件的布局是不一样的。所以除了指定 =-d= 选项外,还需要配置 uglyurls=true