Typecho主题插件站
每一个作品都值得被记录

Typecho 微信分享插件 WeChatShare

Typecho爱好者插件列表 • 879次浏览 • 发布 2023-06-24 • 更新 2023-06-24
极致加速的V2Ray 助您畅享全球网络 & 搬瓦工VPS最新优惠码

插件简介

WeChatShare是Typecho的微信分享插件:自定义微信分享链接中的标题、描述、小图标和URL。

目前WeChatShare同名插件共有三款,其中两款应该是同一个插件,由于原作者不再维护了,其他开发者继续更新维护的,所以在使用时选择其中一款即可。

Typecho 缓存版微信分享缩略图与简介插件 WechatShare
Typecho 微信分享插件 WeChatShare
Typecho 微信分享插件 WeChatShare

查看更详细的配置教程:利用JS-SDK给Typecho微信分享链接带上自定义封面和简介

使用此插件自定义微信分享链接中的标题、描述、小图标和URL,包括分享给朋友/分享到朋友圈,效果如下:

image-20210330160130075.png

左边是原始的链接样式,右边是自定义后的链接样式

插件使用

  • 下载最新版本插件
  • 将下载的压缩包进行解压,文件夹重命名为WeChatShare,上传至Typecho插件目录usr/plugins
  • 检查WeChatShare插件目录文件是否有读写权限,如果没有请增加
  • 后台激活插件
  • 到插件配置页面填写插件配置信息

插件教程

  • 您需要有一个公众号,并且公众号通过微信认证
  • 在插件中填写微信公众号平台中获取到的 AppIDAppSecret (开发 > 基本配置)
  • 添加博客域名到JS安全域名中(设置 > 公众号设置 > 功能设置 > JS接口安全域名)
  • 配置完成后,可以在每篇博客的编辑页面配置微信分享,设置标题、描述、小图标和URL等信息

Pjax配置

如果你的网站使用了pjax技术,则需要进行下一步的设置,否则在页面发生跳转后插件将无法正常工作。

1. 在你的pjax-container中添加以下代码

下面代码的作用是在完成pjax刷新之后,替换成新的文章信息

    <script>
        var pageInfo = {
            title: '<?php echo $this->title; ?>',
            parameter_type: '<?php echo $this->parameter->type; ?>',
            cid: '<?php echo $this->cid; ?>',
            signature_url: '<?php
                $http_type = ((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == 'on')
                    || (isset($_SERVER['HTTP_X_FORWARDED_PROTO'])
                        && $_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https')) ? 'https://' : 'http://';
                $signature_url = $http_type . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
                // pjax
                $signature_url = preg_replace('/\?_pjax=.*/','',$signature_url);
                echo $signature_url; ?>'
        };
    </script>

2. 在你的pjax回调函数中添加以下代码

下面代码的作用是在pjax刷新之后重新调用wx.config

new WX_Custom_Share().init();

3. 我的pjax代码示例

我的pjax代码如下:

$(document).pjax('a[href*="<?php Helper::options()->siteUrl()?>"]:not(a[target="_blank"], a[no-pjax])', {
        container: '#content',
        fragment: '#content',
        timeout: 8000
}).on('pjax:send', function () {
        // some animate code......
}).on('pjax:complete',
        function () {
        // 微信分享插件
        new WX_Custom_Share().init();
});

其中设置了#content为pjax容器,因此我向该div中添加代码:

<div id="content" class="app-content">
    <script>
        // 第一步中给出的代码
    </script>

然后我在上面的pjax回调中添加了new WX_Custom_Share().init();,即可完成pjax的配置

插件问题解答

  • Q:我暂时没有可用的微信公众号,怎么快速试用?
  • A:可以使用开发者工具里面的公众平台测试账号,注意需要关注测试公众号才能生效
  • Q:如何调试我的网页,确认我的配置正确?
  • A:推荐下载官方的web开发者工具,查看控制台信息
  • Q:在插件填写的配置信息为什么没有保存?
  • A:先禁用,重新启用插件后再填写。这是原作者留下的BUG......我没去fix。

本文检索关键词:插件列表
下载地址
关闭浏览器广告屏蔽插件或者注册登陆即可看到下载地址

注册 登陆

  更新时间:2023年06月24日

  文件说明:Typecho 微信分享插件 WeChatShare

  软件作者:Yuchao Huang

  下载链接: 链接1 链接2 推荐高性价比服务器

厂商投放
添加新评论 »