Add: 分离文章分享, 样式初步完成

AirboZH · Sep 20, 2023 · f6019de · f6019de
1 parent d665bd8
commit f6019de
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 16 deletions.
diff --git a/templates/modules/post/postShaing.html b/templates/modules/post/postShaing.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+
+  <th:block th:fragment="postShaing" class="share-wrapper"
+    th:with="siteUrl = ${#strings.substring(site.url, #strings.length(site.url) - 1)== '/'}? ${#strings.substring(site.url,0,#strings.length(site.url) - 1)}:${site.url}">
+    <div class="share-wrapper"
+      th:with="postUrl = ${siteUrl}+${post.status.permalink}">
+      <span class="share-label text-muted me-1">
+        Share
+      </span>
+      <span class="share-icons">
+        <a
+          th:href="'https://t.me/share/url?url=' + ${postUrl}"
+          data-bs-toggle="tooltip"
+          data-bs-placement="top"
+          title="Telegram"
+          target="_blank"
+          rel="noopener">
+          <i class="fa-fw fab fa-telegram"></i>
+        </a>
+
+        <a
+          th:href="'https://www.facebook.com/sharer/sharer.php?u=' + ${postUrl}"
+          data-bs-toggle="tooltip"
+          data-bs-placement="top"
+          title="Facebook"
+          target="_blank"
+          rel="noopener">
+          <i class="fa-fw fab fa-facebook-square"></i>
+        </a>
+
+        <a
+          href="https://www.linkedin.com/shareArticle?mini=true&url={{ post.url }}&title={{ post.title }}&summary={{ post.description }}&source={{ site.url }}"
+          data-bs-toggle="tooltip"
+          data-bs-placement="top"
+          title="LinkedIn"
+          target="_blank"
+          rel="noopener">
+          <i class="fa-fw fab fa-linkedin"></i>
+        </a>
+        <a href="javascript:void(0);"
+          onclick="navigator.clipboard.writeText(window.location.href);">
+          <i
+            id="copy-link"
+            class="fa-fw fas fa-link small"
+            data-bs-toggle="tooltip"
+            data-bs-placement="top"
+            title="Copy">
+          </i>
+        </a>
+      </span>
+    </div>
+  </th:block>
+
+</html>
diff --git a/templates/post.html b/templates/post.html
@@ -159,22 +159,7 @@ <h1 data-toc-skip>[[${post.spec.title}]]</h1>
           </a>
           by the author.
         </div>
-
-        <div class="">
-          Share:
-          <button id="copy-link" 
-            aria-label="Copy link" 
-            class="btn small" 
-            onclick="
-              navigator.clipboard.writeText(window.location.href); 
-              this.innerHTML = 'Link copied successfully!'; 
-              setTimeout(function() { 
-                document.getElementById('copy-link').innerHTML = '<i class=&quot;fa-fw fas fa-link pe-none&quot;></i>'; 
-              }, 2000);
-            "> 
-            <i class="fa-fw fas fa-link pe-none"></i> 
-          </button>
-        </div>
+        <th:block th:replace="~{modules/post/postShaing :: postShaing} "></th:block>
       </div>
 
       <!-- further reading -->