说说主题的云存储优化功能

这个功能放出来大概也有两年的时间了，但是一直没有详细的介绍它，这两天我想了一下，主要原因大概有两个，一个是懒，另一个是懒。

不过随着主题的更新，云存储优化功能也越来越完善了，所以，趁着现在有空，刚好拉出来讲一讲。

功能简介

先来说说这个功能是干什么的吧。

云存储是第三方托管的在线存储服务，其在全国乃至世界范围内都有大量的 CDN 节点，用户在访问相关资源时会被分配到就近的 CDN 节点，因此在访问速度上通常比我们单台服务器要好很多。常见的云存储服务有七牛云存储、又拍云存储、阿里 OSS、腾讯云存储等，鉴于本主题就支持这四个，所以其他的就当做不常见吧::quyin:1huaji::

到了主题这边，简单来说，云存储优化功能，就是可以把博客上除了页面的 HTML 以外的静态资源全都通过云存储进行加载，包括主题的 JS、CSS、字体、表情图片文件，以及文章正文内图片、头图等图片资源（第三方的插件里的资源文件不包含在内），通过云存储加载这些静态图片，可以加速网页的访问速度，特别是对于一些服务器在国外的朋友。

这是云存储优化最基本的功能。在此基础上，主题还提供了以下功能：

1. 为文章中的图片自动转换合适的大小和格式

主题可以根据用户使用的设备，自动调整头图及文章内图片的大小，在保证图片质量不受影响的前提下，降低图片的尺寸，大大节约手机用户的流量，提高页面加载速度。

该功能可以在手机设备上加载小图，电脑设备上加载大图，因此，你在文章等其他地方使用图片时，丝毫不用在意图片尺寸对于页面加载速度及页面大小的影响，直接无脑上最大尺寸图片即可。什么？几 M 的原图？照样给你安排的明明白白。

2. 启用 WebP 图像格式

「启用 WebP 图像格式」功能可以在支持 WebP 的浏览器上使用 WebP 格式的图片，可以以较小的图片大小获得相同质量的图片（相较于 JPEG），进一步提升页面加载速度，减少页面大小。

WebP 可以用于 Chrome 等浏览器下，详细的浏览器兼容情况可以到 CANIUSE 上查看:

关于 WebP 的更多介绍，可以参考这里：

• A new image format for the Web - WebP
• WebP - 维基百科，自由的百科全书

3. 图像加载动画

图片加载动画就是图片在加载过程中的动画效果，包含了首页及文章主图、文章列表图片、文章内容图片等。

图片加载动画可以使图片在加载过程中也有较好的观感，在图片资源加载速度较慢时尤为明显。

另外文章内容图片在加载的过程中，可以根据图片大小生成占位，不会有图片在加载过程中导致的文章内容高度变化，避免了加载过程中的文章内容跳动等。

具体的效果可以看一下下面的视频：

使用说明

好了，说了这么多废话，关键的地方到了。

1. 设置镜像存储

镜像存储服务是一种快速的数据迁移和加速服务。可以帮助用户实现无缝数据迁移。它实现的功能是用户在访问镜像域名上的一个资源时，云存储会先检测该资源在云存储服务器上是否已经存储，如果有则直接返回，没有的话，会根据路径到源站（也就是你的博客）获取对应的资源，然后返回给用户。除了用户第一次访问时要回源速度稍慢，后面就会完整发挥 CDN 的优势，速度都会非常快。

举个栗子，假如我博客的域名是 https://get233.com，配置的镜像存储域名是 https://assets.get233.com，那么，在第一次访问下面这个链接时：

https://assets.get233.com/path/to/whatever/pig.jpg

镜像存储就会到下面这个地址获取内容， 然后返回给用户：

https://get233.com/path/to/whatever/pig.jpg

后面镜像存储已经存储了这张图片时，就会直接返回给用户，速度很快。

配置镜像存储的方法如下：

• 七牛云存储
• 又拍云存储
• 阿里云 OSS（待补充）
• 腾讯云存储（待补充）

配置完成后，将配置的「CDN 镜像加速域名」复制然后准备填入后面的设置中。

后面的操作都非常简单，只要到主题外观设置里配置相应的设置就可以了。

2. 配置 CDN 镜像加速域名

前往 主题外观设置里 => CDN 镜像加速域名 ，配置 CDN 镜像加速域名：

这里的域名就填你第一步配置中的「CDN 镜像加速域名」。

3. 配置域名的云存储类型

前往插件设置中，配置如下选项：

其中，自定义 CDN 域名的是告诉 Mirages 哪个域名是云存储域名，然后他是七牛还是又拍什么的。参照说明配置即可。

如果你使用的是又拍云存储，且你变更了又拍云存储的间隔标识符，则配置第二个设置，否则，第二个设置保持默认即可。

4. 开启云存储优化功能

前往 主题外观设置里 => 云存储优化 ，配置云存储优化功能：

这一步很简单，把需要的功能选项启用即可。

5. 图片加载动画

前往 主题外观设置里 => 图像加载动画 ，开启图像加载动画：

啊，同上。开启了这个功能，图片加载动画就可以用了。

最后

最后就没有了，去试试功能好不好用吧::quyin:1huaji::