很早以前发现 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
服务的根目录,这样就可以正常显示所有相关资源了。
至少目前为止我需要功能能满足了,其它就不管了,也算是一个意外的收获了。
附(
)
今天测试发现图片竟然不能显示了。发现原来启用 uglyurls = true
和不启用,文件的布局是不一样的。所以除了指定 -d
选项外,还需要配置 uglyurls=true