joe 主题是很不错的主题,可是不支持 CDN 选项总感觉有点不完美。
于是捣鼓捣鼓,给小站加上 CDN 优化选项。 其他 typecho 博客也类似。
上代码
首先,因为是个可选项,所以先给 typecho
加上“选项”
在functions.php
对应位置(themeConfig里) 加上选项
/**
* 速度优化
*/
$JPic2cdn = new Typecho_Widget_Helper_Form_Element_Text(
'JPic2cdn',NULL,'','本地图片云存储(镜像)加速',
'通过各大服务商的镜像存储功能,将博客的本地图片(即在本服务器上的图片)自动替换为对应镜像空间的图片地址,而在第一次访问的时候,会自动将本地服务器图片上传到镜像空间(需要在服务商进行配置 加速域名)。<br>
而通常访问云服务器的速度要比本服务器速度要快(因为云服务器具有cdn特性)。<br>
填写内容格式为 自定义域名 || CDN 类型<br>
举例: https://assets.geekscholar.net | UPYUN 在服务商的镜像空间配置加速域名为 https://www.geekscholar.net<br>
支持以下服务商:<br>
七牛云「QINIU」<br>
又拍云「UPYUN」<br>
阿里云「ALIOSS」<br>
腾讯云「QCLOUD」<br>
tinypng「TINYPNG」<br>
'
);
$JPic2cdn->setAttribute('class', 'j-setting-content j-setting-speed');
$form->addInput($JPic2cdn);
$JLocalAssets2cdn = new Typecho_Widget_Helper_Form_Element_Text(
'JLocalAssets2cdn',NULL,'','将本地静态资源上传到你的cdn上',
'使用该项设置前,你必须有自己搭建的cdn服务器(不是指当前服务器)<br>
主题目录下的/assets/目录下有几个静态资源文件夹。<br>
你需要把asset目录上传到你的cdn服务器上,比如CDN服务器的 handsome目录里,地址即为 https://cdn.geekscholar.net/Typecho-Joe-Theme/assets/<br>
在当前框中就填入该地址,主题就会引用你搭建的cdn上面的资源,而不再引用当前服务器上的资源<br>
<strong>「本地图片云存储(镜像)加速」配置了,这个则不需要再配置了。如果上面的没配置,配置该选项也有一定的加速效果<strong><br>'
);
$JLocalAssets2cdn->setAttribute('class', 'j-setting-content j-setting-speed');
$form->addInput($JLocalAssets2cdn);
$JCloudOptions = new Typecho_Widget_Helper_Form_Element_Checkbox(
'JCloudOptions',
array(
0 => '为博客中的图片自动转换合适的大小和格式,并自动对图片进行无损压缩'
),NULL,'云存储选项',"<span style='color: red'>使用该项配置前,需要先配置 <code>本地图片云存储(镜像)加速</code> </span></br>*
我们使用的图片大小尺寸很多时候是大于所需要的尺寸(div的尺寸),造成图片加载缓慢,启动第一项配置会自动使用云存储服务商提供的图片处理对图片进行处理,以便加载更小的体积。");
$JCloudOptions->setAttribute('class', 'j-setting-content j-setting-speed');
$form->addInput($JCloudOptions);
//文章图片自定义大小
$JImagePostSuffix = new Typecho_Widget_Helper_Form_Element_Text("JImagePostSuffix",null,"","云存储文章图片处理后缀","<p style='color: red'>使用该项配置前,需要先配置 <code>本地图片云存储(镜像)加速</code> </p> <strong style='color: red'> 不明白该项是什么,请务必清空!!该项仅对文章中的图片生效</strong> <p>如果你的使用了镜像存储的话,一般服务商都支持对图片进行大小、质量的处理。比如又拍云对图片的宽度缩小的参数是 <code>/fw/width</code>,此时你在该设置框里面填写的就是 <code>/fw/300</code>,其中300是你希望的图片的宽度,支持多个参数组合,如 <code>/fw/300/fh/200</code></p>");
$JImagePostSuffix->setAttribute('class', 'j-setting-content j-setting-speed');
$form->addInput($JImagePostSuffix);
第二步:添加主要函数
通常主题可以加在functions.php
,Joe 主题加在 core.php
里
选项函数:
/**
* 云存储选项
* @param array $options 后台选项设置
* @param bool $isLocal 是否是本地服务器图片
* @param String $cdnType 云服务商类型
* @param int $width 目标图片的宽度
* @param int $height 目标图片的高度
* @param string $location 是文章的图片post还是别的,如首页头图index
* @return string
*/
function getImageAddOn($options,$isLocal = false,$cdnType = null, $width = 0, $height = 0,$location
= "index"){
$addOn = "";//图片后缀
if (!$isLocal){//不是本地服务器图片
return $addOn;
}
if ($options->JPic2cdn!=""){//开启了镜像存储的功能
if ($cdnType == null){//如果参数中没有cdnType,这里会进行获取cdn类型
$cdnArray = explode("||",$options->JPic2cdn);
$cdnType = trim($cdnArray[1]);
}
if (@in_array('0',$options->JCloudOptions)){//启用了图片处理
if ($cdnType == "ALIOSS" ){
$addOn .= "?";//分隔符
} else if($cdnType == "UPYUN"){//阿里云和又拍云
$addOn .= "!";//分隔符
}else if ($cdnType == "QINIU"){//七牛云
$addOn .= "?";//分隔符
}else if ($cdnType == "QCLOUD"){
$addOn .= "?imageMogr2";
}
if ($location == "post"){//为文章中的图片增加自定义后缀
$addOn .= trim($options->JImagePostSuffix);
}
if (!($width == 0 && $height == 0)){
if ($height == 0){//根据宽度尺寸进行缩放
if ($cdnType == "UPYUN"){
$addOn .= "/fw/$width";
}else if ($cdnType == "ALIOSS"){//阿里云
$addOn .= "x-oss-process=image/resize,w_$width";
}else if ($cdnType == "QINIU"){//七牛云
$addOn .= "/imageView2/2/w/$width?imageslim";
}else if ($cdnType == "QCLOUD"){//腾讯云
$addOn .= "/scrop/".$width."x";
}
}else if ($width === 0){//根据高度尺寸进行缩放
if ($cdnType == "UPYUN"){
$addOn .= "/fh/$height";
}else if ($cdnType == "ALIOSS"){
$addOn .= "x-oss-process=image/resize,h_$height";
}else if ($cdnType == "QINIU"){//七牛云
$addOn .= "/imageView2/2/h/$height";
}else if ($cdnType == "QCLOUD"){//腾讯云
$addOn .= "/scrop/x".$height;
}
}else{//按照固定的宽高进行缩放
if ($cdnType == "UPYUN"){
$addOn .= "/fwfh/".$width."x".$height;
}else if ($cdnType == "ALIOSS"){
$addOn .= "x-oss-process=image/resize,m_lfit,h_".$height.",w_".$width;
}else if ($cdnType == "QINIU"){//七牛云
$addOn .= "/imageView2/2/w/".$width."/h/".$height;
}else if ($cdnType == "QCLOUD"){//腾讯云
$addOn .= "/scrop/".$width."x".$height;
}
}
}
//todo:添加图片质量参数
//添加图片无损压缩参数
if ($cdnType == "UPYUN"){
$addOn .= "/compress/true";
}else if ($cdnType == "ALIOSS"){
}else if ($cdnType == "QINIU"){//七牛云
$addOn .= "?imageslim";
}
}
}
return $addOn;
}
解析函数:
/* 解析到CDN */
function Load2Cdn($obj,$way = "origin") // $way = "origin" 使用原生 markdown 解析
{
if ($way == "origin") {
$content = $obj->content;
} else {
$content = $obj->content;
}
$options = Helper::options();
//镜像处理文章中的图片,并自动处理大小和格式,
if ($options->JPic2cdn != ""){
$cdnArray = explode("||", $options->JPic2cdn);
$localUrl = str_replace("/", "\/", $options->rootUrl);//本地加速域名
$cdnUrl = trim($cdnArray[0], " \t\n\r\0\x0B\2F");//cdn自定义域名
$width = 0;
$suffix = Utils::getImageAddOn($options, true, trim($cdnArray[1]), $width, 0, "post");//图片云处理后缀
$content = preg_replace_callback('/(<img\s[^>]*?src=")' . $localUrl . '([^>]*?)"([^>]*?)alt="([^>]*?)"([^>]*?>)/',
function ($matches) use ($cdnUrl, $suffix) {
$alt = $matches[4];
//判断是否需要加云处理后缀的
if (strpos($matches[4], " ':ignore'") !== false) {
//alt文本去掉信息元素
$alt = str_replace(" ':ignore'", "", $alt);
return $matches[1] . $cdnUrl
. $matches[2] . "\"" . $matches[3] . 'alt="' . $alt . '"' . $matches[5];
} else {
return $matches[1] . $cdnUrl
. $matches[2] . $suffix . "\"" . $matches[3] . 'alt="' . $alt . '"' . $matches[5];
}
//todo 判断参数决定显示的图片大小
}, $content);
}
return trim($content);
}
第三步:解析
普通主题在functions.php
里添加,但注意一定加在解析懒加载的函数前(不懂的放最前面),joe 主题加在$archive->content = ParseCode($archive->content);
这一行前面。
代码:
$archive->content = Load2Cdn($archive);
接下来在后台填入你的 CDN 加速域名,然后上传图片试试吧~
如果你没有 CDN ,可以来试试 TinyPng 的 14 天免费体验TinypngCND
关于静态资源选项,欢迎关注我的下一篇博文!