如何将Liker按钮集成到Hexo

in #cn5 years ago

自从朋友将Hexo推荐给我以来,它就是我非常喜欢的静态网站生成工具了。下面把Liker按钮集成到Hexo中的步骤总结一下,让众多的Hexo网站可以通过点赞获得收益。以下以Hueman主题为例进行说明:

image.png

首先,从官方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,将如下代码添加到想要的位置(注意替换成你自己的liker ID):

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

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