Utteranc.es comments

Alexander Bilz

03.32.2021 8e8d8e40307256887694a947f14b9593d3c89789

Utteranc.es comments

 README.md

@@ -18,7 +18,7 @@
- Multilingual
- 100⁄100 Google Lighthouse score
- Google Analytics (optional)
- Comments powered by Disqus (optional)
- Comments powered by Disqus or Utterances (optional)
- Katex support (optional)
- Formspree Contact Form (optional)
- Twitter Cards support
@@ -195,12 +195,25 @@

### Comments powered by Disqus

No comment section is shown on the `single.html`, unless a disqus code is specified in the `config.toml` file.
No comment section is shown on the `single.html`, unless a Disqus code is specified in the `config.toml` file.

```toml
disqusShortname = "XXX"
```

### Comments powered by Utterance.es

No comment section is shown on the `single.html`, unless a `repo` is specified in the `config.toml` file. If uncertain how parameter to configure, check out the official [documentation}(https://utteranc.es/).

```toml
[params.utterances]
repo = "githubuser/reponame"
issueTerm = "pathname"
theme= "preferred-color-scheme"
# label = 
```
If you are using a strict CSP, you'll have to add the domain to it. 

### Google Analytics

To use Google Analytics, a valid tracking code has to be added. If you don't want to load the code, then commend out the parameter.

 assets/css/style.css

@@ -698,6 +698,10 @@
    margin: 30px;
}

.utterances {
    max-width: unset;
}

/* Buttons */
a.btn {
    color: #868686;

 layouts/_default/single.html

@@ -34,6 +34,12 @@
                    {{ template "_internal/disqus.html" . }}
                </div>
            {{- end }}
            {{ if .Site.Params.utterances.repo  -}}
            <div id="fb_comments_container">
                <h2>{{ i18n "comments" }}</h2>
                {{ partial "comments/utterances.html" . }}
            </div>
            {{- end }}
        {{ end }}
    </div>


 layouts/partials/comments/utterances.html

New file
@@ -0,0 +1,10 @@
<script src="https://utteranc.es/client.js" 
        repo="{{ .Site.Params.utterances.repo }}"
        issue-term="{{ .Site.Params.utterances.issueTerm }}"
        theme="{{ .Site.Params.utterances.theme }}" 
        {{ with .Site.Params.utterances.label }}
        label="{{ . }}"
        {{ end }}
        crossorigin="anonymous" 
        async>
</script>