Hexo NexT主题使用needmoreshare2微信分享图片加载失败

导语

使用hexo搭建的静态博客,NexT主题下开启分享功能,有好几种分享功能,我用的是needmoreshare2的。
具体设置是在主题配置文件里,这样设置的

needmoreshare2:
  enable: true
  postbottom:
    enable: true
    options:
      iconStyle: box
      boxForm: horizontal
      position: topCenter
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
  float:
    enable: false
    options:
      iconStyle: box
      boxForm: vertical
      position: bottomCenter
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook

效果

设置完之后,在文章下面会有个分享的小按钮,点击按钮会出来如上配置的那些社交网站的图标,别的都能正常跳转处理推特和脸书是外国的进不去外,只有点击微信时加载不出来,就是下面图片这样的

Hexo NexT主题使用needmoreshare2微信分享图片加载失败_第1张图片
image

原因

F12下找到对应的img标签,可以看到它的src属性值是一个链接,链接的参数就是你的当前文章的地址(如下图),把这个链接复制出来直接在地址栏访问也是访问不到的。

可以推测这应该是把你的文章通过这个api生成一个二维码图片返回,但是现在这个api调不通了。

使用API生成二维码

既然找到了问题的根源,那就好办了。就是换个生成二维码的api。

于是在网上找免费的生成二维码的api,找到了两个,一个是中国的网站,在这个网站有api,即http://qr.liantu.com/api.php?text=要生成二维码的内容;

另一个是谷歌的api是https://chart.googleapis.com/chart?cht=qr&chs=500x500&chl=要生成二维码的内容

第一种还有好多参数可以设置


Hexo NexT主题使用needmoreshare2微信分享图片加载失败_第2张图片
image
Hexo NexT主题使用needmoreshare2微信分享图片加载失败_第3张图片
image

第二个是谷歌的我试了在我电脑上是可以的,到手机上又不行了,后来发现是因为我电脑翻墙了,手机没有就访问不了,所以不用这个,用第一种。

找到要替换的API

现在找到了可以用的api,接下来就是去替换了,找到替换的地方。

这个是在next\source\lib\needsharebutton\needsharebutton.js里,如下图:

Hexo NexT主题使用needmoreshare2微信分享图片加载失败_第4张图片
image

这个就是不能访问的旧的api,我们就是要替换这个。

替换后是这样子:

Hexo NexT主题使用needmoreshare2微信分享图片加载失败_第5张图片
image

我使用了logo

验证

我们试试效果,hexo ghexo d然后访问自己的文章

Hexo NexT主题使用needmoreshare2微信分享图片加载失败_第6张图片
VQAoRI.png

显然我们成功了。。

需要注意的是,logo的链接不可以是https的,因为api是http的,加载不了。
查看效果

你可能感兴趣的:(Hexo NexT主题使用needmoreshare2微信分享图片加载失败)