批量替换图片链接为jsDelivr CDN链接

在静态博客中，使用jsDelivr CDN加速网站图片访问速度。

旧博客：https://oldblog.maplesugar.top

1. jsDelivr CDN的简单使用

新建一个GitHub仓库，提交图片文件到仓库。然后使用下面的链接就能访问了：

https://cdn.jsdelivr.net/gh/username/[email protected]/imgs/test.png

国内也能用。

jsDelivr works perfectly inside China!

2. 本站的图片和链接配置

本站一直使用文章资源文件夹来保存图片，具体就是设置站点配置文件_config.yml

post_asset_folder: true

当资源文件管理功能打开后，Hexo将会在你每一次通过 hexo new [layout] <title> 命令创建新文章时自动创建一个文件夹。这个资源文件夹将会有与这个文章文件一样的名字。将所有与你的文章有关的资源放在这个关联文件夹中之后，你可以通过相对路径来引用它们，这样你就得到了一个更简单而且方便得多的工作流。

文章中引用图片

{% asset_img bg-1.png  %}

另外，本站的永久链接配置是：

permalink: :category/:urlname/

其中urlname是写在Front-matter中的，比如这篇文章的Front-matter：

title: 批量替换图片链接为jsDelivr CDN链接
urlname: jsdelivrcdn-for-post-img

这篇文章的链接就是 hexo/jsdelivrcdn-for-post-img 。

3. 批量替换图片链接为jsDelivr CDN链接

观察hexo generate生成文章的图片链接：

<!-- 这种 {% asset_img bg-1.png  %} 引用方式生成的图片链接 -->
<img data-src="/hexo/next-theme-custom-background-img-using-unsplash/bg-1.png">

所以把图片的data-src属性上加上jsDelivr CDN链接就可以了。当然需要把图片上传到GitHub仓库的相应目录，我是把hexo generate生成的文件夹直接复制到GitHub仓库中，这样就不用新建/category/urlname这样的文件夹了。

'use strict';
var cheerio = require('cheerio');

//data https://hexo.io/zh-cn/docs/variables
hexo.extend.filter.register('after_post_render', function(data){
  var config = hexo.config;
  if(config.post_asset_folder){
    var link = data.permalink;//页面的完整网址
	console.log("页面的完整网址 "+link);//https://blog.maplesugar.top/hexo/next-theme-custom-background-img-using-unsplash/
	
	//link= "https://blog.maplesugar.top/hexo/next-theme-custom-background-img-using-unsplash/";
	if(link.lastIndexOf('/') != (link.length-1)) {
		console.log("不是文章链接，跳过");
		return;
	}

	//page.content	页面的完整内容	string
	//page.excerpt	页面摘要	string
	//page.more	除了页面摘要的其余内容
    var toprocess = ['excerpt', 'more', 'content'];
    for(var i = 0; i < toprocess.length; i++){
      var key = toprocess[i];

	  console.log("处理页面的 " + key + "部分");
	  
      var $ = cheerio.load(data[key], {
        ignoreWhitespace: false,
        xmlMode: false,
        lowerCaseTags: false,
        decodeEntities: false
      });
	  //替换img内的标签
	  //观察生成的post.content中img，在post中写的{% asset_img bg-1.png %}标签。<img data-src="/hexo/next-theme-custom-background-img-using-unsplash/bg-1.png">
      $('img').each(function(){
        if($(this).attr('data-src')||$(this).attr('src')){
          //注意文章内容包含`var toprocess = ['excerpt', 'more', 'content']`，
          //不同内容里面的图片链接并不是一样的，有的是src，有的是data-src。
          // For windows style path, we replace '\' to '/'.
          var src = ($(this).attr('data-src')||$(this).attr('src')).replace('\\', '/');
		  console.log("找到的img链接 "+src);
	
		  //src去除前后空格
		  src = src.replace(/(^\s*)|(\s*$)/g, "");
		  
		  //开始是/，以gif/png等结尾
          if(/^\/.*\.(gif|png|jpg|bmp|jpeg)$/i.test(src)) {
			console.log("测试img链接通过 "+src);

            $(this).attr('data-src', "https://cdn.jsdelivr.net/gh/maplesugarr/[email protected]/posts" + src);
            console.log("替换img链接为 " + "https://cdn.jsdelivr.net/gh/maplesugarr/[email protected]/posts" + src);
          }else{
			console.info&&console.info("注意，这个img标签，data-src没有通过测试");  
		  }
        }else{
            console.info&&console.info("注意，这个img标签，没有data-src属性，或者src属性");
            console.info&&console.info($(this));
        }
      });
      data[key] = $.html();
    }
  }
});

上面的脚本放到/scripts文件夹下面就会运行，注意上面的代码是注册到hexo的生命周期”after_post_render”上的，所以一定要先执行hexo clean来清除缓存，然后执行hexo generate或hexo server触发post render，它才会执行。

静态博客