feat(giscus): expose language option for Comments component (#2012)

Jiangnan Li

2025-06-08 cdd0be2aa8c6e0a6d97779f3db3072952b54bf13

feat(giscus): expose language option for Comments component (#2012)

* add language support for Comment

* docs: let users know they can customize their language preference

 docs/features/comments.md

@@ -45,6 +45,8 @@
      category: 'Announcements',
      // from data-category-id
      categoryId: 'DIC_kwDOFxRnmM4B-Xg6',
      // from data-lang
      lang: 'en'
    }
  }),
],
@@ -90,6 +92,10 @@
    // where to put the comment input box relative to the comments
    // defaults to 'bottom'
    inputPosition?: "top" | "bottom"

    // set your preference language here
    // defaults to 'en'
    lang?: string
  }
}
```

 quartz/components/Comments.tsx

@@ -17,6 +17,7 @@
    strict?: boolean
    reactionsEnabled?: boolean
    inputPosition?: "top" | "bottom"
    lang?: string
  }
}

@@ -50,6 +51,7 @@
        data-theme-url={
          opts.options.themeUrl ?? `https://${cfg.baseUrl ?? "example.com"}/static/giscus`
        }
        data-lang={opts.options.lang ?? "en"}
      ></div>
    )
  }

 quartz/components/scripts/comments.inline.ts

@@ -55,6 +55,7 @@
    strict: string
    reactionsEnabled: string
    inputPosition: "top" | "bottom"
    lang: string
  }
}

@@ -78,7 +79,7 @@
  giscusScript.setAttribute("data-strict", giscusContainer.dataset.strict)
  giscusScript.setAttribute("data-reactions-enabled", giscusContainer.dataset.reactionsEnabled)
  giscusScript.setAttribute("data-input-position", giscusContainer.dataset.inputPosition)

  giscusScript.setAttribute("data-lang", giscusContainer.dataset.lang)
  const theme = document.documentElement.getAttribute("saved-theme")
  if (theme) {
    giscusScript.setAttribute("data-theme", getThemeUrl(getThemeName(theme)))