Next.Js 使用无头 CMS 资产生成静态站点

r19*_*987 5 wordpress static-site reactjs next.js

我使用 WordPress 作为我的网站的无头 CMS,并且希望从我的 Next.js 项目生成一个静态网站。我想要实现的是能够将图像和数据从文件夹复制wp-content到我的 next.jsout文件夹,更改网址(http://mywpsite.com/wp-content/uploads/2020/10/1. jpg等)在构建的html文件中到/public/wp-content/uploads/2020/10/1.jpg。

基本上,我希望以某种方式导出我的下一个项目,同时我还托管与该项目连接的文件。我也不想从无头 CMS 托管图像资源,而只想从输出文件夹托管图像资源。

我的石人想法是手动下载该文件夹并对这些文件进行查找/替换。不知道这是否有效,但我很好奇是否有人考虑过我目前遇到的同样问题并提出了解决方案,或者知道我应该朝哪个方向发展?

小智 0

我遇到了同样的问题,但不是 WordPress 的问题。

我的问题:next.js 项目需要显示来自 Goodreads 的图书照片、来自 Google 个人资料的用户图片。

我的解决方案:我不想开发自己的解决方案来解决它,这可能会花费我大量时间并存在潜在风险,因此我使用 Cloudinary 来管理图像:

  • 它有一个免费计划,允许您存储高达 11Gb
  • 我创建了自动上传映射规则,允许我即时从 Google、Goodread 下载图像到我的 Cloudinary。您可以进行配置以确保 Cloudinary 只为 WordPress 中的文件存储一个文件,而不是在用户每次再次访问该文件时下载并生成新文件。您可以从他们的文档中查看更多信息https://cloudinary.com/documentation/fetch_remote_images#auto_upload_remote_resources
  • 我将 Cloudinary URL 存储到我的数据库中

对于来自 Google 的照片,Cloudinary 上传 URL 如下所示https://res.cloudinary.com/${cloudinaryStorageName}/image/upload/user-picture/${googlePictureId}

这对我来说效果很好。