feat: giscus data loading lazy (#1172)

HEIGE-PCloud · Jan 30, 2024 · d055d70 · d055d70
1 parent 551d40b
commit d055d70
Show file tree

Hide file tree

Showing 5 changed files with 5 additions and 2 deletions.
diff --git a/assets/js/lib/giscus.js b/assets/js/lib/giscus.js
@@ -14,6 +14,7 @@ if (window.config?.comment?.giscus) {
   script.setAttribute('data-theme', window.isDark ? giscusConfig.darkTheme : giscusConfig.lightTheme)
   script.setAttribute('data-lang', giscusConfig.dataLang)
   script.setAttribute('data-strict', giscusConfig.dataStrict)
+  script.setAttribute('data-loading', giscusConfig.dataLoading)
   script.crossOrigin = 'anonymous'
   script.async = true
   document.getElementById('giscus').appendChild(script)

diff --git a/exampleSite/config/_default/params.toml b/exampleSite/config/_default/params.toml
@@ -451,6 +451,7 @@ cacheRemoteImages = false
       lightTheme = "light"
       darkTheme = "dark"
       dataLang = "en"
+      dataLoading = "lazy"
     # artalk comment config (https://artalk.js.org/guide/frontend/config.html)
     # artalk comment 评论系统设置 (https://artalk.js.org/guide/frontend/config.html)
     [page.comment.artalk]

diff --git a/exampleSite/content/posts/theme-documentation-basics/index.en.md b/exampleSite/content/posts/theme-documentation-basics/index.en.md
@@ -691,6 +691,7 @@ Please open the code block below to view the complete sample configuration :(far
         lightTheme = "light"
         darkTheme = "dark"
         dataLang = "en"
+        dataLoading = "lazy"
       # {{< link "https://artalk.js.org/" "artalk" >}} comment config
       [params.page.comment.artalk]
         enable = false
@@ -1066,8 +1067,6 @@ In `assets/css/_custom.scss`, you can add some css style code to customize the s
 | Ukrainian            | `uk`      | `uk`                  | :(far fa-square fa-fw):       |
 | Traditional Chinese  | `zh-tw`   | `zh-tw`               | :(far fa-square fa-fw):       |
 
-
-
 ### Basic Configuration
 
 After learning [how Hugo handle multilingual websites](https://gohugo.io/content-management/multilingual), define your languages in your [site configuration](#site-configuration).

diff --git a/exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md b/exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md
@@ -695,6 +695,7 @@ hugo
         lightTheme = "light"
         darkTheme = "dark"
         dataLang = "zh-CN"
+        dataLoading = "lazy"
       # {{< link "https://artalk.js.org/" "artalk" >}} 评论系统设置
       [params.page.comment.artalk]
         enable = false

diff --git a/layouts/partials/comment.html b/layouts/partials/comment.html
@@ -322,6 +322,7 @@
             {{- $commentConfig = $giscus.lightTheme | default "light" | dict "lightTheme" | dict "giscus" | merge $commentConfig -}}
             {{- $commentConfig = $giscus.darkTheme | default "dark" | dict "darkTheme" | dict "giscus" | merge $commentConfig -}}
             {{- $commentConfig = $giscus.dataLang | default "en" | dict "dataLang" | dict "giscus" | merge $commentConfig -}}
+            {{- $commentConfig = $giscus.dataLoading | default "lazy" | dict "dataLoading" | dict "giscus" | merge $commentConfig -}}
             {{- $options := dict "targetPath" "js/giscus.min.js" "minify" true -}}
             {{- $js := resources.Get "js/lib/giscus.js" | js.Build $options -}}
             {{- $_ := $js.RelPermalink -}}