添加分享功能

can-dy-jack · Apr 18, 2022 · 78e3ecf · 78e3ecf
1 parent ae82d29
commit 78e3ecf
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -193,9 +193,9 @@ More details Read：[kartjim.cn/delicate](https://kartjim.cn/delicate/2021/11/12
 
 ## 开发计划
 
+- 添加更多分享
 - 标题打字机效果
 - 永久链接问题
-- 文章分享功能
 - 404页面
 - 优化评论系统
 - 完善搜索功能
diff --git a/layout/_partial/article-full.ejs b/layout/_partial/article-full.ejs
@@ -24,6 +24,31 @@
     <!-- Content -->
     <%- item.content %>
     <hr />
+    <div class="share">
+      <a target="_blank" href="http://service.weibo.com/share/share.php?url=<%- config.root %><%- item.path %>&title=<%= item.title %> | &appkey=">
+        <svg viewBox="0 0 1024 1024" version="1.1" width="32" height="32">
+          <path d="M457.3 543c-68.1-17.7-145 16.2-174.6 76.2-30.1 61.2-1 129.1 67.8 151.3 71.2 23 155.2-12.2 184.4-78.3 28.7-64.6-7.2-131-77.6-149.2z m-52 156.2c-13.8 22.1-43.5 31.7-65.8 21.6-22-10-28.5-35.7-14.6-57.2 13.7-21.4 42.3-31 64.4-21.7 22.4 9.5 29.6 35 16 57.3z m45.5-58.5c-5 8.6-16.1 12.7-24.7 9.1-8.5-3.5-11.2-13.1-6.4-21.5 5-8.4 15.6-12.4 24.1-9.1 8.7 3.2 11.8 12.9 7 21.5zM785.3 443.5c15 4.8 31-3.4 35.9-18.3 11.8-36.6 4.4-78.4-23.2-109-27.6-30.6-68.4-42.3-106-34.3-15.4 3.3-25.2 18.4-21.9 33.8 3.3 15.3 18.4 25.2 33.8 21.8 18.4-3.9 38.3 1.8 51.9 16.7 13.5 15 17.2 35.4 11.3 53.3-4.9 15.1 3.2 31.1 18.2 36z" p-id="2597" fill="#eb192d"></path>
+          <path d="M885.1 237.5c-56.7-62.9-140.4-86.9-217.7-70.5-17.9 3.8-29.3 21.4-25.4 39.3 3.8 17.9 21.4 29.3 39.3 25.5 55-11.7 114.4 5.4 154.8 50.1 40.3 44.7 51.2 105.7 34 159.1-5.6 17.4 3.9 36 21.3 41.7 17.4 5.6 36-3.9 41.6-21.2v-0.1c24.1-75.4 8.9-161.1-47.9-223.9zM729 499c-12.2-3.6-20.5-6.1-14.1-22.1 13.8-34.7 15.2-64.7 0.3-86-28-40.1-104.8-37.9-192.8-1.1 0 0-27.6 12.1-20.6-9.8 13.5-43.5 11.5-79.9-9.6-101-47.7-47.8-174.6 1.8-283.5 110.6C127.3 471.1 80 557.5 80 632.2 80 775.1 263.2 862 442.5 862c235 0 391.3-136.5 391.3-245 0-65.5-55.2-102.6-104.8-118zM443 810.8c-143 14.1-266.5-50.5-275.8-144.5-9.3-93.9 99.2-181.5 242.2-195.6 143-14.2 266.5 50.5 275.8 144.4C694.4 709 586 796.6 443 810.8z" fill="#eb192d"></path>
+        </svg>
+      </a>
+      <a target="_blank" href="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=<%= item.path %>&title=<%= item.title %>">
+        <svg viewBox="0 0 1024 1024" version="1.1" width="32" height="32">
+          <path d="M955.728 428.224c8.385-8.785 3.76-23.536-8.073-25.753l-276.832-51.854c-4.838-0.906-9.02-3.987-11.38-8.383L525.873 93.229c-2.798-5.23-8.342-7.85-13.875-7.896-5.532 0.045-11.075 2.667-13.873 7.896L364.558 342.234c-2.36 4.396-6.543 7.477-11.381 8.383L76.345 402.471c-11.833 2.217-16.458 16.968-8.073 25.753L269.64 639.086c3.564 3.733 5.205 8.952 4.433 14.1l-46.015 282.032c-1.819 12.126 10.394 21.407 21.298 16.182L505 827.827a16.098 16.098 0 0 1 7-1.58 16.1 16.1 0 0 1 7.003 1.58L774.644 951.4c10.904 5.225 23.117-4.056 21.298-16.182l-46.88-287.298 206.666-219.696z" fill="#FFCD00"></path>
+          <path d="M559.42 493.63c-4.517-3.772-110.987-40.332-273.968-16-3.16 0.47-5.913-0.394-8.04-1.992-0.717 4 3.587 7.152 8.988 7.527 115.064 8.021 179.42 54.987 199.492 71.501 40.78-28.923 71.882-50.606 73.063-51.527 3.668-2.856 3.695-6.811 0.465-9.51m135.65-29.972c-41.744 35.168-160.159 116.897-201.52 148.468-4.864 3.711-3.177 9.424 2.098 11.43 17.045 6.488 36.23 11.95 56.421 16.445l159.784-152.228c12.544-13.184 5.238-29.152-10.422-32.661-1.025 3.011-3.259 5.933-6.36 8.546M817.187 640l-0.101 0.045c-70.456 29.709-241.54 79.623-451.762 72.33-25.386-0.88-50.63-3.715-64.786-6.325-2.067-0.38-3.878-1.012-5.476-1.846-10.567 12.224 2.073 21.462 47.148 30.58 131.886 26.676 286.047 38.934 415.304 30.665l-8.884-54.324c43.727-31.431 64.996-58.546 67.524-62.57 2.899-4.616 1.033-8.555 1.033-8.555" fill="#F1A308"></path>
+          <path d="M818.863 646.995c-53.31 5.137-215.894 3.686-311.826-33.167-5.107-1.962-6.834-7.566-2.129-11.194 40.025-30.84 154.62-110.68 195.014-145.035 7.872-6.696 9.95-15.437 0.375-22.542-18.36-13.623-83.168-36.203-158.198-36.816-107.373-0.88-212.858 29.498-259.133 54.09-10.983 5.837-4.392 21.221 6.83 19.495 164.223-25.24 271.495 12.756 276.045 16.67 3.255 2.798 3.074 6.906-0.5 9.715-3.036 2.389-199.263 143.36-258.23 193.11-9.286 7.834-6.845 24.246 8.35 27.018 14.152 2.582 39.406 5.412 64.784 6.284 210.173 7.214 381.314-42.24 451.755-71.63 0 0-2.148-7.057-13.137-5.998" fill="#FFFFFF"></path>
+        </svg>
+      </a>
+      <a href="javascript:void()" onclick="douban()">
+        <svg viewBox="0 0 1024 1024" version="1.1" width="32" height="32">
+          <path d="M142.08 113.2032h724.4288v115.968H142.08z" fill="#1DCE75"></path>
+          <path d="M713.6768 790.6816l47.0528-156.672h58.6752V278.9888H189.184v354.9696H243.712l47.0528 156.672H101.5296v115.968h805.5808v-115.968h-193.4336zM305.152 394.9056h398.2848v123.136H305.152V394.9056z m68.1984 239.104h257.792l-54.0672 156.672H427.4176l-54.0672-156.672z" fill="#05C46D"></path>
+          <path d="M713.6768 790.6816l47.0528-156.672h58.6752V278.9888H189.184v354.9696H243.712l47.0528 156.672H101.5296v115.968h805.5808v-115.968h-193.4336zM305.152 394.9056h398.2848v123.136H305.152V394.9056z m68.1984 239.104h257.792l-54.0672 156.672H427.4176l-54.0672-156.672z" fill="#05C46D"></path>
+          <path d="M750.5408 667.9552l10.1888-33.9456h14.7968c16.0768-23.2448 30.72-47.5136 43.9296-72.6528V278.9888H189.184v354.9696H243.712l47.0528 156.672H101.5296v115.968h293.4784c142.5408-40.2944 266.3936-125.184 355.5328-238.6432z m-173.5168 122.7264H427.4176l-54.0672-156.672h257.792l-54.1184 156.672z m-271.872-395.776h398.2848v123.136H305.152V394.9056z" fill="#1DCE75"></path>
+          <path d="M698.7776 113.2032H142.08v115.968h526.2336c13.4144-37.3248 23.6544-76.0832 30.464-115.968zM305.152 518.0416V394.9056h276.8384a689.3056 689.3056 0 0 0 66.304-115.968H189.184v354.9696H243.712l4.1472 13.7728c82.5344-29.184 157.8496-73.5232 222.6176-129.7408H305.152z" fill="#3CD38E"></path>
+          <path d="M432.64 113.2032H142.08v115.968h201.0112c33.792-35.328 63.8464-74.1888 89.5488-115.968zM290.0992 278.9376H189.184v71.1168c35.84-20.6848 69.5808-44.544 100.9152-71.1168z" fill="#48E1AA"></path>
+        </svg>
+      </a>
+    </div>
     <div class="blog-tag-and-cate">
         <%- partial('article-tags', {item: item}) %>
         <%- partial('article-categories', {item: item}) %>

diff --git a/source/css/blog.css b/source/css/blog.css
@@ -365,6 +365,18 @@ nav.navbar .nav-item .nav-link{
 .blog-post-change .blog-post-next{
     cursor: pointer;
 }
+.share {
+    display: flex;
+    justify-content: flex-end;
+}
+.share a {
+    margin: 5px;
+    opacity: 0.6;
+    transition: all 0.2s ease;
+}
+.share a:hover {
+    opacity: 1;
+}
 .tag-box h3{
     text-align: center;
     margin: 15px 0;

diff --git a/source/js/index.js b/source/js/index.js
@@ -2,7 +2,7 @@
  * copy button
  */
 const codeSpans = document.querySelectorAll('figure');
-codeSpans.forEach(function(code){
+codeSpans.forEach(function (code) {
     // 代码块提示信息div
     const codeInfo = document.createElement('div');
     codeInfo.classList.add("code-info");
@@ -21,15 +21,16 @@ codeSpans.forEach(function(code){
     codeButton.setAttribute('data-toggle', 'popover');
     codeButton.setAttribute('data-placement', 'top');
     codeButton.setAttribute('data-content', '复制成功');
-    codeInfo.appendChild(codeButton);2
-
+    codeInfo.appendChild(codeButton);
+    2
+
     code.appendChild(codeInfo);
 
-    codeButton.addEventListener('click',()=>{
+    codeButton.addEventListener('click', () => {
         navigator.clipboard.writeText(code.children[0].children[0].children[0].children[1].innerText)
-        setTimeout(()=>{
+        setTimeout(() => {
             $('.btn-copy').popover('hide');
-        },2000);
+        }, 2000);
     });
 })
 
@@ -46,19 +47,41 @@ $('.origin').tooltip();
  * 网站运行时间计算函数
  */
 var now = new Date();
+
 function calculateTime(startTime) {
     now.setTime(now.getTime() + 1000);
     stime = new Date(startTime);
     interval = now.getTime() - stime.getTime();
-    days = interval/1000/60/60/24;
+    days = interval / 1000 / 60 / 60 / 24;
     dnum = Math.floor(days);
-    hours = interval/1000/60/60 - 24*dnum;
+    hours = interval / 1000 / 60 / 60 - 24 * dnum;
     hnum = Math.floor(hours);
-    if(hnum.toString().length == 1){
+    if (hnum.toString().length == 1) {
         hnum = '0' + hnum;
     }
-    minutes = interval/1000/60 - 24*60*dnum - hnum*60;
+    minutes = interval / 1000 / 60 - 24 * 60 * dnum - hnum * 60;
     mnum = Math.floor(minutes);
-    if(mnum.toString().length == 1){ mnum = '0' + mnum;}
-    document.getElementById("times").innerHTML ="本站已运行 " + dnum + " 天 " + hnum + " 小时 " + mnum + " 分，共" + Math.floor(interval/1000/60/60)+ "小时";
-}
+    if (mnum.toString().length == 1) {
+        mnum = '0' + mnum;
+    }
+    document.getElementById("times").innerHTML = "本站已运行 " + dnum + " 天 " + hnum + " 小时 " + mnum + " 分，共" + Math.floor(interval / 1000 / 60 / 60) + "小时";
+}
+function douban() {
+    var d = document,
+        e = encodeURIComponent,
+        s1 = window.getSelection,
+        s2 = d.getSelection,
+        s3 = d.selection,
+        s = s1 ? s1() : s2 ? s2() : s3 ? s3.createRange().text : '',
+        r = 'https://www.douban.com/recommend/?url=' + e(d.location.href) + '&title=' + e(d.title) + '&sel=' + e(s) + '&v=1',
+        w = 450,
+        h = 450,
+        x = function () {
+            if (!window.open(r, 'douban', 'toolbar=0,resizable=1,scrollbars=yes,status=1,width=' + w + ',height=' + h + ',left=' + (screen.width - w) / 2 + ',top=' + (screen.height - h) / 2)) location.href = r + '&r=1'
+        };
+    if (/Firefox/.test(navigator.userAgent)) {
+        setTimeout(x, 0)
+    } else {
+        x()
+    }
+}