✨ feat: 增加打赏模块

MaLuns · Sep 20, 2022 · 6f9c009 · 6f9c009
1 parent 39331d0
commit 6f9c009
Show file tree

Hide file tree

Showing 9 changed files with 99 additions and 3 deletions.
diff --git a/package/hexo-theme-async/_config.yml b/package/hexo-theme-async/_config.yml
@@ -75,6 +75,7 @@ icons:
   back_top: fas fa-arrow-up
   close: fas fa-times
   search: fas fa-search
+  reward: fas fa-hand-holding-usd
 
 # Top navigation menu
 top_bars:
@@ -169,6 +170,14 @@ footer:
   #
   custom_text:
 
+# Reward (Donate)
+# If enable true, reward would be displayed in every posts and pages by default.
+# You can show or hide reward in a specific page throuth `reward: true | false` in Front Matter.
+reward:
+  enable: false
+  comment: reward.comment
+  # url:
+  methods:
 
 # img loading="lazy"
 lazyload:

diff --git a/package/hexo-theme-async/languages/en.yml b/package/hexo-theme-async/languages/en.yml
@@ -49,4 +49,7 @@ search:
   hits: '${hits} results found'
   hits_time: '${hits} results found in ${time} ms'
 
+reward:
+  comment: I'm so cute. Please give me money.
+
 ieTips: For a better experience, use a browser other than Internet Explorer
diff --git a/package/hexo-theme-async/languages/zh-Hans.yml b/package/hexo-theme-async/languages/zh-Hans.yml
@@ -49,4 +49,7 @@ search:
   hits: '找到 ${hits} 条结果'
   hits_time: '找到 ${hits} 条结果（用时 ${time} 毫秒）'
 
+reward:
+  comment: 我很可爱，请给我钱
+
 ieTips: 为了更好的体验,请使用非IE浏览器
diff --git a/package/hexo-theme-async/layout/_partial/post/post-content.ejs b/package/hexo-theme-async/layout/_partial/post/post-content.ejs
@@ -1,3 +1,3 @@
-<article class="trm-card trm-publication">
+<article class="trm-publication">
     <%- page.content %>
 </article>
diff --git a/package/hexo-theme-async/layout/_partial/post/reward.ejs b/package/hexo-theme-async/layout/_partial/post/reward.ejs
@@ -0,0 +1,25 @@
+<% if(theme.reward.enable || page.reward){ %>
+    <div class="trm-reward">
+        <% if(theme.reward.url){ %>
+            <a rel="noopener" href='<%- theme.reward.url %>' target='_blank' class="trm-reward-btn trm-glow">
+                <%- icon(theme.icons.reward) %>
+            </a>
+        <% } else { %>
+            <span class="trm-reward-btn trm-glow" onclick='var qr = document.getElementById("qr"); qr.style.display = (qr.style.display === "none") ? "block" : "none";'>
+                <%- icon(theme.icons.reward) %>
+            </span>
+        <% } %>
+        <p class="trm-reward-comment"><%- __(theme.reward.comment) %></p>
+        <div id="qr" style="display:none;">
+            <% if(Array.isArray(theme.reward.methods)) {
+                theme.reward.methods.forEach(method =>{ %>
+                <div style="display:inline-block">
+                    <a rel="noopener" href='<%- method.link ? method.link : method.path %>' target='_blank' >
+                       <img src="<%- url_for(method.path) %>" alt="<%- method.name %>" loading="lazy">
+                    </a>
+                </div>
+            <%  })
+               } %>
+        </div>
+    </div>
+<% } %>
diff --git a/package/hexo-theme-async/layout/post.ejs b/package/hexo-theme-async/layout/post.ejs
@@ -25,7 +25,10 @@
                     <div data-scroll data-scroll-repeat data-scroll-offset="500" id="about-triger"></div>
 
                     <%- partial('./_partial/post/post-info') %>
-                    <%- partial('./_partial/post/post-content') %>
+                    <div class="trm-card ">
+                        <%- partial('./_partial/post/post-content') %>
+                        <%- partial('./_partial/post/reward') %>
+                    </div>
                     <%- partial('./_partial/post/post-next-prev') %>
                     <%- partial('./_widget/comment',{ titleHide: false }) %>
 

diff --git a/package/hexo-theme-async/source/css/_components/base.less b/package/hexo-theme-async/source/css/_components/base.less
@@ -214,6 +214,23 @@ html {
     border-radius: 5px
 }
 
+.trm-glow {
+    animation-duration       : 2s;
+    animation-iteration-count: infinite;
+    animation-name           : glowing;
+    animation-direction      : alternate;
+}
+
+@keyframes glowing {
+    0% {
+        box-shadow: 0 0 0 transparent;
+    }
+
+    100% {
+        box-shadow: 0 0 20px fade(@primary, 30%);
+    }
+}
+
 // trm-scroll-container
 .trm-scroll-container {
     transition: opacity .6s;

diff --git a/package/hexo-theme-async/source/css/_components/index.less b/package/hexo-theme-async/source/css/_components/index.less
@@ -19,4 +19,5 @@
 @import './fancybox.less';
 @import './publication.less';
 @import './toc.less';
-@import './search.less';
+@import './search.less';
+@import './reward.less';
diff --git a/package/hexo-theme-async/source/css/_components/reward.less b/package/hexo-theme-async/source/css/_components/reward.less
@@ -0,0 +1,35 @@
+.trm-reward {
+    padding   : 2rem 0 0 0;
+    text-align: center;
+    margin    : auto;
+
+    .trm-reward-btn {
+        border-radius  : 50%;
+        display        : inline-flex;
+        justify-content: center;
+        align-items    : center;
+        width          : 2.5rem;
+        height         : 2.5rem;
+        color          : @primary;
+        border-radius  : 100%;
+        cursor         : pointer;
+    }
+
+    .trm-reward-comment {
+        margin-top: 1rem;
+        color     : @theme-color ;
+    }
+
+    #qr img {
+        width              : 10rem;
+        height             : 10rem;
+        display            : inline-block;
+        margin             : 1rem 1rem 0 1rem;
+        padding            : 5px;
+        border-radius      : 5px;
+        transition-property: all;
+        transition-duration: .3s;
+        transition-delay   : 0s;
+        box-shadow         : @box-shadow;
+    }
+}