东风不来
三月的柳絮不飞

百度分享阵亡,Share.js大放光彩 建站必备


昨天意外发现 懿古今 大佬的一篇“百度分享已经关闭”的文章,文字咖试了一下百度分享,发现博客的百度分享真的不能用了!其实文字咖之前就很想把百度分享换成其它的分享程序,但一直懒的折腾这个,既然不能用了,那就换吧!

目前除了百度分享外,网上用的比较多的一个是 bShare 和 JiaThis,比较让人郁闷的是,这两种也不支持 HTTPS ,虽然网上已经出来了解决办法,当时 bShare 的样式感觉太山寨了,有点让人无法接受,所以文字咖果断选择开源的 Share.js,配置简单,样式好看,没有乱七八糟的其它图标,非常干净!使用说明如下:

1. 下载官网源代码

https://overtrue.me/share.js/
从官网下载 Share.js 的源代码!

2. 安装

对于安装方式,官方提供了好几种,文字咖推荐把刚才下载下来的里面的 dist 文件夹复制到自己的主题根目录里面,为后面调用做准备。

这里就很简单了,因为文字咖是使用的 DUX 主题,在主题文件的 header.php 文件的 </head> 标签前加入下面代码:

<link href="<?php echo get_template_directory_uri(); ?>/dist/css/share.min.css" rel="stylesheet">
<script src="<?php echo get_template_directory_uri(); ?>/dist/js/social-share.min.js"></script>

3. 调用

把 DUX 主题设置里的分享代码替换成下面的代码即可:

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

清理服务器缓存,刷新页面就可以得到和文字咖分享的相同样式了!

4. 后记

对于一般的博客分享使用的话,到这一步就足够了,文字咖认为毕竟就一个简单的分享功能,没必要折腾那么多时间,当然爱折腾的强迫症除外,Share.js 也提供了很多自定义的配置,如自定义图标:
使用: data-initialized="true" 标签或者 initialized 配置项来禁用自动生成 icon 功能。

<div class="social-share" data-initialized="true">
    <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-qzone"></a>
</div>

上面的 a 标签会自动加上分享链接,并且 a 标签必须带 icon-NAME 属性,不然分享链接不会自动加上。

当然,Share.js 还有很多折腾地方,文字咖这里就不一一列举了,教程到此结束!

赞(4) 打赏
未经允许不得转载:文字咖 » 百度分享阵亡,Share.js大放光彩

评论 6

1 + 7 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #0

    大神,dux主题页尾:网站已平稳运行xxx这行怎么去掉?望回复

    来力 4个月前 (07-11) 来自天朝的朋友 谷歌浏览器 Mac OS X 10_15_5 回复
    • Wonder Zhou

      @来力 这个在 footer.php 里面

      Wonder Zhou 4个月前 (07-11) 来自天朝的朋友 谷歌浏览器 Windows 10 回复
  2. #0

    后疫情时代,博客可否大有作为?

    VPS驿站 5个月前 (05-28) 来自天朝的朋友 火狐浏览器 Windows 10 回复
  3. #0

    正好借机去掉分享按钮功能及熊掌号 :shui: 百度的东西、诶~

    Aeomo 6个月前 (05-10) 来自天朝的朋友 谷歌浏览器 Windows 7 回复
    • Wonder Zhou

      @Aeomo 嗯嗯,有些东西真的是被逼着换掉的,体验感太差了!

      Wonder Zhou 5个月前 (05-17) 来自天朝的朋友 谷歌浏览器 Windows 10 回复

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏