Refactor and add configuration and instructions for sponsor

This commit is contained in:
PrinOrange
2023-12-30 19:49:53 +08:00
parent 5019f1d968
commit c3e685c4d0
5 changed files with 61 additions and 19 deletions

View File

@@ -177,6 +177,26 @@ npm run build:turbo
本站支持 RSS Feed 2.0,每次构建网站时均自动生成 RSS 链接。每次 RSS Feed 推送的文章与首页的最新文章一致。当然你可可以通过 `./data/config.ts` 中的 `RSSFeed.enabled` 项来选择是否启用。
#### 赞助渠道
博客网站的 `/sponsor` 页面用于展示赞助渠道、赞助说明。可以在 [`./data/config.ts`](./data/config.ts) 中的 `Sponsor` 项来配置。博客网站目前支持的的赞助渠道有四个微信支付、支付宝、Paypal 和 Patreon 。
你可以看到如下的配置项:
```typescript
Sponsor: {
WechatPayQRCodeContent: "wxp://xxxxxxxxxxxxxxxxx",
AlipayLink: "https://qr.alipay.com/xxxx",
PaypalId: "xxxx",
PatreonId: "xxxx",
},
```
- 如果你需要开通微信支付的赞助渠道,你可以先保存你的微信收款码,然后再使用二维码解码器,以纯文本的解码方式读取微信收款码的字符串内容,然后你会得到类似 `wxp://xxxxxxxxxxxxxxxxx` 的字符串,再输入到 `WechatPayQRCodeContent` 项中。
- 如果你需要开通支付宝的赞助渠道,同上,可以用二维码解码器的纯文本模式解码支付宝的收款码,然后你会得到类似 `https://qr.alipay.com/xxxx` 的支付宝链接,输入即可。
- 对于 Paypal 赞助渠道,输入你的 Paypal ID 即可。
- 对于 Patreon 赞助渠道,输入你的 Patreon ID 即可。
#### 评论系统
本网站使用 Giscus 作为评论系统。具体配置方法请看这里。它要求每一个评论者都要使用自己的 Github 账号。当然,你也可以使用其他的评论系统,比如 Disqus 。

View File

@@ -180,6 +180,28 @@ I recommend using **PicGO** tool to set up your own image hosting. [You can clic
This site supports RSS Feed 2.0 and automatically generates an RSS link with each website build. The articles pushed in the RSS Feed are consistent with the latest articles on the homepage. Of course, you can choose whether to enable it or not through the `RSSFeed.enabled` option in `./data/config.ts`.
#### Sponsor Methods
The `/sponsor` page on the blog website is where we showcase our sponsorship channels and provide sponsorship details. You can configure this in the `Sponsor` section of [`./data/config.ts`](./data/config.ts). Currently, our blog website supports four sponsorship channels: WeChat Pay, Alipay, Paypal, and Patreon.
**Note:** WeChat Pay and Alipay are mainly for users in mainland China. If you are not a resident of mainland China or if WeChat Pay and Alipay are not commonly used in your local area, you can ignore the configuration for WeChat Pay and Alipay.
You can find the following configuration options:
```typescript
Sponsor: {
WechatPayQRCodeContent: "wxp://xxxxxxxxxxxxxxxxx",
AlipayLink: "https://qr.alipay.com/xxxx",
PaypalId: "xxxx",
PatreonId: "xxxx",
},
```
- To set up WeChat Pay as a sponsorship option, first save your WeChat payment QR code. Then use a QR code decoder to read the QR code's content in plain text format. You'll get a string that looks something like `wxp://xxxxxxxxxxxxxxxxx`. Enter this string into the `WechatPayQRCodeContent` field.
- For Alipay sponsorship, similarly, use a QR code decoder in plain text mode to decode the Alipay payment code. You will obtain a link similar to `https://qr.alipay.com/xxxx`, which you can input.
- For Paypal sponsorship, simply input your Paypal ID.
- For Patreon sponsorship, input your Patreon ID.
#### Comment System
This website utilizes Giscus as the comment system. For specific configuration instructions, please refer to this [link](https://giscus.app/). It requires each commenter to use their own GitHub account. Of course, you can also opt for other comment systems like Disqus.

View File

@@ -46,14 +46,14 @@ export const Config: TConfig = {
// The supported sponsor ways are wechat-pay, alipay and paypal.
Sponsor: {
// Your WechatPay QRCode Content.
wechatPay: "",
// Your Alipay Link.
alipay: "https://qr.alipay.com/xxxx",
// Your Paypal Account Link.
paypal: "https://paypal.me/xxxx",
// Your WechatPay QRCode content.
WechatPayQRCodeContent: "wxp://xxxxxxxxxxxxxxxxx",
// Your Alipay link.
AlipayLink: "https://qr.alipay.com/xxxx",
// Your Paypal user Id.
PaypalId: "terminels",
// Your Patreon user Id.
patreon: "xxxx",
PatreonId: "xxxx",
},
// Website establishment year.

View File

@@ -45,7 +45,7 @@ export default function AboutPage() {
</div>
<div className="md:px-15 md:w-1/2">
<div className="mx-2 my-10 flex flex-col justify-around font-bold">
{!isEmptyString(Config.Sponsor?.wechatPay) && (
{!isEmptyString(Config.Sponsor?.WechatPayQRCodeContent) && (
<div className="my-3 flex justify-between">
<div className="my-auto flex">
<SiWechat className="mx-3 my-auto text-4xl text-green-500" />
@@ -54,12 +54,12 @@ export default function AboutPage() {
</div>
</div>
<div className="my-2 bg-white p-1">
<QRCodeSVG width={120} value={Config.Sponsor?.wechatPay!} />
<QRCodeSVG width={120} value={Config.Sponsor?.WechatPayQRCodeContent!} />
</div>
</div>
)}
<hr />
{!isEmptyString(Config.Sponsor?.alipay) && (
{!isEmptyString(Config.Sponsor?.AlipayLink) && (
<div className="my-6 flex justify-between">
<div className="my-auto flex">
<SiAlipay className="mx-3 my-auto text-4xl text-blue-500" />
@@ -69,7 +69,7 @@ export default function AboutPage() {
</div>
<div className="my-2">
<Button className="my-auto" asChild>
<Link target="_blank" href={Config.Sponsor?.alipay!}>
<Link target="_blank" href={Config.Sponsor?.AlipayLink!}>
{"DONATE"}
</Link>
</Button>
@@ -77,7 +77,7 @@ export default function AboutPage() {
</div>
)}
<hr />
{!isEmptyString(Config.Sponsor?.paypal) && (
{!isEmptyString(Config.Sponsor?.PaypalId) && (
<div className="my-6 flex justify-between">
<div className="my-auto flex">
<FaCcPaypal className="mx-3 my-auto text-4xl text-blue-600" />
@@ -87,7 +87,7 @@ export default function AboutPage() {
</div>
<div className="my-2">
<Button className="my-auto" asChild>
<Link target="_blank" href={Config.Sponsor?.paypal!}>
<Link target="_blank" href={`https://paypal.me/${Config.Sponsor?.PaypalId}`}>
{"DONATE"}
</Link>
</Button>
@@ -95,7 +95,7 @@ export default function AboutPage() {
</div>
)}
<hr />
{!isEmptyString(Config.Sponsor?.patreon) && (
{!isEmptyString(Config.Sponsor?.PatreonId) && (
<div className="my-6 flex justify-between">
<div className="my-auto flex">
<SiPatreon className="mx-3 my-auto text-4xl text-gray-500" />
@@ -105,7 +105,7 @@ export default function AboutPage() {
</div>
<div className="my-2">
<Button className="my-auto" asChild>
<Link target="_blank" href={`https://patreon.com/${Config.Sponsor?.patreon}`}>
<Link target="_blank" href={`https://patreon.com/${Config.Sponsor?.PatreonId}`}>
{"DONATE"}
</Link>
</Button>

View File

@@ -33,10 +33,10 @@ export type TConfig = {
};
Sponsor?: {
wechatPay?: string;
alipay?: string;
paypal?: string;
patreon?: string;
WechatPayQRCodeContent?: `wxp://${string}`;
AlipayLink?: `https://qr.alipay.com/${string}`;
PaypalId?: string;
PatreonId?: string;
};
YearStart: number;