Typecho图床方案分享：USS+可道云

研究了3天，我的博客图床方案已经彻底完成，包括旧文章图片的迁移、图片的水印、以及新文章图片如何存储在新图床中。我的解决方案是使用USS又拍云云存储作为图床，然后使用防盗链以防止图床的非法访问。如果你想搭建和我同款的图床，欢迎阅读此文章。

预览

我用Snipaste截了一张我正在写此文章的图片，后缀是.png，然后我在文章编辑框中粘贴，图片会自动转换成Webp模式然后生成Markdown形式的图片链接。重点是我的图片为png格式而上传后自动转换为了webp且生成了webp的直链，而不需要我手动将png图片转化为webp图片。Webp图片有何优点？

编辑文章时插入图片

至于防盗链，你可以复制我的图片URL然后粘贴到你自己的网站中或者通过地址栏直接访问看看效果。

准备

首先你要准备两个二级域名，一个又拍云账号，两个SSL证书（与前方的域名相符），然后确保你的Typecho为1.2版本。

使用又拍云前请阅读又拍云的资费政策。可以了解一下又拍云联盟，每月可赠送免费流量和存储。

又拍云云存储USS

注册又拍云账号过程略，又拍云官网https://upyun.com。注册完成后点击右上角用户名 - 账户名xxx - 操作员 - 添加操作员。填写操作员名称，点击生成密码，勾选下方三个权限。若你有多个操作员则可以填写备注以区分。确认信息无误后复制操作员密码，随后点“创建”。

添加操作员

然后在上方导航栏中的“云产品”悬浮，点击云存储，点击“创建服务”。服务名称填写你能区分的，下方选默认的即可，最后操作员在选择“授权已有操作员”后勾选你刚刚创建的操作员。然后点创建。

创建云存储服务

然后在云存储控制台的列表中，点击刚刚创建的云存储右方的“配置”，进入配置页面。

已添加云存储

随后在“域名配置”中找到下方的加速域名，点击“域名绑定”，输入你准备的第一个二级域名，我这里以p.qi1.zone为例。添加完成后点击域名右方的“CNAME”，将此CNAME值添加到DNS中。如何配置DNS

配置加速域名

然后选择HTTPS，点击HTTPS配置右方的管理，点击添加自有证书，将KEY和PEM文件添加进去，然后开启HTTPS和强制HTTPS，然后退出。

配置证书

然后进入访问控制，找到CORS跨域共享，打开开关，点击添加规则。允许的域添加你要使用图床的地址，如*.yourdomain.com，Methods全选，过期时间填写86400。下方Allow Headers填“Access-Control-Allow-Origin:yourdomain.com”。其中yourdomain.com指你要访问此图床的域名，不支持通配符。若你有多个域名则填写分多行填写。然后点击保存。注意这个CORS跨域共享我也不是很懂，若你配置的过程中有问题可以不配置此项，下方的Referer防盗链和Token防盗链也有很高的安全性。

配置CORS

向下滑动，找到“Referer防盗链”，点击“管理”，勾选“启用Referer白名单”，勾选“禁止Referer为空”，白名单同样填写可能使用此图床的地址。最后点“确定”。

配置Referer防盗链

向下滑动，找到“Token防盗链”，点击“开启”，输入一个密钥并记住它。

切换到“图片处理”，找到“图片处理——自定义版本”，点击“创建缩略图版本”，在水印处选择开启。我这里选择图片水印，然后填写对应的信息，点保存，此图片处理就创建好了。在访问图片在URL最后加“!”+图片处理名称，访问的就是处理过图片的版本。如我的博客图片后面加!zhongshuiyin就是加水印。

推荐加入又拍云联盟，每月赠送一些免费容量和流量，链接：https://www.upyun.com/league

至此又拍云相关配置已完成。

可道云

官网https://kodcloud.com/。前往https://kodcloud.com/download/下载最新版本可道云。配置过程略。配置二级域名过程以及安装SSL证书过程略。为可道云设置初始密码以及安装过程略。

可道云界面

以管理员身份登录后，点击左下角头像 - 后台管理 - 存储/文件 - 存储管理，点击“新增”。存储策略选择“又拍云USS”，名称填写能区分不同存储策略的名称如图床；服务名称填存储桶名（USS服务名）；操作员名、密码填写操作员账号、操作员密码；空间域名填写你为USS配置的加速域名（不是CNAME），Token密钥填写在上方Token防盗链填写的密钥，存储目录按需填写，勾选默认，然后点保存。

为可道云配置存储策略

回到可道云首页，在左侧第二个侧边栏找到“网络挂载”，点击刚刚新建的存储策略名称（如图床），就可以看到你的存储桶内的文件了。你可以尝试传进去一个文件然后看看是否可以预览。

使用可道云的原因是因为在上方配置了防盗链以后非允许的域名不可以访问云存储内的资源。而可道云支持使用自己的域名部署，所以不会被防盗链拦截请求。同时可道云可以方便的查看自己云存储内的资源，并支持重命名、批量下载、压缩、解压缩功能，对于图床迁移、备份等非常方便。

可道云使用注意事项（我自己遇到的）：可能是由于服务器带宽过低、Nginx配置等问题，可道云的压缩和解压缩以及移动文件夹在传输过程中超过一定大小会卡住，可能会影响文件，在进行这些操作时建议备份。

为Typecho配置图床存储策略

这里需要使用一款插件：UpyunFile。Github地址 前往我的云盘下载

配置插件过程略。

在Typecho后台选择启用此插件，然后在设置中填写如下参数。

图片链接修改：开启。

绑定域名：填写图床的加速域名。

服务名称、操作员、密码按之前信息填写。

图片处理可开启。若开启则图片处理缩略版本名称填你之前为图片处理的版本命的名称。

图片处理转码输出格式选择webp。

Token防盗链选择开启。

密钥填写你上方填写的密钥。

最后签名过期时间写3600。它表示这个token一小时后过期，需要重新生成。这个读者可以放心，因为每次刷新页面时都会生成新Token。若你的博客为懒加载，则建议将时间设置长一些。

然后保存设置即可。

Token可以增强图床访问的安全性，但是缺点是在后台编辑器生成的链接会自动附带Token，而它会过期。所以粘贴后Token需手动删除。若开启了Token，则图片在后台可预览，过了一段时间文章也差不多编辑好了，就可以去掉这些Token，这样它们在后台可能无法访问，但是在文章页面是能访问的，因为UpyunFile插件会自动补全Token。

最后一个小改动

由于Typecho上传附件的图片识别后缀没有webp，导致在输入框粘贴图片时在在插件将图片转换为webp后缀后链接不会以Markdown的图片形式添加而是以超链接形式添加。为此我们需要改一下Typecho的源码。

前往你的网站根目录/var/Widget/Base/Content.php，找到第557行，它应该和下方的代码比较类似。

/** 生成静态路径 */
$value['pathinfo'] = $routeExists ? Router::url($type, $value) : '#';

/** 生成静态链接 */
$value['url'] = $value['permalink'] = Common::url($value['pathinfo'], $this->options->index);

/** 处理附件 */
if ('attachment' == $type) {
    $content = @unserialize($value['text']);

    //增加数据信息
    $value['attachment'] = new Config($content);
    $value['attachment']->isImage = in_array($content['type'], ['jpg', 'jpeg', 'gif', 'png', 'tiff', 'bmp']);  //此行
    $value['attachment']->url = Upload::attachmentHandle($value);

    if ($value['attachment']->isImage) {
        $value['text'] = '<img src="' . $value['attachment']->url . '" alt="' .
            $value['title'] . '" />';
    } else {
        $value['text'] = '<a href="' . $value['attachment']->url . '" title="' .
            $value['title'] . '">' . $value['title'] . '</a>';
    }
}

/** 处理Markdown **/
if (isset($value['text'])) {
    $value['isMarkdown'] = (0 === strpos($value['text'], '<!--markdown-->'));
    if ($value['isMarkdown']) {
        $value['text'] = substr($value['text'], 15);
    }
}

随后在该行的列表新增一个值：webp，修改后代码应为如下格式。

$value['attachment']->isImage = in_array($content['type'], ['jpg', 'jpeg', 'gif', 'png', 'tiff', 'bmp', 'webp']);

然后保存。

至此你的Typecho图床就搭建好了。

可能遇到的问题

若你的加速域名设置了防盗链导致你的网站通过加速域名访问云存储内的资源时返回403状态码，请通过状态码的描述关闭对应的防盗链规则，然后再试试能否访问。（若你觉得你的网站没人攻击或者不想配置防盗链则可以全关掉）

举例：我现在直接通过浏览器地址访问此文章的第一个图片，返回状态码如下图：

尝试访问开启了防盗链的资源

通过JSON串的第二个值可得到token值是无效的，则可以尝试关闭Token防盗链（又拍云和UpyunFile插件的都关掉）后再尝试访问。

此次我尝试使用带有正确Token的参数访问加速域名，返回状态码如下图。

带有Token时尝试访问加速域名

第一次直接访问时图片可以显示，但是刷新时图片就访问不了了。从图中得知Referer是无效的，这是因为刷新图片时属于直接访问加速域名，由于Referer防盗链开启了禁止Referer为空。所以遇到此情况请检查Referer域名填写是否正确，并确定你的网站在访问加速域名时带有Referer头部。

可以按F12打开浏览器的开发者模式，然后在“网络”中找到失效的图片请求，查看此请求中是否有Referer头部。下图中使用我的云盘访问图片就不行，因为没有Referer头部。

空Referer被禁止

搭建网站是个学习的过程，学习中难免遇到问题，所以请耐心解决。有更多问题请留言或评论。