feat: support share on socials (#62)

* Add:Article sharing function * Add:Article sharing function-style revise(样式调整) * Mod:remove: share on google,add: share on telegram * mod:add config.toml-ShareTelegram * fix:telegram icon class * style: delete some spaces, rename some params ... adjust some positions, fix some typos * refactor: use flexbox layout * feat: support `share` in Front Matter * i18n * refactor: post-share.html * feat: support douban, qzone * feat: add brand color * feat: support qrcode Co-authored-by: reuixiy <reuixiy@gmail.com>
reuixiy · Feb 10, 2020 · eae4359 · eae4359
1 parent 05dbf27
commit eae4359
Show file tree

Hide file tree

Showing 15 changed files with 369 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -92,6 +92,7 @@ toc | display TOC | boolean, override `enableTOC` in `config.toml`, MemE only
 displayCopyright | display post-copyright | boolean, override `displayPostCopyright` in `config.toml`, MemE only
 badge | display updated-badge | boolean, override `displayUpdatedBadge` in `config.toml`, MemE only
 gitinfo | display post-gitinfo | boolean, override `displayPostGitInfo` in `config.toml`, MemE only
+share | display post-share | boolean, override `displayPostShare` in `config.toml`, MemE only
 related | display related-posts | boolean, override `displayRelatedPosts` in `config.toml`, MemE only
 katex | add KaTeX support | boolean, override `enableKaTeX` in `config.toml`, MemE only
 mathjax | add MathJax support | boolean, override `enableMathJax` in `config.toml`, MemE only

diff --git a/README.zh-cn.md b/README.zh-cn.md
@@ -92,6 +92,7 @@ toc | display TOC | boolean, override `enableTOC` in `config.toml`, MemE only
 displayCopyright | display post-copyright | boolean, override `displayPostCopyright` in `config.toml`, MemE only
 badge | display updated-badge | boolean, override `displayUpdatedBadge` in `config.toml`, MemE only
 gitinfo | display post-gitinfo | boolean, override `displayPostGitInfo` in `config.toml`, MemE only
+share | display post-share | boolean, override `displayPostShare` in `config.toml`, MemE only
 related | display related-posts | boolean, override `displayRelatedPosts` in `config.toml`, MemE only
 katex | add KaTeX support | boolean, override `enableKaTeX` in `config.toml`, MemE only
 mathjax | add MathJax support | boolean, override `enableMathJax` in `config.toml`, MemE only

diff --git a/assets/scss/_common/post-share.scss b/assets/scss/_common/post-share.scss
@@ -0,0 +1,101 @@
+.post-share {
+    font-size: 90%;
+    margin-top: ($fontSize * 5);
+    color: alpha(var(--color-contrast-medium), 0.8);
+    a {
+        color: alpha(var(--color-contrast-medium), 0.8);
+        &:hover {
+            color: inherit;
+        }
+    }
+}
+
+.share-text {
+    float: left;
+}
+
+.share-items {
+    text-align: right;
+}
+
+.share-item {
+    display: inline-block;
+    margin-left: 1em;
+    .icon {
+        transition: fill $duration;
+    }
+}
+
+.twitter-icon {
+    &:hover {
+        fill: #1DA1F2;
+    }
+}
+
+.facebook-icon {
+    &:hover {
+        fill: #1877F2;
+    }
+}
+
+.linkedin-icon {
+    &:hover {
+        fill: #0077B5;
+    }
+}
+
+.telegram-icon {
+    &:hover {
+        fill: #2CA5E0;
+    }
+}
+
+.weibo-icon {
+    &:hover {
+        fill: #E6162D;
+    }
+}
+
+.douban-icon {
+    &:hover {
+        fill: #007722;
+    }
+}
+
+.qq-icon {
+    &:hover {
+        fill: #12B7F5;
+    }
+}
+
+.qzone-icon {
+    &:hover {
+        fill: #FECE00;
+    }
+}
+
+.qrcode-icon {
+    &:hover {
+        fill: var(--color-primary);
+    }
+}
+
+#qrcode-img {
+    opacity: 0;
+    position: absolute;
+    transform: translateX(-80%) translateY(-125%);
+    transition: all $duration;
+    img {
+        display: none;
+        border: 1px solid var(--color-contrast-lower);
+    }
+}
+
+.qrcode-container {
+    &:hover #qrcode-img {
+        opacity: 1;
+        img {
+            display: inline;
+        }
+    }
+}
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
@@ -207,6 +207,10 @@
     @import "_common/post-gitinfo.scss";
 {{ end }}
 
+{{ if .Site.Params.enablePostShare }}
+    @import "_common/post-share.scss";
+{{ end }}
+
 {{ if .Site.Params.enableRelatedPosts }}
     @import "_common/related-posts.scss";
 {{ end }}

diff --git a/config-examples/en-us/config.toml b/config-examples/en-us/config.toml
@@ -1056,6 +1056,28 @@ uglyURLs = false
     editText = "Edit Me?"
 
 
+    ######################################
+    # Post Share
+
+    enablePostShare = true
+
+    displayPostShare = true
+    # Note: *global settings*
+    #       `share` in post’s Front Matter
+    #       has a higher priority than here
+
+    shareOnTwitter = true
+    shareOnFacebook = true
+    shareOnLinkedIn = true
+    shareOnTelegram = true
+    shareOnWeibo = true
+    shareOnDouban = true
+    shareOnQQ = true
+    shareOnQzone = true
+
+    shareViaQRCode = true
+
+
     ######################################
     # Related Posts
 

diff --git a/config-examples/zh-cn/config.toml b/config-examples/zh-cn/config.toml
@@ -1018,6 +1018,29 @@ uglyURLs = false
     editText = "Edit Me?"
 
 
+    ######################################
+    # 文章分享
+
+    # 是否开启
+    enablePostShare = true
+
+    # 是否显示（全局设置）
+    displayPostShare = true
+    # 说明：文章的 Front Matter 中的 `share`
+    #      的优先级高于此处
+
+    shareOnTwitter = true
+    shareOnFacebook = true
+    shareOnLinkedIn = true
+    shareOnTelegram = true
+    shareOnWeibo = true
+    shareOnDouban = true
+    shareOnQQ = true
+    shareOnQzone = true
+
+    shareViaQRCode = true
+
+
     ######################################
     # 相关文章
 

diff --git a/data/SVG.toml b/data/SVG.toml
diff --git a/...leSite/resources/_gen/assets/scss/scss/main.scss_b04c21e44835e7dcdc8cb03d103b5ef1.content b/...leSite/resources/_gen/assets/scss/scss/main.scss_b04c21e44835e7dcdc8cb03d103b5ef1.content
diff --git a/exampleSite/resources/_gen/assets/scss/scss/main.scss_b04c21e44835e7dcdc8cb03d103b5ef1.json b/exampleSite/resources/_gen/assets/scss/scss/main.scss_b04c21e44835e7dcdc8cb03d103b5ef1.json
@@ -1 +1 @@
-{"Target":"css/meme.min.1cd65e86662c3df5c9137d0984d1cd8635333e017884484b0dfbe582fd97c479.css","MediaType":"text/css","Data":{"Integrity":"sha256-HNZehmYsPfXJE30JhNHNhjUzPgF4hEhLDfvlgv2XxHk="}}
+{"Target":"css/meme.min.8e38992d675856a19b5107ab37885c6bbedb4c439491257f2c6f25889296fa03.css","MediaType":"text/css","Data":{"Integrity":"sha256-jjiZLWdYVqGbUQerN4hca77bTEOUkSV/LG8liJKW+gM="}}
diff --git a/i18n/en-us.toml b/i18n/en-us.toml
@@ -29,6 +29,15 @@ other = "Link: "
 [copyrightLicense]
 other = "License: "
 
+[shareOn]
+other = "Share on:"
+
+[shareOnTitle]
+other = "Share on "
+
+[shareViaTitle]
+other = "Share via "
+
 [relatedPosts]
 other = "See Also:"
 
@@ -45,6 +54,36 @@ other = "New Update Available"
 other = "Refresh"
 
 
+# Socials
+
+[twitter]
+other = "Twitter"
+
+[facebook]
+other = "Facebook"
+
+[linkedin]
+other = "LinkedIn"
+
+[telegram]
+other = "Telegram"
+
+[weibo]
+other = "Weibo"
+
+[douban]
+other = "Douban"
+
+[qq]
+other = "QQ"
+
+[qzone]
+other = "Qzone"
+
+[qrcode]
+other = "QR Code"
+
+
 # Months
 # Used for `i18nMonth`
 

diff --git a/i18n/zh-cn.toml b/i18n/zh-cn.toml
@@ -29,6 +29,15 @@ other = "链接："
 [copyrightLicense]
 other = "版权："
 
+[shareOn]
+other = "分享："
+
+[shareOnTitle]
+other = "分享到"
+
+[shareViaTitle]
+other = "通过"
+
 [relatedPosts]
 other = "相关文章："
 
@@ -45,6 +54,34 @@ other = "已更新最新版本"
 other = "点击刷新"
 
 
+[twitter]
+other = "「Twitter」"
+
+[facebook]
+other = "「Facebook」"
+
+[linkedin]
+other = "「LinkedIn」"
+
+[telegram]
+other = "「Telegram」"
+
+[weibo]
+other = "「微博」"
+
+[douban]
+other = "「豆瓣」"
+
+[qq]
+other = "「QQ」"
+
+[qzone]
+other = "「QQ 空间」"
+
+[qrcode]
+other = "「二维码」"
+
+
 [january]
 other = "一月"
 

diff --git a/layouts/partials/head.html b/layouts/partials/head.html
@@ -157,5 +157,9 @@
         {{ partial "third-party/google-adsense-auto.html" . }}
     {{- end }}
 
+    {{ if and .Site.Params.enablePostShare .Site.Params.shareViaQRCode }}
+        {{ partial "third-party/qrcode-generator.html" . }}
+    {{ end }}
+
     {{ partial "custom/head.html" . }}
 </head>