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

前端安装教程

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

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

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

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群组链接，不填写则不显示按钮
  telegramGroup: 'https://t.me/malaTheme',

  //TelegramBot名称，不要写@，例如 pmzhizhi_bot
  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图片链接
  logo: 'https://cdn-fusion.imgcdn.store/i/2024/ljdqRrWY901to3eH.png',

  // 提现金额配置
  withdrawal: {
    // 最小提现金额（单位：元）
    minAmount: 100
  },

  //开发者模式，默认关闭
  developerMode: true,

  //开关是否显示右下角购买套餐按钮，可选值：true, false
  showBuyNow: true,

  //底部版权信息
  copyright: '© 2024 MALA-Pro',

  //流量消耗和到期提醒配置
  traffic: {
    lowTrafficPercent: 101, // 低于10%时显示流量警告
    expiryDays: 700 // 到期前7天显示到期提醒
  },

  //增加配置来确认是否是wyx2685版本，可选值：true, false
  wyx2685: true,

  //用来配置人机验证使用Google Recaptcha还是Cloudflare Turnstile
  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, // 是否只对有效套餐用户显示
  },

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

  // 注册登录页提示语配置
  permanentSite: {
    url: 'https://google.com',
    urltext: 'google.com',
    text: '永久官网【',
    suffix: '】保存防丢'
  },

  // 快捷充值金额配置
  quickRechargeAmounts: [50, 100, 200, 500, 100, 200, 500, 100, 200, 500, 100, 200, 500],

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

  // 路由模式配置
  router: {
    mode: 'history' // 可选值: "hash", "history"
  },
};

文档中心按钮配置

一键复制按钮

<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>