feat: follow me through various channels (#1360)

Author: daya0576

_config.yml

@@ -191,7 +191,6 @@ social:
   #YouTube: https://youtube.com/yourname || youtube
   #Instagram: https://instagram.com/yourname || instagram
   #Skype: skype:yourname?call|chat || skype
-  #RSS: /atom.xml || rss
 
 social_icons:
   enable: true
@@ -277,6 +276,14 @@ reward:
   #alipay: /images/alipay.png
   #bitcoin: /images/bitcoin.png
 
+# Subscribe through Telegram Channel, Twitter, etc.
+# Usage: `Key: permalink || icon (Font Awesome)
+follow_me:
+  #Twitter: https://twitter.com/username || twitter
+  #Telegram: https://t.me/channel_name || telegram
+  #Wechat: /images/wechat_channel.jpg || wechat
+  #RSS: /atom.xml || rss
+
 # Related popular posts
 # Dependencies: https://github.com/tea3/hexo-related-popular-posts
 related_posts:
@@ -669,7 +676,6 @@ rating:
 # Go to https://www.addthis.com/dashboard to customize your tools.
 add_this_id:
 
-
 # ---------------------------------------------------------------
 # Statistics and Analytics
 # See: https://theme-next.org/docs/third-party-services/statistics-and-analytics

languages/en.yml

@@ -89,6 +89,9 @@ reward:
   alipay: Alipay
   bitcoin: Bitcoin
 
+follow_me:
+  welcome: Welcome to my other publishing channels
+
 accessibility:
   nav_toggle: Toggle navigation bar
   prev_page: Previous page

languages/zh-CN.yml

@@ -76,6 +76,8 @@ reward:
   wechatpay: 微信支付
   alipay: 支付宝
   bitcoin: 比特币
+follow_me:
+  welcome: 欢迎关注我的其它发布渠道
 accessibility:
   nav_toggle: 切换导航栏
   prev_page: 上一页

languages/zh-HK.yml

@@ -76,6 +76,8 @@ reward:
   wechatpay: 微信支付
   alipay: 支付寶
   bitcoin: 比特幣
+follow_me:
+  welcome: 歡迎關注我的其它發布渠道
 accessibility:
   nav_toggle: 切換導航欄
   prev_page: 上一頁

languages/zh-TW.yml

@@ -76,6 +76,8 @@ reward:
   wechatpay: 微信支付
   alipay: 支付寶
   bitcoin: 比特幣
+follow_me:
+  welcome: 歡迎關注我的其它發布渠道
 accessibility:
   nav_toggle: 切換導航欄
   prev_page: 上一頁

layout/_macro/post.swig

@@ -228,6 +228,10 @@
         {{ partial('_partials/post/post-copyright.swig') }}
       {%- endif %}
 
+      {%- if theme.follow_me %}
+        {{ partial('_partials/post/post-followme.swig', {}, {cache: theme.cache.enable}) }}
+      {%- endif %}
+
       <footer class="post-footer">
         {%- if post.tags and post.tags.length %}
           {%- if theme.tag_icon %}

layout/_partials/post/post-followme.swig

@@ -0,0 +1,23 @@
+{%- if theme.follow_me %}
+
+  <div class="followme">
+    <p>{{ __('follow_me.welcome') }}</p>
+
+    <div class="social-list">
+        {%- for name, value in theme.follow_me %}
+            {%- set link = value.split('||')[0] | trim %}
+            {%- set icon = value.split('||')[1] | trim %}
+
+            <div class="social-item">
+              <a target="_blank" class="social-link" href="{{ link }}">
+                <span class="icon">
+                  <i class="fa fa-{{ icon }}"></i>
+                </span>
+
+                <span class="label">{{ name }}</span>
+              </a>
+            </div>
+        {%- endfor %}
+    </div>
+  </div>
+{%- endif %}

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

@@ -0,0 +1,42 @@
+.followme {
+  align-items: center;
+  background: $whitesmoke;
+  border-left: 3px solid $red;
+  color: $grey;
+  display: flex;
+  flex-direction: column;
+  margin: 2em 0 1em 0;
+  padding: 1em 1.5em;
+
+  .social-list {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+
+    .social-item {
+      margin: 0.5em 2em;
+    }
+    +tablet-mobile() {
+      .social-item {
+        margin: 0.5em 0.75em;
+      }
+    }
+
+    .social-link {
+      border: none;
+      display:inline-block;
+      text-align: center;
+
+      .icon {
+        font-size: 1.75em;
+        height: 1.75em;
+        width: 1.75em;
+      }
+
+      .label {
+        display: block;
+        font-size: 14px;
+      }
+    }
+  }
+}

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

@@ -69,3 +69,5 @@
 @import 'post-reward';
 
 @import 'post-copyright' if (hexo-config('creative_commons.post'));
+
+@import 'post-followme' if (hexo-config('follow_me'));