mip-img 处理

[xuexb]

由于 MIP 规范要求, 不能使用 <img> 标签, 必须使用 <mip-img> 标签: 文档 , 并且需要设置宽高信息.

考虑如何在 Hexo 编译时获取图片宽高, 本地图片还好, 远程的如何破?

[yugasun]

@xuexb 还是别编译动态获取了，直接要求用户在使用此模板是，如果需要使用img标签，必须定义宽高属性就行，hexojs 编译时只需读取 <img> 宽高属性值。

[xuexb]

思路是在页面渲染后 after_render:html ，使用勾子把内容里的 <img> 替换为 <mip-img> ，代码是：

hexo.extend.filter.register('after_render:html'，function (html) {
    return html.replace(/<img([\S\s]+?)\/?>/ig，function (match，tag) {
        return '<mip-img ${tag}></mip-img>'.replace('${tag}'，tag.trim());
    });
});

这里只是"暴力"的替换了，并没有处理规范里的宽高，所以在主题里使用图片时，还是需要明确的定义图片的宽高。

当然也可以做成自动抓取

1. 如果是本地 - 直接获取图片信息，并设置宽高
2. 如果是远程 - 根据链接生成 md5 小缀缀，远程下载图片到本地，获取宽高后使用小缀缀设置缓存，最后设置图片宽高