hexo-lazyload | english doc
hexo-lazyload 是一个 hexo 插件,使用 IntersectionObserver API, 并附加了 polyfill, 在现代浏览器的环境下,要比传统 lazyload 写法具有更高性能。
特点:
- 自动生成缩略图(150x150)(包括远程图片和本地图片)
- 使用 IntersectionObserver API(自带polyfill)实现 lazyload
- medium effect
这个包依赖 gm
来生成缩略图,所以请先安装相关依赖 GraphicsMagick or ImageMagick。如果是 mac,可以使用以下命令:
brew install imagemagick
brew install graphicsmagick
然后,安装本 npm 包:
$ npm install hexo-lazyload --save
// or
$ yarn add hexo-lazyload
首先在你的 hexo 项目下的 _config.yml
添加配置
lazyload:
enable: true
# thumbPath: '/images/thumb'
# className: #可选 e.g. .J-lazyload-img
# loadingImg: #可选 eg. /images/loading.png
thumbPath
- 缩略图路径(绝对路径,根目录为
public/
)
loadingImg
- 默认路径: '/js/lazyload-plugin/loading.svg'
- 如果需要自定义,添填入 loading 图片地址,如果是本地图片,不要忘记把图片添加到你的主题目录下。
className
- 默认会延迟加载文章中的所有图片。
- 如果不为空,请填入 ID(带 # 号), 或 css 类名(带 . 号)【ps. hexo 和 markdown 语法支持 html 语法】
运行 hexo 命令
$ hexo clean && hexo g
- lazy-load
- medium effect
- generate thumbnail(local & remote)
- hash thumbnail name
- custom thumbnail path