跳到主要内容

图床

笔者文章希望在多个渠道发布，如果使用某个平台图床，在其他平台往往会因防盗链打不开，或多了层水印。为解决这个问题，笔者尝试自己搭建图床。

目前图床有免费和付费两种。

  • 免费图床。免费图床可能会存在访问速度慢或不稳定的情况，目前用的较多的有如下几类：
    • sm.ms：虽然有容量限制和图片限制，但对于一般个人博客而言应该够用了。
    • github：缺点当然是国内访问太慢了。
  • 付费图床。付费图床即使用公有云的对象存储和 CDN 来存放图片。相较于免费图床而言，付费图床的访问速度和稳定性方面都更优。公有云对象存储的计费项一般分为存储费用、请求费用、流量费用等几种，目前一般使用如下几种公有云的对象存储和 CDN：

由于七牛云每个月都有 10GB 的免费额度，较适用微小站点和个人博客，因此笔者使用七牛云做图床服务。过程如下。

创建对象存储空间​

打开七牛云的对象存储后台，点击空间管理/新建空间，设置空间名称和存储区域，并设置访问权限为公开空间，以让外网访问：

点击保存，此时会弹出“系统已自动为空间配备测试域名，有效期 30天”的提示，这里点击立即绑定自定义域名，开始绑定域名。

添加 CDN 加速域名​

打开 空间管理/域名管理标签页，点击绑定域名，跳转到 CDN/域名管理，根据需求添加需 CDN 加速的子域名，如 CDN 加速的域名统一用 cdn.qileq.com（也可进一步细分）：

然后点击创建，此时会得到这些子域名的 CNAME。该页面先不要关闭。

配置 CNAME​

CNAME 即指别名记录，用来把域名解析到别的域名上，当需要将域名指向另一个域名，再由另一个域名提供 ip 地址，就需要添加 CNAME 记录。参考如何配置域名的 CNAME，在腾 讯云中配置 CNAME。

登录腾讯云，打开控制台，搜索 DNS，打开 DNS 解析 DNSPod，找到需要解析的域名，点击解析，然后点击添加记录，添加如下：

回到七牛云管理页面，可以看到 CNAME 配置成功。

部署 SSL 证书​

点击 SSL 证书，点击上传自有证书，将从腾讯云生成的 cdn.qielq.comm 的 SSL 证书上传到七牛云中：

  • 证书备注名：cdn
  • 证书内容 ( PEM格式 )：复制 qileq.com_bundle.crt 内容
  • 证书私钥 ( PEM格式 )：复制 qileq.com.key 内容 然后点击确定上传即可。上传成功后，在我的证书中点击部署 CDN即可。

有朋友可能会问，为何不直接使用七牛云的免费 SSL 证书？笔者在尝试使用七牛云的 SSL 证书时需要填写公司信息和个人信息，不过看似随意填写这些信息也可行（笔者未确认）。笔者仍选择上传腾讯云生成的证书。

配置加速域名​

目前加速域名均为默认配置，点击配置对其进行修改：

  • 访问控制/开启 Referer 防盗链，添加白名单 开启防盗链的主要原因是为了防止图片被盗用，增加不必要的 CDN 流量，不过也会导致本地编辑文档时，无法预览图片。

修改管理目录​

回到对象存储/空间管理，根据需求决定是否做如下设置：

  • 点击文件管理，根据需求创建目录，以对图片分类处理。
  • 点击图片样式，设置图片样式：
    • 点击新建图片样式，设置图片水印类型、不透明度、水印位置等，设置图片处理样式别名为 imgWatermark，点击保存样式。
    • 点击样式分隔符设置，设置为 -，点击添加并保存。 设置完成后，对于 https://cdn.qileq.com/demo.jpg 这张图片，访问 https://cdn.qileq.com/demo.jpg-imggWatermark 即能得到添加水印后的图片。

接入 PicGo 管理图床​

图床设置完毕后，接下来就是上传图片了。但我们不可能每次上传图片，都打开一次七牛云管理页面再一张图一张图的上传吧，因此我们需要使用图床管理工具。目前使用较多的图床管理客户端有 PicGo，uPic 等。两者功能差不多，但 uPic 已经一年多没发布新版本，代码也很久没再更新，可能作者维护意愿不太强，故本站使用 PicGo，配置如下：

  1. 安装 PicGo：brew install picgo --cask。
  2. 启动 PicGo，点击上传区，选择链接格式；点击图床设置/七牛图床，进入七牛图床设置页面。
  3. 回到七牛云，点击头像，点击密钥管理，点击创建密钥，此时会生成 AK 和 SK 密钥。
  4. 配置七牛图床：
    • 将七牛云生成的 AK 和 SK 密钥分别贴到设定 AccessKey 和设定 SecretKey 中
    • bucket 为创建的对象存储空间
    • 上传网址设置为加速的 CDN 域名
    • 存储区域根据位置设置：华东区域填写 z0；华北区域填写 z1；华南区域填写 z2；北美区域填写 na0；东南亚区域填写 as0
    • 若有修改图片样式，则将样式别名和分隔符填写到网址后缀中
    • 若空间管理中设置了目录，则指定存储路径
    • 点击保存，并点击设为默认图床
  5. 将图片拖动到 PicGro 后，能直接在文档中粘贴图片地址。打开七牛云的对象存储/空间管理/文件管理，即能看到上传的图片。
  6. 若上传的图片有更新，如更新了图片 https://cdn.qileq.com/demo.png ，则可在浏览器上访问 https://cdn.qileq.com/demo.png?v1 来获取更新后的文件，后面的 v1 可任意指定，只要其与缓存更新前的 URL 不同。若希望使用原 url，则需要登录七牛云管理后台，点击CDN/刷新预取，填写要刷新的 URL 并点击点击刷新即可。

图片缩放​

试用了下 plugin-image-zoom，结果一直报错，查看原因是 #6989 refactor: extract MDX components 给 markdown img 的 class name 添加了 img_node_modules-@docusaurus-theme-classic-lib-next-theme-MDXComponents-Img-module，点击图片时无法根据 class name medium-zoom-image 获取图片属性而返回 null，导致报错 TypeError: Cannot read properties of null。

更新：
参考zoom failed at docusaurus version 2.0.0-beta.18，注释掉 imageZoom 配置的 container 和 template 后，图片缩放成功。