PHP实现文章生成分享小卡片
in Skill with 2821 Views

PHP实现文章生成分享小卡片

in Skill with 2822 Views

有的时候我们写了一篇很好的文章,想在朋友圈发布时除了常规的发布文章链接,其实还可以有一种更加美观直接的方法,就是本文所述的“文章自动生成带二维码卡片”,该方法更容易在朋友圈获得阅读,下方是效果图。

如图所述,我们可以生成一张带有作者、日期、文章简述及文章地址二维码等信息的卡片,当用户扫码或者在微信中长按识别后就可以直接到达我们的文章页面,相比较直接分享链接,该方法更加美化更加吸引用户。下面我们就一步步来实现该功能。

首先下载博主上传的两个JS文件,将其放入您的网站JS目录中,并在网站头部或尾部引用这两个文件。

https://pan.baidu.com/s/1TDbqGigLIPvQ-_wgCcwMOg  密码:m4gy

这一步骤完成后,在网站页面需要生成卡片的地方创建卡片生成按钮及下载按钮。

<div class="poster"><a class="btn-download" download="poster.jpg" style="display:none;"></a></div>
<input type="button" value="生成海报" class="posters" onclick="doS()">

同时在页面源代码下方加入如下的生成卡片JS。

<script>
var isFirst = true;
  function doS() {
    if (isFirst) {
      poster.init({
        banner: "<?php if($this->attachments(1)->attachment->isImage) $this->attachments(1)->attachment->url(); ?>",
        selector: ".poster",
        author: "<?php $this->author(); ?>",
        title: "<?php $this->title() ?>",
        titleStyle: {
          font: "bold 50px Arial",
          color: "rgba(66, 66, 66, 1)"
        },
        content: "<?php $this->excerpt(84, '...'); ?>",
        contentStyle: {
          font: "24px Arial",
          lineHeight: 1.2,
          position: "center",
          color: "rgba(88, 88, 88, 1)"
        },
        logo: "Jdeal.cn",
        logoStyle: {
          color: "rgba(0, 0, 120, 1)"
        },
        description: "Life is like a Design.    ",
        qrcode: 'https://您的网址/QR/?url=<?php $this->permalink() ?>',
        qrcodeDesc: "长按识别二维码阅读全文",
        callback: download
      });
      function download(container) {
        const $btn = container.querySelector(".btn-download");
        const $img = container.querySelector("img");
        $btn.setAttribute("href", $img.getAttribute("src"))
      }
      isFirst = false
    }
  };
</script>

其中banner:代表卡片的头图部分调用,可以自行修改,任何PHP网站都适用,博主这里使用的是Typecho的调用代码;author:代表的是作者同上道理,可自行修改;title:代表标题;content:代表文章简述;logo:代表下部分蓝色字处的网站地址;description:代表网站地址上方的简述;qrcode:代表文章地址的二维码。大家可根据自身的网站自行调用。

这里有个需要强调的地方,主要是二维码的问题。由于该方法需要调用文章生成的二维码图片,并且经测试无法使用跨域图片,所以如果您使用的是第三方的二维码生成API,那么则无法显示二维码图片以及无法显示该卡片,现在我的解决方法是自行在网站搭建了一个生成二维码的PHP程序,也非常简单。下载下方源码。

https://pan.baidu.com/s/1yzgBGD7e6vCQ4uPAQbHX6Q  密码:f18e

您可以在网站根目录创建一个QR文件夹,将源码中的index.php打开,修改其中的$home及$name。修改完成后将phpqrcode.php、index.php两个文件导入您新建的QR文件夹即可。调用方法为https://您的网址/QR/?url=后面接上调用文章地址的方法即可

至此所有的工作就完成了,对了,CSS部分我这边不做过多的赘述,可自行根据个人喜好调整。当然该方法并不能算是很完美的方法,但是在影响网站速度方面经过测试并没有太多的影响,代码方法可能有不完美的地方,跨域问题暂时也没有解决,大家如果有好的方法或者想法,可以留言,我们可以探讨哈。

最后申明下,博主的博客是Typecho搭建的,所以上诉代码中的调用均为Typecho的调用方法。至于其他的PHP博客或网站,大家可自行查找调用方法并替换,该方法在博主的Wordpress博客中经测试也可正常使用。谢谢!

2019.10.11 最新补充

由于该方法中banner和二维码两张图片可能存在跨域的问题,博主经半天的测试,使用了新的调用方法。

使用如下二维码生成方法,将二维码实时生成base64就可以避免域名跨域问题。

同时博主的服务器上开启了七牛云,使用原来的调用语句时出现了调用的是附件地址而不是七牛云地址,于是用下面的方法获取ID中的第一个img地址,现在已经完美解决,同时也不存在跨域问题。

function urlQRcodeBase64() {
    const qr = new QRious();
    qr.value = "页面地址调用方法";
    var pic_url = qr.toDataURL();
    return pic_url
};
var qrcode = urlQRcodeBase64();
var banners = document.getElementById("post-content").getElementsByTagName("img")[0].src;

同时将上面的方法应用到之前的生成语法中,如下:

···
banner: banners,
qrcode: qrcode,
qrcodeDesc: "长按识别二维码阅读全文",
callback: download
···

下方是二维码生成并转为 base64 的 JS 文件,下载后需引用才可使用上诉方法。

https://pan.baidu.com/s/1oxO5SKnigVG5RfbZbJAQqw  密码:4l6e

如还有问题,欢迎交流!

如果本文对您有用的话,欢迎在下方留言评论哦~
发表评论
选择表情
  1. 格子老师
    B罩

    学习了 这个不错

    Chrome 69 天津市 联通
  2. LiYanan2004
    A罩

    貌似 hexo 不太行,ejs里面加入了那个doS()代码但是html里面还是<?php%20$this->permalink()%20?>,有什么解决方法吗??

    Chrome 77 江苏省盐城市 电信
    1. LiYanan2004
      A罩
      @LiYanan2004

      二维码的那个一直进不去,/QR/?url= 这个网址一打就跳404

      Chrome 77 江苏省盐城市 电信
      1. Jdeal
        主人
        @LiYanan2004

        有点没听明白说是啥意思额,这个后面是接着写调用的文章路径的语法额,具体是哪里有问题呢

        Chrome 63 江苏省无锡市 电信
        1. LiYanan2004
          A罩
          @Jdeal

          请问如何调整图片区域的大小呢??

          Chrome 77 江苏省盐城市 电信
          1. Jdeal
            主人
            @LiYanan2004

            poster.min.js和poster.js文件里有相应的尺寸调整

            Chrome 63 江苏省无锡市 电信
        2. LiYanan2004
          A罩
          @Jdeal

          我重新写了一个生成二维码的东西,现在大致可以了,还在调整!

          Chrome 77 江苏省盐城市 电信
  3. 枂下
    B罩

    已搞定,适配了下宽度啥的。就是不知道,我的标题太长该怎么办。海报里的标题都不全了

    Chrome 74 广东省广州市越秀区 电信
    1. Jdeal
      主人
      @枂下

      是的,标题太长的话会显示不全,可以把titleStyle:{font:"bold 50px}里面的字体值调小一点,字小一点的话可以容纳更长的标题。

      Chrome 63 江苏省无锡市 电信
  4. 枂下
    B罩

    666,晚上试下

    Chrome 74 广东省广州市 电信