Home / PostsPost
为您的站点添加分享插件
嘟噜聪2020/03/01 14:24:50
[blog]
[share]
2162人已阅
简介 为了给站点引流,分享工具肯定是必不可少的,那么这里我就推荐一款不错的开源分享工具。, 默认读取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)
上一篇:做一个小炒豆腐
下一篇:我们家小胖猫换新衣了