https://m19v.github.io/blog/how-to-add-giscus-to-docusaurus

[giscus[bot]]

https://m19v.github.io/blog/how-to-add-giscus-to-docusaurus

Goal

https://m19v.github.io/blog/how-to-add-giscus-to-docusaurus

[huwangtao123]

Very useful information

[huwangtao123]

I do have a question for you:
huwangtao123/huwangtao123.github.io@d045f7b

[huwangtao123]

I made a commitment similar to your change. However, i am not able to see my comment under my blog. Any suggestion

[m19v]

I have updated the post and added step-by-step instruction. I assume you have not configured giscuss and connect it to the GitHub discussions. Please feel free to comment if you have further questions.

[dodalovicgran]

The following step failed:

npm run swizzle @docusaurus/theme-classic BlogPostItemWrapper -- --wrap

[m19v]

Thank you for your question. The name of component to swizzle was wrong , please try the following command with correct name of component BlogPostItem:

npm run swizzle @docusaurus/theme-classic BlogPostItem -- --wrap

P.S. BlogPostItemWrap is a function in BlogPostItem component. To see components available for swizzling try:

npm run swizzle @docusaurus/theme-classic --list

[dodalovicgran]

Thanks for this hint. Unfortunately, the comments don't appear even with this. 🤔

[m19v]

Do you have your source code in any public repository, so that I can check?

[dodalovicgran]

https://github.com/dodalovic/dodalovic.github.io/pull/4/files

[m19v]

I have added a comment to your Pull-Request. Please add the missing Giscus component in BlogPostItem.

[pieroproietti]

Great! I was able to replicate for my blog https://penguins-eggs.net

Thanks

[4DRIAN0RTIZ]

Thank you very much, it worked great. Thank you for sharing.

I have a question, how could I change the color to fit my page a little better?

[m19v]

As shown in current post you basically can path theme={colorMode} to theme, e.g. light or dark. For further custom themes please see the following links:

• https://github.com/giscus/giscus/blob/main/ADVANCED-USAGE.md#data-theme
• https://github.com/giscus/giscus/tree/main/styles

[Zakops-com]

is it possible to use in docs?

[m19v]

Hi,
I assume yes as Docusaurus has good architecture. E.g. the easiest way to have comments on docs is to just import GiscusComponent already created in current tutorial in MDX (see https://docusaurus.io/docs/markdown-features/react#using-jsx-in-markdown).
Otherwise use Swizzling (https://docusaurus.io/docs/swizzling) and plugin-content-docs (https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-docs) to wrap right docs item with GiscussComponent. Check please https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-docs#docItemComponent if it is the right one.

Would be grad for any further details if you get it working. It might be also interesting for others.

Regards

[zakery1369]

Great! its work on my weblog

Zakops.com

[Isaac-Tait]

Worked great for me. Thanks! FYI - if you go to https://giscus.app (after syncing the repo with Giscus) and enter your username/reponame (Configuration > Repository) it will auto populate the <script> for you with the information (instead of using the GitHub GraphQL API). Either way works... Thanks again for the helpful post 🤠

[pauloprsdesouza]

Thanks for this documentation, I was looking for something like this. Very useful and simple to use. Thanks for sharing the knowledge.

[pieroproietti]

Thanks @pauloprsdesouza!

Just a question but from where you wrote me with giscus? As I'm not wrong from my blog is not activated from the time - two mounths ago - I updated it on the last docusauros version...

[ymc9]

Looks nice!

[jrmejiaa]

Hi, thank you for the awesome explanation! For those that got a warning in the component useBlogPost. This is not longer in internal. The code of BlogPostItem should look something like this in Docusaurus v3:

import React from 'react';
import { useBlogPost } from '@docusaurus/plugin-content-blog/client';

The rest seems to be working just fine :D

[mgzgithub]

Your article is very useful to me!

[pieroproietti]

@mszgithub
Great! Thanks for feedbaxk.

[jozefRudy]

Thanks for nice explanation!

Minimal current typescript version (no possibility to turn off comments for specific blogpost).
Hope this helps.

import Giscus from "@giscus/react";
import { useColorMode } from "@docusaurus/theme-common";

export default function GiscusComponent() {
  const { colorMode } = useColorMode();

  return (
    <Giscus
      repo="xxx"
      repoId="xxx"
      category="General"
      categoryId="xxx"
      mapping="url"
      term="Welcome to @giscus/react component!"
      strict="0"
      reactionsEnabled="1"
      emitMetadata="1"
      inputPosition="top"
      theme={colorMode}
      lang="en"
      loading="eager"
    />
  );
}

I prefer eager, should be async anyway, just more UI friendly in case it loads in last moment.

export default function BlogPostItemWrapper(props: Props): ReactNode {
  const { isBlogPostPage } = useBlogPost();
  const isBrowser = useIsBrowser();
  if (isBrowser) {
    return (
      <>
        <BlogPostItem {...props} />
        {isBlogPostPage && <GiscusComponent />}
      </>
    );
  }
  return <BlogPostItem {...props} />;
}

So we want to render Giscus only in browser, I believe original did not include that. It is barely noticable but been burned by frontmatter image not being preprocessed when we dont add conditional isBrowser.

[dario-cruz]

Thank yo for this good sir.