Comment function based on GitHubIssue[查 看 全 文]

You can add the issues manually, which is pretty simple, but it’s definitely not practical if there are more and more articles. Therefore, you can write scripts to automatically create issues. Since I do not want to transfer scripts directly from others, the automatic issue creation is temporarily shelved…

Follow-up: Just when I thought I could read the script, the link broke…..

Follow-up: Script links


Links to invite

Reference links 1 and 2 are all reference links 3. It is recommended to look at link 3 first to understand the general process and then look at each link. Specific code reference link 1.

  • Reference Link 1
  • Reference Link 2
  • Reference Link 3





First, realize the comment function

  1. Manually creating an Issue

    Go to the Github blog repository

    Click the Issuesn

    Click the New issues

    Edit Title and Leave a comment

    Click Submit New Issue to complete

    CommentIssueId value obtained


  1. The article to addcommentIssueIdfield
    Categories: Hotyan -- Top: 100 commentIssueId: 1 --Copy the code


  1. Add the github_comments.swig file

    Add github_comments.swig to the /themes/next/layout/_partials file

    /* < <! doctype html> <html> <div class="clearfix"></div> <br> <div id="comments"> <div class="post-header Bg -{{site.default_post_color}}"> <h1 > Message area </h1> <p> The message area of this site is built on Github Issue, please click the button below to leave a message. </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"> </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: 1 px solid rgba (27,31,35,0.2); Border - the radius: 0.25 em. -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>Copy the code


  1. Modify the/themes/next/layout/_macro/post.swig

    Introduce github_comments.swig at the end of the file before 

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


  1. Modify/themes/next/layout / _partials/head swig

    The file ends with JQuery

    If page.com mentIssueId %} {% < script SRC = "https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js" > < / script > {% endif %}Copy the code





Two, there is always one for you

There are so many choices. Let’s get a sense of what they are

  1. Hexo has provided options

    # Duoshuo ShortName // Say more... # Disqus ... # Hypercomments ... # changyan // Changyan... # Valine ... #youyan_uid //... #livere_uid ... # GitmentCopy the code


  1. Other options

    Gitalk Gitter…

Learn the pros and cons of various review systems and preview effects >>

But none of the people mentioned above really liked it

Always looking! Until I found him!! Is the effect that oneself want!!





3. Independent Comments section

Because my blog has background pictures, I prefer the effect of independent, spend some time to satisfy their obsessive-compulsive disorder, is their own blind figure out, not the only way.

  1. Modify the/themes/next/layout/_macro/post.swig

    Delete the code that introduced the github_comments.swig file earlier

    / / {% if page.commentIssueId %} {% include '.. /_partials/github_comments. Swig '%} {% endif %} /* Delete end */Copy the code


  1. newGitHub_Issue.swig

    Create github_issue. swig under /themes/next/layout/_partials and add the following code

    {% if page.commentIssueId %} {% include '.. /_partials/github_comments.swig' %} {% endif %}Copy the code


  1. Modify/themes/next/layout/post. Swig

    Github_issue.swig is introduced before < SPAN id=”inline-green”>block content last < SPAN id=”inline-green”>endblock

    {% block content %}
...
    {% include '_partials/GitHub_Issue.swig' %}
{% endblock %}
Copy the code


  1. Modify/themes/next/source/CSS / _custom/custom styl

    Add the following code:

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


  1. Results the preview