feat(donate): support add donate info

Only support desktop currently.

_config.yml

@@ -116,6 +116,17 @@ algolia_search:
     hits_empty: "We did not find any results for the search: ${query}"
     hits_stats: "${hits} results found in ${time} ms"
 
+# ========== Donate ========== #
+donate:
+  enable: false
+  title: Buy Me A Coffee
+  description: If this post helped you, please consider buying the author a cup of sugar-free coffee ☕️.
+  qr_code:
+    - url: '/assets/donate-wechat.png'
+      alt: 'Wechat'
+    - url: '/assets/donate-alipay.png'
+      alt: 'Alipay'
+
 # ========== Comment ========== #
 # Fill in the field to enable the corresponding comment plugin
 # If you want to add other comment plugin, edit in "custom.ejs"

layout/_partial/base-footer-fixed.ejs

@@ -1,16 +1,21 @@
-<footer class="footer-fixed<%- is_home() ? ' index-footer-fixed' : '' %>">
-    <!-- back to top button -->
-    <div class="footer-fixed-element">
-        <%_ if(theme.float_button_theme === 'rounded') { _%>
-            <div class="back-top back-top-hidden back-top-rounded">
-        <%_ } else { _%>
-            <div class="back-top back-top-hidden">
-        <%_ } _%>
-        <%_ if(theme.float_button_theme === 'rounded') { _%>
-            <i class="fas fa-chevron-up"></i>
-        <%_ } else { _%>
-            <div>&#xe639;</div>
-        <%_ } _%>
-        </div>
-    </div>
-</footer>
+<footer class="footer-fixed<%- is_home() ? ' index-footer-fixed' : '' %>">
+    <!-- donate button -->
+    <%_ if(is_post() && ((theme.donate.enable && page.donate !== false) || page.donate === true)) { _%>
+    <%- partial('donate-popup') %>
+    <div
+        title="Donate to the author"
+        class="footer-fixed-btn footer-fixed-btn--hidden<%- theme.float_button_theme === 'rounded' ? ' footer-fixed-btn--rounded' : '' %> donate-btn"
+    >
+        <i class="fas fa-donate"></i>
+    </div>
+    <%_ } _%>
+
+    <!-- back to top button -->
+    <div class="footer-fixed-btn footer-fixed-btn--hidden<%- theme.float_button_theme === 'rounded' ? ' footer-fixed-btn--rounded' : '' %> back-top">
+        <%_ if(theme.float_button_theme === 'rounded') { _%>
+        <i class="fas fa-chevron-up"></i>
+        <%_ } else { _%>
+        <div>&#xe639;</div>
+        <%_ } _%>
+    </div>
+</footer>

layout/_partial/base-header.ejs

@@ -5,16 +5,12 @@
     </div>
     <!-- sidebar menu button -->
     <div class="header-element">
+        <div class="header-sidebar-menu<%- theme.float_button_theme === 'rounded' ? ' header-sidebar-menu-rounded' : '' %>">
         <%_ if(theme.float_button_theme === 'rounded') { _%>
-            <div class="header-sidebar-menu header-sidebar-menu-rounded">
+            <i class="fas fa-bars"></i>
         <%_ } else { _%>
-            <div class="header-sidebar-menu">
+            <div style="padding-left: 1px;">&#xe775;</div>
         <%_ } _%>
-            <%_ if(theme.float_button_theme === 'rounded') { _%>
-                <i class="fas fa-bars"></i>
-            <%_ } else { _%>
-                <div style="padding-left: 1px;">&#xe775;</div>
-            <%_ } _%>
         </div>
     </div>
     <!-- header actions -->

layout/_partial/critical-css/critical-style.ejs

@@ -10,7 +10,7 @@
 
     header,
     footer,
-    .back-top,
+    .footer-fixed-btn,
     .sidebar,
     .container,
     .site-intro-meta,
@@ -33,7 +33,13 @@
         left: 0;
         width: calc(100% + 300px);
         height: 100%;
-        background: repeating-linear-gradient(-45deg, #444 0, #444 80px, #333 80px, #333 160px);
+        background: repeating-linear-gradient(
+            -45deg,
+            #444 0,
+            #444 80px,
+            #333 80px,
+            #333 160px
+        );
         background-position: center center;
         transform: translate3d(-226px, 0, 0);
         animation: gradient-move 2.5s ease-out 0s infinite;

layout/_partial/donate-popup.ejs

@@ -0,0 +1,14 @@
+<div class="donate-popup donate-popup--hidden">
+    <div class="donate-popup__title"><%- theme.donate.title %></div>
+    <div class="donate-popup__content">
+        <div class="donate-popup__content-description"><%- theme.donate.description %></div>
+        <%_ theme.donate.qr_code.forEach((qrCode) => { _%>
+        <img
+            class="donate-popup__content-qrCode"
+            title="<%- qrCode.alt %>"
+            alt="<%- qrCode.alt %>"
+            src="<%- url_for(qrCode.url) %>"
+        ></img>
+        <%_ }) _%>
+    </div>
+</div>