🏗️ Finish post reward widget coding.

assets/css/_common/components/post/post-followme.scss

@@ -1,7 +1,7 @@
 @if $follow_me {
   .followme {
     color: $grey;
-    padding: 1em 1.5em;
+    /* padding: 1em 1.5em; */
     text-align: center;
     @include post-card();
     border-left: none;

assets/css/_common/components/post/post-reward.scss

@@ -3,6 +3,11 @@
   padding: 1em 0;
   text-align: center;
 
+  div>i {
+    font-size: 1.85em;
+    margin-right: 4px;
+  }
+
   button {
     @include button($sidebar-highlight);
     border: 2px solid $sidebar-highlight;
@@ -21,7 +26,7 @@
     display: block;
   }
 
-  div {
+  .post-reward-item {
     display: inline-block;
 
     span {
@@ -29,19 +34,23 @@
     }
 
     @if $reward_settings_animation {
+       
       &:hover span {
         animation: next-roll .1s infinite linear;
         // The animation may affect :hover of img in dark mode
         pointer-events: none;
       }
+      
     }  
   }
 
   img {
     display: inline-block;
-    margin: .8em 2em 0;
+    margin: .8em 1.2em;
     max-width: 100%;
     width: 180px;
+    border: #eee 1px solid;
+    box-shadow:rgba(0,0,0,0.2) 0 1px 5px 0px;
   }
 }
 

exampleSite/config.yaml

@@ -339,13 +339,13 @@ params:
   # Front-matter variable (nonsupport animation).
   rewardSets:
     # If true, a donate button will be displayed in every article by default.
-    enable: false
-    animation: false
-    #comment: Buy me a coffee
+    enable: true
+    animation: true
+    comment: '<i class="fa-solid fa-mug-hot"></i>请我喝杯咖啡吧 ヾ(^▽^*)))'
 
   reward:
-    #wechatpay: /images/wechatpay.png
-    #alipay: /images/alipay.png
+    wechatpay: /imgs/wechat-pay.png
+    alipay: /imgs/ali-pay.png
     #paypal: /images/paypal.png
     #bitcoin: /images/bitcoin.png
 

i18n/en-us.yaml

@@ -71,6 +71,17 @@ PostCRLicenseContent:
 PostFollowMe:
   other: Welcome to my other publishing channels
 
+RewardDonate:
+  other: Donate
+RewardWechatpay:
+  other: Wechat Pay
+RewardAlipay:
+  other: Alipay
+RewardPaypal:
+  other: PayPal
+RewardBitcoin:
+  other: Bitcoin
+
 VisitorsLabel:
   other: Total Visitors
 PageViewsLabel:

i18n/zh-cn.yaml

@@ -73,6 +73,17 @@ PostCRLicenseContent:
 PostFollowMe:
   other: 欢迎关注我的其它发布渠道
 
+RewardDonate:
+  other: 赞赏
+RewardWechatpay:
+  other: 微信
+RewardAlipay:
+  other: 支付宝
+RewardPaypal:
+  other: PayPal
+RewardBitcoin:
+  other: 比特币
+
 UserVistorsLabel:
   other: 总访客量
 PageViewsLabel:

layouts/partials/post/post_footer.html

@@ -9,8 +9,9 @@
 {{- end }}
 <div class="post-eof"></div>
 {{- else }}
-{{ partial "post/post_copyright.html" . }}
-{{ partial "post/post_followme.html" . }}
+{{ partial "post/post_footer/post_reward.html" . }}
+{{ partial "post/post_footer/post_copyright.html" . }}
+{{ partial "post/post_footer/post_followme.html" . }}
 <div class="post-nav">
   <div class="post-nav-next post-nav-item">
     {{- with .NextInSection }}

layouts/partials/post/post_footer/post_reward.html

@@ -0,0 +1,21 @@
+{{- with .Site.Params.rewardSets }}
+{{- if .enable }}
+<div class="reward-container">
+  <div>{{- .comment | safeHTML -}}</div>
+  <button>
+    {{- T "RewardDonate" -}}
+  </button>
+  <div class="post-reward">
+    {{- range $name,$img := $.Site.Params.reward }}
+    {{- $fw := substr $name 0 1  }}
+    {{- $pay := replace $name $fw ($fw | upper) 1 }}
+    {{- $payName := T (printf "Reward%s" $pay) }}
+    <div class="post-reward-item">
+      <img src="{{ $img }}" alt="{{ $.Site.Params.author }} - {{ $payName }}">
+      <span>{{ $payName }}</span>
+    </div>
+    {{- end }}
+  </div>
+</div>
+{{- end }}
+{{- end }}