LogoTanStarter 文档
LogoTanStarter 文档
首页模板介绍代码库CLI快速开始环境配置部署网站
网站配置

功能集成

Cloudflare数据库存储缓存身份验证邮件
支付
AI邮件订阅通知分析聊天框

功能定制

元数据页面国际化落地页博客组件用户管理密钥管理

代码库

项目结构代码检查编辑器设置更新代码库

衍生项目

MkImage
X (Twitter)

邮件订阅

学习如何设置和使用 Resend 或 Beehiiv 进行邮件订阅管理

TanStarter 支持 Resend 和 Beehiiv 来管理邮件订阅。

设置

TanStarter 支持 Resend 和 Beehiiv 作为内置提供商。

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, // 是否在用户注册后自动订阅
  },
  // ...其他配置
}

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

环境配置

设置环境变量


状态缓存

启用 缓存 后,TanStarter 可以把邮件订阅状态检查结果缓存到 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(),
  custom: () => new CustomNewsletterProvider(),
};

下一步

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

邮件

配置邮件服务

身份验证

配置用户身份验证

统计分析

配置统计分析服务

缓存

配置服务端缓存

AI

AI 模块集成,支持 Cloudflare Workers AI 和 fal.ai,提供文本生成、图片生成等功能

通知

学习如何在 TanStarter 中设置和使用通知

目录

设置
Resend
创建 Resend 账户
获取 API 密钥
配置环境变量
更新网站配置
Beehiiv
创建 Beehiiv 账户
获取 API 密钥和 Publication ID
配置环境变量
更新网站配置
状态缓存
自定义
创建自定义提供商
下一步