这篇文章上次修改于 229 天前,可能其部分内容已经发生变化,如有疑问可询问作者。

一键分享功能是网站社交化的一个重要组件,当前发现一款使用非常简单的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的时候测试会报错或者失败,部署到服务器通过域名分享则功能正常。