Show follow-me qrcode image in current page instead of open new tab

* See: https://github.com/next-theme/hexo-theme-next/issues/563

_config.yml

@@ -57,7 +57,7 @@ favicon:
   #android_manifest: /manifest.json
 
 # Custom Logo (Warning: Do not support scheme Mist)
-custom_logo: #/uploads/custom-logo.jpg
+custom_logo: #/uploads/custom-logo.png
 
 # Creative Commons 4.0 International License.
 # See: https://creativecommons.org/about/cclicenses/
@@ -282,7 +282,7 @@ reward:
 follow_me:
   #Twitter: https://twitter.com/username || fab fa-twitter
   #Telegram: https://t.me/channel_name || fab fa-telegram
-  #WeChat: /images/wechat_channel.jpg || fab fa-weixin
+  #WeChat: /images/wechat_channel.png || fab fa-weixin
   #RSS: /atom.xml || fa fa-rss
 
 # Related popular posts

layout/_partials/post/post-followme.njk

@@ -7,13 +7,25 @@
       {%- set icon = value.split('||')[1] | trim if value.split('||')[1] else '' %}
 
       <div class="social-item">
-        <a target="_blank" class="social-link" href="{{ url_for(link) }}">
-          <span class="icon">
-            <i class="{{ icon }}"></i>
+        {%- if link.endsWith('.png') or link.endsWith('.jpg') %}
+          <span class="social-link">
+            <span class="icon">
+              <i class="{{ icon }}"></i>
+            </span>
+
+            <span class="label">{{ name }}</span>
           </span>
 
-          <span class="label">{{ name }}</span>
-        </a>
+          <img class="social-item-img" src="{{ url_for(link) }}">
+        {%- else %}
+          <a target="_blank" class="social-link" href="{{ url_for(link) }}">
+            <span class="icon">
+              <i class="{{ icon }}"></i>
+            </span>
+
+            <span class="label">{{ name }}</span>
+          </a>
+        {%- endif %}
       </div>
     {%- endfor %}
   </div>

source/css/_common/components/post/post-followme.styl

@@ -10,6 +10,7 @@ if (hexo-config('follow_me')) {
 
       .social-item {
         margin: .5em 2em;
+        position: relative;
 
         +tablet-mobile() {
           margin: .5em .75em;
@@ -29,6 +30,18 @@ if (hexo-config('follow_me')) {
           display: block;
           font-size: 14px;
         }
+
+        &:hover + .social-item-img {
+          display: block;
+        }
+      }
+
+      .social-item-img {
+        display: none;
+        left: 50%;
+        max-width: $post-reward-img-width;
+        position: absolute;
+        transform: translate(-50%, 20px);
       }
     }
   }