Home / PostsPost

为您的站点添加分享插件

嘟噜聪2020/03/01 14:24:50 [blog] [share] 434人已阅

简介 为了给站点引流,分享工具肯定是必不可少的,那么这里我就推荐一款不错的开源分享工具。![](http://source.qiniu.cnd.nsini.com/images/2020/03/4c

为了给站点引流,分享工具肯定是必不可少的,那么这里我就推荐一款不错的开源分享工具。

安装

Github地址: https://github.com/overtrue/share.js

在文章的详情页引入样式及js脚配地址及分享插件所显示的位置,为了减了站点流量访问,我就直接使用免费的CDN服务了:

<div class="social-share" data-initialized="true"></div> <!-- 插件所展示的位置 -->

<!-- css 和 js -->
<link rel="stylesheet" href="https://cdn.bootcss.com/social-share.js/1.0.16/css/share.min.css"/>
<script src="https://cdn.bootcss.com/social-share.js/1.0.16/js/jquery.share.min.js"></script>

使用

所有配置可选,默认的参数能满足基础需求,但似乎由于作者太长时间没更新了,有些功能似乎不太好使:

可用的配置有:

<script>
let config = {
	url: window.location.href, // 网址,默认使用 window.location.href
	source: '', // 来源(QQ空间会用到), 默认读取head标签:<meta name="site" content="https://lattecake.com" />
    title: "{{title}}|{% for tag in tags %}|{{tag.name}}{% endfor %}",
    description: '{{description}}', // 描述, 默认读取head标签:<meta name="description" content="" />
    origin: '@ysz1121', // 分享 @ 相关 twitter 账号
    sites: ['qzone', 'qq', 'weibo', 'wechat', 'douban', 'linkedin', 'facebook', 'twitter'],  // 启用的站点
    image: '{{banner_image}}', // 图片, 如果不指定,默认取网页中第一个img标签
    wechatQrcodeTitle: "微信扫一扫:分享", // 微信二维码提示文字
    wechatQrcodeHelper: '<p>微信里点“发现”,扫一下</p><p>二维码便可将本文分享至朋友圈。</p>',
};

$(".social-share").share(config);
</script>

使用: data-initialized="true" 标签或者 initialized 配置项来禁用自动生成icon功能。

除了通过上面js脚本来配置,也可以通过标签 data-xxx 来设置例如:

驼峰转为中横线,如wechatQrcodeHelper 的data标签为data-wechat-qrcode-helper

例如:

<div class="social-share" data-initialized="true" data-wechat-qrcode-title="请打开微信扫一扫">
    <a href="#" class="social-share-icon icon-weibo"></a>
    <a href="#" class="social-share-icon icon-qq"></a>
    <a href="#" class="social-share-icon icon-wechat"></a>
    <a href="#" class="social-share-icon icon-qzone"></a>
    <a href="#" class="social-share-icon icon-facebook"></a>
    <a href="#" class="social-share-icon icon-twitter"></a>
    <a href="#" class="social-share-icon icon-douban"></a>
    <a href="#" class="social-share-icon icon-linkedin"></a>
</div>

以上a标题会自动加上分享链接(a 标签必须带 icon-NAME 属性,不然分享链接不会自动加上)。

最图效果

尾巴

假期在家把我博客用go-kit重写了一遍,也使用的新模版,欢迎大家访问,以后有时间我再进行开源。

不用我说了,大家都懂的。您的恩赐就是我更新的动力

很赞哦! (1)

文章评论

标签

站点信息

  • 微信公众号