在静态博客中,使用jsDelivr CDN加速网站图片访问速度。
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,它才会执行。