PHP 实现文章生成分享小卡片
  Skill  5445℃  33条  1055字数  预计阅读时间3分钟

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

  Skill  5445℃  33条  1055字数  预计阅读时间3分钟

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

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

首先下载博主上传的两个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

如还有问题,欢迎交流!

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

kapian.jpg

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

scewm.jpg

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

首先下载博主上传的两个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. 油油
    A罩

    图片跨域的问题可以把图片转成base64代码输出,再进行截图。

    Chrome 广东省揭阳市
    1. Jdeal
      主人
      @油油

      嗯,目前使用的就是base64输出的,暂无问题。 aru_12.png

      Safari 江苏省无锡市
  2. 夏目贵志
    A罩

    点击生成海报,没有触发效果!

    Chrome 福建省三明市
    1. Jdeal
      主人
      @夏目贵志

      控制台报错啥额,我看不到,还是说我的站无法生成海报啊~

      Chrome 江苏省无锡市
      1. 夏目贵志
        A罩
        @Jdeal

        能否添加图片alt标签,还有就是点击图片,不触发下载呀 点击下载 没效果

        Chrome 福建省三明市
        1. Jdeal
          主人
          @夏目贵志

          你可以把下载的/a标签结尾放到海报img后面结束,这样在pc端点击图片就可以下载了。但是在手机移动端base64的图片无法点击下载,需要将base64转换成png才能进行下载保存到相册动作。

          Chrome 江苏省无锡市
          1. 夏目贵志
            A罩
            @Jdeal

            https://jiba.icu/p/20200326201756 我目前是这样的,只能叫用户手动保存了!! aru_28.png

            Chrome 福建省三明市
            1. Jdeal
              主人
              @夏目贵志

              实在有需要你可以去看看这个https://qqdie.com/archives/typecho-teposter-plugin.html,这个作者做的海报插件,你可以去问问他。我这个是自己折腾的,代码什么的都是粗制滥造额,只考虑到我自己的使用习惯。

              Chrome 江苏省无锡市
        2. Jdeal
          主人
          @夏目贵志

          点击图片是不能直接下载图片的,原本鼠标移动到海报上会触发显示下载按钮,但是文章里的代码下载按钮被我默认隐藏了,前期测试可以点击下载按钮下载的,我明天再看下告诉你吧。

          Safari 江苏省无锡市
      2. 夏目贵志
        A罩
        @Jdeal

        我的问题,是哪个获取文章图片 元素没修过..然后呢我换成随机图片api 返回格式不对导致没反应的..我的!!你的正常呀 没问题的!!

        Chrome 福建省三明市
  3. linf
    A罩

    博主能否分享一下最终页面源代码的js

    Chrome 江苏省无锡市
    1. Jdeal
      主人
      @linf

      自行格式化和检查下源码哈~  😁

      Chrome 江苏省无锡市
  4. yaliai
    B罩

    谢谢分享,我是小白,不知道我会不会应用,尴尬 aru_28.png

    夸克浏览器 广东省
    1. Jdeal
      主人
      @yaliai

      你的这个主题我记得有卡片分享的功能的,因为我也购买的这个主题,虽然没使用,哈哈😊

      Safari 江苏省无锡市
      1. yaliai
        B罩
        @Jdeal

        真的有吗,不知道,尴尬

        夸克浏览器 广东省
        1. Jdeal
          主人
          @yaliai

          你主题后台设置看看呢

          Safari 江苏省无锡市
          1. yaliai
            B罩
            @Jdeal

            我刚才试了一下,确实有。但是没有你这个比较全面。

            夸克浏览器 广东省
            1. Jdeal
              主人
              @yaliai

              我这个是自己写的,所以自定义了样式排版

              Safari 江苏省无锡市
          2. yaliai
            B罩
            @Jdeal

            好嘞,谢谢你

            夸克浏览器 广东省
            1. Jdeal
              主人
              @yaliai

              没事,不客气

              Safari 江苏省无锡市
              1. yaliai
                B罩
                @Jdeal

                回头试试你这个,但是看你写的好复杂啊,尴尬。你把他做成插件多好,哈哈哈

                夸克浏览器 广东省
  5. Kane
    B罩

    底图盗走了,真漂亮。

    Chrome 北京市
    1. Jdeal
      主人
      @Kane

      哈哈~

      Chrome 江苏省无锡市
  6. 格子老师
    B罩

    学习了 这个不错

    Chrome 天津市
  7. LiYanan2004
    A罩

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

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

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

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

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

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

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

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

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

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

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

          Chrome 江苏省盐城市
  8. 枂下
    B罩

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

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

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

      Chrome 江苏省无锡市
  9. 枂下
    B罩

    666,晚上试下

    Chrome 广东省广州市