Skip to content
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
Merged

Add wechat and alipay reward for post #687

merged 1 commit into from
Mar 1, 2016

Conversation

habren
Copy link

@habren habren commented Feb 28, 2016

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

鼠标悬浮效果
hover

点击之后效果
click

iissnan added a commit that referenced this pull request Mar 1, 2016
Add wechat and alipay reward for post
@iissnan iissnan merged commit 5f381f6 into iissnan:master Mar 1, 2016
@vinnyxiong
Copy link

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

@vinnyxiong
Copy link

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

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

@luffr
Copy link

luffr commented Mar 30, 2016

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

@luffr
Copy link

luffr commented Mar 30, 2016

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

@iissnan
Copy link
Owner

iissnan commented Mar 31, 2016

0.4.5.2 不支持

@luffr
Copy link

luffr commented Mar 31, 2016

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

@luffr
Copy link

luffr commented Mar 31, 2016

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

@habren
Copy link
Author

habren commented Apr 1, 2016

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

@luffr
Copy link

luffr commented Apr 1, 2016

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

@habren
Copy link
Author

habren commented Apr 1, 2016

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

改成

@habren habren mentioned this pull request Apr 1, 2016
@luffr
Copy link

luffr commented Apr 1, 2016

@habren 提交了

@AlanCheen
Copy link

图片需要放哪里?@vinnyxiong

@AlanCheen
Copy link

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

@iissnan iissnan removed the Docs label May 9, 2016
@vinnyxiong
Copy link

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

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

@wukoo
Copy link

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)

@superchun
Copy link

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

@huahuayu
Copy link

huahuayu commented Sep 7, 2016

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

@lucasjinreal
Copy link

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

@BirkhoffLee
Copy link

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

@weisnc
Copy link

weisnc commented Nov 18, 2016

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

@vincentzlt
Copy link

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

@habren
Copy link
Author

habren commented Feb 2, 2017

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

@applefly
Copy link

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

@faee0
Copy link

faee0 commented Mar 26, 2017

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

@shouhouhuakai
Copy link

shouhouhuakai commented Mar 26, 2017

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

@dusunboy
Copy link

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

//文章开头
---
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
Add wechat and alipay reward for post
@xiongcao
Copy link

xiongcao commented Jun 8, 2017

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

@myroid
Copy link

myroid commented Jul 4, 2017

我的也是椭圆形的

@ycyoes
Copy link

ycyoes commented Aug 3, 2017

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

@xy2401
Copy link

xy2401 commented Sep 6, 2017

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

@ivan-nginx
Copy link
Collaborator

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

@duomu
Copy link

duomu commented Sep 25, 2017

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

@xiongcao
Copy link

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

@duomu
Copy link

duomu commented Sep 25, 2017

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

@xiongcao
Copy link

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

@duomu
Copy link

duomu commented Sep 25, 2017

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

@xiongcao
Copy link

@duomu 还有这种操作厉害

@duomu
Copy link

duomu commented Sep 25, 2017

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

@WhenMelancholy
Copy link

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

@Eversea2017
Copy link

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

@Eversea2017
Copy link

已解决

@631068264
Copy link

631068264 commented Jun 6, 2018

image

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

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

@quantwizard
Copy link

为什么我的next主题配置了打赏,可是页面什么也没有显示出来?可能是什么原因?
我配置如下:
reward_comment: 坚持原创,您的支持将鼓励我继续创作!
wechatpay: /images/wechat.jpeg
alipay: /images/alipay.jpeg

@Eversea2017
Copy link

Eversea2017 commented Oct 10, 2018 via email

@BerdyPango
Copy link

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

@BalanceUhen 我遇到了同样的问题,加上 copyright 和 reward 之后死活没有样式,百思不得其解,最后找到这里发现了解决办法,但导致这个问题的原因是啥?有没有相关的 issue 链接呢?

@NashMiao
Copy link

NashMiao commented Apr 14, 2019

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

@BalanceUhen 我遇到了同样的问题,加上 copyright 和 reward 之后死活没有样式,百思不得其解,最后找到这里发现了解决办法,但导致这个问题的原因是啥?有没有相关的 issue 链接呢?

同,我也碰到了一样的问题。

@DomicZhong
Copy link

为什么我的next主题配置了打赏,可是页面什么也没有显示出来?可能是什么原因?
我配置如下:
reward_comment: 坚持原创,您的支持将鼓励我继续创作!
wechatpay: /images/wechat.jpeg
alipay: /images/alipay.jpeg

我的也是

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

Successfully merging this pull request may close these issues.