Hexo 博客管理图片

Posted on Edited on

整理 Hexo 展示图片的各种方式，以及从长期维护，方便易用的角度介绍一下我个人总结的最佳实践。

关键知识

post_asset_folder

通过 文档 查看 post_asset_folder 的详细介绍。

简单总结：

post_asset_folder = false

![](/images/image.jpg) 这种方式引用图片都可以正常 work，

post_asset_folder = true

![](/images/image.jpg) 这种方式引用图片，仅在文章中显示，首页/归档页将不再会显示图片，需要使用 标签插件 引用图片，才能正常显示。

引用图片的方式

  1. 在文章中插入指定大小的图片。
    {% img [class names] /path/to/image [width] [height] '"title text" "alt text"' %}
    例如: {% img https://img.ifnnn.cn/b65dc1f4245a9a1230e78bac21f5ee6f.png?imageView2/2/w/640 500 400 %}

  2. 引用文章的资源

    {% asset_path filename %}
{% asset_img [class names] slug [width] [height] [title text [alt text]] %}
{% asset_link filename [title] [escape] %}

  3. 关于 asset_img 的详细介绍

fancybox (点击查看大图)

https://github.com/theme-next/theme-next-fancybox3

图片压缩

最佳实践

  • 博客的源代码托管在 github，原则上不应该将大量的图片上传至 git 仓库，所以推荐采用 cdn 外链的方式插入图片。

  • 虽然目前的图片cdn 都有魔法参数支持压缩、裁剪，但是原图尽量还是在不失真的前提下，压缩一下，节省体积。具体压缩方法可自由选择。

  • 每个文件都有一个 md5 值，就将所有文章中使用的图片全部放在一个文件夹中，然后将文件名改为其 md5 值，保留原始后缀，然后将文件夹中的图片和 cdn 的某个目录保持同步。这样做的好处。

    • 这样管理很简单、不容易忘，这个文件夹也可以同步到百度云或者其他网盘中，方便备份。
    • 方便换 cdn 服务商。如果更换 cdn 厂商，只需同步下这个文件夹，全局替换下图片 host + prefix 即可。
    • 可以随时检查文件名和 md5 值是否一致，以确定是否是原图。