跳过主要内容
文档目录

邮件订阅

配置邮件订阅服务,管理订阅和退订

MinuteShip 支持 Resend、Beehiiv 和 MailCheap 来管理邮件订阅。

设置

选择一个邮件订阅提供商,并配置对应的环境变量。模板默认使用 Resend。

Resend

创建 Resend 账户

在 resend.com 创建 Resend 账户,并绑定和验证您的网站域名。

获取 API 密钥

进入 Resend 控制台 > API Keys,创建新的 API 密钥,设置权限时确保要包含发送邮件的权限

配置环境变量

将以下内容添加到您的 .env 文件中:

.env

RESEND_API_KEY=re_xxxxxxxxxxxx

注意: 使用 Resend 时,RESEND_API_KEY 在邮件模块和邮件订阅模块之间共享。

更新网站配置

更新网站配置以使用 Resend 进行邮件订阅管理:

src/config/website.ts

export const websiteConfig = {
  // ...其他配置
  newsletter: {
    enable: true,
    provider: 'resend',
    autoSubscribeAfterSignUp: true, // 是否在用户注册后自动订阅
  },
  // ...其他配置
}

Beehiiv

创建 Beehiiv 账户

在 beehiiv.com 创建 Beehiiv 账户。

获取 API 密钥和 Publication ID

  • 进入 Settings > API 生成 API 密钥。
  • 从 URL 或设置页面获取您的 Publication ID。

配置环境变量

将以下内容添加到您的 .env 文件中:

.env

BEEHIIV_API_KEY=your-beehiiv-api-key
BEEHIIV_PUBLICATION_ID=your-beehiiv-publication-id

更新网站配置

更新网站配置以使用 Beehiiv 进行邮件订阅管理:

src/config/website.ts

export const websiteConfig = {
  // ...其他配置
  newsletter: {
    enable: true,
    provider: 'beehiiv',
    autoSubscribeAfterSignUp: true, // 是否在用户注册后自动订阅
  },
  // ...其他配置
}

MailCheap

创建 Newsletter

在 mailcheap.ai 注册账户并创建 Newsletter,记录其 ID 或 slug。

获取 API 密钥

在控制台的 API keys 页面创建 Full access 密钥。请勿选择 Signups only,否则无法查询订阅状态或退订。参见官方身份验证文档。

配置环境变量

将以下内容添加到 .env 文件中:

.env

MAILCHEAP_API_KEY='mc_your_full_access_api_key'
MAILCHEAP_NEWSLETTER_ID='your-newsletter-id-or-slug'

两个变量均供服务端使用,不要添加 VITE_ 前缀。

更新网站配置

src/config/website.ts

newsletter: {
  enable: true,
  provider: 'mailcheap',
  autoSubscribeAfterSignUp: false, // 是否在用户注册后自动订阅
},

如需在注册后自动订阅,在取得用户同意后将 autoSubscribeAfterSignUp 设为 true。

Note

如果您正在设置环境,现在可以回到环境配置文档并继续。本文档的其余部分可以稍后阅读。


状态缓存

启用 缓存 后,MinuteShip 可以把邮件订阅状态检查结果缓存到 Cloudflare KV。订阅和取消订阅操作会删除对应的缓存 key,下一次状态检查会重新获取最新数据。

自定义

创建自定义提供商

如果您需要使用不同的邮件订阅服务,您可以创建自定义邮件订阅服务提供商:

  1. 在 src/newsletter/provider 目录中创建新的文件
  2. 实现 NewsletterProvider 接口

src/newsletter/provider/custom-provider.ts

import type {
  CheckSubscribeStatusParams,
  NewsletterProvider,
  SubscribeNewsletterParams,
  UnsubscribeNewsletterParams,
} from '@/newsletter/types';

export class CustomNewsletterProvider implements NewsletterProvider {
  constructor() {
    // 初始化您的邮件订阅服务提供商
  }

  public getProviderName(): string {
    return 'custom';
  }

  async subscribe({ email }: SubscribeNewsletterParams): Promise<boolean> {
    // 订阅用户的实现
    return true;
  }

  async unsubscribe({ email }: UnsubscribeNewsletterParams): Promise<boolean> {
    // 取消订阅用户的实现
    return true;
  }

  async checkSubscribeStatus({ email }: CheckSubscribeStatusParams): Promise<boolean> {
    // 检查订阅状态的实现
    return true;
  }
}
  1. 在 src/newsletter/index.ts 中的 providerRegistry 注册新的邮件订阅服务提供商:

src/newsletter/index.ts

import { CustomNewsletterProvider } from './provider/custom-provider';

const providerRegistry: Record<NewsletterProviderName, ProviderFactory> = {
  resend: () => new ResendNewsletterProvider(),
  beehiiv: () => new BeehiivNewsletterProvider(),
  mailcheap: () => new MailCheapNewsletterProvider(),
  custom: () => new CustomNewsletterProvider(),
};

下一步

现在您了解了如何在 MinuteShip 中使用邮件订阅,您可能想要探索这些相关功能: