在安装前端之前，您需要先安装后端

前端安装教程

前端不限制任何域名，任意域名都可以

在宝塔新建网站，上传主题文件压缩包并解压。

在网站配置里面，添加伪静态规则

location / {
    try_files $uri $uri/ /index.html;
}

主题文件配置文件为 mala-pro.js，其中写有注释和配置方法，如有疑问请联系我。

套餐详情配置示例

[
  {
    "feature": "流量: 200GB 丨每月订单日重置",
    "support": true
  },
  {
    "feature": "高达500Mbps速率，不限制每日用量",
    "support": true
  },
  {
    "feature": "最多5台设备同时使用",
    "support": true
  },
  {
    "feature": "节点: 台湾[自营机房], 香港, 日本, 新加坡, 美国, 德国, 荷兰, 芬兰",
    "support": true
  },
  {
    "feature": "解锁: Netflix, Disney+, ChatGPT, MyTVSuper, HBO, BiliBili, Bahamut等",
    "support": true
  },
  {
    "feature": "禁止共享他人 | 禁止bt下载",
    "support": false
  }
]

公告标签示例

当你的公告标签为下方关键词时，会自动应用主题样式

节日 故障 紧急 更新 活动 优惠 维护 新功能 公告

主题全部可配置项

window.APP_CONFIG = {
  // 网站主标题名称
  siteName: '加速器',
  // 首页顶部促销活动标题文案
  promotionTitle: '新版发布优惠限时进行中！',

  // Telegram官方群组完整URL，留空则不显示群组入口按钮
  telegramGroup: 'https://t.me/malaTheme',

  // Telegram机器人用户名（请勿包含@符号）
  telegramBotName: 'pmzhizhi_bot',

  // 多平台客户端安装包下载链接配置
  downloadLinks: {
    android: 'https://example.com/download/android',
    ios: 'https://example.com/download/ios',
    windows: 'https://example.com/download/windows',
    mac: 'https://example.com/download/mac'
  },

  // 网站LOGO图片的CDN链接地址（用于优化加载性能）
  logo: 'https://cdn-fusion.imgcdn.store/i/2024/ljdqRrWY901to3eH.png',

  // 用户提现相关配置参数
  withdrawal: {
    // 单次最低提现金额限制（人民币/元）
    minAmount: 100
  },

  // 开发者调试模式开关（true=启用，false=关闭）
  developerMode: true,

  // 控制右下角快捷购买按钮的显示状态（true=显示，false=隐藏）
  showBuyNow: true,

  // 网站底部版权声明文本
  copyright: '© 2024 MALA-Pro',

  // 用户流量和套餐有效期预警配置
  traffic: {
    // 剩余流量低于该百分比时触发警告提示（取值范围：0-100）
    lowTrafficPercent: 101,
    // 套餐到期前多少天开始显示到期提醒（单位：天）
    expiryDays: 700
  },

  // WYX2685特殊版本标识开关（true=启用特殊功能，false=使用标准版本）
  wyx2685: true,

  // 人机验证服务提供商选择
  captchaService: 'GoogleRecaptcha', // 可用选项: "GoogleRecaptcha"或"CloudflareTurnstile"

  // 网站界面主题样式设置
  theme: 'LightTheme6',
  // 支持的主题列表: "DefaultTheme", "LightTheme1", "LightTheme2", "LightTheme3", 
  // "LightTheme4", "LightTheme5", "LightTheme6", "LightTheme7", "LightTheme8"

  // 应用显示控制配置
  appDisplay: {
    Shadowrocket: true,
    QuantumultX: true,
    Surge: true,
    Stash: true,
    Loon: true,
    Surfboard: true,
    SingBox: true,
    Clash: true,
    V2rayN: true,
    V2rayNG: true,
    ClashMeta: true
  },

  // 自定义邀请链接配置
  inviteLinks: [
    'https://01.mala.pro.yuzaimala.store/register?code=',
    'https://02.mala.pro.yuzaimala.store/register?code='
  ],

  // 支付相关配置
  payment: {
    // 控制不同支付方式的二维码显示
    qrcodeDisplay: {
      alipay: true,    // 支付宝是否显示二维码
      wechat: true,    // 微信支付是否显示二维码
      usdt: false      // USDT是否显示二维码
    }
  },

  // 支付相关文案配置
  paymentText: {
    // 支付二维码提示文案，换行请使用 \n
    qrcodeReady: '支付地址已准备就绪，您可以扫描二维码或点击确认按钮在新窗口中打开支付页面。',
    // 移动端支付提示文案
    mobileReady: '点击确认按钮将打开支付页面。',
    // 支付失败提示文案
    failed: '获取支付地址失败,请重试。',
    // 确认按钮文案
    confirmButton: '单独打开付款页面'
  },

  //apple账号页面开关和地址，推荐托管在 https://idunlock.cfd/ 
  appleId: {
    show: true, // 是否显示apple账号页面
    url: './533212.json', // 分享链接，例如 https://id.idunlock.cfd/shareapi/5641321231
    onlyForValidSubscription: true, // 是否只对有效套餐用户显示
    tutorialLink: 'https://example.com/tutorial' // 教程地址链接
  },

  //佣金发放规则和提示语还有例子
  commission: {
    loopDistribution: false, // 是否循环发放，如果为false，则只发放一次
    confirmationTime: 7, // 佣金确认时间为7天
    showDetails: true, // 是否显示佣金明细
    showRules: false, // 是否显示佣金发放规则，如果关闭，则不显示循环发放或单次发放
  },

  // 注册登录页提示语配置，如不需要，请清空内容
  permanentSite: {
    url: 'https://google.com',
    urltext: 'google.com',
    text: '永久官网【',
    suffix: '】保存防丢'
  },

  // 快捷充值金额和赠送金额配置，amount为充值金额，bonus为赠送金额，如果不赠送，请设置bonus为0
  quickRechargeAmounts: [
    { amount: 50, bonus: 0 },
    { amount: 100, bonus: 20 },
    { amount: 200, bonus: 50 },
    { amount: 500, bonus: 100 }
  ],

  //配置支付方式显示方式，可选横排和下拉框
  paymentMethodDisplay: 'dropdown', // 可选值: "horizontal", "dropdown"

  // 路由模式配置，不懂请不要修改，同属开发者配置
  router: {
    mode: 'history' // 可选值: "hash", "history"
  },

  // 确认更换套餐文案
  confirmChangeText: '您当前的套餐为：{{ currentPlan?.title }}，正在订购{{ selectedPlan?.title }}，会覆盖当前套餐且不会退款。是否继续？',

  // 布局配置，推荐使用默认值
  layout: {
    menuDirection: 'vertical', // 菜单方向，可选值: "vertical" 或 "horizontal"
    containerType: 'boxed',    // 容器类型，可选值: "boxed" 或 "fluid"
    inputBackground: false,     // 输入框背景配置，false = 无背景（推荐），true = 有背景
  },
};

文档中心按钮配置

一键复制按钮

<button type="button" class="v-btn v-btn--elevated v-theme--DefaultTheme bg-primary v-btn--density-default rounded-md v-btn--size-default v-btn--variant-elevated">
    <span class="v-btn__overlay"></span>
    <span class="v-btn__underlay"></span>
    <span class="v-btn__content" data-no-activator="" data-text="{{subscribeUrl}}">点击复制订阅地址</span>
</button>

打开链接按钮

<a href="https://1111.com/" target="view_window">
            <button class="v-btn v-btn--elevated v-theme--DefaultTheme bg-primary v-btn--density-default rounded-md v-btn--size-default v-btn--variant-elevated">
                <span class="v-btn__overlay"></span>
                <span class="v-btn__underlay"></span>
                <span class="v-btn__content"><svg class="pc-icon me-2" style="width: 16px; height: 16px;"><use xlink:href="/assets/svg/sprite.svg#custom-link1"></use></svg>1. 点我购买已购 Shadowrocket 应用的 Apple ID</span>
            </button>
        </a>

一键订阅按钮

占位符：
{{ShadowrocketSubscribeUrl}}
{{QuantumultXSubscribeUrl}}
{{SurgeSubscribeUrl}}
{{SurfboardSubscribeUrl}}
{{StashSubscribeUrl}}
{{SingBoxSubscribeUrl}}
{{ClashSubscribeUrl}}
{{ClashMetaSubscribeUrl}}
{{LoonSubscribeUrl}}

您可以通过替换占位符，来实现点击按钮一键导入订阅，最佳配置如下：

<a href="{{ShadowrocketSubscribeUrl}}">
            <button class="v-btn v-btn--elevated v-theme--DefaultTheme bg-primary v-btn--density-default rounded-md v-btn--size-default v-btn--variant-elevated">
                <span class="v-btn__overlay"></span>
                <span class="v-btn__underlay"></span>
                <span class="v-btn__content"><i class="fa fa-share mr-1"></i>点击导入到 Shadowrocket</span>
            </button>
        </a>

支付时跳回发起原站

查看这篇文档