Merge pull request #28 from D-Sketon/refactor/share_link

refactor: 移除article-share-link

layout/_partial/article.ejs

@@ -20,7 +20,6 @@
     </div>
     <footer class="article-footer">
       <%- articleCopyright(post) %>
-      <a data-url="<%- post.permalink %>" data-id="<%= post._id %>" data-title="<%= post.title %>" class="article-share-link"><%= __('share') %></a>
       <% if (post.comments !== false && theme.valine.enable && theme.valine.appId && theme.valine.appKey) { %>
         <a href="<%- url_for(post.path) %>#comments" class="article-comment-link">
           <span class="post-comments-count valine-comment-count" data-xid="<%- url_for(post.path, {relative: false}).endsWith("index.html") ? 

source/css/_partial/article.styl

@@ -242,7 +242,6 @@ $article-meta-tag
     text-decoration: none
 
 .article-tag-list-link,
-.article-share-link,
 .article-comment-link
 .article-visitor-link
   color: var(--red-1)
@@ -272,21 +271,6 @@ $article-meta-tag
   &:before
     margin-right: 10px
 
-.article-share-link
-  if reimu_cursor
-    cursor: url(/images/cursor/reimu-cursor-pointer.cur), pointer
-  else
-    cursor: pointer
-  float: right
-  margin-left: 20px
-  font-size: 14px
-  background: var(--red-5)
-  border-radius: 20px
-  padding: 10px 18px
-
-  &:before
-    margin-right: 10px
-
 .article-visitor-link
   float: right
   font-size: 14px
@@ -363,81 +347,6 @@ $article-meta-tag
   margin-top: 0.8em
   text-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.5);
 
-.article-share-box
-  position: absolute
-  display: none
-  background: #fff
-  box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.2)
-  border-radius: 3px
-  margin-left: -145px
-  overflow: hidden
-  z-index: 1
-
-  &.on
-    display: block
-
-.article-share-input
-  width: 100%
-  background: none
-  box-sizing: border-box
-  font: 14px font-sans
-  padding: 0 15px
-  color: var(--color-default)
-  outline: none
-  border: 1px solid var(--color-border)
-  border-radius: 3px 3px 0 0
-  height: 36px
-  line-height: 36px
-
-.article-share-links
-  clearfix()
-  background: var(--color-background)
-
-$article-share-link
-  width: 50px
-  height: 36px
-  display: block
-  float: left
-  position: relative
-  color: #999
-
-  &:before
-    font-size: 20px
-    font-family: font-icon
-    absolute-center(@font-size)
-    text-align: center
-
-  &:hover
-    color: #fff
-
-.article-share-twitter
-  @extend $article-share-link
-
-  &:hover
-    background: var(--color-twitter)
-    text-shadow: 0 1px var(--color-dark-twitter)
-
-.article-share-facebook
-  @extend $article-share-link
-
-  &:hover
-    background: var(--color-facebook)
-    text-shadow: 0 1px var(--color-dark-facebook)
-
-.article-share-pinterest
-  @extend $article-share-link
-
-  &:hover
-    background: var(--color-pinterest)
-    text-shadow: 0 1px var(--color-dark-pinterest)
-
-.article-share-linkedin
-  @extend $article-share-link
-
-  &:hover
-    background: var(--color-linkedin)
-    text-shadow: 0 1px var(--color-dark-linkedin)
-
 .article-gallery
   background: #000
   position: relative

source/css/_variables.styl

@@ -22,14 +22,6 @@
   --color-footer-background: #fff
   --color-mobile-nav-background: #fff
   --color-wrap: #fff
-  --color-twitter: #00aced
-  --color-facebook: #3b5998
-  --color-pinterest: #cb2027
-  --color-linkedin: #0077B5
-  --color-dark-twitter: darken(#00aced, 20%)
-  --color-dark-facebook: darken(#3b5998, 20%)
-  --color-dark-pinterest: darken(#cb2027, 20%)
-  --color-dark-linkedin: darken(#0077B5, 20%)
   --color-sticky: #ffecec
 
   --color-h2-border: #eee
@@ -76,14 +68,6 @@
     --color-footer-background: #21252b
     --color-mobile-nav-background: #21252b
     --color-wrap: #272b30
-    --color-twitter: #00aced
-    --color-facebook: #3b5998
-    --color-pinterest: #cb2027
-    --color-linkedin: #0077B5
-    --color-dark-twitter: darken(#00aced, 20%)
-    --color-dark-facebook: darken(#3b5998, 20%)
-    --color-dark-pinterest: darken(#cb2027, 20%)
-    --color-dark-linkedin: darken(#0077B5, 20%)
     --color-sticky: #ffecec
 
     --color-h2-border: #47474a

source/css/fontawesome.styl

@@ -32,31 +32,6 @@ font-icon = "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 5 Free
     font-family: font-icon
     content: "\f075"
 
-.article-share-link
-  &:before
-    font-family: font-icon
-    content: "\f064"
-
-.article-share-twitter
-  &:before
-    font-family: font-icon
-    content: "\f099"
-
-.article-share-facebook
-  &:before
-    font-family: font-icon
-    content: "\f09a"
-
-.article-share-pinterest
-  &:before
-    font-family: font-icon
-    content: "\f0d2"
-
-.article-share-linkedin
-  &:before
-    font-family: font-icon
-    content: "\f0e1"
-
 .icon-copyright
   &:before
     font-family: font-icon

source/css/iconfont.styl

@@ -42,31 +42,6 @@ _c = '//at.alicdn.com/t/c/font_' + id + '.ttf'
     font-family: font-icon
     content: "\e608"
 
-.article-share-link
-  &:before
-    font-family: font-icon
-    content: "\e61d"
-
-.article-share-twitter
-  &:before
-    font-family: font-icon
-    content: "\e62a"
-
-.article-share-facebook
-  &:before
-    font-family: font-icon
-    content: "\e60e"
-
-.article-share-pinterest
-  &:before
-    font-family: font-icon
-    content: "\e61a"
-
-.article-share-linkedin
-  &:before
-    font-family: font-icon
-    content: "\e614"
-
 .icon-copyright
   &:before
     font-family: font-icon

source/js/pjax_script.js

@@ -51,85 +51,6 @@ var scrollIntoViewAndWait = (element) => {
     }
   });
 
-  // Share
-  $(".article-share-link")
-    .off("click")
-    .on("click", function (e) {
-      e.stopPropagation();
-
-      const $this = $(this),
-        url = $this.attr("data-url"),
-        encodedUrl = encodeURIComponent(url),
-        id = "article-share-box-" + $this.attr("data-id"),
-        title = $this.attr("data-title"),
-        offset = $this.offset();
-
-      if ($("#" + id).length) {
-        var box = $("#" + id);
-
-        if (box.hasClass("on")) {
-          box.removeClass("on");
-          return;
-        }
-      } else {
-        const html = [
-          '<div id="' + id + '" class="article-share-box">',
-          '<input class="article-share-input" value="' + url + '">',
-          '<div class="article-share-links">',
-          '<a href="https://twitter.com/intent/tweet?text=' +
-            encodeURIComponent(title) +
-            "&url=" +
-            encodedUrl +
-            '" class="article-share-twitter" target="_blank" title="Twitter"></a>',
-          '<a href="https://www.facebook.com/sharer.php?u=' +
-            encodedUrl +
-            '" class="article-share-facebook" target="_blank" title="Facebook"></a>',
-          '<a href="http://pinterest.com/pin/create/button/?url=' +
-            encodedUrl +
-            '" class="article-share-pinterest" target="_blank" title="Pinterest"></a>',
-          '<a href="https://www.linkedin.com/shareArticle?mini=true&url=' +
-            encodedUrl +
-            '" class="article-share-linkedin" target="_blank" title="LinkedIn"></a>',
-          "</div>",
-          "</div>",
-        ].join("");
-        var box = $(html);
-
-        $("body").append(box);
-      }
-
-      $(".article-share-box.on").hide();
-
-      box
-        .css({
-          top: offset.top + 25,
-          left: offset.left,
-        })
-        .addClass("on");
-    });
-  $(".article-share-box")
-    .off("click")
-    .on("click", function (e) {
-      e.stopPropagation();
-    });
-  $(".article-share-box-input")
-    .off("click")
-    .on("click", function () {
-      $(this).select();
-    });
-  $(".article-share-box-link")
-    .off("click")
-    .on("click", function (e) {
-      e.preventDefault();
-      e.stopPropagation();
-
-      window.open(
-        this.href,
-        "article-share-box-window-" + Date.now(),
-        "width=500,height=450"
-      );
-    });
-
   // lightbox
   $(".article-entry").each(function (i) {
     $(this)

source/js/script.js

@@ -17,14 +17,20 @@
   }
   mode = window.localStorage.getItem("dark_mode");
   if (mode == "true") {
-    $("#sub-nav").append(
-      '<a id="nav-sun-btn" class="nav-icon dark-mode-btn"></a>'
-    );
+    document
+      .getElementById("sub-nav")
+      .insertAdjacentHTML(
+        "beforeend",
+        '<a id="nav-sun-btn" class="nav-icon dark-mode-btn"></a>'
+      );
     document.body.dispatchEvent(new CustomEvent("dark-theme-set"));
   } else if (mode == "false") {
-    $("#sub-nav").append(
-      '<a id="nav-moon-btn" class="nav-icon dark-mode-btn"></a>'
-    );
+    document
+      .getElementById("sub-nav")
+      .insertAdjacentHTML(
+        "beforeend",
+        '<a id="nav-moon-btn" class="nav-icon dark-mode-btn"></a>'
+      );
     document.body.dispatchEvent(new CustomEvent("light-theme-set"));
   }
   $(".dark-mode-btn").on("click", function () {
@@ -41,10 +47,7 @@
       $(this).attr("id", "nav-sun-btn");
     }
   });
-  // Share
-  $("body").on("click", () => {
-    $(".article-share-box.on").removeClass("on");
-  });
+
   let oldScrollTop = 0;
   window.addEventListener("scroll", () => {
     let scrollTop =