Skip to content

Add wechat and alipay reward for post - #687

Merged
iissnan merged 1 commit into
iissnan:masterfrom
habren:reward
Mar 1, 2016
Merged

iissnan merged 1 commit into
iissnan:masterfrom
habren:reward

Conversation

@habren

@habren habren commented Feb 28, 2016

Copy link
Copy Markdown

越来越多的平台(微信公众平台,新浪微博,简书,百度打赏等)支持打赏功能,付费阅读时代越来越近,特此增加了打赏功能,支持微信打赏和支付宝打赏。只需要_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
Copy Markdown

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

@vinnyxiong

Copy link
Copy Markdown

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

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

@luffr

luffr commented Mar 30, 2016

Copy link
Copy Markdown

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

@luffr

luffr commented Mar 30, 2016

Copy link
Copy Markdown

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

@iissnan

iissnan commented Mar 31, 2016

Copy link
Copy Markdown
Owner

0.4.5.2 不支持

@luffr

luffr commented Mar 31, 2016

Copy link
Copy Markdown

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

@luffr

luffr commented Mar 31, 2016

Copy link
Copy Markdown

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

@habren

habren commented Apr 1, 2016

Copy link
Copy Markdown
Author

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

@luffr

luffr commented Apr 1, 2016

Copy link
Copy Markdown

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

@habren

habren commented Apr 1, 2016

Copy link
Copy Markdown
Author

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

改成

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

luffr commented Apr 1, 2016

Copy link
Copy Markdown

@habren 提交了

@czn6

czn6 commented Apr 9, 2016

Copy link
Copy Markdown

图片需要放哪里?@vinnyxiong

@czn6

czn6 commented Apr 9, 2016

Copy link
Copy Markdown

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

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

Copy link
Copy Markdown

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

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

@wukoo

wukoo commented Jun 11, 2016

Copy link
Copy Markdown

如果启用这个功能会有下面的报错。
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
Copy Markdown

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

@huahuayu

huahuayu commented Sep 7, 2016

Copy link
Copy Markdown

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

@lucasjinreal

Copy link
Copy Markdown

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

@birkhofflee

Copy link
Copy Markdown

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

@weisnc

weisnc commented Nov 18, 2016

Copy link
Copy Markdown

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

@vincentzlt

Copy link
Copy Markdown

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

@habren

habren commented Feb 2, 2017

Copy link
Copy Markdown
Author

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

@applefly

Copy link
Copy Markdown

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

@faee0

faee0 commented Mar 26, 2017

Copy link
Copy Markdown

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

@shouhouhuakai

shouhouhuakai commented Mar 26, 2017

Copy link
Copy Markdown

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

@dusunboy

Copy link
Copy Markdown

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

//文章开头
---
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 %}

@xiongcao

xiongcao commented Jun 8, 2017

Copy link
Copy Markdown

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

@myroid

myroid commented Jul 4, 2017

Copy link
Copy Markdown

我的也是椭圆形的

@ycyoes

ycyoes commented Aug 3, 2017

Copy link
Copy Markdown

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

@xy2401

xy2401 commented Sep 6, 2017

Copy link
Copy Markdown

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

@ivan-nginx

Copy link
Copy Markdown
Collaborator

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

@duomu

duomu commented Sep 25, 2017

Copy link
Copy Markdown

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

@xiongcao

Copy link
Copy Markdown

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

@duomu

duomu commented Sep 25, 2017

Copy link
Copy Markdown

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

@xiongcao

Copy link
Copy Markdown

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

@duomu

duomu commented Sep 25, 2017

Copy link
Copy Markdown

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

@xiongcao

Copy link
Copy Markdown

@duomu 还有这种操作厉害

@duomu

duomu commented Sep 25, 2017

Copy link
Copy Markdown

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

@MufanQiu

MufanQiu commented Nov 3, 2017

Copy link
Copy Markdown

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

@Eversea2017

Copy link
Copy Markdown

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

@Eversea2017

Copy link
Copy Markdown

已解决

@631068264

631068264 commented Jun 6, 2018

Copy link
Copy Markdown

image

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

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

@quantwizard

Copy link
Copy Markdown

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

@Eversea2017

Eversea2017 commented Oct 10, 2018 via email

Copy link
Copy Markdown

@frosthe324

Copy link
Copy Markdown

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

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

@NashMiao

NashMiao commented Apr 14, 2019

Copy link
Copy Markdown

@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
Copy Markdown

为什么我的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.