2020-12-14发表2021-02-23更新WhyYouAredemo8 分钟读完 (大约1138个字)

Hexo整合Matataki用Fan票打赏Blog文章

修改记录

2020-12-14 初稿
2020-12-15 修改方案，支持在目录页打赏

概述

在文章之后留下打赏地址/链接/二维码已经是一种很主流的激励创作者的形式了，Matataki的主站也支持用Fan票进行打赏。那么在站外我们能否用上Fan票呢？答案是肯定的。

如果已经有MetaMask这样的钱包，可以使用Fan票折跃门，把托管在平台上的Fan票转到我们自己的钱包，这样Blog上只要留下钱包地址即可转账打赏。

使用钱包仍然有些门槛，本文介绍了一种方法，可以当作站外使用Fan票场景的简单补充。这篇文章的成果很大程度上是基于

的研究：

使用的样例工程也是上文中提到的https://github.com/nekomeowww/hexo-plugin-matataki-example
这个方法工作量不大，只要做脚本集成就可以了，相对地，对Matataki的主站有依赖。

步骤

和FanLocker一样，我们在_config.yml里做好配置：

1 2	matataki: userId: 4382

一般情况下整个Blog的文章都是自己的，打赏对象都是同一个人，所以不需要每篇文章分开来配置。这个userId可以在Matataki的个人主页看到，比如 https://www.matataki.io/user/4382

新建文件themes/landscape/layout/matataki.ejs，为Blog目录和每篇文章增加脚本片段

<script>
    var mttk = {
        userId: '<%- config.matataki.userId %>',
        open: function (href) {
            window.open(href, 'hexo-mttk',
                'width=445,height=700,resizable=no,menubar=no,status=no,scrollbars=yes');
        },
        openUserHome: function () {
            let href = 'https://matataki.io/user/' + mttk.userId;
            mttk.open(href);
        }
    };
</script>

然后在themes/landscape/layout/_partial/header.ejs里添加引用

<head>
  <meta charset="utf-8">
  <%- partial('matataki') %>

这样就在每个页面都声明了mttk对象

在博客的分享脚本里增加打开Matataki的链接。这个主题是在themes/landscape/source/js/script.js。找到Share部分，增加动态html脚本

// Share
  $('body').on('click', function(){
 // ... 

var html = [
        '<div id="' + id + '" class="article-share-box">',
          '<input class="article-share-input" value="' + url + '">',
          '<div class="article-share-links">',
            '<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="article-share-twitter" target="_blank" title="Twitter"></a>',
            '<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="article-share-facebook" target="_blank" title="Facebook"></a>',
            '<a href="http://pinterest.com/pin/create/button/?url=' + encodedUrl + '" class="article-share-pinterest" target="_blank" title="Pinterest"></a>',
            '<a href="javascript:mttk.openUserHome()" class="article-share-matataki" title="Matataki"></a>',
          '</div>',
        '</div>'
      ].join('');
      
 //...
});

就是 '<a href="javascript:mttk.openUserHome()" class="article-share-matataki" title="Matataki"></a>',这句了。因为现在Matataki还不支持带入分享链接，先这样没有入参也是可以的

为了article-share-matataki这个样式，我们再调整一下css

打开themes/landscape/source/css/_partial/article.styl,增加如下样式：

.article-share-matataki
  @extend $article-share-link
  &:before
    content: "\f087"
  &:hover
    background: color-google
    text-shadow: 0 1px darken(color-google, 20%)

content这里是字体图标，可以去http://www.fontawesome.com.cn/faicons/找个自己喜欢的，比如：http://www.fontawesome.com.cn/icons/thumbs-o-up/,把里面的Unicode填到content:后就可以了，注意要加一个反斜杠 \

5.看看效果

这个点赞图标就是我们加上的打开Matataki页面的链接了。点击之后会弹出窗口，打开博主在Matataki的个人主页，也就是上面配置的userId

因为实际就是主站点，登录和转账的方式都是一样的

留言可以留博客链接

链接

体验地址

结语

这样一些希望能有完整的文章管理权而自建博客的用户也可以接入Fan票生态了。这种方案的中心化程度比较高，不过个人认为先小规模使用Fan票，熟悉之后再用【Fan票迁跃门】体验更进一步的去中心化也有其意义所在。

另一方面算是对Matataki和Fan票的关系的一种确认。这篇文章涉及到的应用场景和“在Matataki平台上写文章”没什么关系，只涉及到了Fan票相关的部分。也就是说这个基于Fan票打赏的博客也是Fan票宇宙的一部分，但和Matataki更像邻居（相当大程度是账号权限系统没分离，所以体感上都在Matataki的域名和页面的缘故）

理论上可以做到在web3层面开发直接对接Fan票的dAPP来为博客构建打赏方案，不过现在文档和工具都不完善，门槛还是过高了些，期待Matataki进一步发展后这方面能有所改善

Hexo整合Matataki用Fan票打赏Blog文章

https://whyouare111.github.io/hexo-icarus-showcase/2020/12/14/hexo-matataki-reward-example/

作者

WhyYouAre

发布于

2020-12-14

更新于

2021-02-23

许可协议

Hexo整合Matataki用Fan票打赏Blog文章

修改记录

概述

步骤

链接

结语

作者

发布于

更新于

许可协议

评论

目录

链接

分类

最新文章

归档

标签