hexo-lazysizes

Integrates the awesome lazysizes.js with hexo

Usage no npm install needed!

<script type="module">
  import hexoLazysizes from 'https://cdn.skypack.dev/hexo-lazysizes';
</script>

README

hexo-lazysizes

High performance and SEO friendly lazy loader using lazysizes for Hexo.

Installation

$ npm i hexo-lazysizes --save

Usage

In your hexo _config.yml file.

lazysizes:
  enable: true

The plugin has several options.

Options

lazysizes:
  enable: true
  loadingImage: /images/lazyloader.svg
  include_hostnames: ['buzzcat.com']
  exclude_images: ['logo.png']
  styleHelper: true
  respimg: true
  rias: true
  rias_provider: 'https://res.cloudinary.com/jettags/image/fetch/w_{width},f_auto,q_auto/'
  rias_base: 'https://buzzcat.com'
  • enable - Enable hexo-lazysizes. Defaults to false.
  • loadingImage - Add your own loading image.
  • include_hostnames - Only images with these hostnames will be lazy loaded. (by default we will include all img src that begin with /).
  • exclude_images - Some images dont play nice with lazy loading.
  • styleHelper - Adds the simple css rule img[data-sizes="auto"] { display: block; width: 100%; }.
  • respimg - Adds the respimg plugin.
  • rias - Adds the rias plugin.
  • rias_provider - Your remote image provider url (must include the {width} variable for auto sizes).
  • rias_base - The base domain against which your rias provider will pull images.

The src will be generated from the rias_provider + rias_base + original img src. For example, using the above rias settings would create the following img src for /assets/img/exampleimage.png:

https://res.cloudinary.com/jettags/image/fetch/w_{width},f_auto,q_auto/https://buzzcat.com/assets/img/exampleimage.png

The work is done during hexo generate so don't forget:

hexo generate

TODO: iframe support, gallery support