NEXT主题优化分享样式

---

在本文中我将分享needmoreshare2文章分享的优化

---

注意：本文中的优化是直接对needmoreshare2底层css进行更改

为什么不选择baidushare，因为百度分享不支持http,我选择了next主题自带的needmoreshare2插件，首先在主题的_config.yml中启用：

needmoreshare2:
  enable: true
  postbottom:
    enable: false
    options:
      iconStyle: box
      boxForm: horizontal
      position: middleCenter
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
  float:
    enable: true
    options:
      iconStyle: default
      boxForm: horizontal
      position: middleLeft
      networks: Weibo,Douban,QQZone,Linkedin,renren,Wechat,QQ

启用即可在博客中查看，如果样式满意可以不必修改，原始插件是没有QQ分享的，在配置文件中显示的networks中的内容为用户需要显示的分享图标，插件支持的分享有：

# networks: Weibo,Wechat,Douban,QQZone,Twitter,Linkedin,Mailto,Reddit,
#           Delicious,StumbleUpon,Pinterest,Facebook,GooglePlus,Slashdot,
#           Technorati,Posterous,Tumblr,GoogleBookmarks,Newsvine,
#           Evernote,Friendfeed,Vkontakte,Odnoklassniki,Mailru

另外对于QQ的添加，我会在后文提到。

样式的修改

首先，注意一下，在主题的_config.yml配置中一定要开启float而position一定要选择middleleft。

1.更改整体位置。

找到..\blog\themes\next\source\css\_common\components\third-party\needsharebutton.styl,更改id为needsharebutton-float的内容，建议原始内容注释。最终代码如下：

#needsharebutton-postbottom {
  position: relative;
  cursor: pointer;
  height: 26px;

  .btn {
    display: initial;
    padding: 1px 4px;
    border: 1px solid $btn-default-border-color;
    border-radius: 3px;
  }
}

/*原始样式*/
// #needsharebutton-float {
//     position: fixed;
//     bottom: 38px;
//     left: -8px;
//     z-index: 9999;
//     cursor: pointer;

//   .btn {
//     //display: initial;
//     padding: 0 10px 0 14px
//     border: 1px solid $btn-default-border-color;
//     border-radius: 4px;
//   }
// }

/*新样式*/
#needsharebutton-float {
    position: fixed;
    bottom: 70px
    right: 30px
    z-index: 9999;
    cursor: pointer;

  .btn {
    border: 0;
    width: 14px
    padding: 5px
    line-height: 0
    height 14px
    background: rgba(0,0,0,0)
  }
}

修改..\blog\themes\next\source\lib\needsharebutton\needsharebutton.css,修改后的代码，注意下列代码更改的是对应的类，没有把全文贴上，全文太长：

need-share-button_dropdown类

/*新样式*/
.need-share-button_dropdown {
  position: absolute;
  z-index: 10;
  visibility: hidden;
  overflow: hidden;
  width: 256px;
  font-size: 16px;
  -ms-transition: .3s;
  -webkit-transition: .3s;
  -o-transition: .3s;
  -moz-transition: .3s;
          transition: .3s;
  -ms-transform: translate(200px,0);        /* IE 9 */
  -webkit-transform: translate(200px,0);    /* Safari and Chrome */
  -o-transform: translate(200px,0);     /* Opera */
  -moz-transform: translate(200px,0);
       transform: translate(200px,0);
          
  text-align: right;
  white-space: normal;
  opacity: 0;
  background-color: rgba(0,0,0,0);
}
/*旧样式*/
/* .need-share-button_dropdown {
  position: absolute;
  z-index: 10;

  visibility: hidden;
  overflow: hidden;

  width: 300px;

  font-size: 16px;

  -webkit-transition: .3s;
          transition: .3s;
  -webkit-transform: scale(.1);
      -ms-transform: scale(.1);
          transform: scale(.1);
  text-align: center;
  white-space: normal;

  opacity: 0;
  -webkit-border-radius: 4px;
          border-radius: 4px;
  background-color: #fff;
  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, .5);
          box-shadow: 0 0 2px rgba(0, 0, 0, .5);
} */

need-share-button_link类

/*旧样式*/
/* .need-share-button_link {
  display: inline-block;

  width: 50px;
  height: 50px;

  line-height: 50px;

  cursor: pointer;
  text-align: center;
} */

/*新样式*/
.need-share-button_link {
  display: inline-block;

  width: 20px;
  height: 20px;

  line-height: 0;
  margin-right: 15px;
  cursor: pointer;
  text-align: center;
}

通过更改

.need-share-button_dropdown-middle-left {
  /* top: 50%; */
  bottom: 0;
  right: 100%;

  margin-right: 5px;
}

中的margin-right属性进行位置调整。

2.更改图标颜色

在..\blog\themes\next\source\lib\needsharebutton\needsharebutton.css中

/* Network buttons
***********************************************/

下方对应的为图标颜色，根据对应的标签进行颜色更改。我开启的分享有微博，豆瓣,人人,QQ空间,Linkedin,QQ,微信,我的样式为：

.need-share-button_wechat:hover {
  color: #aaff00;
}
.need-share-button_wechat{
  color: #7f7f7f;
}
.need-share-button_wechat.need-share-button_link-box {
  color: #fff;

  background: #a2dc30;
}
.need-share-button_weibo{
  color: #7f7f7f;
}
.need-share-button_weibo:hover {
  color: #ff0000;
}

.need-share-button_weibo.need-share-button_link-box {
  color: #fff;

  background: #d52b2b;
}
.need-share-button_douban {
  color: white;
}
.need-share-button_douban:hover {
  color: rgb(0, 255, 72);
}
.need-share-button_douban{
  color: #7f7f7f;
}
.need-share-button_douban.need-share-button_link-box {
  color: #fff;

  background: #072;
}
.need-share-button_qqzone:hover {
  color: #ffd000;
}
.need-share-button_qqzone{
  color: #7f7f7f;
}
.need-share-button_qqzone.need-share-button_link-box {
  color: #fff;

  background: #ffce00;
}
.need-share-button_qqzone.need-share-button_link-box {
  color: #fff;

  background: #659bff;
}
.need-share-button_renren:hover {
  color: #ff00f2;
}
.need-share-button_renren{
  color: #7f7f7f;
}
.need-share-button_renren.need-share-button_link-box {
  color: #fff;

  background: #207cc5;
}
.need-share-button_linkedin:hover {
  color: #0085af;
}
.need-share-button_linkedin{
  color: #7f7f7f;
}

在这里我们需要添加QQ分享的图标颜色(如果不需要QQ分享的可以跳过这一步)

.need-share-button_qq:hover {
  color: #008cff;
}
.need-share-button_qq{
  color: #7f7f7f;
}

3.更改图标

注：如果不需要QQ分享可跳过这一步

---

首先在：https://www.iconfont.cn/创建项目

创建项目

然后挑选图标加入项目中，这里建议你将你需要的所有分享的图标都搜一遍。挑选完成将其添加至项目。

添加项目

在项目中下载代码:

下载至本地

在下载的代码中找到iconfont.css,用记事本打开：

打开CSS

删除iconfont.css中的iconfont类：

删除类

将..\blog\themes\next\source\lib\needsharebutton\font-embedded.css中的内容只保留:

.need-share-button_dropdown [class^="icon-"]:before, .need-share-button_dropdown [class*=" icon-"]:before {
  font-family: "iconfont";
  font-style: normal;
  font-weight: normal;
  speak-as: none;

  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;

  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;

  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;

  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */

  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

其余部分删除（注意备份！）
将iconfont.css中剩余的内容粘贴至..\blog\themes\next\source\lib\needsharebutton\font-embedded.css文件中，注意类名的命名规则：

.icon-分享平台:before{
  content: "内容";
}

例如：

.icon-qqzone:before {
  content: "\e633";
}

可能下载的代码中的可能会出现大写也可能出现：

.icon-QQzone-fill:before {
  content: "\e633";
}

这种形式，我们严格按照命名规则来即可，其中的分享平台名称以下方为准

# networks: Weibo,Wechat,Douban,QQZone,Twitter,Linkedin,Mailto,Reddit,
#           Delicious,StumbleUpon,Pinterest,Facebook,GooglePlus,Slashdot,
#           Technorati,Posterous,Tumblr,GoogleBookmarks,Newsvine,
#           Evernote,Friendfeed,Vkontakte,Odnoklassniki,Mailru

所有的都小写。

4.修改部分js

找到themes\next\source\lib\needsharebutton\needsharebutton.js，将其中微信部分进行修改：

 "wechat": function (el) {
        var myoptions = getOptions(el);
        // var imgSrc = "https://api.qinco.me/api/qr?size=400&content=" + encodeURIComponent(myoptions.url);
        var imgSrc = 'https://api.qrserver.com/v1/create-qr-code/?size=150x150&data='+encodeURIComponent(myoptions.url);
        // root.popup(imgSrc);
        var dropdownEl = el.querySelector(".need-share-button_dropdown");
        var img = dropdownEl.getElementsByClassName("need-share-wechat-code-image")[0];
        if (img) {
          img.remove();
        } else {
          img = document.createElement("img");
          img.src = imgSrc; 
          img.alt = "loading wechat image...";
          img.setAttribute("class", "need-share-wechat-code-image");
          dropdownEl.prepend(img);
        }
      },

添加qq的分享事件：

"qq": function (el) {
        var myoptions = getOptions(el);
        var url = "https://connect.qq.com/widget/shareqq/index.html?url=" +
          encodeURIComponent(myoptions.title) +
          "&url=" + encodeURIComponent(myoptions.url) +
          "&pics=" + encodeURIComponent(myoptions.image) +
          "&desc=" + encodeURIComponent(myoptions.description);
        root.popup(url);
      },

更改主页快速修改：

// create default options
    root.options = {
      iconStyle: "default", // default or box
      boxForm: "horizontal", // horizontal or vertical
      position: "bottomCenter", // top / middle / bottom + Left / Center / Right
      protocol: ["http", "https"].indexOf(window.location.href.split(":")[0]) === -1 ? "https://" : "//",
      networks: "QQ,Weibo,Wechat,Douban,QQZone,Twitter,Pinterest,Facebook,GooglePlus,Reddit,Linkedin,Tumblr,Evernote"
    };

更改图标文件：

// fill fropdown with buttons
      var iconClass = myoptions.iconStyle == "default" ? 
                      "need-share-button_link need-share-button_" : 
                      "need-share-button_link-" + myoptions.iconStyle + " need-share-button_link need-share-button_";
      for (var network in myoptions.networks) {
        if (myoptions.networks.hasOwnProperty(network)) {
          var link = document.createElement("span");
          network = myoptions.networks[network].trim();
          var networkLC = network.toLowerCase();
          link.className = iconClass + networkLC;
          // var fontello = ["weibo", "wechat", "douban", "qqzone", "renren","qq","linkedin"];
          // if (fontello.indexOf(networkLC) === -1) {
          //   link.className += " social-" + networkLC;
          // } else {
          link.className += " icon-" + networkLC;
          // }
          link.dataset.network = networkLC;
          link.title = network;
          dropdownEl.appendChild(link);
        }
      }

5.更改部分样式

在themes\next\source\css\_custom\custom.styl中添加部分样式：

/*微信图片样式*/
.need-share-button-opened img.need-share-wechat-code-image{
  box-shadow: none !important
  border-radius: 0 !important
  margin: 0px 0px 20px 45px !important
  border: 2px solid white
}

/*导航栏样式*/
.sidebar-toggle{
  background-color: rgba(0,0,0,0) !important
  }
.sidebar-toggle-line{
  background: #7f7f7f !important
  }
.page-post-detail .sidebar-toggle-line{
  background: #7f7f7f !important
  }
.back-to-top{
  background: rgba(0,0,0,0)
  color: #7f7f7f !important
 }
 .back-to-top:hover{
  background: rgba(0,0,0,0)
  color: #ffa400 !important
 }
#needsharebutton-float .btn{
  color: #7f7f7f !important
  }
#needsharebutton-float .btn:hover{
  color: #ffa400 !important
  }

最终效果如图所示：

效果

6.完整代码

路径：..\themes\next\source\css\_custom\custom.styl下的custom.styl添加代码

/*微信图片样式*/
.need-share-button-opened img.need-share-wechat-code-image{
  box-shadow: none !important
  border-radius: 0 !important
  margin: 0px 0px 20px 45px !important
  border: 2px solid white
}

/*导航栏样式*/
.sidebar-toggle{
  background-color: rgba(0,0,0,0) !important
  }
.sidebar-toggle-line{
  background: #7f7f7f !important
  }
.page-post-detail .sidebar-toggle-line{
  background: #7f7f7f !important
  }
.back-to-top{
  background: rgba(0,0,0,0)
  color: #7f7f7f !important
 }
 .back-to-top:hover{
  background: rgba(0,0,0,0)
  color: #ffa400 !important
 }
#needsharebutton-float .btn{
  color: #7f7f7f !important
  }
#needsharebutton-float .btn:hover{
  color: #ffa400 !important
  }

路径：..\blog\themes\next\source\lib\needsharebutton\needsharebutton.js下的needsharsbutton.js

/***********************************************
  needShareButton
  - Version 1.0.0
  - Copyright 2015 Dzmitry Vasileuski
    - Licensed under MIT (http://opensource.org/licenses/MIT)
***********************************************/
(function () {

  // find closest
  function closest(elem, parent) {
    if (typeof (parent) == "string") {
      var matchesSelector = elem.matches || elem.webkitMatchesSelector ||
                            elem.mozMatchesSelector || elem.msMatchesSelector;

      if (!!matchesSelector) {
        while (elem) {
          if (matchesSelector.bind(elem)(parent)) {
            return elem;
          } else {
            elem = elem.parentElement;
          }
        }
      }
      return false;
    } else {
      while (elem) {
        if (elem == parent) {
          return elem;
        } else {
          elem = elem.parentElement;
        }
      }
      return false;
    }
  }

  // share button class
  window.needShareButton = function (elem, options) {
    // create element reference
    var root = this;
    root.elem = elem || "need-share-button";

    /* Helpers
     ***********************************************/

    // get title from html
    root.getTitle = function () {
      var content;
      // check querySelector existance for old browsers
      if (document.querySelector) {
        content = document.querySelector("title");
        if (content) {
          return content.innerText;
        }
      }
      return document.title;
    };

    // get image from html
    root.getImage = function () {
      var content;
      // check querySelector existance for old browsers
      if (document.querySelector) {
        content = document.querySelector("meta[property=\"og:image\"]") ||
                  document.querySelector("meta[name=\"twitter:image\"]");
        if (content) {
          return content.getAttribute("content");
        } else {
          return "";
        }
      } else {
        return "";
      }
    };

    // get description from html
    root.getDescription = function () {
      var content;
      // check querySelector existance for old browsers
      if (document.querySelector) {
        content = document.querySelector("meta[property=\"og:description\"]") ||
                  document.querySelector("meta[name=\"twitter:description\"]") ||
                  document.querySelector("meta[name=\"description\"]");
        if (content) {
          return content.getAttribute("content");
        } else {
          return "";
        }
      } else {
        content = document.getElementsByTagName("meta").namedItem("description");
        if (content) {
          return content.getAttribute("content");
        } else {
          return "";
        }
      }
    };

    // share urls for all networks
    root.share = {
      "weibo": function (el) {
        var myoptions = getOptions(el);
        var url = "http://v.t.sina.com.cn/share/share.php?title=" +
          encodeURIComponent(myoptions.title) +
          "&url=" + encodeURIComponent(myoptions.url) +
          "&pic=" + encodeURIComponent(myoptions.image);
        root.popup(url);
      },
      "wechat": function (el) {
        var myoptions = getOptions(el);
        // var imgSrc = "https://api.qinco.me/api/qr?size=400&content=" + encodeURIComponent(myoptions.url);
        var imgSrc = 'https://api.qrserver.com/v1/create-qr-code/?size=150x150&data='+encodeURIComponent(myoptions.url);
        // root.popup(imgSrc);
        var dropdownEl = el.querySelector(".need-share-button_dropdown");
        var img = dropdownEl.getElementsByClassName("need-share-wechat-code-image")[0];
        if (img) {
          img.remove();
        } else {
          img = document.createElement("img");
          img.src = imgSrc; 
          img.alt = "loading wechat image...";
          img.setAttribute("class", "need-share-wechat-code-image");
          dropdownEl.prepend(img);
        }
      },
      "douban": function (el) {
        var myoptions = getOptions(el);
        var url = "https://www.douban.com/share/service?name=" +
          encodeURIComponent(myoptions.title) +
          "&href=" + encodeURIComponent(myoptions.url) +
          "&image=" + encodeURIComponent(myoptions.image);
        root.popup(url);
      },
      "qqzone": function (el) {
        var myoptions = getOptions(el);
        var url = "https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=" +
          encodeURIComponent(myoptions.title) +
          "&url=" + encodeURIComponent(myoptions.url) +
          "&pics=" + encodeURIComponent(myoptions.image) +
          "&desc=" + encodeURIComponent(myoptions.description);
        root.popup(url);
      },
      "qq": function (el) {
        var myoptions = getOptions(el);
        var url = "https://connect.qq.com/widget/shareqq/index.html?url=" +
          encodeURIComponent(myoptions.title) +
          "&url=" + encodeURIComponent(myoptions.url) +
          "&pics=" + encodeURIComponent(myoptions.image) +
          "&desc=" + encodeURIComponent(myoptions.description);
        root.popup(url);
      },
      "renren": function (el) {
        var myoptions = getOptions(el);
        var url = "http://widget.renren.com/dialog/share?title=" +
          encodeURIComponent(myoptions.title) +
          "&resourceUrl=" + encodeURIComponent(myoptions.url) +
          "&pic=" + encodeURIComponent(myoptions.image) +
          "&description=" + encodeURIComponent(myoptions.description);
        root.popup(url);
      },
      "mailto": function (el) {
        var myoptions = getOptions(el);
        var url = "mailto:?subject=" + encodeURIComponent(myoptions.title) +
          "&body=Thought you might enjoy reading this: " + encodeURIComponent(myoptions.url) +
          " - " + encodeURIComponent(myoptions.description);

        window.location.href = url;
      },
      "twitter": function (el) {
        var myoptions = getOptions(el);
        var url = myoptions.protocol + "twitter.com/intent/tweet?text=";
        url += encodeURIComponent(myoptions.title) + "&url=" + encodeURIComponent(myoptions.url);

        root.popup(url);
      },
      "pinterest": function (el) {
        var myoptions = getOptions(el);
        var url = myoptions.protocol + "pinterest.com/pin/create/bookmarklet/?is_video=false";
        url += "&media=" + encodeURIComponent(myoptions.image);
        url += "&url=" + encodeURIComponent(myoptions.url);
        url += "&description=" + encodeURIComponent(myoptions.title);

        root.popup(url);
      },
      "facebook": function (el) {
        var myoptions = getOptions(el);
        var url = myoptions.protocol + "www.facebook.com/share.php?";
        url += "u=" + encodeURIComponent(myoptions.url);
        url += "&title=" + encodeURIComponent(myoptions.title);

        root.popup(url);
      },
      "googleplus": function (el) {
        var myoptions = getOptions(el);
        var url = myoptions.protocol + "plus.google.com/share?";
        url += "url=" + encodeURIComponent(myoptions.url);

        root.popup(url);
      },
      "reddit": function (el) {
        var myoptions = getOptions(el);
        var url = myoptions.protocol + "www.reddit.com/submit?";
        url += "url=" + encodeURIComponent(myoptions.url);
        url += "&title=" + encodeURIComponent(myoptions.title);

        root.popup(url);
      },
      "delicious": function (el) {
        var myoptions = getOptions(el);
        var url = myoptions.protocol + "del.icio.us/post?";
        url += "url=" + encodeURIComponent(myoptions.url);
        url += "&title=" + encodeURIComponent(myoptions.title);
        url += "¬es=" + encodeURIComponent(myoptions.description);

        root.popup(url);
      },
      "stumbleupon": function (el) {
        var myoptions = getOptions(el);
        var url = myoptions.protocol + "www.stumbleupon.com/submit?";
        url += "url=" + encodeURIComponent(myoptions.url);
        url += "&title=" + encodeURIComponent(myoptions.title);

        root.popup(url);
      },
      "linkedin": function (el) {
        var myoptions = getOptions(el);
        var url = myoptions.protocol + "www.linkedin.com/shareArticle?mini=true";
        url += "&url=" + encodeURIComponent(myoptions.url);
        url += "&title=" + encodeURIComponent(myoptions.title);
        url += "&source=" + encodeURIComponent(myoptions.source);

        root.popup(url);
      },
      "slashdot": function (el) {
        var myoptions = getOptions(el);
        var url = myoptions.protocol + "slashdot.org/bookmark.pl?";
        url += "url=" + encodeURIComponent(myoptions.url);
        url += "&title=" + encodeURIComponent(myoptions.title);

        root.popup(url);
      },
      "technorati": function (el) {
        var myoptions = getOptions(el);
        var url = myoptions.protocol + "technorati.com/faves?";
        url += "add=" + encodeURIComponent(myoptions.url);
        url += "&title=" + encodeURIComponent(myoptions.title);

        root.popup(url);
      },
      "posterous": function (el) {
        var myoptions = getOptions(el);
        var url = myoptions.protocol + "posterous.com/share?";
        url += "linkto=" + encodeURIComponent(myoptions.url);

        root.popup(url);
      },
      "tumblr": function (el) {
        var myoptions = getOptions(el);
        var url = myoptions.protocol + "www.tumblr.com/share?v=3";
        url += "&u=" + encodeURIComponent(myoptions.url);
        url += "&t=" + encodeURIComponent(myoptions.title);

        root.popup(url);
      },
      "googlebookmarks": function (el) {
        var myoptions = getOptions(el);
        var url = myoptions.protocol + "www.google.com/bookmarks/mark?op=edit";
        url += "&bkmk=" + encodeURIComponent(myoptions.url);
        url += "&title=" + encodeURIComponent(myoptions.title);
        url += "&annotation=" + encodeURIComponent(myoptions.description);

        root.popup(url);
      },
      "newsvine": function (el) {
        var myoptions = getOptions(el);
        var url = myoptions.protocol + "www.newsvine.com/_tools/seed&save?";
        url += "u=" + encodeURIComponent(myoptions.url);
        url += "&h=" + encodeURIComponent(myoptions.title);

        root.popup(url);
      },
      "evernote": function (el) {
        var myoptions = getOptions(el);
        var url = myoptions.protocol + "www.evernote.com/clip.action?";
        url += "url=" + encodeURIComponent(myoptions.url);
        url += "&title=" + encodeURIComponent(myoptions.title);

        root.popup(url);
      },
      "friendfeed": function (el) {
        var myoptions = getOptions(el);
        var url = myoptions.protocol + "www.friendfeed.com/share?";
        url += "url=" + encodeURIComponent(myoptions.url);
        url += "&title=" + encodeURIComponent(myoptions.title);

        root.popup(url);
      },
      "vkontakte": function (el) {
        var myoptions = getOptions(el);
        var url = myoptions.protocol + "vkontakte.ru/share.php?";
        url += "url=" + encodeURIComponent(myoptions.url);
        url += "&title=" + encodeURIComponent(myoptions.title);
        url += "&description=" + encodeURIComponent(myoptions.description);
        url += "&image=" + encodeURIComponent(myoptions.image);
        url += "&noparse=true";

        root.popup(url);
      },
      "odnoklassniki": function (el) {
        var myoptions = getOptions(el);
        var url = myoptions.protocol + "www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1";
        url += "&st.comments=" + encodeURIComponent(myoptions.description);
        url += "&st._surl=" + encodeURIComponent(myoptions.url);

        root.popup(url);
      },
      "mailru": function (el) {
        var myoptions = getOptions(el);
        var url = myoptions.protocol + "connect.mail.ru/share?";
        url += "url=" + encodeURIComponent(myoptions.url);
        url += "&title=" + encodeURIComponent(myoptions.title);
        url += "&description=" + encodeURIComponent(myoptions.description);
        url += "&imageurl=" + encodeURIComponent(myoptions.image);

        root.popup(url);
      }

    };

    // open share link in a popup
    root.popup = function (url) {
      // set left and top position
      var popupWidth = 600,
        popupHeight = 500,
        // fix dual screen mode
        dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.left,
        dualScreenTop = window.screenTop !== undefined ? window.screenTop : screen.top,
        width = window.innerWidth ?
                window.innerWidth :
                document.documentElement.clientWidth ?
                document.documentElement.clientWidth :
                screen.width,
        height = window.innerHeight ?
                 window.innerHeight :
                 document.documentElement.clientHeight ?
                 document.documentElement.clientHeight :
                 screen.height,
        // calculate top and left position
        left = ((width / 2) - (popupWidth / 2)) + dualScreenLeft,
        top = ((height / 2) - (popupHeight / 2)) + dualScreenTop,

        // show popup
        shareWindow = window.open(url, "targetWindow",
          "toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=" + popupWidth +
          ", height=" + popupHeight + ", top=" + top + ", left=" + left);

      // Puts focus on the newWindow
      if (window.focus) {
        shareWindow.focus();
      }
    };

    /* Set options
     ***********************************************/

    // create default options
    root.options = {
      iconStyle: "default", // default or box
      boxForm: "horizontal", // horizontal or vertical
      position: "bottomCenter", // top / middle / bottom + Left / Center / Right
      protocol: ["http", "https"].indexOf(window.location.href.split(":")[0]) === -1 ? "https://" : "//",
      networks: "QQ,Weibo,Wechat,Douban,QQZone,Twitter,Pinterest,Facebook,GooglePlus,Reddit,Linkedin,Tumblr,Evernote"
    };

    // integrate custom options
    for (var i in options) {
      if (options.hasOwnProperty(i)) {
        root.options[i] = options[i];
      }
    }
    // convert networks string into array
    //root.options.networks = root.options.networks.toLowerCase().split(",");
    root.options.networks = root.options.networks.split(",");

    function getOptions(el) {
      // integrate data attribute options
      var ret = {};
      for (var i in root.options) {
        if (root.options.hasOwnProperty(i)) {
          ret[i] = root.options[i];
        }
      }

      // these attrs must get dynamically.
      ret.url = window.location.href;
      ret.title = root.getTitle();
      ret.image = root.getImage();
      ret.description = root.getDescription();

      for (var option in el.dataset) {
        // replace only 'share-' prefixed data-attributes
        if (option.match(/share/)) {
          var newOption = option.replace(/share/, "");
          if (!newOption.length) {
            continue;
          }
          newOption = newOption.charAt(0).toLowerCase() + newOption.slice(1);
          var val = el.dataset[option];
          if (newOption === "networks") {
            //val = val.toLowerCase().split(",");
            val = val.split(",");
          } else if (newOption === "url" && val && val[0] === "/") {
            // fix relative url problem.
            val = location.origin + val;
          }
          ret[newOption] = val;
        }
      }
      return ret;
    }

    function createDropdown(el) {
      // create dropdown
      var dropdownEl = document.createElement("span");
      dropdownEl.className = "need-share-button_dropdown";
      if (el.querySelector(".need-share-button_dropdown")) {
        return;
      }
      var myoptions = getOptions(el);

      // set dropdown row length
      if (myoptions.iconStyle == "box" && myoptions.boxForm == "horizontal") {
        dropdownEl.className += " need-share-button_dropdown-box-horizontal";
      } else if (myoptions.iconStyle == "box" && myoptions.boxForm == "vertical") {
        dropdownEl.className += " need-share-button_dropdown-box-vertical";
      }

      // set dropdown position
      setTimeout(function () {
        switch (myoptions.position) {
          case "topLeft":
            dropdownEl.className += " need-share-button_dropdown-top-left";
            break;
          case "topRight":
            dropdownEl.className += " need-share-button_dropdown-top-right";
            break;
          case "topCenter":
            dropdownEl.className += " need-share-button_dropdown-top-center";
            dropdownEl.style.marginLeft = -dropdownEl.offsetWidth / 2 + "px";
            break;
          case "middleLeft":
            dropdownEl.className += " need-share-button_dropdown-middle-left";
            dropdownEl.style.marginTop = -dropdownEl.offsetHeight / 2 + "px";
            break;
          case "middleRight":
            dropdownEl.className += " need-share-button_dropdown-middle-right";
            dropdownEl.style.marginTop = -dropdownEl.offsetHeight / 2 + "px";
            break;
          case "bottomLeft":
            dropdownEl.className += " need-share-button_dropdown-bottom-left";
            break;
          case "bottomRight":
            dropdownEl.className += " need-share-button_dropdown-bottom-right";
            break;
          case "bottomCenter":
            dropdownEl.className += " need-share-button_dropdown-bottom-center";
            dropdownEl.style.marginLeft = -dropdownEl.offsetWidth / 2 + "px";
            break;
          default:
            dropdownEl.className += " need-share-button_dropdown-bottom-center";
            dropdownEl.style.marginLeft = -dropdownEl.offsetWidth / 2 + "px";
            break;
        }
      }, 1);


      // fill fropdown with buttons
      var iconClass = myoptions.iconStyle == "default" ? 
                      "need-share-button_link need-share-button_" : 
                      "need-share-button_link-" + myoptions.iconStyle + " need-share-button_link need-share-button_";
      for (var network in myoptions.networks) {
        if (myoptions.networks.hasOwnProperty(network)) {
          var link = document.createElement("span");
          network = myoptions.networks[network].trim();
          var networkLC = network.toLowerCase();
          link.className = iconClass + networkLC;
          // var fontello = ["weibo", "wechat", "douban", "qqzone", "renren","qq","linkedin"];
          // if (fontello.indexOf(networkLC) === -1) {
          //   link.className += " social-" + networkLC;
          // } else {
          link.className += " icon-" + networkLC;
          // }
          link.dataset.network = networkLC;
          link.title = network;
          dropdownEl.appendChild(link);
        }
      }

      dropdownEl.addEventListener("click", function (event) {
        if (closest(event.target, ".need-share-button_link")) {
          event.preventDefault();
          event.stopPropagation();

          root.share[event.target.dataset.network](el);
          return false;
        }
      });

      el.appendChild(dropdownEl);
    }

    // close on click outside
    document.addEventListener("click", function (event) {
      var openedEl = document.querySelector(".need-share-button-opened");
      if (!closest(event.target, ".need-share-button-opened")) {
        if (openedEl) {
          openedEl.classList.remove("need-share-button-opened");

          // hide wechat code image when close the dropdown.
          if (openedEl.querySelector(".need-share-wechat-code-image")) {
            openedEl.querySelector(".need-share-wechat-code-image").remove();
          }
        } else {
          var el = closest(event.target, root.elem);
          if (el) {
            if (!el.classList.contains("need-share-button-opened")) {
              createDropdown(el);
              setTimeout(function () {
                el.classList.add("need-share-button-opened");
              }, 1);
            }
          }
        }
      } else {
        setTimeout(function () {
          openedEl.classList.remove("need-share-button-opened");

          // hide wechat code image when close the dropdown.
          if (openedEl.querySelector(".need-share-wechat-code-image")) {
            openedEl.querySelector(".need-share-wechat-code-image").remove();
          }
        }, 1);
      }
    });

  };
})();

路径：themes\next\source\lib\needsharebutton\needsharebutton.css下的needsharebutton.css

/***********************************************
  needShareButton
  - Version 1.0.0
  - Copyright 2015 Dzmitry Vasileuski
  - Licensed under MIT (http://opensource.org/licenses/MIT)
***********************************************/
/* Social icons font
***********************************************/
@import url('font-embedded.css');
.need-share-button {
  position: relative;
}
.need-share-button-opened {
  position: relative;
}
.need-share-button-opened img.need-share-wechat-code-image {
  display: block;
  width: 100%;
  max-width: 200px;
  margin: auto;
}
/*新样式*/
.need-share-button_dropdown {
  position: absolute;
  z-index: 10;
  visibility: hidden;
  overflow: hidden;
  width: 256px;
  font-size: 16px;
  -ms-transition: .3s;
  -webkit-transition: .3s;
  -o-transition: .3s;
  -moz-transition: .3s;
          transition: .3s;
  -ms-transform: translate(200px,0);        /* IE 9 */
  -webkit-transform: translate(200px,0);    /* Safari and Chrome */
  -o-transform: translate(200px,0);     /* Opera */
  -moz-transform: translate(200px,0);
       transform: translate(200px,0);
          
  text-align: right;
  white-space: normal;
  opacity: 0;
  background-color: rgba(0,0,0,0);
}
/*旧样式*/
/* .need-share-button_dropdown {
  position: absolute;
  z-index: 10;

  visibility: hidden;
  overflow: hidden;

  width: 300px;

  font-size: 16px;

  -webkit-transition: .3s;
          transition: .3s;
  -webkit-transform: scale(.1);
      -ms-transform: scale(.1);
          transform: scale(.1);
  text-align: center;
  white-space: normal;

  opacity: 0;
  -webkit-border-radius: 4px;
          border-radius: 4px;
  background-color: #fff;
  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, .5);
          box-shadow: 0 0 2px rgba(0, 0, 0, .5);
} */
.need-share-button-opened .need-share-button_dropdown {
  visibility: visible;

  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);

  opacity: 1;
}
.need-share-button_dropdown-box-vertical,
.need-share-button_dropdown-box-horizontal {
  -webkit-border-radius: 0;
          border-radius: 0;
}
.need-share-button_dropdown-box-vertical {
  width: 50px;
}
.need-share-button_dropdown-box-horizontal {
  width: auto;

  white-space: nowrap;
}
/*旧样式*/
/* .need-share-button_link {
  display: inline-block;

  width: 50px;
  height: 50px;

  line-height: 50px;

  cursor: pointer;
  text-align: center;
} */

/*新样式*/
.need-share-button_link {
  display: inline-block;

  width: 20px;
  height: 20px;

  line-height: 0;
  margin-right: 15px;
  cursor: pointer;
  text-align: center;
}


.need-share-button_link:hover {
  -webkit-transition: .3s;
          transition: .3s;

  opacity: .7;
}
/* Dropdown position
***********************************************/
.need-share-button_dropdown-top-left {
  right: 100%;
  bottom: 100%;

  margin-right: 10px;
  margin-bottom: 10px;
}
.need-share-button_dropdown-top-right {
  bottom: 100%;
  left: 100%;

  margin-bottom: 10px;
  margin-left: 10px;
}
.need-share-button_dropdown-top-center {
  bottom: 100%;
  left: 50%;

  margin-bottom: 10px;
}

.need-share-button_dropdown-middle-left {
  /* top: 50%; */
  bottom: 0;
  right: 100%;

  margin-right: 5px;
}

.need-share-button_dropdown-middle-right {
  top: 50%;
  left: 100%;

  margin-left: 10px;
}
.need-share-button_dropdown-bottom-left {
  top: 100%;
  right: 100%;

  margin-top: 10px;
  margin-right: 10px;
}
.need-share-button_dropdown-bottom-right {
  top: 100%;
  left: 100%;

  margin-top: 10px;
  margin-left: 10px;
}
.need-share-button_dropdown-bottom-center {
  top: 100%;
  left: 50%;

  margin-top: 10px;
}
/* Default theme
***********************************************/
.need-share-button-default {
  display: inline-block;

  margin-bottom: 0;
  padding: 6px 12px;

  font-size: 14px;
  line-height: 1.42857143;
  font-weight: 400;
  color: #333;

  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  text-align: center;
  vertical-align: middle;

  border: 1px solid #ccc;
  -webkit-border-radius: 4px;
          border-radius: 4px;
  background-color: #fff;
}
/* Network buttons
***********************************************/
.need-share-button_wechat:hover {
  color: #aaff00;
}
.need-share-button_wechat{
  color: #7f7f7f;
}
.need-share-button_wechat.need-share-button_link-box {
  color: #fff;

  background: #a2dc30;
}
.need-share-button_weibo{
  color: #7f7f7f;
}
.need-share-button_weibo:hover {
  color: #ff0000;
}

.need-share-button_weibo.need-share-button_link-box {
  color: #fff;

  background: #d52b2b;
}
.need-share-button_douban {
  color: white;
}
.need-share-button_douban:hover {
  color: rgb(0, 255, 72);
}
.need-share-button_douban{
  color: #7f7f7f;
}
.need-share-button_douban.need-share-button_link-box {
  color: #fff;

  background: #072;
}
.need-share-button_qqzone:hover {
  color: #ffd000;
}
.need-share-button_qqzone{
  color: #7f7f7f;
}
.need-share-button_qqzone.need-share-button_link-box {
  color: #fff;

  background: #ffce00;
}
.need-share-button_qq:hover {
  color: #008cff;
}
.need-share-button_qq{
  color: #7f7f7f;
}
.need-share-button_qqzone.need-share-button_link-box {
  color: #fff;

  background: #659bff;
}
.need-share-button_renren:hover {
  color: #ff00f2;
}
.need-share-button_renren{
  color: #7f7f7f;
}
.need-share-button_renren.need-share-button_link-box {
  color: #fff;

  background: #207cc5;
}
.need-share-button_mailto {
  color: #efbe00;
}
.need-share-button_mailto.need-share-button_link-box {
  color: #fff;

  background: #efbe00;
}
.need-share-button_twitter {
  color: #00acec;
}
.need-share-button_twitter.need-share-button_link-box {
  color: #fff;

  background: #00acec;
}
.need-share-button_pinterest {
  color: #cd2027;
}
.need-share-button_pinterest.need-share-button_link-box {
  color: #fff;

  background: #cd2027;
}
.need-share-button_facebook {
  color: #3b5998;
}
.need-share-button_facebook.need-share-button_link-box {
  color: #fff;

  background: #3b5998;
}
.need-share-button_googleplus {
  color: #d44132;
}
.need-share-button_googleplus.need-share-button_link-box {
  color: #fff;

  background: #d44132;
}
.need-share-button_reddit {
  color: #000;
}
.need-share-button_reddit.need-share-button_link-box {
  color: #fff;

  background: #000;
}
.need-share-button_delicious {
  color: #000;
}
.need-share-button_delicious.need-share-button_link-box {
  color: #fff;

  background: #000;
}
.need-share-button_stumbleupon {
  color: #f04e23;
}
.need-share-button_stumbleupon.need-share-button_link-box {
  color: #fff;

  background: #f04e23;
}
.need-share-button_linkedin:hover {
  color: #0085af;
}
.need-share-button_linkedin{
  color: #7f7f7f;
}
.need-share-button_linkedin.need-share-button_link-box {
  color: #fff;

  background: #0085af;
}
.need-share-button_slashdot {
  color: #026664;
}
.need-share-button_slashdot.need-share-button_link-box {
  color: #fff;

  background: #026664;
}
.need-share-button_technorati {
  color: #49ae47;
}
.need-share-button_technorati.need-share-button_link-box {
  color: #fff;

  background: #49ae47;
}
.need-share-button_posterous {
  color: #795d31;
}
.need-share-button_posterous.need-share-button_link-box {
  color: #fff;

  background: #795d31;
}
.need-share-button_tumblr {
  color: #34465d;
}
.need-share-button_tumblr.need-share-button_link-box {
  color: #fff;

  background: #34465d;
}
.need-share-button_googlebookmarks {
  color: #fde331;
}
.need-share-button_googlebookmarks.need-share-button_link-box {
  color: #fff;

  background: #fde331;
}
.need-share-button_newsvine {
  color: #03652c;
}
.need-share-button_newsvine.need-share-button_link-box {
  color: #fff;

  background: #03652c;
}
.need-share-button_evernote {
  color: #79d626;
}
.need-share-button_evernote.need-share-button_link-box {
  color: #fff;

  background: #79d626;
}
.need-share-button_friendfeed {
  color: #b0cbe9;
}
.need-share-button_friendfeed.need-share-button_link-box {
  color: #fff;

  background: #b0cbe9;
}
.need-share-button_vkontakte {
  color: #4c75a3;
}
.need-share-button_vkontakte.need-share-button_link-box {
  color: #fff;

  background: #4c75a3;
}
.need-share-button_odnoklassniki {
  color: #ed812b;
}
.need-share-button_odnoklassniki.need-share-button_link-box {
  color: #fff;

  background: #ed812b;
}
.need-share-button_mailru {
  color: #f89c0e;
}
.need-share-button_mailru.need-share-button_link-box {
  color: #fff;

  background: #f89c0e;
}

路径：..\blog\themes\next\source\css\_common\components\third-party\needsharebutton.styl下的needsharebutton.styl

#needsharebutton-postbottom {
  position: relative;
  cursor: pointer;
  height: 26px;

  .btn {
    display: initial;
    padding: 1px 4px;
    border: 1px solid $btn-default-border-color;
    border-radius: 3px;
  }
}

/*原始样式*/
// #needsharebutton-float {
//     position: fixed;
//     bottom: 38px;
//     left: -8px;
//     z-index: 9999;
//     cursor: pointer;

//   .btn {
//     //display: initial;
//     padding: 0 10px 0 14px
//     border: 1px solid $btn-default-border-color;
//     border-radius: 4px;
//   }
// }

/*新样式*/
#needsharebutton-float {
    position: fixed;
    bottom: 70px
    right: 30px
    z-index: 9999;
    cursor: pointer;

  .btn {
    border: 0;
    width: 14px
    padding: 5px
    line-height: 0
    height 14px
    background: rgba(0,0,0,0)
  }
}

路径：..\themes\next\source\lib\needsharebutton\font-embedded.css下的font-embedded.css

/*iconfont */
@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1584449909698'); /* IE9 */
  src: url('iconfont.eot?t=1584449909698#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
  url('iconfont.woff?t=1584449909698') format('woff'),
  url('iconfont.ttf?t=1584449909698') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('iconfont.svg?t=1584449909698#iconfont') format('svg'); /* iOS 4.1- */
}

  
.need-share-button_dropdown [class^="icon-"]:before, .need-share-button_dropdown [class*=" icon-"]:before {
  font-family: "iconfont";
  font-style: normal;
  font-weight: normal;
  speak-as: none;

  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;

  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;

  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;

  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */

  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-douban:before {
  content: "\e600";
}

.icon-wechat:before {
  content: "\e617";
}

.icon-qq:before {
  content: "\e61d";
}

.icon-renren:before {
  content: "\e603";
}

.icon-weibo:before {
  content: "\e645";
}

.icon-qqzone:before {
  content: "\e633";
}

.icon-linkedin:before {
  content: "\e73e";
}