support comment plugin giscus

This commit is contained in:
xwi88 2022-05-18 19:52:30 +08:00
parent a73149864d
commit 487a772442
No known key found for this signature in database
GPG key ID: C739E6A64E102CD0
4 changed files with 95 additions and 0 deletions

View file

@ -468,6 +468,25 @@
label = ""
lightTheme = "github-light"
darkTheme = "github-dark"
[params.page.comment.giscus]
# To enable giscus, the github discussions based comment section,
# Follow the steps described to enable giscus and get the values
# needed to populate the below information.
# https://www.joelnitta.com/posts/2021-11-24_using-giscus/
enable = false
category = "Announcements" # Announcements, Comments
lang = "en" # 保持 en, 只需要控制每篇文章的 url 不一样即可
repo = "" # Entering repo will enable giscus
repo_id = "" # query by GraphQL API, https://docs.github.com/en/graphql/overview/explorer
category_id = "" # query by GraphQL API, https://docs.github.com/en/graphql/overview/explorer
mapping = "pathname"
reactions_enabled = "0"
emit_metadata = "0"
input_position = "top"
lightTheme = "light" # github theme
darkTheme = "dark" # github theme
crossorigin = "anonymous"
label = "Comment" # Label applied to issue by utteranc.es bot
# Third-party library config
# 第三方库配置
[params.page.library]

View file

@ -550,6 +550,25 @@ enableEmoji = true
label = ""
lightTheme = "github-light"
darkTheme = "github-dark"
[params.page.comment.giscus]
# To enable giscus, the github discussions based comment section,
# Follow the steps described to enable giscus and get the values
# needed to populate the below information.
# https://www.joelnitta.com/posts/2021-11-24_using-giscus/
# enable = true
category = "Announcements" # Announcements, Comments
lang = "en" # 保持 en, 只需要控制每篇文章的 url 不一样即可
repo = "" # Entering repo will enable giscus
repo_id = "" # query by GraphQL API, https://docs.github.com/en/graphql/overview/explorer
category_id = "" # query by GraphQL API, https://docs.github.com/en/graphql/overview/explorer
mapping = "pathname"
reactions_enabled = "0"
emit_metadata = "0"
input_position = "top"
lightTheme = "light" # github theme
darkTheme = "dark" # github theme
crossorigin = "anonymous"
label = "Comment" # Label applied to issue by utteranc.es bot
# Third-party library config
# 第三方库配置
[params.page.library]

View file

@ -125,6 +125,27 @@
Please enable JavaScript to view the comments powered by <a href="https://utteranc.es/">Utterances</a>.
</noscript>
{{- end -}}
{{- /* Giscus Comment System */ -}}
{{- $giscus := $comment.giscus | default dict -}}
{{- if $giscus.enable -}}
<div id="giscus" class="comment"></div>
{{- $commentConfig = $giscus.lang | default "en" | dict "lang" | dict "giscus" | merge $commentConfig -}}
{{- $commentConfig = dict "repo" $giscus.repo | dict "giscus" | merge $commentConfig -}}
{{- $commentConfig = dict "repo_id" $giscus.repo_id | dict "giscus" | merge $commentConfig -}}
{{- $commentConfig = dict "category" $giscus.category | dict "giscus" | merge $commentConfig -}}
{{- $commentConfig = dict "category_id" $giscus.category_id | dict "giscus" | merge $commentConfig -}}
{{- $commentConfig = $giscus.mapping | default "pathname" | dict "mapping" | dict "giscus" | merge $commentConfig -}}
{{- $commentConfig = $giscus.reactions_enabled | default "1" | dict "reactions_enabled" | dict "giscus" | merge $commentConfig -}}
{{- $commentConfig = $giscus.emit_metadata | default "0" | dict "emit_metadata" | dict "giscus" | merge $commentConfig -}}
{{- $commentConfig = $giscus.input_position | default "bottom" | dict "input_position" | dict "giscus" | merge $commentConfig -}}
{{- $commentConfig = $giscus.crossorigin | default "anonymous" | dict "crossorigin" | dict "giscus" | merge $commentConfig -}}
{{- $commentConfig = $giscus.lightTheme | default "github-light" | dict "lightTheme" | dict "giscus" | merge $commentConfig -}}
{{- $commentConfig = $giscus.darkTheme | default "github-dark" | dict "darkTheme" | dict "giscus" | merge $commentConfig -}}
<noscript>
Please enable JavaScript to view the comments powered by <a href="https://giscus.app">Giscus</a>.
</noscript>
{{- end -}}
</div>
{{- end -}}

View file

@ -645,6 +645,42 @@ class Theme {
});
this.switchThemeEventSet.add(this._utterancesOnSwitchTheme);
}
if (this.config.comment.giscus) {
const giscusConfig = this.config.comment.giscus;
const giscusScript = document.createElement('script');
let dataTheme = this.isDark ? giscusConfig.darkTheme : giscusConfig.lightTheme
giscusScript.src = 'https://giscus.app/client.js';
giscusScript.type = 'text/javascript';
giscusScript.setAttribute('data-repo', giscusConfig.repo);
giscusScript.setAttribute('data-repo-id', giscusConfig.repo_id);
giscusScript.setAttribute('data-category', giscusConfig.category);
giscusScript.setAttribute('data-category-id', giscusConfig.category_id);
giscusScript.setAttribute('data-mapping', giscusConfig.mapping);
giscusScript.setAttribute('data-reactions-enabled', giscusConfig.reactions_enabled);
giscusScript.setAttribute('data-emit-metadata', giscusConfig.emit_metadata);
giscusScript.setAttribute('data-input-position', giscusConfig.input_position);
giscusScript.setAttribute('data-lang', giscusConfig.lang);
if (giscusConfig.label) giscusScript.setAttribute('label', giscusConfig.label);
giscusScript.setAttribute('data-theme', dataTheme);
giscusScript.crossOrigin = 'anonymous';
giscusScript.async = true;
document.getElementById('giscus').appendChild(giscusScript);
this._giscusOnSwitchTheme = this._giscusOnSwitchTheme || (() => {
dataTheme = this.isDark ? giscusConfig.darkTheme : giscusConfig.lightTheme
const message = {
setConfig: {
// theme: 'https://giscus.app/themes/custom_example.css',
theme: dataTheme,
reactionsEnabled: false,
}
};
const iframe = document.querySelector('iframe.giscus-frame');
if (!iframe) return;
iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
});
this.switchThemeEventSet.add(this._giscusOnSwitchTheme);
}
}
}