giscus.html 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. {{- with .Site.Params.comments.giscus -}}
  2. <script
  3. src="https://giscus.app/client.js"
  4. data-repo="{{- .repo -}}"
  5. data-repo-id="{{- .repoID -}}"
  6. data-category="{{- .category -}}"
  7. data-category-id="{{- .categoryID -}}"
  8. data-mapping="{{- default `title` .mapping -}}"
  9. data-reactions-enabled="{{- default 1 .reactionsEnabled -}}"
  10. data-emit-metadata="{{- default 0 .emitMetadata -}}"
  11. data-theme="{{- default `light` .lightTheme -}}"
  12. data-lang="{{- default `en` .lang -}}"
  13. crossorigin="anonymous"
  14. async
  15. ></script>
  16. <script>
  17. function setGiscusTheme(theme) {
  18. let giscus = document.querySelector("iframe.giscus-frame");
  19. if (giscus) {
  20. giscus.contentWindow.postMessage(
  21. {
  22. giscus: {
  23. setConfig: {
  24. theme: theme,
  25. },
  26. },
  27. },
  28. "https://giscus.app"
  29. );
  30. }
  31. }
  32. (function () {
  33. addEventListener("message", (e) => {
  34. if (event.origin !== "https://giscus.app") return;
  35. handler();
  36. });
  37. window.addEventListener("onColorSchemeChange", handler);
  38. function handler() {
  39. if (document.documentElement.dataset.scheme === "light") {
  40. setGiscusTheme('{{- default "light" .lightTheme -}}');
  41. } else {
  42. setGiscusTheme('{{- default "dark_dimmed" .darkTheme -}}');
  43. }
  44. }
  45. })();
  46. </script>
  47. {{- end -}}