背景
最近在折腾博客的 CDN 和多媒体排版时,遇到了两个非常棘手的问题。
第一个问题是 CDN 鉴权。 我使用的是腾讯云的 EdgeOne (EO) 来加速站点,为了防止资源被恶意盗链,我开启了 Type-A 鉴权(Token 签名)。但问题来了:WordPress 默认插入的图片或视频链接都是原始 URL,无法自动生成带 token 的签名链接。如果每次发文章都要手动去算一遍 MD5 再填进去,链接过期了还得重算,这简直是噩梦。
第二个问题是古腾堡的视频尺寸。 不知道大家有没有发现,在很多 WordPress 主题中,即使你在古腾堡编辑器里设置了视频宽度为 500px,发布后前台依然是 width: 100% 撑满全屏。这是因为主题的 CSS 优先级太高,覆盖了 HTML 属性。
为了同时解决这两个问题,我不想安装臃肿的大型插件,于是自己手搓了一个轻量级的解决方案:EdgeOne Gutenberg Authentication。
今天把这个插件分享出来,希望能帮到有同样需求的站长。
插件功能介绍
这个插件非常纯粹,没有多余的依赖,核心功能就两点:
1. 自动化 EdgeOne 鉴权 (Type-A)
你只需要在后台填入 EdgeOne 的密钥,插件会在前台页面渲染时(PHP端),自动把内容里的图片和视频链接替换为带签名的安全链接。
- 实时签名:基于用户访问时间实时生成,安全系数极高。
- 无损编辑:数据库里保存的依然是原始链接,以后如果你换了 CDN,关掉插件即可,不会导致链接失效。
2. 强力尺寸控制 (Universal Sizing)
针对主题 CSS 覆盖宽高的问题,我采用了一种“暴力但有效”的方案。
- 强制生效:插件不仅会写入 width 属性,还会自动注入内联样式 style=”width: …; height: …”。在 CSS 规则中,内联样式的优先级极高,从而确保你设置多大,前台就显示多大。
- 智能单位:支持输入 600 (自动补齐 px) 或 80%。
- 通用支持:同时支持图片和视频区块。
使用教程
第一步:安装插件
由于这是一个自用的小插件,我没有上传到 WP 官方库。你可以直接下载我打包好的 Zip 上传。
第二步:配置 EdgeOne
进入 WordPress 后台 设置 -> EdgeOne 鉴权。
填入你在腾讯云控制台获取的 Primary Key (主密钥)。
⚠️ 重要提示1:EdgeOne 的规则是 从上往下匹配,命中即停。Token 规则必须放在最前面。
⚠️ 重要提示2:在腾讯云 EdgeOne 的控制台(站点加速 -> 缓存配置)中,请务必将“查询字符串”设置为 “忽略全部查询字符串”。
原因:鉴权生成的 token 每秒都在变。如果不忽略参数,CDN 会认为每个请求都是新文件,导致无法命中缓存,直接回源,拖慢网站速度。
第三步:在文章中使用
- 进入古腾堡编辑器,选中一个图片或视频。
- 看右侧侧边栏,你会发现多了一个 “EdgeOne & 尺寸设置” 面板。
- 打开 “启用 EdgeOne 鉴权” 开关,即可保护该资源。
- 在 “宽度” 输入框填入你想要的大小(例如 500),发布后即可看到效果。