Hexo 中扩展 Markdown 语法设置图片的大小和懒加载
1. 图片自定义尺寸, 可指定宽度和高度的像素值
方法是在 URL 后面添加 ?
1 |  |
这将图片的宽度设置为 500px,高度设置为 500px。显示效果如下:
也可以只指定一个参数,图片会等比例缩放
1 |  |
2. 可指定缩放比例
方法是在 URL 后面添加 ?
1 |  |
这将图片的宽度和高度都设置为原始大小的 20%。显示效果如下:
3. 实现懒加载
在项目根目录下_config.yml文件中添加如下配置:
1 | lazyload: |
onlypost
If true, only the images from post or page will support lazy-load.
If false, the whole images of your site will use lazy-load, including the images dist from your theme, but not including the background images from CSS style.
仅当为 true 时,来自帖子或页面的图像才支持懒加载。
如果为 false,则您网站上的所有图像都将使用懒加载,包括从您的主题分发出来的图像,但不包括 CSS 样式中的背景图像。
loadingImg
If you keep the value nothing (by default), then it will use the default loading image.
If you want to customize the image, then you need to copy your loading image to your current theme image folder and then change this path to find it.
如果你保持这个值为空(默认),那么它将使用默认的加载图像。
如果你想要自定义图像,那么你需要将你的加载图像复制到当前主题的图像文件夹中,然后将此路径更改为找到它。
isSPA For performance considering, isSPA is added. If your theme is a SPA page, please set it as true to make the lazy loading works,
为了性能考虑,添加了 isSPA。如果你的主题是 SPA 页面,请将其设置为 true 以使懒加载工作,
If true, searching for each image during scrolling to support SPA page,
If false (default value), the performance would be the best.
如果为 true,则在滚动时搜索每个图像以支持 SPA 页面,
如果为 false(默认值),性能将是最佳的。
preloadRatio This option is for a better experience and default value is 1. This ratio means to pre-load the images where is within how many ratios than current screen size, even these images are not in current view point.
这个选项是为了更好的体验,默认值是 1。此比率意味着预加载的图像在当前屏幕尺寸内有多少比例,即使这些图像不在当前视点中。

