一键分享功能是网站社交化的一个重要组件，当前发现一款使用非常简单的js插件，就是share.js，项目地址: https://github.com/overtrue/share.js 。 share.js使用非常简单，它可以通过参数配置自由控制展示哪些分享图标，同时它还可以自定义分享时的title以及icon。

如此简单的一个js组件，对于我这样的一个后端开发人员，那也是分分钟上手，用法这里不细说， 请参考作者github。现在结合share.js，给自己的静态博客实现一键分享功能，同时给自己的博客实现通过参数控制分享图标的显示位置。

要使用share.js功能，首先要把share.js的css文件、js文件都引入到html中。从share.js项目的src目录，直接将子目录css、font、js文件夹 复制到博客项目的static目录中，然后将js、css文件引入主模板中即可，js文件只需要qrcode.js以及social-share.js文件即可。

<link rel="stylesheet" href="{{ "css/share.min.css" | relURL }}">
<script src="/js/social-share.min.js"></script>
<script src="/js/qrcode.js"></script>

一键分享功能常见的是出现的文章的结尾部分，另外就是固定在屏幕中间位置。
新建一个分享模板share.html，里面内容如下:

<div class="social-share"></div>

分享功能在本地用localhost的时候测试会报错或者失败，部署到服务器通过域名分享则功能正常。

本文属原创，转载请注明原文：https://pangsuan.com/p/share_js.html