修复handsome博客主题更新后的图片404问题

February 26, 2020

8867 views

1852 words

背景

本站使用的是handsome主题，过年前升级了最新版本，启用了主题自带的全站图片CND加速功能，但升级之后就发现之前旧的历史博客文章中的图片全部都404了（我之前的博客图片也都全部是存储在七牛云存储上的）由于过年期间事情太多就搁置了；这次因为疫情原因在老家自我隔离1个半月了，实在无聊就想起来把这个问题给修好了；这里记录一下修复过程，以便于后面再更新主题版本时，能一次性处理好这些问题；

问题定位

由于新版的handsome主题默认自带了全站图片CND加速功能，这个功能是利用了七牛云存储的自动回源机制来实现图片缓存和加速的；
利用七牛云存储的自动回源机制，可以在开发网站theme的时候不用去处理和对接云存储的图片上传功能，撰写文章时图片依然是上传到网站服务器的本地路径下的；只是在读取和显示文章时，主题才会通过特别的函数将文章中所有本地图片的URL实时替换成CDN的加速主机名（只替换host的部分，路径的部分保持完全一样）；
当客户端浏览器第一次访问文章中的图片时，就会从替换后的CDN地址去加载和显示图片，而CDN上当前还并没有存储对应的图片cache，于是CDN服务器就会根据回源配置，自动从源站（我的网站）来读取对应的图片数据，进行云端存储后通过CDN返回给浏览器显示；从而完成云端存储及加速的目的；
使网站端程序的开发变得极其简单，就能实现图片的云存储和加速；除了当图片在发布后第一次被客户端访问的时候会因为云存储需要回源读取图片而稍微有点延时，以后的访问都会直接从云存储CDN加速访问；

带来问题

这次我的网站是升级主题，并非全新部署，所以我的七牛云存储上已经存储了大量的历史博客图片文件；
但由于之前的图片都是通过专门的七牛云存储插件上传，在撰写文章时就同步自动上传了一份到七牛云存储中保存了，而且当时有特别定义存储路径，只针对本博客路径下/usr/uploads路径下的图片才会自动上传，所以历史保存在七牛云存储中的图片，都是不包含/usr/uploads这个路径的；
因此导致升级完主题后，历史旧文章中的图片全部都404了；
新版主题的全站图片镜像加速功能替换后的图片URL中都多了/usr/uploads 这一段路径，导致在七牛云存储中找不到对应的图片文件了；

解决办法

修改主题中的图片URL替换函数，实现输出的html内容中所有图片的URL都不包含/usr/uploads这个路径；
经过1个小时的源代码分析查找，最终修改了如下2处的代码:

修改1
<webroot>/usr/themes/handsome/libs/Content.php 第1687行

在$localUrl的值后面补充/usr/uploads路径，便于在下面生成$content的值时，可以被（1695行）的preg_replace()函数一起给替换掉；