feat(comment): add Utterances comment system (#317)

This commit is contained in:
Dillon 2020-05-04 20:28:27 +08:00 committed by GitHub
parent 44955320ba
commit 7dfa964d3f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 99 additions and 18 deletions

View file

@ -89,7 +89,8 @@ I hope you will LoveIt ❤️!
* **Valine** comment system supported by [Valine](https://valine.js.org/)
* **Facebook comments** system supported by [Facebook](https://developers.facebook.com/docs/plugins/comments/)
* **Telegram comments** system supported by [Telegram Comments](https://comments.app/)
* **Commento** comments system supported by [Commento](https://commento.io/)
* **Commento** comment system supported by [Commento](https://commento.io/)
* **Utterances** comment system supported by [Utterances](https://utteranc.es/)
### Extended Features

View file

@ -85,6 +85,7 @@
* 支持 **[Facebook](https://developers.facebook.com/docs/plugins/comments/) 评论**系统
* 支持 **[Telegram comments](https://comments.app/) 评论**系统
* 支持 **[Commento](https://commento.io/)** 评论系统
* 支持 **[Utterances](https://utteranc.es/)** 评论系统
### 扩展功能

View file

@ -1,3 +1,3 @@
.comment {
#comments {
padding: 4rem 0;
}

View file

@ -371,4 +371,4 @@ $admonition-background-color-map: (
) !default;
// ========== Admonition ========== //
$MAX_LENGTH: 9999px;
$MAX_LENGTH: 12000px;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -892,10 +892,20 @@ enableEmoji = true
colorful = true
dislikes = false
outlined = false
# Commento comments config (https://commento.io/)
# Commento comments 评论系统设置 (https://commento.io/)
# Commento comment config (https://commento.io/)
# Commento comment 评论系统设置 (https://commento.io/)
[params.page.comment.commento]
enable = false
# Utterances comment config (https://utteranc.es/)
# Utterances comment 评论系统设置 (https://utteranc.es/)
[params.page.comment.utterances]
enable = false
# owner/repo
repo = ""
issueTerm = "pathname"
label = ""
lightTheme = "github-light"
darkTheme = "github-dark"
# SEO config
# SEO 配置
[params.page.seo]

View file

@ -56,7 +56,8 @@ math:
* :(far fa-comment-alt fa-fw): **Valine** comment system supported by [Valine](https://valine.js.org/)
* :(far fa-comments fa-fw): **Facebook comments** system supported by [Facebook](https://developers.facebook.com/docs/plugins/comments/)
* :(fas fa-comment fa-fw): **Telegram comments** system supported by [Comments](https://comments.app/)
* :(fas fa-comment-dots fa-fw): **Commento** comments system supported by [Commento](https://commento.io/)
* :(fas fa-comment-dots fa-fw): **Commento** comment system supported by [Commento](https://commento.io/)
* :(fas fa-comment-alt fa-fw): **Utterances** comment system supported by [Utterances](https://utteranc.es/)
#### Extended Features

View file

@ -61,7 +61,8 @@ Welcome to take the time to propose a translation by [:(fas fa-code-branch fa-fw
* :(far fa-comment-alt fa-fw): **Valine** comment system supported by [Valine](https://valine.js.org/)
* :(far fa-comments fa-fw): **Facebook comments** system supported by [Facebook](https://developers.facebook.com/docs/plugins/comments/)
* :(fas fa-comment fa-fw): **Telegram comments** system supported by [Comments](https://comments.app/)
* :(fas fa-comment-dots fa-fw): **Commento** comments system supported by [Commento](https://commento.io/)
* :(fas fa-comment-dots fa-fw): **Commento** comment system supported by [Commento](https://commento.io/)
* :(fas fa-comment-alt fa-fw): **Utterances** comment system supported by [Utterances](https://utteranc.es/)
#### Extended Features

View file

@ -57,6 +57,7 @@ math:
* :(far fa-comments fa-fw): 支持 **[Facebook](https://developers.facebook.com/docs/plugins/comments/) 评论**系统
* :(fas fa-comment fa-fw): 支持 **[Telegram comments](https://comments.app/) 评论**系统
* :(fas fa-comment-dots fa-fw): 支持 **[Commento](https://commento.io/)** 评论系统
* :(far fa-comment-alt fa-fw): 支持 **[Utterances](https://utteranc.es/)** 评论系统
#### 扩展功能

View file

@ -533,6 +533,15 @@ Please open the code block below to view the complete sample configuration :(far
# {{< version 0.2.0 >}} {{< link "https://commento.io/" "Commento" >}} comment config
[params.page.comment.commento]
enable = false
# {{< version 0.2.5 >}} {{< link "https://utteranc.es/" "Utterances" >}} comment config
[params.page.comment.utterances]
enable = false
# owner/repo
repo = ""
issueTerm = "pathname"
label = ""
lightTheme = "github-light"
darkTheme = "github-dark"
# {{< version 0.2.0 >}} SEO config
[params.page.seo]
# Publisher info

View file

@ -538,6 +538,15 @@ Please open the code block below to view the complete sample configuration :(far
# {{< version 0.2.0 >}} {{< link "https://commento.io/" "Commento" >}} comment config
[params.page.comment.commento]
enable = false
# {{< version 0.2.5 >}} {{< link "https://utteranc.es/" "Utterances" >}} comment config
[params.page.comment.utterances]
enable = false
# owner/repo
repo = ""
issueTerm = "pathname"
label = ""
lightTheme = "github-light"
darkTheme = "github-dark"
# {{< version 0.2.0 >}} SEO config
[params.page.seo]
# Publisher info

View file

@ -540,6 +540,15 @@ hugo
# {{< version 0.2.0 >}} {{< link "https://commento.io/" "Commento" >}} 评论系统设置
[params.page.comment.commento]
enable = false
# {{< version 0.2.5 >}} {{< link "https://utteranc.es/" "Utterances" >}} 评论系统设置
[params.page.comment.utterances]
enable = false
# owner/repo
repo = ""
issueTerm = "pathname"
label = ""
lightTheme = "github-light"
darkTheme = "github-dark"
# {{< version 0.2.0 >}} SEO config
[params.page.seo]
# 出版者信息

View file

@ -1,6 +1,6 @@
{{- $cdn := .Scratch.Get "cdn" | default dict -}}
{{- $fingerprint := .Scratch.Get "fingerprint" -}}
{{- $comment := .Scratch.Get "comment" | default (dict "disqus" dict "gitalk" dict "valine" dict "facebook" dict "telegram" dict "commento" dict) -}}
{{- $comment := .Scratch.Get "comment" | default (dict "disqus" dict "gitalk" dict "valine" dict "facebook" dict "telegram" dict "commento" dict "utterances" dict) -}}
{{- $commentConfig := dict -}}
{{- if $comment.enable -}}
@ -107,6 +107,20 @@
Please enable JavaScript to view the comments powered by <a href="https://commento.io/">Commento</a>.
</noscript>
{{- end -}}
{{- /* Utterances Comment System */ -}}
{{- if $comment.utterances.enable -}}
<div id="utterances"></div>
{{- $utterances := $comment.utterances -}}
{{- $commentConfig = dict "repo" $utterances.repo | dict "utterances" | merge $commentConfig -}}
{{- $commentConfig = $utterances.issueTerm | default "pathname" | dict "issueTerm" | dict "utterances" | merge $commentConfig -}}
{{- $commentConfig = dict "label" $utterances.label | dict "utterances" | merge $commentConfig -}}
{{- $commentConfig = $utterances.lightTheme | default "github-light" | dict "lightTheme" | dict "utterances" | merge $commentConfig -}}
{{- $commentConfig = $utterances.darkTheme | default "github-dark" | dict "darkTheme" | dict "utterances" | merge $commentConfig -}}
<noscript>
Please enable JavaScript to view the comments powered by <a href="https://utteranc.es/">Utterances</a>.
</noscript>
{{- end -}}
</div>
{{- end -}}

View file

@ -22,6 +22,7 @@
"build": "npm run babel && hugo -v --source=exampleSite --themesDir ../.. --gc",
"build-lunr-segmentit": "browserify src/lib/lunr.segmentit.js -o assets/lib/lunr/lunr.segmentit.js -t babelify --presets @babel/preset-env --presets minify",
"start": "npm run babel && hugo server --source=exampleSite --themesDir ../.. -D --disableFastRender",
"start-production": "npm run babel && hugo server --source=exampleSite --themesDir ../.. -D --disableFastRender -e production",
"check": "htmlproofer exampleSite/public --check-html --allow-hash-href --empty-alt-ignore --disable-external",
"copy": "rm -rf resources && cp -rf exampleSite/resources resources"
},

View file

@ -590,12 +590,36 @@ class Theme {
}
initComment() {
if (this.config.comment && this.config.comment.gitalk) {
this.config.comment.gitalk.body = decodeURI(window.location.href);
const gitalk = new Gitalk(this.config.comment.gitalk.body);
gitalk.render('gitalk');
if (this.config.comment) {
if (this.config.comment.gitalk) {
this.config.comment.gitalk.body = decodeURI(window.location.href);
const gitalk = new Gitalk(this.config.comment.gitalk.body);
gitalk.render('gitalk');
}
if (this.config.comment.valine) new Valine(this.config.comment.valine);
if (this.config.comment.utterances) {
const utterancesConfig = this.config.comment.utterances;
const script = document.createElement('script');
script.src = 'https://utteranc.es/client.js';
script.type = 'text/javascript';
script.setAttribute('repo', utterancesConfig.repo);
script.setAttribute('issue-term', utterancesConfig.issueTerm);
if (utterancesConfig.label) script.setAttribute('label', utterancesConfig.label);
script.setAttribute('theme', this.isDark ? utterancesConfig.darkTheme : utterancesConfig.lightTheme);
script.crossOrigin = 'anonymous';
script.async = true;
document.getElementById('utterances').appendChild(script);
this._utterancesOnSwitchTheme = this._utterancesOnSwitchTheme || (() => {
const message = {
type: 'set-theme',
theme: this.isDark ? utterancesConfig.darkTheme : utterancesConfig.lightTheme,
};
const iframe = document.querySelector('.utterances-frame');
iframe.contentWindow.postMessage(message, 'https://utteranc.es');
});
this.switchThemeEventSet.add(this._utterancesOnSwitchTheme);
}
}
if (this.config.comment && this.config.comment.valine) new Valine(this.config.comment.valine);
}
initSmoothScroll() {