如何将Liker按钮集成到Hexo

aafeng
·
·
IPFS

Hexo是我非常喜欢的一个静态网站生成工具。下面把Liker按钮集成到Hexo中的步骤总结一下,让众多的Hexo网站可以获得收益。以下以Hueman主题为例进行说明:


首先,从官方github获取对应的css并将其转换为styl格式,为了大家方便,我直接把转换好的贴到这里:

.lc-page-header
    display none
    height 0px
.likecoin-button
    position relative
    width 100%
    max-width 485px
    max-height 240px
    margin 0 auto
    & > div
        padding-top 49.48454%
    & > iframe
        position absolute
        top 0
        left 0
        width 100%
        height 100%


将上面文件保存至:themes/hueman/source/css/liker.styl

第二步,打开 themes/hueman/source/css/style.styl 文件,并添加如下行:

@import "liker"


第三步,打开themes/hueman/layout/common/article.ejs,将如下代码添加到想要的位置:

<div class="likecoin-embed likecoin-button">
  <div></div>
  <iframe scrolling="no" frameborder="0" src="https://button.like.co/in/embed/frtips77843/button?referrer=<%- encodeURIComponent(post.permalink) %>"></iframe>                               
</div>


接下来重新生成网站并发布到服务器就可以了。




CC BY-NC-ND 2.0 授权

喜欢我的作品吗?别忘了给予支持与赞赏,让我知道在创作的路上有你陪伴,一起延续这份热忱!