Hugo添加使用图片资源
Hugo搭建好博客之后,markdown里怎么把图片资源添加到hugo中?
使用网络资源
如果是用网络上的图片,只要添加网络上的图片链接地址就可以了。
markdown的写法:
![unsplash上的一张图](https://images.unsplash.com/photo-1524397057410-1e775ed476f3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80)
显示如下:
当然,你可以搭建自己的图床,有图片的网络链接就可以。
使用本地图片资源
当然你也可以直接用自己电脑上的图片。
先把你需要用的图片放到Hugo生成目录下的static
然后markdown的写法,是以static为根目录:
![放置图片的位置](/markdown的图片/图片.PNG)
原理
原理这篇博客有介绍:Hugo中添加并使用图片资源
Hugo生成页面的时候,会做以下事情:
- 获取主题资源,复制theme/static/* 到 public/
- 获取你自己添加的资源,复制static/* 到 public/
- 遍历content下文件,获取文件头信息,把markdown转换成html
- 渲染,包括正文页面,列表页面,分类页面,主页等等。