New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add wechat and alipay reward for post #687

Merged
merged 1 commit into from Mar 1, 2016

Conversation

Projects
None yet
@habren

habren commented Feb 28, 2016

越来越多的平台(微信公众平台,新浪微博,简书,百度打赏等)支持打赏功能,付费阅读时代越来越近,特此增加了打赏功能,支持微信打赏和支付宝打赏。只需要_config.xml中填入微信和支付宝收款二维码即可开启该功能。
未点击效果
unclick

鼠标悬浮效果
hover

点击之后效果
click

iissnan added a commit that referenced this pull request Mar 1, 2016

Merge pull request #687 from habren/reward
Add wechat and alipay reward for post

@iissnan iissnan merged commit 5f381f6 into iissnan:master Mar 1, 2016

1 check passed

hound No violations found. Woof!
@vinnyxiong

This comment has been minimized.

Show comment
Hide comment
@vinnyxiong

vinnyxiong Mar 1, 2016

@habren @iissnan 麻烦介绍一下怎么添加打赏功能,并且更新到wiki上哦

vinnyxiong commented Mar 1, 2016

@habren @iissnan 麻烦介绍一下怎么添加打赏功能,并且更新到wiki上哦

@vinnyxiong

This comment has been minimized.

Show comment
Hide comment
@vinnyxiong

vinnyxiong Mar 1, 2016

在主题下的 _config.yml 中添加如下代码即可,图片改为自己的微信付款二维码。效果示例:
http://vinnyxiong.github.io/blog/hello-world.html

# Donate 文章末尾显示打赏按钮
reward_comment: 坚持原创技术分享,您的支持将鼓励我继续创作!
wechatpay: /images/wechatpay.jpg
alipay: /images/alipay.jpg

vinnyxiong commented Mar 1, 2016

在主题下的 _config.yml 中添加如下代码即可,图片改为自己的微信付款二维码。效果示例:
http://vinnyxiong.github.io/blog/hello-world.html

# Donate 文章末尾显示打赏按钮
reward_comment: 坚持原创技术分享,您的支持将鼓励我继续创作!
wechatpay: /images/wechatpay.jpg
alipay: /images/alipay.jpg

@iissnan iissnan added the Enhancement label Mar 2, 2016

@iissnan iissnan added the Docs label Mar 29, 2016

@iissnan iissnan added this to the v5.0.0 milestone Mar 29, 2016

@luffr

This comment has been minimized.

Show comment
Hide comment
@luffr

luffr Mar 30, 2016

不知道哪里的问题,这个功能设置不成功,请问有什么注意点

luffr commented Mar 30, 2016

不知道哪里的问题,这个功能设置不成功,请问有什么注意点

@luffr

This comment has been minimized.

Show comment
Hide comment
@luffr

luffr Mar 30, 2016

请问这个功能是否支持v0.4.5.2的Mist

luffr commented Mar 30, 2016

请问这个功能是否支持v0.4.5.2的Mist

@iissnan

This comment has been minimized.

Show comment
Hide comment
@iissnan

iissnan Mar 31, 2016

Owner

0.4.5.2 不支持

Owner

iissnan commented Mar 31, 2016

0.4.5.2 不支持

@luffr

This comment has been minimized.

Show comment
Hide comment
@luffr

luffr Mar 31, 2016

我应该没看错,也检查了代码,赏字和背景圆圈没有上下居中

luffr commented Mar 31, 2016

我应该没看错,也检查了代码,赏字和背景圆圈没有上下居中

@luffr

This comment has been minimized.

Show comment
Hide comment
@luffr

luffr Mar 31, 2016

@iissnan 你好,又发现一个疑似问题
在使用打上赏功能后,下面的点击前一篇文章( <Hello World!)的文字和箭头变成居中了,而不是左对齐,查看后一篇文章的话是正常的,打赏功能的贡献者的博客也有这样的情况。我的博客出现的情况,打赏功能贡献者的博客的情况,把打赏功能注释掉又正常了,不知问题出在哪里。

luffr commented Mar 31, 2016

@iissnan 你好,又发现一个疑似问题
在使用打上赏功能后,下面的点击前一篇文章( <Hello World!)的文字和箭头变成居中了,而不是左对齐,查看后一篇文章的话是正常的,打赏功能的贡献者的博客也有这样的情况。我的博客出现的情况,打赏功能贡献者的博客的情况,把打赏功能注释掉又正常了,不知问题出在哪里。

@habren

This comment has been minimized.

Show comment
Hide comment
@habren

habren Apr 1, 2016

@luffr @iissnan reward.swig line 21的div前加斜杠

habren commented Apr 1, 2016

@luffr @iissnan reward.swig line 21的div前加斜杠

@luffr

This comment has been minimized.

Show comment
Hide comment
@luffr

luffr Apr 1, 2016

@habren 正斜杠还是反斜杠?能否把修改后的代码贴出来

luffr commented Apr 1, 2016

@habren 正斜杠还是反斜杠?能否把修改后的代码贴出来

@habren

This comment has been minimized.

Show comment
Hide comment
@habren

habren Apr 1, 2016

@luffr 你开个issue吧,我来提交代码。

改成

habren commented Apr 1, 2016

@luffr 你开个issue吧,我来提交代码。

改成

@habren habren referenced this pull request Apr 1, 2016

Merged

Fixed reward bug #776

@luffr

This comment has been minimized.

Show comment
Hide comment
@luffr

luffr commented Apr 1, 2016

@habren 提交了

@AlanCheen

This comment has been minimized.

Show comment
Hide comment
@AlanCheen

AlanCheen Apr 9, 2016

图片需要放哪里?@vinnyxiong

AlanCheen commented Apr 9, 2016

图片需要放哪里?@vinnyxiong

@AlanCheen

This comment has been minimized.

Show comment
Hide comment
@AlanCheen

AlanCheen Apr 9, 2016

请问跟 公众号功能冲突吗?

AlanCheen commented Apr 9, 2016

请问跟 公众号功能冲突吗?

@iissnan iissnan removed the Docs label May 9, 2016

@vinnyxiong

This comment has been minimized.

Show comment
Hide comment
@vinnyxiong

vinnyxiong May 13, 2016

@AlanCheen 打赏的图片资源放在 souce\images\ 下就行了,然后在主题配置文件中指定一下:

# Donate 文章末尾显示打赏按钮
reward_comment: 坚持原创技术分享,您的支持将鼓励我继续创作!
wechatpay: /images/wechatpay.jpg
alipay: /images/alipay.jpg

vinnyxiong commented May 13, 2016

@AlanCheen 打赏的图片资源放在 souce\images\ 下就行了,然后在主题配置文件中指定一下:

# Donate 文章末尾显示打赏按钮
reward_comment: 坚持原创技术分享,您的支持将鼓励我继续创作!
wechatpay: /images/wechatpay.jpg
alipay: /images/alipay.jpg
@wukoo

This comment has been minimized.

Show comment
Hide comment
@wukoo

wukoo Jun 11, 2016

如果启用这个功能会有下面的报错。
Unhandled rejection Error: ENOENT: no such file or directory, open '/Users/wnz/Projects/wukoo.coding.me/themes/next/layout/_scripts/schemes/.swig' at Error (native) at Object.fs.openSync (fs.js:549:18) at Object.fs.readFileSync (fs.js:397:15) at Object.ret.load (/Users/wnz/Projects/wukoo.coding.me/node_modules/hexo/node_modules/swig/lib/loaders/filesystem.js:55:15) at compileFile (/Users/wnz/Projects/wukoo.coding.me/node_modules/hexo/node_modules/swig/lib/swig.js:695:31) at Object.eval [as tpl] (eval at <anonymous> (/Users/wnz/Projects/wukoo.coding.me/node_modules/hexo/node_modules/swig/lib/swig.js:498:13), <anonymous>:293:18) at compiled [as _compiledSync] (/Users/wnz/Projects/wukoo.coding.me/node_modules/hexo/node_modules/swig/lib/swig.js:619:18) at tryCatcher (/Users/wnz/Projects/wukoo.coding.me/node_modules/hexo/node_modules/bluebird/js/release/util.js:16:23) at null._compiled (/Users/wnz/Projects/wukoo.coding.me/node_modules/hexo/node_modules/bluebird/js/release/method.js:15:34) at View.render (/Users/wnz/Projects/wukoo.coding.me/node_modules/hexo/lib/theme/view.js:29:15) at /Users/wnz/Projects/wukoo.coding.me/node_modules/hexo/lib/hexo/index.js:387:25 at tryCatcher (/Users/wnz/Projects/wukoo.coding.me/node_modules/hexo/node_modules/bluebird/js/release/util.js:16:23) at /Users/wnz/Projects/wukoo.coding.me/node_modules/hexo/node_modules/bluebird/js/release/method.js:15:34 at RouteStream._read (/Users/wnz/Projects/wukoo.coding.me/node_modules/hexo/lib/hexo/router.js:134:3) at RouteStream.Readable.read (_stream_readable.js:336:10) at resume_ (_stream_readable.js:726:12) at nextTickCallbackWith2Args (node.js:442:9) at process._tickCallback (node.js:356:17)

wukoo commented Jun 11, 2016

如果启用这个功能会有下面的报错。
Unhandled rejection Error: ENOENT: no such file or directory, open '/Users/wnz/Projects/wukoo.coding.me/themes/next/layout/_scripts/schemes/.swig' at Error (native) at Object.fs.openSync (fs.js:549:18) at Object.fs.readFileSync (fs.js:397:15) at Object.ret.load (/Users/wnz/Projects/wukoo.coding.me/node_modules/hexo/node_modules/swig/lib/loaders/filesystem.js:55:15) at compileFile (/Users/wnz/Projects/wukoo.coding.me/node_modules/hexo/node_modules/swig/lib/swig.js:695:31) at Object.eval [as tpl] (eval at <anonymous> (/Users/wnz/Projects/wukoo.coding.me/node_modules/hexo/node_modules/swig/lib/swig.js:498:13), <anonymous>:293:18) at compiled [as _compiledSync] (/Users/wnz/Projects/wukoo.coding.me/node_modules/hexo/node_modules/swig/lib/swig.js:619:18) at tryCatcher (/Users/wnz/Projects/wukoo.coding.me/node_modules/hexo/node_modules/bluebird/js/release/util.js:16:23) at null._compiled (/Users/wnz/Projects/wukoo.coding.me/node_modules/hexo/node_modules/bluebird/js/release/method.js:15:34) at View.render (/Users/wnz/Projects/wukoo.coding.me/node_modules/hexo/lib/theme/view.js:29:15) at /Users/wnz/Projects/wukoo.coding.me/node_modules/hexo/lib/hexo/index.js:387:25 at tryCatcher (/Users/wnz/Projects/wukoo.coding.me/node_modules/hexo/node_modules/bluebird/js/release/util.js:16:23) at /Users/wnz/Projects/wukoo.coding.me/node_modules/hexo/node_modules/bluebird/js/release/method.js:15:34 at RouteStream._read (/Users/wnz/Projects/wukoo.coding.me/node_modules/hexo/lib/hexo/router.js:134:3) at RouteStream.Readable.read (_stream_readable.js:336:10) at resume_ (_stream_readable.js:726:12) at nextTickCallbackWith2Args (node.js:442:9) at process._tickCallback (node.js:356:17)

@cconecode

This comment has been minimized.

Show comment
Hide comment
@cconecode

cconecode Jul 21, 2016

鼠标悬在二维码上面的时候,下面的字会一直左右旋转

cconecode commented Jul 21, 2016

鼠标悬在二维码上面的时候,下面的字会一直左右旋转

@huahuayu

This comment has been minimized.

Show comment
Hide comment
@huahuayu

huahuayu commented Sep 7, 2016

@cconecode 请见我的博客,注释掉动画样式就不会晃了 https://huahuayu.github.io/2016/09/07/wechat-alipay-reward-style-modify/

@jinfagang

This comment has been minimized.

Show comment
Hide comment
@jinfagang

jinfagang Oct 25, 2016

为啥我的显示为了椭圆而不是圆形啊?!逼死强迫症啊这是,求大神解答

jinfagang commented Oct 25, 2016

为啥我的显示为了椭圆而不是圆形啊?!逼死强迫症啊这是,求大神解答

@BirkhoffLee

This comment has been minimized.

Show comment
Hide comment
@BirkhoffLee

BirkhoffLee Oct 28, 2016

請問有打算支援 bitcoin 與 paypal 打賞功能嗎

BirkhoffLee commented Oct 28, 2016

請問有打算支援 bitcoin 與 paypal 打賞功能嗎

@weisnc

This comment has been minimized.

Show comment
Hide comment
@weisnc

weisnc Nov 18, 2016

增加bitcoin打赏功能,具体方法:http://weisnc.com/2016/11/18/bitcoin-reward/

weisnc commented Nov 18, 2016

增加bitcoin打赏功能,具体方法:http://weisnc.com/2016/11/18/bitcoin-reward/

@vincentzlt

This comment has been minimized.

Show comment
Hide comment
@vincentzlt

vincentzlt Jan 31, 2017

请问可否支持显示打赏人数?

vincentzlt commented Jan 31, 2017

请问可否支持显示打赏人数?

@habren

This comment has been minimized.

Show comment
Hide comment
@habren

habren Feb 2, 2017

@vincentzlt 主要不太好获取精确的打赏人数。比如读者通过微信转账打赏,我们需要通过微信的接口(如果有)来获取打赏人数。其它打赏方式类似。如果每次读者打击“打赏”按钮,即算作一次打赏,比较容易实现,但是不准确。

habren commented Feb 2, 2017

@vincentzlt 主要不太好获取精确的打赏人数。比如读者通过微信转账打赏,我们需要通过微信的接口(如果有)来获取打赏人数。其它打赏方式类似。如果每次读者打击“打赏”按钮,即算作一次打赏,比较容易实现,但是不准确。

@applefly

This comment has been minimized.

Show comment
Hide comment
@applefly

applefly Feb 10, 2017

我的next主题开启打赏后不是这个红色样式,请问在哪设置呢

applefly commented Feb 10, 2017

我的next主题开启打赏后不是这个红色样式,请问在哪设置呢

@faee0

This comment has been minimized.

Show comment
Hide comment
@faee0

faee0 Mar 26, 2017

二维码图片显示不出来,不知道什么原因

faee0 commented Mar 26, 2017

二维码图片显示不出来,不知道什么原因

@shouhouhuakai

This comment has been minimized.

Show comment
Hide comment
@shouhouhuakai

shouhouhuakai Mar 26, 2017

想请教一下这个打赏功能应该是每篇文章都会显示的吧,想指定某一篇文章启用打赏,有些不启用,该怎么配置呢?

shouhouhuakai commented Mar 26, 2017

想请教一下这个打赏功能应该是每篇文章都会显示的吧,想指定某一篇文章启用打赏,有些不启用,该怎么配置呢?

@dusunboy

This comment has been minimized.

Show comment
Hide comment
@dusunboy

dusunboy Mar 31, 2017

建议在每个文章头部做打赏开关的判断
例如:

//文章开头
---
title: Hello World
reward: true
tags:
    - Java
categories:
    - 技术
---

//修改reward.swig文件:
{% if page.reward %}
  {% if theme.alipay or theme.wechatpay %}
    <div style="padding: 10px 0; margin: 20px auto; width: 90%; text-align: center;">
      <div>{{ theme.reward_comment }}</div>
      <button id="rewardButton" disable="enable" onclick="var qr = document.getElementById('QR'); if (qr.style.display === 'none') {qr.style.display='block';} else {qr.style.display='none'}">
        <span>赏</span>
      </button>
      <div id="QR" style="display: none;">
        {% if theme.wechatpay %}
          <div id="wechat" style="display: inline-block">
            <img id="wechat_qr" src="{{ theme.wechatpay }}" alt="{{ theme.author }} WeChat Pay"/>
            <p>微信打赏</p>
          </div>
        {% endif %}
        {% if theme.alipay %}
          <div id="alipay" style="display: inline-block">
            <img id="alipay_qr" src="{{ theme.alipay }}" alt="{{ theme.author }} Alipay"/>
            <p>支付宝打赏</p>
          </div>
        {% endif %}
      </div>
    </div>
  {% endif %}
{% endif %}

dusunboy commented Mar 31, 2017

建议在每个文章头部做打赏开关的判断
例如:

//文章开头
---
title: Hello World
reward: true
tags:
    - Java
categories:
    - 技术
---

//修改reward.swig文件:
{% if page.reward %}
  {% if theme.alipay or theme.wechatpay %}
    <div style="padding: 10px 0; margin: 20px auto; width: 90%; text-align: center;">
      <div>{{ theme.reward_comment }}</div>
      <button id="rewardButton" disable="enable" onclick="var qr = document.getElementById('QR'); if (qr.style.display === 'none') {qr.style.display='block';} else {qr.style.display='none'}">
        <span>赏</span>
      </button>
      <div id="QR" style="display: none;">
        {% if theme.wechatpay %}
          <div id="wechat" style="display: inline-block">
            <img id="wechat_qr" src="{{ theme.wechatpay }}" alt="{{ theme.author }} WeChat Pay"/>
            <p>微信打赏</p>
          </div>
        {% endif %}
        {% if theme.alipay %}
          <div id="alipay" style="display: inline-block">
            <img id="alipay_qr" src="{{ theme.alipay }}" alt="{{ theme.author }} Alipay"/>
            <p>支付宝打赏</p>
          </div>
        {% endif %}
      </div>
    </div>
  {% endif %}
{% endif %}

habren pushed a commit to habren/hexo-theme-next that referenced this pull request Apr 8, 2017

Merge pull request #687 from habren/reward
Add wechat and alipay reward for post
@xiongcao

This comment has been minimized.

Show comment
Hide comment
@xiongcao

xiongcao Jun 8, 2017

请问一下我的打赏样式在本地启动效果显示是正常的,但是部署到网上样式就没了,这是什么原因

xiongcao commented Jun 8, 2017

请问一下我的打赏样式在本地启动效果显示是正常的,但是部署到网上样式就没了,这是什么原因

@myroid

This comment has been minimized.

Show comment
Hide comment
@myroid

myroid Jul 4, 2017

我的也是椭圆形的

myroid commented Jul 4, 2017

我的也是椭圆形的

@ycyoes

This comment has been minimized.

Show comment
Hide comment
@ycyoes

ycyoes Aug 3, 2017

@wukoo 解决了吗?!我也遇到同样的问题了,只要启用该功能就报错!!

ycyoes commented Aug 3, 2017

@wukoo 解决了吗?!我也遇到同样的问题了,只要启用该功能就报错!!

@xy2401

This comment has been minimized.

Show comment
Hide comment
@xy2401

xy2401 Sep 6, 2017

可以设置取消动画吗?估计是上面有事件.导致在微信浏览器中打开无法直接长按识别二维码.只能单独打开图片.再长按二维码.而且 总有人喜欢更简洁的静态网页

xy2401 commented Sep 6, 2017

可以设置取消动画吗?估计是上面有事件.导致在微信浏览器中打开无法直接长按识别二维码.只能单独打开图片.再长按二维码.而且 总有人喜欢更简洁的静态网页

@ivan-nginx

This comment has been minimized.

Show comment
Hide comment
@ivan-nginx

ivan-nginx Sep 6, 2017

Collaborator

@xy2401 u can create issue like this: #1856.

Collaborator

ivan-nginx commented Sep 6, 2017

@xy2401 u can create issue like this: #1856.

@duomu

This comment has been minimized.

Show comment
Hide comment
@duomu

duomu Sep 25, 2017

@xiongcao 求问你解决了没,我也遇到这个问题了

duomu commented Sep 25, 2017

@xiongcao 求问你解决了没,我也遇到这个问题了

@xiongcao

This comment has been minimized.

Show comment
Hide comment
@xiongcao

xiongcao Sep 25, 2017

@duomu 这个好像跟域名有关,有的域名太垃圾了导致某些文件访问不了,我是自己手写的样式

xiongcao commented Sep 25, 2017

@duomu 这个好像跟域名有关,有的域名太垃圾了导致某些文件访问不了,我是自己手写的样式

@duomu

This comment has been minimized.

Show comment
Hide comment
@duomu

duomu Sep 25, 2017

@xiongcao 你怎么写的呀,这下面那么多问题怎么都没人回答呢

duomu commented Sep 25, 2017

@xiongcao 你怎么写的呀,这下面那么多问题怎么都没人回答呢

@xiongcao

This comment has been minimized.

Show comment
Hide comment
@xiongcao

xiongcao Sep 25, 2017

@duomu 直接复制本地页面的css代码到相应的页面文件就可以了

xiongcao commented Sep 25, 2017

@duomu 直接复制本地页面的css代码到相应的页面文件就可以了

@duomu

This comment has been minimized.

Show comment
Hide comment
@duomu

duomu Sep 25, 2017

@xiongcao 日了狗啦,你猜我怎么解决的,我改了个图片名就好了。。

duomu commented Sep 25, 2017

@xiongcao 日了狗啦,你猜我怎么解决的,我改了个图片名就好了。。

@xiongcao

This comment has been minimized.

Show comment
Hide comment
@xiongcao

xiongcao Sep 25, 2017

@duomu 还有这种操作厉害

xiongcao commented Sep 25, 2017

@duomu 还有这种操作厉害

@duomu

This comment has been minimized.

Show comment
Hide comment
@duomu

duomu Sep 25, 2017

@xiongcao 也可能是我之前的图片后缀是大写的.JPG,后来把git上的删了,重新提交了小写的,然鹅没有替换成功,git居然恢复了我删除的图片,改了名字后,彻底替换了。。

duomu commented Sep 25, 2017

@xiongcao 也可能是我之前的图片后缀是大写的.JPG,后来把git上的删了,重新提交了小写的,然鹅没有替换成功,git居然恢复了我删除的图片,改了名字后,彻底替换了。。

@BalanceUhen

This comment has been minimized.

Show comment
Hide comment
@BalanceUhen

BalanceUhen Nov 3, 2017

@xiongcao 我也是碰上了这个问题,然后我去找CSS配置文件,themes/next/source/css/_common/components/post/post.styl,把@import "post-reward"后面的if给删除掉后主题就会被导入到css中了,不知道为什么配置了wechat的图片地址还是无法设置css。

BalanceUhen commented Nov 3, 2017

@xiongcao 我也是碰上了这个问题,然后我去找CSS配置文件,themes/next/source/css/_common/components/post/post.styl,把@import "post-reward"后面的if给删除掉后主题就会被导入到css中了,不知道为什么配置了wechat的图片地址还是无法设置css。

@Eversea2017

This comment has been minimized.

Show comment
Hide comment
@Eversea2017

Eversea2017 Feb 2, 2018

本地测试的时候为什么我一开启打赏功能就报错呢,关了就好了

Eversea2017 commented Feb 2, 2018

本地测试的时候为什么我一开启打赏功能就报错呢,关了就好了

@Eversea2017

This comment has been minimized.

Show comment
Hide comment
@Eversea2017

Eversea2017 commented Feb 3, 2018

已解决

@631068264

This comment has been minimized.

Show comment
Hide comment
@631068264

631068264 Jun 6, 2018

image

自己手动撸的添加数字货币打赏 就是有点丑 毕竟不是非前端人员
还有就是 自定义在post里面是否添加打赏功能

还有微信和支付宝怎么生成 统一尺寸的二维码?

631068264 commented Jun 6, 2018

image

自己手动撸的添加数字货币打赏 就是有点丑 毕竟不是非前端人员
还有就是 自定义在post里面是否添加打赏功能

还有微信和支付宝怎么生成 统一尺寸的二维码?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment