文章生成分享小卡片 - Jdeal | Life is like a Design.

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

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

首先下载博主上传的两个 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 的调用方法。至于其他的 PHP 博客或网站，大家可自行查找调用方法并替换，该方法在博主的 Wordpress 博客中经测试也可正常使用。