【Hexo】minima主题添加收款码到底部

点击下面的微信或者支付宝图标跳出来一个收款二维码 😋😋😋

操作步骤

1. 首先去找个图标（下面的代码可以直接用，就不需要找了）
   前往阿里巴巴矢量图库搜索一下 微信 和 支付宝，找到一个适合的图标，复制其 SVG 代码
2. 打开 footer.ejs 文件，在最底下倒数第二个 </div> 里，添加以下内容

   <!-- 微信 -->
   <% if (theme.wechat) { %>
   <a class="ml-0 footer-link icon" href="<%- theme.wechat %>" target="_blank" style="text-decoration: none" rel="noreferrer" aria-label="Wechat">
     <svg class="wechat svh-hov" width="18" role="img" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><title>wechat</title><path d="M683.058 364.695c11 0 22 1.016 32.943 1.976C686.564 230.064 538.896 128 370.681 128c-188.104 0.66-342.237 127.793-342.237 289.226 0 93.068 51.379 169.827 136.725 229.256L130.72 748.43l119.796-59.368c42.918 8.395 77.37 16.79 119.742 16.79 11 0 21.46-0.48 31.914-1.442a259.168 259.168 0 0 1-10.455-71.358c0.485-148.002 128.744-268.297 291.403-268.297l-0.06-0.06z m-184.113-91.992c25.99 0 42.913 16.79 42.913 42.575 0 25.188-16.923 42.579-42.913 42.579-25.45 0-51.38-16.85-51.38-42.58 0-25.784 25.93-42.574 51.38-42.574z m-239.544 85.154c-25.384 0-51.374-16.85-51.374-42.58 0-25.784 25.99-42.574 51.374-42.574 25.45 0 42.918 16.79 42.918 42.575 0 25.188-16.924 42.579-42.918 42.579z m736.155 271.655c0-135.647-136.725-246.527-290.983-246.527-162.655 0-290.918 110.88-290.918 246.527 0 136.128 128.263 246.587 290.918 246.587 33.972 0 68.423-8.395 102.818-16.85l93.809 50.973-25.93-84.677c68.907-51.93 120.286-119.815 120.286-196.033z m-385.275-42.58c-16.923 0-34.452-16.79-34.452-34.179 0-16.79 17.529-34.18 34.452-34.18 25.99 0 42.918 16.85 42.918 34.18 0 17.39-16.928 34.18-42.918 34.18z m188.165 0c-16.984 0-33.972-16.79-33.972-34.179 0-16.79 16.927-34.18 33.972-34.18 25.93 0 42.913 16.85 42.913 34.18 0 17.39-16.983 34.18-42.913 34.18z"/></svg>
   </a>
   <% } %>
   
   
   <!-- 支付宝 -->
   <% if (theme.alipay) { %>
     <a class="ml-0 footer-link icon" href="<%- theme.alipay %>" target="_blank" style="text-decoration: none" rel="noreferrer" aria-label="Alipay">
       <svg class="alipay svh-hov" width="18" role="img" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><title>alipay</title><path d="M230.771014 576.556522c-12.614493 9.646377-25.228986 23.744928-28.93913 42.295652-5.194203 24.486957-0.742029 55.652174 22.26087 80.13913 28.93913 28.93913 72.718841 37.101449 92.011594 38.585508 51.2 3.710145 106.110145-22.26087 147.663768-50.457971 16.324638-11.130435 43.77971-34.133333 70.492754-69.750725-59.362319-30.423188-133.565217-64.556522-212.22029-61.588406-41.553623 1.484058-70.492754 9.646377-91.269566 20.776812zM983.188406 712.347826c25.971014-61.588406 40.811594-129.113043 40.811594-200.347826 0-281.971014-230.028986-512-512-512S0 230.028986 0 512s230.028986 512 512 512c170.666667 0 321.298551-83.849275 414.794203-212.22029C838.492754 768.742029 693.797101 696.023188 604.011594 652.985507c-42.295652 48.973913-105.368116 97.205797-176.602898 117.982609-44.521739 13.356522-85.333333 18.550725-126.886957 9.646377-42.295652-8.904348-72.718841-28.197101-90.527536-47.489855-8.904348-10.388406-19.292754-22.26087-27.455073-37.843479 0.742029 0.742029 0.742029 2.226087 0.742029 2.968116 0 0-4.452174-7.42029-7.420289-19.292753-1.484058-5.936232-2.968116-11.872464-3.710145-17.808696-0.742029-4.452174-0.742029-8.904348 0-12.614493-0.742029-7.42029 0-15.582609 1.484058-23.744927 4.452174-20.776812 12.614493-43.77971 35.617391-65.298551 48.973913-48.231884 115.014493-50.457971 149.147826-50.457971 50.457971 0.742029 138.017391 22.26087 212.22029 48.973913 20.776812-43.77971 34.133333-89.785507 42.295652-121.692754H304.973913v-33.391304h158.052174v-66.782609H272.324638v-34.133333h190.701449v-66.782609c0-8.904348 2.226087-16.324638 16.324638-16.324637h74.944927v83.107246h207.026087v33.391304H554.295652v66.782609H719.768116S702.701449 494.933333 651.501449 586.202899c115.014493 40.811594 277.518841 104.626087 331.686957 126.144927z m0 0"/></svg>
     </a>
   <% } %>

   微信矢量图是由 不吃饅頭吃饅頭 制作的
   支付宝矢量图是由 Soony丶 制作的
3. 打开 custom.css 文件，找到.stackoverflow的位置，在它下面写上以下内容

   .wechat {
       fill: #00940a;
   }
   
   .alipay {
       fill: rgb(2, 126, 179);
   }

   这两个颜色我调过，让它变暗了一点，不至于这么鲜艳
4. 打开主题根目录下的 _config.yml 文件，找到 stackoverflow，在其下面添加以下内容

   wechat: /WechatPay
   alipay: /Alipay

5. 然后前往博客根目录，使用命令创建页面

   hexo new page "WechatPay"
   hexo new page "Alipay"

   此时在 source 目录下会出现 WechatPay 目录和 Alipay 目录
6. 将微信支付的收款码，注意是收款码嗷，放到 source/WechatPay 目录下，并重命名为 WechatPayQRCode.jpeg
7. 将支付宝的收款码，注意是收款码嗷，放到 source/Alipay 目录下，并重命名为 AlipayQRCode.jpeg
8. 打开 source/WechatPay/index.md 文件，在底部追加以下内容

   ![WechatPayQRCode](/WechatPay/WechatPayQRCode.jpeg)

9. 打开 source/Alipay/index.md 文件，在底部追加以下内容

   ![AlipayQRCode](/Alipay/AlipayQRCode.jpeg)

   保存后刷新页面点击底部的微信图标就能看到大大的微信收款二维码啦~~~