网站配置

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

ShipSaaS 已为您设置了默认的核心设置，您可以在此文件 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’	设置默认显示模式
enableSwitch	boolean	为 true 时，允许用户在明亮/暗黑模式之间切换

示例：

src/config/website.ts

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

元数据

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

基本信息

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

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

示例：

src/config/website.ts

metadata: {
  name: messages.site.name,
  title: messages.site.title,
  description: messages.site.description,
  // ...
}

图片

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

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

示例：

src/config/website.ts

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

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

社交媒体

配置社交媒体资料链接：

属性	类型	描述
github	string	GitHub 资料或仓库 URL
twitter	string	Twitter/X 资料 URL
blueSky	string	Bluesky 资料 URL
discord	string	Discord 服务器 URL
mastodon	string	Mastodon 资料 URL
linkedin	string	LinkedIn 资料 URL
youtube	string	YouTube 频道 URL
facebook	string	Facebook 页面 URL
instagram	string	Instagram 资料 URL
tiktok	string	TikTok 资料 URL
telegram	string	Telegram 群组或频道 URL

示例：

src/config/website.ts

social: {
  github: 'https://github.com/YourOrganization',
  twitter: 'https://x.com/YourHandle',
  youtube: 'https://youtube.com/@YourChannel',
}

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

身份认证

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

属性	类型	描述
enable	boolean	设置为 true 时，启用认证
enableGoogleLogin	boolean	设置为 true 时，启用 Google 登录
enableCredentialLogin	boolean	设置为 true 时，启用邮箱密码登录
enableDeleteAccount	boolean	设置为 true 时，允许用户删除账户

示例：

src/config/website.ts

auth: {
  enable: true,
  enableGoogleLogin: true,
  enableCredentialLogin: true,
  enableDeleteAccount: true,
}

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

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

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

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

博客

配置博客功能：

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

示例：

src/config/website.ts

blog: {
  enable: true,
  paginationSize: 6,
}

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

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

邮件

配置邮件服务：

属性	类型	描述
enable	boolean	是否启用邮件功能，默认为 true
provider	‘cloudflare’	邮件服务提供商
fromEmail	string	用于发送邮件的联系邮箱
supportEmail	string	用于接收邮件的联系邮箱

示例：

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

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

邮件订阅

配置邮件订阅服务：

属性	类型	描述
enable	boolean	是否启用邮件订阅，默认为 true
provider	‘beehiiv’	邮件订阅服务提供商
autoSubscribeAfterSignUp	boolean	是否在用户注册后自动订阅

示例：

src/config/website.ts

newsletter: {
  enable: true,
  provider: 'beehiiv',
  autoSubscribeAfterSignUp: true,
}

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

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

存储

配置文件存储：

属性	类型	描述
enable	boolean	是否启用存储，默认为 true
provider	‘r2’	存储提供商（目前仅支持 R2）
maxFileSize	number	最大文件大小（字节）
allowedTypes	string[]	允许的文件 MIME 类型
userFilesFolder	string	用户上传文件的文件夹名称

示例：

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。如果禁用存储功能，后台设置界面的更新用户头像功能将不可用。

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

通知

配置通知服务：

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

示例：

src/config/website.ts

notification: {
  enable: true,
  provider: 'discord',
}

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

联盟营销

配置联盟营销设置：

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

示例：

src/config/website.ts

affiliates: {
  enable: true,
  provider: 'affonso', // 或者 'promotekit'
}

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

支付

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

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

示例：

src/config/website.ts

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

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

属性	类型	描述
id	string	价格计划的唯一标识符
name	string?	价格计划的显示名称
description	string?	价格计划的描述
features	string[]?	价格计划包含的功能列表
limits	string[]?	价格计划包含的限制列表
prices	Price[]	价格计划的价格选项列表（月付、年付、一次性等）
isFree	boolean	是否为免费价格计划
isLifetime	boolean	是否为终身（一次性支付）价格计划
popular	boolean?	是否将价格计划突出显示为推荐
disabled	boolean?	是否在 UI 中禁用价格计划

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

属性	类型	描述
type	‘subscription’ \| ‘one_time’	支付类型（订阅或一次性）
priceId	string	Stripe 价格 ID（不是产品 ID）
amount	number	货币单位的价格金额（以美元为单位）
currency	string	货币代码（目前只支持美元）
interval	‘month’ \| ‘year’?	定期付款的计费间隔
trialPeriodDays	number?	免费试用期天数
allowPromotionCode	boolean?	是否允许价格使用促销代码
disabled	boolean?	是否在 UI 中禁用价格

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

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。

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

下一步

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

导航栏配置 - 配置头部导航菜单
页脚配置 - 配置网站页脚的链接
支付集成 - 配置网站的支付功能
侧边栏配置 - 配置仪表盘的导航菜单
配置
导航菜单