精华内容
下载资源
问答
  • hexo添加打赏功能

    千次阅读 2018-01-12 20:44:30
    打赏是读者对笔者支持的最大动力,作为经常写博客的笔者来说,打赏功能如果在自己的博客中出现,那真的是求之不得呀(虽然基本不会有人来打赏)!而NexT正好集成了打赏的功能,其实现的思路是放上收款二维码,让读者...

    打赏是读者对笔者支持的最大动力,作为经常写博客的笔者来说,打赏功能如果在自己的博客中出现,那真的是求之不得呀(虽然基本不会有人来打赏)!而NexT正好集成了打赏的功能,其实现的思路是放上收款二维码,让读者扫码后支付。笔者添加了微信支付和支付宝支付,所以以此为例:

    • 获取微信收款二维码
      打开微信,点击 右上角 + 点击收付款,点击二维码收款,保存收款码。

    • 获取支付宝收款二维码
      打开 支付宝 点击 右上角 + 收钱 保存图片。

    • 添加二维码图片资源
      得到二维码图片资源后,读者们可将二维码图片放到NexT根目录/source/images/文件夹下。

    • 开启打赏功能

    找到主题配置文件,在其最后添加打赏的配置信息:

    reward_comment: 坚持原创技术分享,您的支持将鼓励我继续创作!
    wechatpay: 图片链接或图片相对路径
    alipay: 图片链接或图片相对路径

    其信息如下图所示:

    展开全文
  • Hexo Next打赏功能

    2019-10-18 11:11:50
    这里是在每篇文章底下添加打赏功能,显示微信、支付宝收款码 1、找到主题配置文件,路径:themes\next_config.yml 2、找到reward_settings,显示属性配置为true,默认为false,二维码放置路径为:themes\next\...

    这里是在每篇文章底下添加打赏功能,显示微信、支付宝收款码

    1、找到主题配置文件,路径:themes\next_config.yml

    2、找到reward_settings,显示属性配置为true,默认为false,二维码放置路径为:themes\next\source\images

    # Reward (Donate)
    reward_settings:
      enable: true 
      animation: true
      comment: 只想买包辣条
    
    reward:
      wechatpay: /images/wechatpay.png   #微信收款码
      alipay: /images/alipay.png   #支付宝收款码
      #bitcoin: /images/bitcoin.png
    

    3、重新编译部署,显示效果如下图:
    在这里插入图片描述

    测试效果:https://sweetolive.github.io/

    展开全文
  • Hexo类型博客集成打赏功能

    千次阅读 2018-03-27 13:57:35
    关于如何使用Hexo+Hexo主题搭建博客系统,可以参考我之前的博客的介绍:github pages + Hexo + 域名绑定搭建个人博客,本文主要介绍如何集成文章的打赏功能,打赏的效果如图。 该效果就是在每篇文章的后面添加一...

    关于如何使用Hexo+Hexo主题搭建博客系统,可以参考我之前的博客的介绍:github pages + Hexo + 域名绑定搭建个人博客,本文主要介绍如何集成文章的打赏功能,打赏的效果如图。
    这里写图片描述
    该效果就是在每篇文章的后面添加一个打赏功能,当点击“赏”按钮后会弹出一个打赏的窗口,想要体验的可以点击下面的地址来完成体验:
    http://www.xiangzhihong.com/

    其实上实现也比较简单,我的博客是使用的Snippet主题 ,当然,如果你的前端知识了得,你也可以自己修改样式和风格。在Snippet主题集成打赏功能只需要修改两个地方。

    1,新增css文件

    首先,打开系统的themes–>snippet文件–>source–>css添加相应的样式。

    
    *,*:before,*:after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box
    }
    
    .reward {
        padding: 5px 0
    }
    
    .reward .reward-notice {
        font-size: 14px;
        line-height: 14px;
        margin: 15px auto;
        text-align: center
    }
    
    .reward .reward-button {
        font-size: 28px;
        line-height: 58px;
        position: relative;
        display: block;
        width: 60px;
        height: 60px;
        margin: 0 auto;
        padding: 0;
        -webkit-user-select: none;
        text-align: center;
        vertical-align: middle;
        color: #fff;
        border: 1px solid #f1b60e;
        border-radius: 50%;
        background: #fccd60;
        background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#fccd60),color-stop(100%,#fbae12),color-stop(100%,#2989d8),color-stop(100%,#207cca));
        background: -webkit-linear-gradient(top,#fccd60 0,#fbae12 100%,#2989d8 100%,#207cca 100%);
        background: linear-gradient(to bottom,#fccd60 0,#fbae12 100%,#2989d8 100%,#207cca 100%)
    }
    
    .reward .reward-code {
        position: absolute;
        top: -220px;
        left: 50%;
        display: none;
        width: 350px;
        height: 200px;
        margin-left: -175px;
        padding: 15px;
        border: 1px solid #e6e6e6;
        background: #fff;
        box-shadow: 0 1px 1px 1px #efefef
    }
    
    .reward .reward-button:hover .reward-code {
        display: block
    }
    
    .reward .reward-code span {
        display: inline-block;
        width: 150px;
        height: 150px
    }
    
    .reward .reward-code span.alipay-code {
        float: left
    }
    
    .reward .reward-code span.alipay-code a {
        padding: 0
    }
    
    .reward .reward-code span.wechat-code {
        float: right
    }
    
    .reward .reward-code img {
        display: inline-block;
        float: left;
        width: 150px;
        height: 150px;
        margin: 0 auto;
        border: 0
    }
    
    .reward .reward-code b {
        font-size: 14px;
        line-height: 26px;
        display: block;
        margin: 0;
        text-align: center;
        color: #666
    }
    
    .reward .reward-code b.notice {
        line-height: 2rem;
        margin-top: -1rem;
        color: #999
    }
    
    .reward .reward-code:after,.reward .reward-code:before {
        position: absolute;
        content: '';
        border: 10px solid transparent
    }
    
    .reward .reward-code:after {
        bottom: -19px;
        left: 50%;
        margin-left: -10px;
        border-top-color: #fff
    }
    
    .reward .reward-code:before {
        bottom: -20px;
        left: 50%;
        margin-left: -10px;
        border-top-color: #e6e6e6
    }

    这个样式是专门处理打赏部分的。

    2,然后在post.ejs添加打赏的逻辑

    打开系统的themes–>snippet文件–>layout下的post.ejs文件,在post-footer标签之上,也就是文末,添加如下js打赏逻辑。

    <!--打赏-->
            <div class="reward">
           <div class="reward-button"><span class="reward-code">
            <span class="alipay-code"> <img class="alipay-img wdp-appear" src="http://ohe65w0xx.bkt.clouddn.com/alipay.png"><b>支付宝打赏</b> </span> 
            <span class="wechat-code"> <img class="wechat-img wdp-appear" src="http://ohe65w0xx.bkt.clouddn.com/weipay.png"><b>微信打赏</b> </span> 
           </div>
          <p class="reward-notice">如果文章对你有帮助,欢迎点击上方按钮打赏作者</p>
          </div>
          <!--打赏-->

    说明:我这里的图片是第三方存管的。其他模式的主题大体相同,大家可以自行百度修改相应的文件。
    如果需要集成浏览量,可以使用不蒜子统计系统,两行代码搞定:

    <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
                <span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span></span>

    附件:打赏功能源码

    展开全文
  • 第一步 把你保存的图片放到themes\next\source\images 文件夹里 第二步 打开主题配置文件_config.yml ,然后找到reward ...reward: # 打赏功能 wechatpay: /images/wechatpay.jpg alipay: /images/alipay.jpg...

    第一步

         把你保存的图片放到 themes\next\source\images 文件夹里

    第二步

         打开主题配置文件 _config.yml ,然后找到 reward 默认应该是被注释上的,然后解开注释,如下代码

    reward:  # 打赏功能
      wechatpay: /images/wechatpay.jpg
      alipay: /images/alipay.jpg
      #bitcoin: /images/bitcoin.png

    第三步

         编译  hexo clean && hexo g  运行 hexo server 测试是否成功

    展开全文
  • hexo博客打赏

    2016-02-27 14:22:00
    有时候我们甚至可以在很多博客文章后面看到小编和文章作者自己添加的DIY打赏功能,包括微信、支付宝等扫描支付转账,本篇文章就是为hexo优化,在每篇文章后面添加打赏功能。 打赏模块的代码 layout\_partial 下...
  • Hexo的NexT主题打赏功能

    千次阅读 2019-04-05 18:18:23
    准备支付宝和微信二维码 首先要生成支付宝和微信收钱二维码 在_config.yml中配置图片 ... #打赏功能 comment: 原创技术分享,您的支持将鼓励我继续创作 wechatpay: /images/wechat.jpg alipa...
  • 因为next主题自带打赏功能,所以我们只需要在next的主题配置文件中找到如下代码,image文件夹是我在blog/source下面建立的文件夹,然后把你的微信及支付宝收钱码图片拉进去,修改名字为wechatreward.png和...
  • 一个打赏的小功能 修改自 博客版本请查看 hexo 分支 直接 Fork 修改 html 内链接地址 更换图片为你自己的打赏图片 使用 iframe 嵌入页面的代码,高度至少 240px,宽度至少 310px! <iframe src=...
  • 备注:该教程基于Hexo 2.x版本,目前Hexo是3.x版本,照本教程实现有可能会出现404错误,笔者目前还未找时间去解决,待笔者找时间解决该问题后,再写一篇该问题的解决教程,给各位读者带来困扰,还请多包涵!...
  • 美化自己的博客,给博客添加评论、打赏、玩偶、红心、分享以及网易云音乐功能,让博客变得精彩,让生活变得精彩。 评论功能 hexo 支持很多外部评论插件: HyperComments: https://www.hypercomments.com (来自...
  • hexo博客添加功能

    2017-12-01 16:58:00
    设置Hexo主题模式 Hexo主题中,有三种不同的模式,通过切换模式,让NexT主题显示不一样的样式。在NexT根目录下有一个同样名称为_config.yml,为了区分hexo根目录下的_config.yml,将前者称为主题配置文件,在其中...
  • 改了博客的风格 增加了分类功能 增加了搜索功能 增加了我的微博 增加了打赏功能 这是我搭建的博客网站 www.deyia.top
  • hexo的next主题添加本地搜索功能(最新版,解决搜索图标不正常) 阿猿为了加个搜索功能,实在是花费了超多时间。根据网络上的教程,我的搜索功能一部署到服务器就出现了搜索图标不正常显示,然后费劲九牛二虎之力才...
  • Hexo博客美化及功能增添 补充上一篇------Mac下使用Hexo+Github搭建个人博客 6.Hexo博客美化及功能增添 1)选主题 Hexo官网:https://hexo.io/themes/ 里面有特别多的主题可以选择,我在这里选的是next这个主题。...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 449
精华内容 179
关键字:

hexo打赏功能