世界上没有偶然，有的只是必然。 收藏本站
登陆 / 注册 搜索

阅读:8.4K   回复: 8

discuz 添加 QQ 分享按钮，分享出图【2020.3.1更新】

原创 [复制链接]
小执念 「古黑浩劫」论坛大牛 2019-7-7 03:10 |显示全部楼层

可遇不可求的事：故乡的云，上古的玉，随手的诗，十九岁的你。

管理员
一、效果预览

网页效果如图:
discuz 添加 QQ 分享按钮，分享出图【2020.3.1更新】 Img-1.jpg
电脑上分享效果:

discuz 添加 QQ 分享按钮，分享出图【2020.3.1更新】 TIM截图20190707011014.png
手机上分享效果:

✌🗽🥑💲🦮‍

discuz 添加 QQ 分享按钮，分享出图【2020.3.1更新】 PXGNP6(NH]DG5B5UQBF%8PK.jpg

二、分享原理

简单来说就是一个带有某些参数 URL，我们在 html 页面上加上一个超链接，和一个图片就可以搞定！

一个例子：
全屏查看
  1. https://connect.qq.com/widget/shareqq/index.html?url=https://www.guhei.net/post/jb1884&desc=%E7%9C%8B%E5%88%B0%E4%B8%80%E7%AF%87%E5%BE%88%20nice%20%E7%9A%84%E6%96%87%E7%AB%A0&title=discuz%20%E6%B7%BB%E5%8A%A0%20QQ%20%E5%88%86%E4%BA%AB%E6%8C%89%E9%92%AE%EF%BC%8C%E5%88%86%E4%BA%AB%E5%87%BA%E5%9B%BE&summary=%E4%B8%80%E3%80%81%E6%95%88%E6%9E%9C%E9%A2%84%E8%A7%88%E7%BD%91%E9%A1%B5%E6%95%88%E6%9E%9C%E5%A6%82%E5%9B%BE:%E7%94%B5%E8%84%91%E4%B8%8A%E5%88%86%E4%BA%AB%E6%95%88%E6%9E%9C:%E6%89%8B%E6%9C%BA%E4%B8%8A%E5%88%86%E4%BA%AB%E6%95%88%E6%9E%9C:%E4%BA%8C%E3%80%81%E5%88%86%E4%BA%AB%E5%8E%9F%E7%90%86%E7%AE%80%E5%8D%95%E6%9D%A5%E8%AF%B4%E5%B0%B1%E6%98%AF%E4%B8%80%E4%B8%AA%E5%B8%A6%E6%9C%89%E6%9F%90%E4%BA%9B%E5%8F%82%E6%95%B0%20URL%EF%BC%8C%E6%88%91%E4%BB%AC%E5%9C%A8%20html%20%E9%A1%B5%E9%9D%A2%E4%B8%8A%E5%8A%A0%E4%B8%8A%E4%B8%80%E4%B8%AA%E8%B6%85%E9%93%BE%E6%8E%A5%EF%BC%8C%E5%92%8C%E4%B8%80%E4%B8%AA%E5%9B%BE%E7%89%87%E5%B0%B1%E5%8F%AF%E4%BB%A5%E6%90%9E%20...&pics=https://img.ghcdn.net/forum/201907/07/010845s3kbrdjsdd77kh3r.jpg&site=%E5%8F%A4%E9%BB%91%E8%AE%BA
复制代码


🦷🌞🥑➡🐅‌

我把这个 URL 拆分成如下，方便理解。

  1. https://connect.qq.com/widget/shareqq/index.html?
    

  2. url=https://www.guhei.net/post/jb1884 //分享地址
    
🖕⛵🍭🆎🦌‎
  3. &desc=看到一篇很 nice 的文章 //分享后说一句话
    

  4. &title=discuz 添加 QQ 分享按钮，分享出图 //标题
    

  5. &summary= discuz 添加 QQ 分享按钮，分享出图 //描述
    

  6. &pics=https://img.ghcdn.net/forum/201907/07/010845s3kbrdjsdd77kh3r.jpg //图片
    

  7. &site=古黑论  //站点名
复制代码

🤟🛑🍏🈷🐟‏

这些都可以通过调用 discuz 默认函数来实现。

三、改代码

👂🚗🔪❎🦌‌我是在帖子页下面的按钮旁边加上的，打开这个文件

  1. default/forum/viewthread_node.htm
复制代码

搜索
  1. viewthread_useraction
复制代码
👨‍🚒‌🩳⌨😉✌
大概在 400 行

在这个代码上面
  1.  <!--{/if}-->
    

  2. <!--{hook/viewthread_useraction}-->
复制代码

✋⛴🥩🉑🦦‌
discuz 添加 QQ 分享按钮，分享出图【2020.3.1更新】 TIM截图20190707023315.png

加上

全屏查看
  1. <!--{eval $share_url = $_G['siteurl'] . rewriteoutput('forum_viewthread', 1, '', $thread['tid'], 1, '', '');}-->🧑‍🎤‏👔🩺😅🦴
    

  2. <!--{loop $post['attachments'] $attach}-->
    

  3. <!--{if $attach['isimage'] == 1}-->
    

  4. <!--{eval $share_img = $_G['setting'][attachurl].'forum/'.$attach['attachment'];}-->
    

  5. <!--{eval break;}-->
    

  6. <!--{/if}-->
    

    👁🛩🍽®🕊‌
  7. <!--{/loop}-->
    

  8. <!--{if !$attach['attachment']}-->
    

  9. <!--{eval $share_img ='https://cdn.ghcdn.net/img/gh_logo.png';}-->
    

  10. <!--{/if}-->
    

  11.                         <a id="qq_share" href="https://connect.qq.com/widget/shareqq/index.html?url={$share_url}&desc=看到一篇很 nice 的文章&title={$post['subject']}&summary={$metadescription}&pics={$share_img}&site={$_G['setting'][bbname]}" title="点击分享到QQ" target="_blank"><i><img src="https://cdn.ghcdn.net/img/qq_share.jpg"> QQ分享</i></a>🥷‍👜🪗🤩✊
复制代码


分享的帖子 URL 必须是伪静态过的，因为 QQ 分享以 “&” 为参数，识别分享的数据。

四、解释一下上面的代码

👍🚘🍌🆗‍


没有查询数据库，不会影响程序运行速度，比插件效率高！！
全屏查看
  1. <!--{eval $share_url = $_G['siteurl'] . rewriteoutput('forum_viewthread', 1, '', $thread['tid'], 1, '', '');}--> //伪静态 URL
    


  2. 

  3. <!--{loop $post['attachments'] $attach}--> // loop 循环得出帖子内附件
    
👍⛵🍍🈴🐥‍
  4. <!--{if $attach['isimage'] == 1}--> //是否为图片
    

  5. <!--{eval $share_img = $_G['setting'][attachurl].'forum/'.$attach['attachment'];}--> //图片地址
    

  6. <!--{eval break;}--> //退出循环
    

  7. <!--{/if}-->
    

  8. <!--{/loop}-->
    
👈🧳🌰📵🐅‌

  9. 

  10. <!--{if !$attach['attachment']}--> //判断没有图片
    

  11. <!--{eval $share_img ='https://cdn.ghcdn.net/img/gh_logo.png';}--> //给出一张默认图片
    

  12. <!--{/if}-->
复制代码


👊🛑🥄☯‏

<a id="qq_share" href="https://connect.qq.com/widget/shareqq/index.html?url={$share_url}&desc=看到一篇很 nice 的文章&title={$post['subject']}&summary={$metadescription}&pics={$share_img}&site={$_G['setting'][bbname]}" title="点击分享到QQ" target="_blank"><i><img src="https://cdn.ghcdn.net/img/qq_share.jpg"> QQ分享</i></a>

我模版有 css 图标，你们可以用 img 插入一个分享图标。

五、总结
👃🌧🍍🆘🪶‍
如果有问题请回帖，可能你们需要微调一下 css ，因为这是根据我自己的模版写的，样式可能不适合所有人。
discuz, 添加, 分享, 按钮, 图一
上一篇
下一篇
帖子热度 8431 ℃


相关帖子
流星☆坠落 「出类拔萃」 2019-7-7 06:00 来自手机 |显示全部楼层

这个用户很懒，还没有填写自我介绍呢~

前排顶，很好！
    

Ron 「踏破虚空」 2019-7-7 17:05 |显示全部楼层

这个用户很懒，还没有填写自我介绍呢~

我觉得OK
    

雾月 「出类拔萃」 2019-7-7 18:04 |显示全部楼层

这个用户很懒，还没有填写自我介绍呢~

大概了解了 不错
   

小执念 「古黑浩劫」论坛大牛 2019-8-18 20:23 |显示全部楼层

可遇不可求的事：故乡的云，上古的玉，随手的诗，十九岁的你。

管理员 
  1. 测试
复制代码



    

二狗 「初入古黑」 2020-9-7 10:52 |显示全部楼层

我是一个老实人

哥  您好 我按照您的教程操作了

🧑‍⚕️‎👠🧻😘🙌



这种情况该怎么解决呢？

新人还请老哥多指点一下

👃🚐🌶♏🦜‍

discuz 添加 QQ 分享按钮，分享出图【2020.3.1更新】 2.png
discuz 添加 QQ 分享按钮，分享出图【2020.3.1更新】 1.png
   

返回列表 发新帖
高级模式
您需要登录后才可以回帖 登录 | 免费注册  

本版积分规则

・ 关于本站・大事记・小黑屋・ 网站地图

GMT+8, 2024-12-27 04:28 , Processed in 0.022467 second(s), 18 queries , Redis On.

Copyright © 2015-2024古黑论

Powered by Discuz! X3.4・Comsenz Inc.

快速回复 返回列表