feat: add displayShareOnText param

this commit also let CSS of `shareViaQRCode` load on demand.
reuixiy · Feb 11, 2020 · 77d1ee4 · 77d1ee4
1 parent 73a0d30
commit 77d1ee4
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 30 deletions.
diff --git a/assets/scss/_common/post-share.scss b/assets/scss/_common/post-share.scss
@@ -9,17 +9,27 @@
     }
 }
 
-.share-text {
-    float: left;
-}
-
-.share-items {
-    text-align: right;
+@if ($displayShareOnText) {
+    .share-text {
+        float: left;
+    }
+    .share-items {
+        text-align: right;
+    }
+    .share-item {
+        margin-left: 1em;
+    }
+} @else {
+    .share-items {
+        text-align: center;
+    }
+    .share-item {
+        margin: 0 0.5em;
+    }
 }
 
 .share-item {
     display: inline-block;
-    margin-left: 1em;
     .icon {
         transition: fill $duration;
     }
@@ -73,28 +83,28 @@
     }
 }
 
-.qrcode-icon {
-    &:hover {
-        fill: var(--color-primary);
-    }
-}
-
-#qrcode-img {
-    opacity: 0;
-    position: absolute;
-    transform: translateX(-89%) translateY(-125%);
-    transition: all $duration;
-    img {
-        display: none;
-        border: 1px solid var(--color-contrast-lower);
+@if ($shareViaQRCode) {
+    .qrcode-icon {
+        &:hover {
+            fill: var(--color-primary);
+        }
     }
-}
-
-.qrcode-container {
-    &:hover #qrcode-img {
-        opacity: 1;
+    #qrcode-img {
+        opacity: 0;
+        position: absolute;
+        transform: translateX(-89%) translateY(-125%);
+        transition: all $duration;
         img {
-            display: inline;
+            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
@@ -11,6 +11,18 @@
     $listWidth: {{ . }}em;
 {{ end }}
 
+{{ if and .Site.Params.displayShareOnText }}
+    $displayShareOnText: true;
+{{ else }}
+    $displayShareOnText: false;
+{{ end }}
+
+{{ if and .Site.Params.shareViaQRCode }}
+    $shareViaQRCode: true;
+{{ else }}
+    $shareViaQRCode: false;
+{{ end }}
+
 {{ if .Site.Params.enableBackToTopAutoHide }}
     $enableBackToTopAutoHide: true;
 {{ else }}

diff --git a/config-examples/en-us/config.toml b/config-examples/en-us/config.toml
@@ -1066,6 +1066,8 @@ uglyURLs = false
     #       `share` in post’s Front Matter
     #       has a higher priority than here
 
+    displayShareOnText = false
+
     shareOnTwitter = true
     shareOnFacebook = true
     shareOnLinkedIn = true

diff --git a/config-examples/zh-cn/config.toml b/config-examples/zh-cn/config.toml
@@ -1029,6 +1029,8 @@ uglyURLs = false
     # 说明：文章的 Front Matter 中的 `share`
     #      的优先级高于此处
 
+    displayShareOnText = false
+
     shareOnTwitter = true
     shareOnFacebook = true
     shareOnLinkedIn = true

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.6dabd5311a209b32d8d1aabc864f20465652934af9e5fd132156a9b9d69bc6f0.css","MediaType":"text/css","Data":{"Integrity":"sha256-bavVMRogmzLY0aq8hk8gRlZSk0r55f0TIVapudabxvA="}}
+{"Target":"css/meme.min.73737381a99eaf07e945b3267b0616be872aa7e878f6d044f487a732480ef914.css","MediaType":"text/css","Data":{"Integrity":"sha256-c3NzgamerwfpRbMmewYWvocqp+h49tBE9IenMkgO+RQ="}}
diff --git a/layouts/partials/post-share.html b/layouts/partials/post-share.html
@@ -10,7 +10,9 @@
 
     <div class="post-share">
 
-        <div class="share-text">{{ i18n "shareOn" }}</div>
+        {{ if .Site.Params.displayShareOnText }}
+            <div class="share-text">{{ i18n "shareOn" }}</div>
+        {{ end }}
 
         <div class="share-items">