added 打赏效果

hugo.toml

@@ -206,6 +206,14 @@ hasCJKLanguage = true
 
 
 
+  # ----------------------------------------------------------------------------
+  # 打赏配置 (Reward Configuration)
+  # ----------------------------------------------------------------------------
+  [params.reward]
+    enable = true
+    wechat = "/image/reward/wechat.jpg"
+    alipay = "/image/reward/alipay.jpg"
+
   # ----------------------------------------------------------------------------
   # 样式定制 (Style Customization)
   # ----------------------------------------------------------------------------

themes/Ying/assets/css/main.css

@@ -4720,3 +4720,219 @@ html[data-theme="light"] .atk-loading-spinner svg circle {
 }
 
 
+
+/* Reward System */
+.reward-container {
+    text-align: center;
+    margin: 0px auto;
+    position: relative;
+    z-index: 10;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    clear: both;
+}
+
+.reward-btn {
+    background: transparent;
+    color: #444;
+    border: 1px solid #ccc;
+    padding: 2px 20px;
+    border-radius: 50px;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    box-shadow: none;
+    font-weight: 500;
+    margin-left: 0;
+}
+
+.reward-btn:hover {
+    border-color: #000;
+    color: #000;
+    background: rgba(0,0,0,0.03);
+    transform: translateY(-1px);
+}
+
+[data-theme='dark'] .reward-btn {
+    border-color: rgba(255,255,255,0.3);
+    color: #ccc;
+}
+
+[data-theme='dark'] .reward-btn:hover {
+    border-color: #fff;
+    color: #fff;
+    background: rgba(255,255,255,0.08);
+}
+
+.reward-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0,0,0,0.6);
+    z-index: 9999;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease;
+}
+
+.reward-modal.show {
+    opacity: 1;
+    visibility: visible;
+}
+
+.reward-content {
+    background: #ffffff;
+    padding: 48px 40px;
+    border-radius: 24px;
+    position: relative;
+    max-width: 90%;
+    width: 480px;
+    transform: scale(0.95) translateY(10px);
+    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    text-align: center;
+    border: none;
+}
+
+.reward-modal.show .reward-content {
+    transform: scale(1) translateY(0);
+}
+
+[data-theme='dark'] .reward-content {
+    background: #1a1a1a;
+    color: #fff;
+    border: 1px solid #333;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+}
+
+.reward-close {
+    position: absolute;
+    top: 15px;
+    right: 15px;
+    font-size: 24px;
+    cursor: pointer;
+    color: #999;
+    transition: all 0.2s;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background: rgba(0,0,0,0.05);
+}
+
+.reward-close:hover {
+    background: rgba(0,0,0,0.1);
+    color: #333;
+    transform: rotate(90deg);
+}
+
+[data-theme='dark'] .reward-close {
+    background: rgba(255,255,255,0.1);
+}
+
+[data-theme='dark'] .reward-close:hover {
+    background: rgba(255,255,255,0.2);
+    color: #fff;
+}
+
+.reward-title {
+    text-align: center;
+    margin-top: 0;
+    margin-bottom: 30px;
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: #333;
+    letter-spacing: 1px;
+}
+
+[data-theme='dark'] .reward-title {
+    color: #fff;
+}
+
+.reward-qr-group {
+    display: flex;
+    justify-content: center;
+    gap: 30px;
+    flex-wrap: wrap;
+}
+
+.reward-qr-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+}
+
+.reward-qr-img-wrapper {
+    width: 160px;
+    height: 160px;
+    background: rgba(255,255,255,0.5);
+    border-radius: 16px;
+    overflow: hidden;
+    padding: 10px;
+    border: 1px solid rgba(0,0,0,0.05);
+    transition: transform 0.3s ease;
+}
+
+.reward-qr-img-wrapper:hover {
+    transform: translateY(-5px);
+}
+
+[data-theme='dark'] .reward-qr-img-wrapper {
+    background: rgba(255,255,255,0.05);
+    border-color: rgba(255,255,255,0.1);
+}
+
+.reward-qr-item img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    display: block;
+    border-radius: 8px;
+}
+
+.reward-qr-item span {
+    font-size: 0.9rem;
+    color: #666;
+    font-weight: 500;
+}
+
+[data-theme='dark'] .reward-qr-item span {
+    color: #aaa;
+}
+
+@media (max-width: 600px) {
+    .reward-content {
+        padding: 30px 20px;
+        width: 90%;
+        border-radius: 16px;
+    }
+    
+    .reward-qr-group {
+        gap: 15px;
+    }
+
+    .reward-qr-img-wrapper {
+        width: 120px;
+        height: 120px;
+    }
+    
+    .reward-title {
+        font-size: 1.1rem;
+        margin-bottom: 20px;
+    }
+}
+

themes/Ying/assets/js/modules/reward.js

@@ -0,0 +1,64 @@
+/**
+ * Reward System Module
+ */
+(function() {
+    function initReward() {
+        const btn = document.getElementById('reward-btn');
+        const modal = document.getElementById('reward-modal');
+        const close = document.getElementById('reward-close');
+
+        if (!btn || !modal) return;
+
+        // Helper to show modal
+        const showModal = (e) => {
+            if(e) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+            modal.classList.add('show');
+            document.body.style.overflow = 'hidden'; // Prevent scrolling
+        };
+
+        // Helper to hide modal
+        const hideModal = () => {
+            modal.classList.remove('show');
+            document.body.style.overflow = '';
+        };
+
+        // Button click
+        btn.addEventListener('click', showModal);
+
+        // Close button click
+        if (close) {
+            close.addEventListener('click', hideModal);
+        }
+
+        // Click outside modal content
+        modal.addEventListener('click', (e) => {
+            if (e.target === modal) {
+                hideModal();
+            }
+        });
+
+        // Escape key to close
+        if (!window.rewardKeyHandlerAttached) {
+            document.addEventListener('keydown', function(e) {
+                const activeModal = document.getElementById('reward-modal');
+                if (e.key === 'Escape' && activeModal && activeModal.classList.contains('show')) {
+                    activeModal.classList.remove('show');
+                    document.body.style.overflow = '';
+                }
+            });
+            window.rewardKeyHandlerAttached = true;
+        }
+    }
+
+    // Initialize on load
+    document.addEventListener('DOMContentLoaded', initReward);
+
+    // Initialize on Pjax complete
+    document.addEventListener('pjax:complete', initReward);
+    
+    // Export
+    window.initReward = initReward;
+})();

themes/Ying/layouts/_default/single.html

@@ -21,15 +21,46 @@
         <div class="post-content" id="post-writing" itemprop="articleBody" uk-scrollspy="target: > h2, > h3, > h4, > blockquote, > img, > table, > figure; cls: uk-animation-slide-bottom-small; delay: 100">
             {{ .Content }}
         </div>
-        <div class="post-tags" style="margin-top: -30px;" uk-scrollspy="cls: uk-animation-slide-bottom-small; delay: 400">
+
-            <nav class="nav tags">
+
-                <ul class="flat">
-                    <!-- 标签内容 -->
-                </ul>
-            </nav>
-        </div>
     </article>
     <hr class="uk-divider-icon">
+
+    <!-- 打赏模块 -->
+    {{ if .Site.Params.reward.enable }}
+    <div class="reward-container" uk-scrollspy="cls: uk-animation-slide-bottom-small; delay: 600">
+        <button id="reward-btn" class="reward-btn">
+            <i class="ri-hand-coin-line"></i>打赏一下
+        </button>
+        <div id="reward-modal" class="reward-modal">
+            <div class="reward-content">
+                <div class="reward-close" id="reward-close">
+                    <i class="ri-close-line"></i>
+                </div>
+                <h3 class="reward-title">感谢支持小站</h3>
+                <div class="reward-qr-group">
+                    {{ with .Site.Params.reward.wechat }}
+                    <div class="reward-qr-item">
+                        <div class="reward-qr-img-wrapper">
+                            <img src="{{ . }}" alt="微信打赏">
+                        </div>
+                        <span>微信</span>
+                    </div>
+                    {{ end }}
+                    {{ with .Site.Params.reward.alipay }}
+                    <div class="reward-qr-item">
+                        <div class="reward-qr-img-wrapper">
+                            <img src="{{ . }}" alt="支付宝打赏">
+                        </div>
+                        <span>支付宝</span>
+                    </div>
+                    {{ end }}
+                </div>
+            </div>
+        </div>
+    </div>
+    {{ end }}
+
     <div id="comments" class="comments-area">
         <!-- 评论区内容 -->
 

themes/Ying/layouts/partials/footer.html

@@ -60,6 +60,7 @@
 {{ $message := resources.Get "js/libs/message.min.js" }}
 {{ $echarts := resources.Get "js/libs/echarts.min.js" }}
 {{ $tiaozhuan := resources.Get "js/modules/tiaozhuan.js" }}
+{{ $reward := resources.Get "js/modules/reward.js" }}
 
 {{/* Modules */}}
 {{ $utils := resources.Get "js/modules/utils.js" }}
@@ -71,7 +72,8 @@
 {{ $artalkModule := resources.Get "js/modules/artalk.js" }}
 {{ $pjaxLib := resources.Get "js/libs/pjax.js" }}
 
-{{ $scripts := slice $iconfont $lightgallery $uikit $easylazyload $viewimage $artalk $barrage $utils $loader $search $floatingTools $paragraphComments $infiniteScroll $artalkModule $nprogress $pjaxLib $main $mypjax $message $echarts $tiaozhuan | resources.Concat "js/bundle.js" | resources.Minify | resources.Fingerprint }}
+{{ $scripts := slice $iconfont $lightgallery $uikit $easylazyload $viewimage $artalk $barrage $utils $loader $search $floatingTools $paragraphComments $infiniteScroll $artalkModule $nprogress $pjaxLib $main $mypjax $message $echarts $tiaozhuan $reward | resources.Concat "js/bundle.js" | resources.Minify | resources.Fingerprint }}
+
   <script src="{{ $scripts.RelPermalink }}"></script>
   <script>
     // Global configuration from Hugo