用hexo+github搭建博客(三)

基于GitHubIssue的评论功能 [完结于2018-07-19 19:45:13]

可以手动添加issue，这样非常简单，但是如果文章越来越多，手动添加肯定不现实。因此可以写脚本来实现自动创建issue。由于本人并不想把别人的脚本直接搬过来，所以自动创建issue暂时被搁置...

~~后续：当我觉得我能读懂那个脚本的时候，链接失效了.....~~

后续：脚本链接

链接自取

参考链接1&2都是参考的链接3,建议先看一遍链接3,了解大概流程后再细看每个链接。具体代码参考的链接1。

参考链接1

参考链接2

参考链接3

一、实现评论功能

手动创建Issue

进入Github博客仓库

单击 Issuesn

单击 New issues

编辑Title、Leave a comment

单击 Submit new issue完成

获得 commentIssueId 值

文章添加`commentIssueId`字段

---
title: 我是置顶博文
date: 2018-07-18 21:30:35
tags: 留言板
categories: hotYan_博客之路
top: 100
commentIssueId: 1    
---

添加 github_comments.swig 文件

在/themes/next/layout/_partials文件下新添github_comments.swig

/*内容如下*/
<!doctype html>
<html>
    <div class="clearfix"></div>
    <br>
    <div id="comments">
        <div class="post-header bg-{{site.default_post_color}}">
            <h1 >留言区</h1>
            <p>本站留言区搭建在 Github Issue 上,请点击下面按钮进行留言。</p>
            <hr/>
        </div>
    </div>

    <script type="text/javascript">
        function loadComments(data) {
            var commentUrl = "window.open('https://github.com/hotyan/hotyan.github.io/issues/{{ page.commentIssueId }}')"
            $("#comments").append('<div class="submit-comment" style="text-align: center"><button onclick=' + commentUrl + ' class="btn btn-primary">留&nbsp;言</button></div>')

            for (var i=0; i<data.length; i++) {
                var cuser = data[i].user.login;
                var cuserlink = data[i].user.html_url;
                var avatarlink = data[i].user.avatar_url;
                var clink = data[i].html_url;
                var cbody = data[i].body_html;
                var cavatarlink = data[i].user.avatar_url;      
                var cdate = new Date(data[i].created_at);
                var dopts = { month: 'short', day: 'numeric', year: 'numeric' }

                $("#comments").append('<div class="timeline-comment-wrapper"><div class="avatar-parent-child timeline-comment-avatar"><a href="' + cuserlink +'"><img width="44" height="44" class="avatar rounded-1" src="' + avatarlink + '"></a></div><div class="timeline-comment current-user"><div class="timeline-comment-header"><h3 class="timeline-comment-header-text text-normal f5"><strong>' + cuser + '</strong><span class="post-meta">' + cdate.toLocaleDateString("en", dopts) + '</span></h3></div><div style="display: block !important; padding: 15px;"><article class="post-content">' + cbody + '</article></div></div></div>');
            }
        }
        $.ajax("https://api.github.com/repos/hotyan/hotyan.github.io/issues/{{ page.commentIssueId }}/comments", {
            headers: {Accept: "application/vnd.github.v3.html+json"},
            dataType: "json",
            success: function(msg){
                console.log(msg);
                loadComments(msg);
            }
        });
    </script>

    <style type="text/css">
    .timeline-comment-wrapper {
        margin-top: 0;
        position: relative;
        padding-left: 60px;
        margin-top: 15px;
        margin-bottom: 15px;
        border-top: 2px solid #fff;
        border-bottom: 2px solid #fff;
    }
    .timeline-comment-avatar {
        float: left;
        margin-left: -60px;
        border-radius: 3px;
    }
    .avatar-parent-child {
        position: relative;
    }
    .timeline-comment-wrapper a {
        color: #0366d6;
        text-decoration: none;
        background-color: transparent;
    }
    .timeline-comment-wrapper .avatar {
        display: inline-block;
        overflow: hidden;
        line-height: 1;
        vertical-align: middle;
        border-radius: 3px;
    }
    .timeline-comment-wrapper .rounded-1 {
        border-radius: 3px !important;
    }
    .timeline-comment.current-user {
        border-color: #c0d3eb;
    }
    .timeline-comment {
        position: relative;
        background-color: #fff;
        border: 1px solid #d1d5da;
        border-radius: 3px;
    }
    .timeline-comment.current-user .timeline-comment-header {
        background-color: #f1f8ff;
        border-bottom-color: #c0d3eb;
    }
    .timeline-comment-header {
        padding-right: 15px;
        padding-left: 15px;
        color: #586069;
        background-color: #f6f8fa;
        border-bottom: 1px solid #d1d5da;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
    }
    .timeline-comment-header-text {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .timeline-comment-header h3 {
        margin-top: 0px;
        margin-bottom: 0px;
    }
    .timeline-comment-header-text .post-meta {
        margin-left: 6px;
    }
    .timeline-comment article p {
        margin: 0px;
    }
    .text-normal {
        font-weight: normal !important;
    }
    .f5 {
        font-size: 14px !important;
    }
    .submit-comment .btn {
        position: relative;
        display: inline-block;
        padding: 6px 12px;
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
        white-space: nowrap;
        vertical-align: middle;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-repeat: repeat-x;
        background-position: -1px -1px;
        background-size: 110% 110%;
        border: 1px solid rgba(27,31,35,0.2);
        border-radius: 0.25em;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }
    .submit-comment .btn-primary {
        color: #fff;
        background-color: #28a745;
        background-image: -webkit-linear-gradient(270deg, #34d058 0%, #28a745 90%);
        background-image: linear-gradient(-180deg, #34d058 0%, #28a745 90%);
    }
    </style>
</html>

修改`/themes/next/layout/_macro/post.swig`

在文件最后</footer>前引入github_comments.swig

<footer class="post-footer">
    ...
    {% if page.commentIssueId %}
        {% include '../_partials/github_comments.swig' %}
    {% endif %}
</footer>

修改/themes/next/layout/_partials/head.swig

文件最后引入JQuery

{% if page.commentIssueId %}
    <script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
{% endif %}

二、总有一个适合你

选择真的太多了,先大概了解一下有哪些

hexo已提供的选择

 # Duoshuo ShortName  //多说
 ...
 # Disqus 
 ...
 # Hypercomments 
 ...
 # changyan  //畅言
 ...
 # Valine
 ...
 #youyan_uid //友言
 ...
 #livere_uid
 ...
 # Gitment

其他选择

网易云跟帖
来必力
Gitalk
Gitter
...

了解各种评论系统的利弊和效果预览>>

But上面提到的个人都不太钟意~

一直在寻找!直到发现了他！！是自己想要的效果！！

三、独立Comments板块

因为我的blog有背景图片，个人比较喜欢独立出来的效果，花了点时间满足自己的强迫症，~~是自己瞎捉摸出来的~~,不是唯一的办法。

修改`/themes/next/layout/_macro/post.swig`

删除之前引入github_comments.swig文件的代码

/*删除*/
{% if page.commentIssueId %}
{% include '../_partials/github_comments.swig' %}
{% endif %}
/*删除结束*/

新建GitHub_Issue.swig

在/themes/next/layout/_partials文件下新建GitHub_Issue.swig,并加入下面代码
```
{% if page.commentIssueId %}
    {% include '../_partials/github_comments.swig' %}
{% endif %}
```

修改/themes/next/layout/post.swig

在<span id="inline-green">block content</span>最后<span id="inline-green">endblock</span> 之前引入GitHub_Issue.swig
```
{% block content %}
...
    {% include '_partials/GitHub_Issue.swig' %}
{% endblock %}
```

修改/themes/next/source/css/_custom/custom.styl

添加代码如下:

#comments{
    margin-top:20px;
    padding: 40px;
    background: white;   
}

效果预览

用hexo+github搭建博客(三)

基于GitHubIssue的评论功能 [完结于2018-07-19 19:45:13]

链接自取

一、实现评论功能

手动创建Issue

文章添加commentIssueId字段

添加 github_comments.swig 文件

修改/themes/next/layout/_macro/post.swig

修改/themes/next/layout/_partials/head.swig

二、总有一个适合你

选择真的太多了,先大概了解一下有哪些

三、独立Comments板块

修改/themes/next/layout/_macro/post.swig

新建GitHub_Issue.swig

修改/themes/next/layout/post.swig

修改/themes/next/source/css/_custom/custom.styl

效果预览

文章添加`commentIssueId`字段

修改`/themes/next/layout/_macro/post.swig`

修改`/themes/next/layout/_macro/post.swig`

新建`GitHub_Issue.swig`