Gitalk适配教程。（安装Gitalk填坑记录😥）

[ventusoon]

我纯小白一个，没学过编程，用了作者大大的主题很喜欢，也非常感谢作者。 在使用过程中，想添加gitalk评论功能，奈何无法完全与主题适配，我的操作如下： 1.增加了gitalk.html，

{{ if .Site.Params.enableGitalk }}
<div id="gitalk-container"></div>
<link rel="stylesheet" href="/gitalk/gitalk.css">
<script src="/gitalk/gitalk.min.js"></script>
<script>
  const gitalk = new Gitalk({
    clientID: '{{ .Site.Params.Gitalk.clientID }}',
    clientSecret: '{{ .Site.Params.Gitalk.clientSecret }}',
    repo: '{{ .Site.Params.Gitalk.repo }}',
    owner: '{{ .Site.Params.Gitalk.owner }}',
    admin: ['{{ .Site.Params.Gitalk.owner }}'],
    proxy: '{{ .Site.Params.gitalk.proxy }}',
    id: location.pathname, // Ensure uniqueness and length less than 50
    distractionFreeMode: false // Facebook-like distraction free mode
  });
  (function() {
    if (["localhost", "127.0.0.1"].indexOf(window.location.hostname) != -1) {
      document.getElementById('gitalk-container').innerHTML = 'Gitalk comments not available by default when the website is previewed locally.';
      return;
    }
    gitalk.render('gitalk-container');
  })();
</script>
{{ end }} 

2.single.html添加

{{ partial "gitalk.html" . }}

3.如1，我把gitalk.css，gitalk.min.js放在了本地加载。 4.在config.toml中按照1添加了以下

[params.gitalk]
    clientID = "84d6~~~~~~~f9e7b"
    clientSecret = "e45ce541510~~~~~a61d0d46761f3"
    repo = "LuvSia"
    owner = "ventusoon"
    admin = "ventusoon"
    id = "location.pathname"
    labels = "gitalk"
    perPage = 15 
    pagerDirection = "last" 
    createIssueManually = true
    distractionFreeMode = false     
    proxy = "https://cors-any~~~~~~uth/access_token"

以上，成功在我的博客上运行了gitalk。

[ventusoon]

出现的问题及诉求： 1.能加载，但是gitalk.css样式好像替换掉了dark.css。 2.界面过大，无法与post上的内容对齐，看起极为不协调。 3.由于实在是小白，没有学习过任何一门编程语言，实在无法下手解决，网上找了很多办法，试过之后，还是不行。

请求作者大大适配下，或者能够在线解决我的问题那就更好了！

我的博客

[ventusoon]

1.通过修改gitalk.css内容，将markdown的样式代码全部删除后，解决了样式覆盖主题的问题。

2.通过修改gitalk.html内容，解决了边框无法对齐的难题。

<div id="gitalk-container" style="margin:0 auto;width: 980px;height: auto;border:1px solid #ccc"></div>

因为gitalk本地不显示，故引入颜色边框，修改到合适位置后将颜色修改为#ccc或直接删除border。

以上，是我的全部解决方案。此贴终结。

[ventusoon]

调整个人使用的最佳位置

<div id="gitalk-container" style="margin:0 auto;width: 600px;height: auto"></div>