LogoTanStarter 文档
LogoTanStarter 文档
首页模板介绍代码库快速开始环境配置
网站配置
网站配置导航菜单页脚菜单侧边栏菜单头像按钮社交媒体
部署

功能集成

Cloudflare数据库身份验证邮件邮件订阅存储支付通知分析聊天框联盟营销

功能定制

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

代码库

项目结构代码检查编辑器设置更新代码库
X (Twitter)
网站配置

网站配置

TanStarter 网站的核心配置

包含网站核心控制的主配置文件。

TanStarter 已为您设置了默认的核心设置，您可以在此文件 src/config/website.ts 中自定义核心设置。

src/config/website.ts
export const websiteConfig: WebsiteConfig = {
  ui: {
    // UI 设置
  },
  metadata: {
    // 元数据设置
  },
  social: {
    // 社交媒体设置
  },
  auth: {
    // 认证设置
  },
  blog: {
    // 博客设置
  },
  affiliates: {
    // 联盟营销设置
  },
  mail: {
    // 邮件设置
  },
  newsletter: {
    // 邮件订阅设置
  },
  notification: {
    // 通知设置
  },
  storage: {
    // 存储设置
  },
  payment: {
    // 支付设置
  },
};

UI

控制您网站的外观。

模式

控制明亮/暗黑模式设置：

属性类型描述
defaultMode'light' | 'dark' | 'system'设置默认显示模式
enableSwitchboolean为 true 时，允许用户在明亮/暗黑模式之间切换

示例：

src/config/website.ts
ui: {
  mode: {
    defaultMode: 'system', // 选择：light、dark、system
    enableSwitch: true,    // 允许用户切换明亮/暗黑模式
  },
}

元数据

控制您网站的元数据。元数据配置由几个子部分组成：

基本信息

定义网站的基本元数据信息：

属性类型描述
namestring网站名称，用于品牌展示
titlestring网站标题，用于浏览器标签页和 SEO
descriptionstring网站描述，用于搜索引擎和社交媒体预览

示例：

src/config/website.ts
metadata: {
  name: messages.site.name,
  title: messages.site.title,
  description: messages.site.description,
  // ...
}

图片

定义用于品牌和社交分享的图片：

属性类型描述
ogImagestring用于社交媒体预览的 Open Graph 图片 URL
logoLightstring明亮模式下的 logo 图片 URL
logoDarkstring暗黑模式下的 logo 图片 URL

示例：

src/config/website.ts
metadata: {
  images: {
    ogImage: '/og.png',      // 社交分享的 Open Graph 图片
    logoLight: '/logo.png',  // 明亮模式下显示的 logo
    logoDark: '/logo-dark.png', // 暗黑模式下显示的 logo
  },
  // ...
}

您可以在 图片 文档中了解更多关于自定义图片的信息。

社交媒体

配置社交媒体资料链接：

属性类型描述
githubstringGitHub 资料或仓库 URL
twitterstringTwitter/X 资料 URL
blueSkystringBluesky 资料 URL
discordstringDiscord 服务器 URL
mastodonstringMastodon 资料 URL
linkedinstringLinkedIn 资料 URL
youtubestringYouTube 频道 URL
facebookstringFacebook 页面 URL
instagramstringInstagram 资料 URL
tiktokstringTikTok 资料 URL
telegramstringTelegram 群组或频道 URL

示例：

src/config/website.ts
social: {
  github: 'https://github.com/YourOrganization',
  twitter: 'https://x.com/YourHandle',
  discord: 'https://discord.gg/your-invitation-code',
  youtube: 'https://youtube.com/@YourChannel',
}

这些社交媒体链接被 社交媒体配置 用来在整个网站的适当位置上生成适当的链接。

身份认证

为网站配置身份认证选项：

属性类型描述
enableboolean设置为 true 时，启用认证
enableGoogleLoginboolean设置为 true 时，启用 Google 登录
enableCredentialLoginboolean设置为 true 时，启用邮箱密码登录
enableDeleteAccountboolean设置为 true 时，允许用户删除账户

示例：

src/config/website.ts
auth: {
  enable: true,
  enableGoogleLogin: true,
  enableCredentialLogin: true,
  enableDeleteAccount: true,
}

TanStarter 支持 Google OAuth 和邮箱密码认证。您可以使用这些配置选项选择性地禁用特定认证服务：

  • 将 enableGoogleLogin 设置为 false 以移除 Google 登录选项
  • 将 enableCredentialLogin 设置为 false 以移除邮箱密码登录选项

注意： 请确保至少启用一种登录方式，否则用户将无法登录。

您可以在 身份验证 文档中了解更多关于认证选项的信息。

博客

配置博客功能：

属性类型描述
enableboolean是否启用博客，默认为 true
paginationSizenumber每页显示的文章数量

示例：

src/config/website.ts
blog: {
  enable: true,
  paginationSize: 6,
}

如果不需要博客功能，可以将 enable 设置为 false。如果禁用博客功能，博客菜单将不会显示在导航栏和页脚中，并且博客相关页面将不会包含在 sitemap 中，并且对 /blog 路由的访问将跳转到首页。

您可以在 博客 文档中了解更多关于博客配置的信息。

邮件

配置邮件服务：

属性类型描述
enableboolean是否启用邮件功能，默认为 true
provider'resend'邮件服务提供商（目前仅支持 Resend）
fromEmailstring用于发送邮件的联系邮箱
supportEmailstring用于接收邮件的联系邮箱

示例：

mail: {
  enable: true,
  provider: 'resend',
  fromEmail: 'contact@example.com',
  supportEmail: 'support@example.com',
}

您可以在 邮件 文档中了解更多关于邮件配置的信息。

邮件订阅

配置邮件订阅服务：

属性类型描述
enableboolean是否启用邮件订阅，默认为 true
provider'resend'邮件订阅服务提供商（目前仅支持 Resend）
autoSubscribeAfterSignUpboolean是否在用户注册后自动订阅

示例：

src/config/website.ts
newsletter: {
  enable: true,
  provider: 'resend',
  autoSubscribeAfterSignUp: true,
}

如果不需要邮件订阅功能，可以将 enable 设置为 false。如果禁用邮件订阅功能，订阅表单将不会显示在首页和博客页面上，并且订阅状态将不会显示在后台通知设置页面中。

您可以在 邮件订阅 文档中了解更多关于邮件订阅配置的信息。

存储

配置文件存储：

属性类型描述
enableboolean是否启用存储，默认为 true
provider'r2'存储提供商（目前仅支持 R2）
maxFileSizenumber最大文件大小（字节）
allowedTypesstring[]允许的文件 MIME 类型
userFilesFolderstring用户上传文件的文件夹名称

示例：

src/config/website.ts
storage: {
  enable: true,
  provider: 'r2',
  maxFileSize: DEFAULT_MAX_FILE_SIZE,
  allowedTypes: DEFAULT_ALLOWED_TYPES,
  userFilesFolder: DEFAULT_USER_FILES_FOLDER,
}

如果不需要存储功能，可以将 enable 设置为 false。如果禁用存储功能，后台设置界面的更新用户头像功能将不可用。

您可以在 存储 文档中了解更多关于存储配置的信息。

通知

配置通知服务：

属性类型描述
enableboolean是否启用通知功能，默认为 true
provider'discord'通知提供商（目前仅支持 Discord）

示例：

src/config/website.ts
notification: {
  enable: true,
  provider: 'discord',
}

您可以在 通知 文档中了解更多关于通知配置的信息。

联盟营销

配置联盟营销设置：

属性类型描述
enableboolean是否启用联盟营销功能，默认为 false
provider'affonso' | 'promotekit'要使用的联盟营销提供商

示例：

src/config/website.ts
affiliates: {
  enable: true,
  provider: 'affonso', // 或者 'promotekit'
}

您可以在 联盟营销 文档中了解更多关于联盟营销配置的信息。

支付

配置支付处理服务。payment 部分包含支付提供商设置和价格计划配置：

属性类型描述
enableboolean是否启用支付，默认为 true
provider'stripe'支付处理器（目前仅支持 Stripe）
priceobject价格计划配置（见下文）

示例：

src/config/website.ts
payment: {
  enable: true,
  provider: 'stripe',
  price: {
    plans: {
      // ... 价格计划
    },
  },
}

payment.price.plans 对象中的每个价格计划可以具有以下属性：

属性类型描述
idstring价格计划的唯一标识符
namestring?价格计划的显示名称
descriptionstring?价格计划的描述
featuresstring[]?价格计划包含的功能列表
limitsstring[]?价格计划包含的限制列表
pricesPrice[]价格计划的价格选项列表（月付、年付、一次性等）
isFreeboolean是否为免费价格计划
isLifetimeboolean是否为终身（一次性支付）价格计划
popularboolean?是否将价格计划突出显示为推荐
disabledboolean?是否在 UI 中禁用价格计划

prices 数组包含具有以下结构的对象：

属性类型描述
type'subscription' | 'one_time'支付类型（订阅或一次性）
priceIdstringStripe 价格 ID（不是产品 ID）
amountnumber货币单位的价格金额（以美元为单位）
currencystring货币代码（目前只支持美元）
interval'month' | 'year'?定期付款的计费间隔
trialPeriodDaysnumber?免费试用期天数
allowPromotionCodeboolean?是否允许价格使用促销代码
disabledboolean?是否在 UI 中禁用价格

TanStarter 默认使用三个价格计划：免费计划、专业订阅计划（月付/年付）和终身计划（一次性支付）：

src/config/website.ts
price: {
  plans: {
    free: {
      id: 'free',
      prices: [],
      isFree: true,
      isLifetime: false,
    },
    pro: {
      id: 'pro',
      prices: [
        {
          type: 'subscription',
          priceId: clientEnv.VITE_STRIPE_PRICE_PRO_MONTHLY!,
          amount: 990,
          currency: 'USD',
          interval: 'month',
          trialPeriodDays: 7,
        },
        {
          type: 'subscription',
          priceId: clientEnv.VITE_STRIPE_PRICE_PRO_YEARLY!,
          amount: 9900,
          currency: 'USD',
          interval: 'year',
          trialPeriodDays: 7,
        },
      ],
      isFree: false,
      isLifetime: false,
      popular: true,
    },
    lifetime: {
      id: 'lifetime',
      prices: [
        {
          type: 'one_time',
          priceId: clientEnv.VITE_STRIPE_PRICE_LIFETIME!,
          amount: 19900,
          currency: 'USD',
          allowPromotionCode: true,
        },
      ],
      isFree: false,
      isLifetime: true,
    },
  },
},

何时将价格计划或价格设置为禁用？

  • 当价格计划不再对新客户开放，但您需要为已购买的现有用户保留它时，可将价格计划设置为 disabled: true。

  • 当特定价格不再可用，但该价格的现有订阅者仍应能够在账单页面中看到它时，可将价格设置为 disabled: true。

您可以在 支付 文档中了解更多关于价格配置的信息。

下一步

现在您了解了网站配置，请探索其他相关主题：

导航栏配置

配置头部导航菜单

页脚配置

配置网站页脚的链接

支付集成

配置网站的支付功能

侧边栏配置

配置仪表盘的导航菜单

配置

学习如何配置 TanStarter 模板

导航菜单

配置网站头部的导航菜单

目录

UI
模式
元数据
基本信息
图片
社交媒体
身份认证
博客
邮件
邮件订阅
存储
通知
联盟营销
支付
下一步