配置

merger 的配置十分简单。通常来说,你只要修改 merger.html 里面的 Config Section 即可配置你自己的 merger 页面。

在 GitHub.com 上浏览 Config Section

Config Section 内,每一个变量都会有详细的英文注释帮助你的配置。如果无法阅读,你依然可以参照本页面。

Config Section 所使用的 Javascirpt 代码里,每一配置都需要以半角分号 ; 结尾。如果缺少或者填入了错误的分号,如全角分号 Config Section 将无法运作。

Config Section 的格式为:var something = "something_actual" (定义 某物 = 实际值)。同样地,请勿忽略等于号 = 前后的空格以及 something_acutal 前后的半角双引号 " "

配置用途

Config Section 内,你需要首先定义 merger 的用途。

目前,我们提供两种用途:payment(付款)和 donate(捐款)。

1
2
var usage = "payment";
// var usage = "donate";

提供这些变量是为了方便地标示页面的用途,例如:有人希望为博客的打赏通道创建一个 merger,此时就可以用 “donate” 变量;而有人希望为售卖的商品设立一个 merger 付款通道,此时就可以使用 “payment” 变量。

当不同的变量被设置,页面的显示文字也会随之改变。若 “多语言” 功能被禁用,此功能也会变为不可用。

配置支付链接

Config Section 中,你需要定义自己的收款链接 - 将以下内容修改为自己的:

1
2
3
4
var wechat = "wxp://f2f0xFuBE5tqPeKuwZxWkpE0CBf4-GkfwdpN";
var alipay = "https://qr.alipay.com/fkx01299q4zug8xxsp2vc0a?t=1545238142543";
var tenpay = "https://i.qianbao.qq.com/wallet/sqrcode.htm?m=tenpay&f=wallet&a=1&ac=26E3D12F23952F04A9553D36B31F18BC3AEA141B073F9DD9BC3747C823819645&u=1031092401&n=惶心";
var paypal = "https://paypal.me/hxco";

下列表格解释了各个变量的含义。

变量 代表 官方网站 链接样式 链接获取方式
wechat 微信 / 微信支付 https://weixin.qq.com wxp://{personalised-content} 解码支付二维码
alipay 支付宝 / 支付宝 https://www.alipay.com https://qr.alipay.com/{personalised-content} 解码支付二维码
tenpay 腾讯 QQ / QQ 钱包 https://im.qq.com https://i.qianbao.qq.com/{personalised-content} 解码支付二维码
paypal Paypal / 贝宝 https://www.paypal.com https://paypal.me/{username} 网页端获取

对于需要解码支付二维码获取支付链接的应用,请在应用内显示你的支付二维码,用内置保存功能 / 屏幕截图获取该二维码,随后使用二维码解码应用即可获取支付链接;你可以从搜索引擎获取一些二维码解码程序:

对于 Paypal,你需要到 https://paypal.me 生成个人支付链接。

!> 如果你没有,或者不想展示以上四个收款方式的任意一个 / 数个,你可以删除或留空相应的变量。

如:我没有支付宝,且不希望展示我的 Paypal 收款地址:

1
2
3
4
var wechat = "wxp://f2f0xFuBE5tqPeKuwZxWkpE0CBf4-GkfwdpN";
// Alipay removed
var tenpay = "https://i.qianbao.qq.com/wallet/sqrcode.htm?m=tenpay&f=wallet&a=1&ac=26E3D12F23952F04A9553D36B31F18BC3AEA141B073F9DD9BC3747C823819645&u=1031092401&n=惶心";
var paypal = ""; // Leave paypal to blank

!> 在没有设置任何有效付款方式时,浏览器 console 会显示一个红色的错误信息,而此时用户会被提示 “目前没有可用的支付方式”。

配置昵称和头像地址

Config Section 下一部分需要填入昵称和头像地址。这部分如下所示:

1
2
3
// Replace with your id and profile photo link ↓.
var myname = "惶心";
var profile = "https://ae01.alicdn.com/kf/UTB8R57Nn0nJXKJkSaiyq6AhwXXak.jpg";

var myname = "xxx" 部分需要填入你喜欢的任意昵称。
var profile = "xxx" 部分需要填入你喜欢的头像的地址。如果你不知道怎么做,最简单的方式是将图片上传至图床,如 https://sm.ms,然后填入图床返回的地址,如:

1
var profile = "https://i.loli.net/2019/04/10/5cad38f6e8694.png";

!> 为了保证尽可能高的可用性,除非有绝对自信,否则不推荐自主托管头像图片文件。

?> 至此,你已经配置完成所有必要变量。

动态页面标题

Merger 支持动态页面标题。此功能会将你于上方设置的昵称嵌入于页面标题中,让用户清晰地知道付款对象。

同时,branding 变量会自动在标题后加入 | Merger 后缀,说明此页面由 merger 驱动。但是,你可以自由选择是否显示这个后缀。将 branding 变量设置为 false 以禁用添加后缀。

1
2
var branding = false; // Disable branding
// var branding = true;

多语言

Merger 支持多语言用户界面。此功能会检测用户的浏览器语言,从而以不同的语言显示页面文字(目前支持 简体中文、繁体中文、英语)。

多语言功能需要配置三个变量:myname_hans, myname_hantmyname_eng;分别为于简体中文、繁体中文和英语界面下显示的你的昵称。

你可以分别配置三个变量的内容;若你不希望指定任意语言的内容,将变量内容修改为 myname 即可;例如:var mayname_eng = myname

1
2
3
4
var multilingual = true; // Set variable to false to disable multilingual feature
var myname_hans = myname // Default setting for Chinese Simplified users; change it to a speicify value if needed
var myname_hant = "惶心"; // Choose how you want your name to be displayed for Traditional Chinese users
var myname_eng = "Focus Chen"; // Choose how you want your name to be displayed for English / Non-Chinese users -

?> 你也可以通过设置 var multilingual = false; 以禁用多语言。但是我们并不推荐。

配置引导文字

!> 仅在多语言功能被禁用时,这个部分才会生效

引导文字被用以引导访客进行下一步的操作;例如点击按钮,扫码等等。

默认的引导文字如下,你可以随意自定义:

1
2
var title = "选择你的支付方式";
var subtitle = "跟随进一步的指示以向" + myname + "付款";

二维码接口

Config Section 最后的部分为二维码应用程序接口(API)的选择。

merger 默认从 lrsjng/jquery-qrcode 本地生成所需的二维码,这样能够节省 HTTP 请求数和加快页面加载速度。然而,QQ 手机版无法解码 lrsjng/jquery-qrcode 默认生成 data:image 类型的二维码图片,故此这里仍然需要使用二维码接口(API)生成二维码以供解码。

1
var qrcodeapi = "https://www.zhihu.com/qrcode?url=";

你也可以自由使用你喜爱的接口。

!> 通过非 HTTPS 调用(即 HTTP)的内容不会被加载。

修改 var qrcodeapi = "https://www.zhihu.com/qrcode?url="; 部分即可更换调用的二维码 API。你可以从搜索引擎找到更多的二维码 API:

?> 请注意,一般情况下无需替换二维码 API。此外,替换之前请确保 API 可用。

选择静态文件加载源

merger0.14 版本 为静态资源提供了在 jsDelivr CDN 和本地之间切换的选项。虽然 jsDelivr 毫无疑问在全球范围内都拥有优秀的加载速度,但是在某些特殊情况下使用者也许想要从本地加载静态资源。以下说明了如何切换静态文件加载源。

在 merger.html 的头部 {docsify-ignore}

1
2
3
4
5
6
<!-- Load style files from local -->
<!-- <link rel="stylesheet" href="assets/styles/spectre.css/spectre.min.css">
<link rel="stylesheet" href="assets/styles/style.min.css"> -->

<!-- Load style files from jsDelivr - Default -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/combine/gh/picturepan2/[email protected]/dist/spectre.min.css,gh/hifocus/[email protected]/assets/styles/style.min.css"/>

默认设定为使用 jsDelivr CDN 并且使用了文件合并功能。如果希望从本地加载对应的文件,请注释或者删除这行代码:

1
<link rel="stylesheet" href="https://cdn.jsdelivr.net/combine/gh/hifocus/[email protected]/assets/styles/spectre.css/spectre-modified.min.css,gh/hifocus/[email protected]/assets/styles/style.min.css">

并反向注释(恢复)这两行代码:

1
2
<!-- <link rel="stylesheet" href="assets/styles/spectre.css/spectre-modified.min.css">
<link rel="stylesheet" href="assets/styles/style.css"> -->

最终修改以后的头部如下:

1
2
3
4
5
6
<!-- Load style files from local -->
<link rel="stylesheet" href="assets/styles/spectre.css/spectre-modified.min.css">
<link rel="stylesheet" href="assets/styles/style.css">

<!-- Load style files from jsDelivr - Default -->
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/combine/gh/hifocus/[email protected]/assets/styles/spectre.css/spectre-modified.min.css,gh/hifocus/[email protected]/assets/styles/style.min.css"> -->

在 merger.html 的尾部 {docsify-ignore}

1
2
3
4
5
6
7
8
9
10
<!-- Footer Scripts -->
<!-- Please do not swap orders -->
<!-- Load Javascript files from jsDelivr - Default -->
<script src="https://cdn.jsdelivr.net/combine/gh/hifocus/[email protected]/assets/js/jQuery/jquery.min.js,gh/hifocus/[email protected]/assets/js/jquery-qrcode/jquery-qrcode.min.js,gh/hifocus/[email protected]/assets/js/function.min.js,gh/hifocus/[email protected]/assets/js/font_974919_xgtacm93vxp.min.js"></script>

<!-- Load Javascript files from local -->
<!-- <script src="assets/js/jQuery/jquery.min.js"></script>
<script src="assets/js/jquery-qrcode/jquery-qrcode.min.js"></script>
<script src="assets/js/dev-files/function.original.js"></script>
<script src="assets/js/font_974919_xgtacm93vxp.js"></script> -->

默认设定为使用 jsDelivr CDN 并且使用了文件合并功能。如果希望从本地加载对应的文件,请注释或者删除这行代码:

1
<script src="https://cdn.jsdelivr.net/combine/gh/hifocus/[email protected]/assets/js/jQuery/jquery.min.js,gh/hifocus/[email protected]/assets/js/jquery-qrcode/jquery-qrcode.min.js,gh/hifocus/[email protected]/assets/js/function.min.js,gh/hifocus/[email protected]/assets/js/font_974919_xgtacm93vxp.min.js"></script>

并反向注释(恢复)这两行代码:

1
2
3
4
<!-- <script src="assets/js/jQuery/jquery.min.js"></script>
<script src="assets/js/jquery-qrcode/jquery-qrcode.min.js"></script>
<script src="assets/js/dev-files/function.original.js"></script>
<script src="assets/js/font_974919_xgtacm93vxp.js"></script> -->

最终修改以后的尾部如下:

1
2
3
4
5
6
7
8
9
10
<!-- Footer Scripts -->
<!-- Please do not swap orders -->
<!-- Load Javascript files from jsDelivr - Default -->
<!-- <script src="https://cdn.jsdelivr.net/combine/gh/hifocus/[email protected]/assets/js/jQuery/jquery.min.js,gh/hifocus/[email protected]/assets/js/jquery-qrcode/jquery-qrcode.min.js,gh/hifocus/[email protected]/assets/js/function.min.js,gh/hifocus/[email protected]/assets/js/font_974919_xgtacm93vxp.min.js"></script> -->

<!-- Load Javascript files from local -->
<script src="assets/js/jQuery/jquery.min.js"></script>
<script src="assets/js/jquery-qrcode/jquery-qrcode.min.js"></script>
<script src="assets/js/dev-files/function.original.js"></script>
<script src="assets/js/font_974919_xgtacm93vxp.js"></script>

至此,你已经将 merger 配置完毕。