使用Digital Ocean Spaces的媒体

在TinaCMS中管理Digital Ocean Spaces媒体资产。

以下指南依赖于NextJS的API功能来验证第三方媒体交互。我们希望很快能记录一种与框架无关的方法。

安装

使用Yarn

使用NPM

连接Digital Ocean Spaces

您需要一些由Digital Ocean Spaces提供的凭据来正确设置。如果您还没有账户，可以在这里注册。

将以下变量添加到.env文件中。

注册媒体存储

您可以通过loadCustomStore属性注册Digital Ocean Space媒体存储。

loadCustomStore属性可以在tina/config.{js,ts,tsx}中配置。

设置API路由

TinaCMS的“外部媒体提供商”支持需要一个轻量级的后端媒体处理器，需要由用户设置/托管。有多种方法可以做到这一点，包括与框架无关的Netlify Functions实现。

注意： 此步骤将向您展示如何为Next.js设置API路由。如果您使用的是不同的框架，则需要设置自己的API路由。

Next.js示例

在Next.js应用的pages目录中设置一个新的API路由，例如pages/api/dos/[...media].ts。然后为媒体添加一个新的捕获所有API路由。

调用createMediaHandler来设置路由并将您的媒体存储实例连接到Digital Ocean Spaces。

从"@tinacms/auth"导入isAuthorized。

authorized键将使得只有TinaCloud中的授权用户才能上传和编辑媒体。

对于Netlify的使用案例，请阅读Netlify Functions设置指南

使用自定义URL

如果您为Digital Ocean Spaces存储桶使用自定义URL，可以将cdnUrl值传递给createMediaHandler。

更新Schema

现在媒体存储已注册并且媒体的API路由已设置，让我们在您的schema中添加一个图像。

在您的schema中为图像添加一个新字段，例如：

现在，当编辑您的网站时，图像字段将允许您通过媒体存储连接到您的Digital Ocean Spaces来管理您的媒体资产。