add gitalk-comment/ utterances support for jekyll

_config.yml

# To use Gittalk comments  https://github.com/gitalk/gitalk#Usage
# jekyll synatx: https://jekyllrb.com/docs/liquid/
gittalk:
  # Note: A GitHub Application is needed for authorization, if you don't have one, going to https://github.com/settings/applications/new register a new one.
  # You must specify the website domain url in the Authorization callback URL field.
  clientID:  # GitHub Application Client ID
  clientSecret:   # GitHub Application Client Secret,
  repository: blog-comments  # Storage gittalk's repository
  owner: colynn  # GitHub repo owner,
  admin: colynn  # GitHub repo owner and collaborators, only these guys can initialize github issues eg. 'colynn,daattali'


# To use Utterance comments,  you can going to https://utteranc.es/ get more parameters interpretation.
utterance:
  # Note: Make sure the repo is public, otherwise your readers will not be able to view the issues/comments.
  # Make sure the [utterances app](https://github.com/apps/utterances) is installed on the repo, otherwise users will not be able to post comments.
  #  If your repo is a fork, navigate to it's settings tab and confirm the issues feature is turned on.
  repo:  # Choose the repository utterances will connect to. eg: owner/repo
  issue-term: title   # Choose the mapping between blog posts and GitHub issues. 
  theme: github-light # Choose an Utterances theme that matches your blog. 'github-light' is default

  ## Optional
  label:  blog-comments # Choose the label that will be assigned to issues created by Utterances.

gitalk-comment.html

<!-- _includes/gitalk-comment.html -->
{% if site.gittalk.clientID and site.gittalk.clientSecret %}
<div id="gitalk-container"></div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<script >
  const gitalk = new Gitalk({
    clientID: '{{ site.gittalk.clientID }}',
    clientSecret: "{{ site.gittalk.clientSecret }}",
    repo: "{{ site.gittalk.repository }}",
    owner: "{{ site.gittalk.owner }}",
    admin: ["{{ site.gittalk.admin | split: ','  | join: '","'}}"],
    id: "{{ page.url }}",    // Ensure uniqueness and length less than 50 
    distractionFreeMode: false,  // Facebook-like distraction free mode
    perPage: 100
});

gitalk.render('gitalk-container')
</script>

{% endif %}

page.html

<!-- _layouts/page.html -->
{% include gitalk-comment.html %}

{% include utterances-comment.html %}

utterances-comment.html

<!-- _includes/utterances-comment.html -->
{% if site.utterance.repo and site.utterance.issue-term  %}

<script src="https://utteranc.es/client.js"
        repo="{{site.utterance.repo }}"
        issue-term="{{ site.utterance.issue-term }}"
        theme="{{ site.utterance.theme}}"
        label="{{ page.url }}"  # you can going to https://jekyllrb.com/docs/variables/#page-variables find more page variables as a label.
        crossorigin="anonymous"
        async>
</script>

{% endif %}