搭建自己的个人网站(彩蛋)

本篇彩蛋是基于上两篇个人网站搭建系列博文增加新的功能（评论、打赏）
以Anisina主题为例

难度指数：♥♥
系统环境：win8

评论功能

本文采用的是valine评论系统，首先你需要注册一个leancloud账户,然后创建一个应用来存储管理评论内容,注册和创建新应用完了之后，就完成了准备工作。

1.准备工作就绪后，然后修改 Anisina主题配置文件 _config.yml

# Valine comment system https://valine.js.org
valine: 
  enable: true
  appid:  KPXIfOuMVwWIv2Skprm5gYB
  appkey: f92SiTdYRrLO0zwfdQ
  verify: false #验证码
  notify: false #评论回复提醒
  avatar: mm #评论列表默认头像样式
  placeholder: Just go go #评论框占位符
  
CDN:
  valine: http://unpkg.com/valine@1.2.0-beta1/dist/Valine.min.js

这里的appid，appkey可在创建的新应用的设置里面查看
新应用名称>设置>应用Key

2.修改 Anisina/layout/_partial/article.ejs

<% if (!index && post.comments){ %>
    <% if (theme.duoshuo.on) { %>
      <%- partial('comments/duoshuo', {
          key: post.path,
          title: post.title,
          url: config.url+url_for(post.path),
          }) %>
    <% } else if (theme.youyan.on) { %>
        <%- partial('comments/youyan') %>
    <% } else if (theme.disqus.on) { %>
        <%- partial('comments/disqus', {
            shortname: theme.disqus.shortname
          }) %>
    <% } else if (config.disqus_shortname) { %>
        <%- partial('comments/disqus', {
            shortname: config.disqus_shortname
          }) %>
   <% } else if (theme.valine.on){ %>
       <%- partial('comments/valine', {
           key: post.slug,
           title: post.title,
           url: config.url+url_for(post.path)
       }) %>
    <% } %>
<% } %>

3.创建 layout/_partial/comments/valine.ejs 文件

<section id="comments" style="margin: 2em; padding: 2em; background: rgba(255, 255, 255, 0.5)">
    <div id="vcomment" class="comment"></div>
    <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
    <script src="<%- theme.CDN.valine %>"></script>
    <script>
      new Valine({
        el: '#vcomment',
        notify: '<%= theme.valine.notify %>',
        verify: '<%= theme.valine.verify %>',
        app_id: "<%= theme.valine.appid %>",
        app_key: "<%= theme.valine.appkey %>",
        placeholder: "<%= theme.valine.placeholder %>",
        avatar: "<%= theme.valine.avatar %>"
      });
    </script>
</section>

完成，部署hexo后就可以看到评论功能新增上去了

打赏功能

效果可以先预览一下

1.首先到我的github页去Fork 一下这个项目donate-page-yu
https://github.com/YUTING0907
这个我是Fork 了TinyJay的repositories

2.然后在donate-page-yu/simple/images/下 修改你的支付宝，微信收款等其他收款码，当然你也可以不修改, 扫我的收款码就可以了~

3.进入这个路径：donate-page/simple/index.html,复制该路径，然后进入http://raw.githack.com/ 生成对应的访问链接。

4.修改iframe

将下面的代码中src对应的网页指向改为刚刚生成的网页，之后将下面的iframe代码块放到文章中就可以了

<iframe src="https://rawcdn.githack.com/YUTING0907/donate-page-yu/df1732a5993401f9d372918c3f7680ca0e1c2ca3/simple/index.html 
" style="overflow-x:hidden;overflow-y:hidden; border:0xp none #fff; min-height:240px; width:100%;"  
frameborder="0" scrolling="no"></iframe>