Hexo 自定义图片大小

图片可以说是博客中必备的元素了,先来看看怎么在 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 是为了让图片居中。

然后,刷新看效果即可。