图片可以说是博客中必备的元素了,先来看看怎么在 Hexo 中使用 Markdown 添加图片。
修改 _config.yml
配置文件,将 post_asset_folder
项设置为 true
,然后使用命令创建一篇文章:
1 | hexo new demo |
接着切换到 blog_dir/source/_posts
目录,在这里可以看到有一个 demo.md
文件和 demo
目录生成了,其中 demo 目录就是存放图片文件的位置。这样为每篇文章建立一个目录来存资源文件,可以理解为生成了一个命名空间,重名文件只要放在不同的命名空间里就好了。
复制一张图片到 demo 目录,如 abc.png
,然后在文章中引用:
1 | {% asset_img abc.png 图片信息描述 %} |
上面这种写法需要 Hexo 3以上才能支持。
插入图片后,可以来看一下效果。此时我们会发现,图片默认会占满父容器的宽度,这造成了图片可能被放得过大,看起来不太舒服。我们可以通过下面的方式来解决:
1 | <div style="width:70%;margin:auto">{% asset_img abc.png 图片信息描述 %}</div> |
自定义一个父容器,然后指定宽度,margin:auto
是为了让图片居中。
然后,刷新看效果即可。