MALA-Pro 主题前端安装文档
在安装前端之前，您需要先安装后端
前端安装教程
前端不限制任何域名，任意域名都可以
在宝塔新建网站，上传主题文件压缩包并解压。
在网站配置里面，添加伪静态规则
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>支付时跳回发起原站
查看这篇文档
License:
私有