LogoMkSaaS文档
网站配置

网站配置

MkSaaS 网站的核心配置

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

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

src/config/website.tsx
export const websiteConfig: WebsiteConfig = {
  ui: {
    // UI 设置
  },
  metadata: {
    // 元数据设置
  },
  features: {
    // 功能设置
  },
  routes: {
    // 路由设置
  },
  analytics: {
    // 分析设置
  },
  auth: {
    // 认证设置
  },
  i18n: {
    // 国际化设置
  },
  blog: {
    // 博客设置
  },
  docs: {
    // 文档设置
  },
  mail: {
    // 邮件设置
  },
  newsletter: {
    // 邮件订阅设置
  },
  storage: {
    // 存储设置
  },
  payment: {
    // 支付设置
  },
  price: {
    // 价格设置
  },
  credits: {
    // 积分设置
  },
};

UI

控制您网站的外观和品牌。UI 配置由几个子部分组成：

主题

控制网站的颜色主题：

属性类型描述
defaultTheme'default' | 'blue' | 'green' | 'amber' | 'neutral'设置网站的默认颜色主题
enableSwitchboolean为 true 时，允许用户更改颜色主题

示例：

src/config/website.tsx
metadata: {
  theme: {
    defaultTheme: 'default', // 选择：default、blue、green、amber、neutral
    enableSwitch: true,      // 允许用户切换主题
  },
  // ...
}

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

模式

控制明/暗模式设置：

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

示例：

src/config/website.tsx
metadata: {
  mode: {
    defaultMode: 'system', // 选择：light、dark、system
    enableSwitch: true,    // 允许用户切换模式
  },
  // ...
}

元数据

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

图片

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

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

示例：

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

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

社交媒体

配置社交媒体资料链接：

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

示例：

src/config/website.tsx
metadata: {
  social: {
    github: 'https://github.com/YourOrganization',
    twitter: 'https://twitter.com/YourHandle',
    discord: 'https://discord.gg/your-invitation-code',
    youtube: 'https://youtube.com/@YourChannel',
    // 根据需要添加其他社交平台
  },
  // ...
}

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

功能

为某些情况配置功能，例如是否显示升级卡等：

属性类型描述
enableUpgradeCardboolean是否在后台管理页面显示用户升级卡片，默认为 true
enableUpdateAvatarboolean是否启用更新头像，默认为 true
enableAffonsoAffiliateboolean是否启用 Affonso 联盟，默认为 false
enablePromotekitAffiliateboolean是否启用 Promotekit 联盟，默认为 false
enableDatafastRevenueTrackboolean是否启用 Datafast 收入跟踪，默认为 false
enableCrispChatboolean是否启用 Crisp 聊天，默认为 true
enableTurnstileCaptchaboolean是否启用 Cloudflare Turnstile 验证码，默认为 false

示例：

src/config/website.tsx
features: {
  enableUpgradeCard: true,
  enableUpdateAvatar: true,
  enableAffonsoAffiliate: false,
  enablePromotekitAffiliate: false,
  enableDatafastRevenueTrack: false,
  enableCrispChat: process.env.NEXT_PUBLIC_DEMO_WEBSITE === 'true',
  enableTurnstileCaptcha: process.env.NEXT_PUBLIC_DEMO_WEBSITE === 'true',
}

您可以在 联盟营销、验证码、聊天框 文档中了解更多关于功能配置的信息。

路由

为某些情况配置路由，例如默认登录重定向路由：

属性类型描述
defaultLoginRedirectstring默认登录重定向路由，默认为 /dashboard

示例：

src/config/website.tsx
routes: {
  defaultLoginRedirect: '/settings/profile',
}

统计分析

为网站网站配置统计分析服务：

属性类型描述
enableVercelAnalyticsboolean设置为 true 时，启用 Vercel Web Analytics
enableSpeedInsightsboolean设置为 true 时，启用 Vercel Speed Insights

示例：

src/config/website.tsx
analytics: {
  enableVercelAnalytics: true,  // 启用 Vercel Web Analytics
  enableSpeedInsights: true,    // 启用 Vercel Speed Insights
}

您可以在 统计分析 文档中了解更多关于统计分析服务的信息。

认证

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

属性类型描述
enableGoogleLoginboolean设置为 true 时，启用 Google 登录
enableGithubLoginboolean设置为 true 时，启用 GitHub 登录
enableCredentialLoginboolean设置为 true 时，启用邮箱密码登录

示例：

src/config/website.tsx
auth: {
  enableGoogleLogin: true,  // 允许 Google 登录
  enableGithubLogin: true,  // 允许 GitHub 登录
  enableCredentialLogin: true,  // 允许邮箱密码登录
}

MkSaaS 默认支持多种身份认证服务，您可以使用这些配置选项选择性地禁用特定认证服务：

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

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

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

国际化 (i18n)

为网站配置语言支持：

属性类型描述
defaultLocalestring默认语言区域设置（例如 'en'）
localesRecord<string, { flag?: string; name: string; hreflang?: string }>可用语言及其标志和显示名称

MkSaaS 通过其 i18n 系统支持多种语言。以下是配置方法：

src/config/website.tsx
i18n: {
  defaultLocale: 'en',
  locales: {
    en: {
      flag: '🇺🇸',
      name: 'English',
      hreflang: 'en',
    },
    zh: {
      flag: '🇨🇳',
      name: '中文',
      hreflang: 'zh-CN',
    },
    // 根据需要添加更多语言
  },
}

对于每种支持的语言：

  • 键是区域设置代码（例如 en、es、fr）
  • flag 是可选的表情符号，用于直观地表示语言，若不需要，可以留空
  • name 是语言的本地形式显示名称
  • hreflang 是 hreflang 值用于 SEO，更多详情请参阅 ISO 3166-1 alpha-2

您可以在 国际化 文档中了解更多关于国际化设置的信息。

博客

配置博客功能：

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

示例：

src/config/website.tsx
blog: {
  enable: true,
  paginationSize: 6,
  relatedPostsSize: 3,
}

如果不需要博客功能，可以将 enable 设置为 false。如果禁用博客功能，博客菜单将不会显示在导航栏和页脚中，并且博客相关页面将不会包含在 sitemap 中。

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

文档

配置文档功能：

属性类型描述
enableboolean是否启用文档，默认为 true

示例：

src/config/website.tsx
docs: {
  enable: true,
}

如果不需要文档功能，可以将 enable 设置为 false。如果禁用文档功能，文档菜单将不会显示在导航栏和页脚中，并且文档相关页面将不会包含在 sitemap 中。

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

邮件

配置邮件服务：

属性类型描述
provider'resend'邮件服务提供商（目前仅支持 Resend）
fromEmailstring用于发送和接收邮件的联系邮箱

示例：

mail: {
  provider: 'resend',
  fromEmail: 'contact@example.com',
}

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

邮件订阅

配置邮件订阅服务：

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

示例：

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

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

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

存储

配置文件存储：

属性类型描述
enableboolean是否启用存储，默认为 true
provider's3'存储提供商（目前仅支持 S3）

示例：

src/config/website.tsx
storage: {
  enable: true,
  provider: 's3',
}

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

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

支付

配置支付处理服务：

属性类型描述
provider'stripe'支付处理器（目前仅支持 Stripe）

示例：

src/config/website.tsx
payment: {
  provider: 'stripe',
}

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

价格

配置价格计划：

属性类型描述
plansRecord<string, PricePlan>价格计划配置

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

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

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

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

credits 对象的结构：

属性类型描述
enableboolean是否启用积分
amountnumber积分数量
expireDaysnumber?积分过期期限（天数），可选

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

src/config/website.tsx
price: {
  plans: {
    free: {
      id: 'free',
      prices: [],
      isFree: true,
      isLifetime: false,
      credits: {
        enable: true,
        amount: 50,
        expireDays: 30,
      },
    },
    pro: {
      id: 'pro',
      prices: [
        {
          type: PaymentTypes.SUBSCRIPTION,
          priceId: process.env.NEXT_PUBLIC_STRIPE_PRICE_PRO_MONTHLY!,
          amount: 990,
          currency: 'USD',
          interval: PlanIntervals.MONTH,
        },
        {
          type: PaymentTypes.SUBSCRIPTION,
          priceId: process.env.NEXT_PUBLIC_STRIPE_PRICE_PRO_YEARLY!,
          amount: 9900,
          currency: 'USD',
          interval: PlanIntervals.YEAR,
        },
      ],
      isFree: false,
      isLifetime: false,
      popular: true,
      credits: {
        enable: true,
        amount: 1000,
        expireDays: 30,
      },
    },
    lifetime: {
      id: 'lifetime',
      prices: [
        {
          type: PaymentTypes.ONE_TIME,
          priceId: process.env.NEXT_PUBLIC_STRIPE_PRICE_LIFETIME!,
          amount: 19900,
          currency: 'USD',
          allowPromotionCode: true,
        },
      ],
      isFree: false,
      isLifetime: true,
      credits: {
        enable: true,
        amount: 1000,
        expireDays: 30,
      },
    },
  },
},

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

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

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

向用户显示价格计划时，价格配置 通过翻译内容（如名称、描述和功能列表）来显示这些价格计划。

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

积分

为网站配置积分系统：

属性类型描述
enableCreditsboolean是否启用积分系统
enablePackagesForFreePlanboolean免费计划用户是否可以购买积分（默认情况下，只有付费用户可以购买额外的积分套餐）
registerGiftCreditsobject注册赠送积分的配置
packagesRecord<string, CreditPackage>可购买的积分套餐

registerGiftCredits 对象的结构：

属性类型描述
enableboolean是否启用注册赠送积分
creditsnumber注册时赠送的积分数量
expireDaysnumber?赠送积分的过期期限（天数），可选

packages 中每个积分套餐的结构：

属性类型描述
idstring套餐的唯一标识符
namestring?套餐的显示名称
descriptionstring?套餐的描述
popularboolean?是否将此套餐突出显示为推荐
creditsnumber套餐包含的积分数量
priceobject价格信息，包括 priceId、金额、货币、是否允许使用促销代码
expireDaysnumber?积分的有效期（天数），可选，undefined 表示不过期
disabledboolean?是否在 UI 中禁用此套餐，可选

示例：

src/config/website.tsx
credits: {
  enableCredits: false,
  enablePackagesForFreePlan: false,
  registerGiftCredits: {
    enable: true,
    credits: 50,
    expireDays: 30,
  },
  packages: {
    basic: {
      id: 'basic',
      popular: false,
      credits: 100,
      expireDays: 30,
      price: {
        priceId: process.env.NEXT_PUBLIC_STRIPE_PRICE_CREDITS_BASIC!,
        amount: 990,
        currency: 'USD',
        allowPromotionCode: true,
      },
    },
    // ... 其他积分套餐 ...
  },
},

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

视频教程

下一步

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

导航栏配置

配置头部导航菜单

页脚配置

配置网站页脚的链接

支付集成

配置网站的支付功能

价格配置

配置订阅计划和定价

配置

学习如何配置MkSaaS 模板

导航菜单

配置网站头部的导航菜单