post_comments.html

<div class="clearfix"></div>
<br>
<div id="comments">
<div class="post-header bg-{{site.default_post_color}}">
  <h1 class="h1 post-title">Comments</h1>
</div>

<article class="post-content">
<p>Want to leave a comment? Visit <a href="https://github.com/mkoohafkan/mkoohafkan.github.io/issues/{{page.commentIssueId}}"> this post's issue page on GitHub</a> (you'll need a GitHub account).</p>
</article>
</div>

<script type="text/javascript">
  function loadComments(data) {
    for (var i=0; i<data.length; i++) {
      var cuser = data[i].user.login;
      var cuserlink = data[i].user.html_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('<br><div class="post-header bg-{{site.default_post_color}}"><span class="post-meta">' + cdate.toLocaleDateString("en", dopts) + '</span><br><a class="post-link" href="' + cuserlink + '"><h3 class="h3 post-title">' + cuser + '</h3></a></div><article class="post-content">' + cbody + '</article>');
    }
  }
  $.ajax("https://api.github.com/repos/mkoohafkan/mkoohafkan.github.io/issues/{{ page.commentIssueId }}/comments", {
    headers: {Accept: "application/vnd.github.v3.html+json"},
    dataType: "json",
    success: function(msg){
      loadComments(msg);
   }
  });
</script>