---
title: "Adding a Comment Section to Docusaurus Blog Pages"
description: "Use the Docusaurus Swizzle feature to add a Giscus comment section to Docusaurus blog pages."
author: "xyspg"
lang: "en"
published: "2023-02-19T13:30:00.000Z"
tags:
  - "english"
url: "https://xyspg.moe/blog/en/add-comment-section-to-docusaurus"
image: "https://xyspg.moe/images/blog/69a2996aee7927fa94389f287408c1060b2b88e3-3826x2065.png"
translations:
  zh: "https://xyspg.moe/blog/add-comment-section-to-docusaurus"
  ja: "https://xyspg.moe/blog/ja/add-comment-section-to-docusaurus"
---

# Adding a Comment Section to Docusaurus Blog Pages

## How it Works

Docusaurus does not provide an out-of-the-box comment component, but we can customize components using the [Swizzle](https://docusaurus.io/zh-CN/docs/swizzling) feature.

The comment system used in this article is [Giscus](https://giscus.app/zh-CN), which is an open-source comment system based on GitHub Discussions.

![Image](https://xyspg.moe/images/blog/707ea9c00131890700239e3790dad15591b0a798-1526x476.png)

## Creating Giscus Configuration

### Repository Configuration

Go to your Docusaurus website's repository page on [GitHub](https://github.com/), and ensure the repository is public.

If it's not public, you can go to Settings - General, and at the very bottom under Danger Zone, select Change repository visibility.

After confirming the repository is public, check the Discussions box in the Features tab of Settings.

![Image](https://xyspg.moe/images/blog/3bf4d985c3891b5c8c8fd8f6064f992c6fa72c4d-1262x132.png)

Go to the [Giscus GitHub App page](https://github.com/apps/giscus) and follow the prompts to install it. Choose the Repository access scope according to your needs.

### Getting the Giscus Configuration

Open the [Giscus official website](https://giscus.app/zh-CN) and enter your repository address.

![Image](https://xyspg.moe/images/blog/441d939dbd9a4ab9c4ef934e1453d616a5b34b45-1032x578.png)

Select "Announcements" in the "Discussion Category"; the remaining options can be configured as needed. Once configured, you can get the configuration file at the bottom.

```javascript
<script
  src="https://giscus.app/client.js"
  data-repo="your-name/your-repo"
  data-repo-id="your-repo-id"
  data-category="Announcements"
  data-category-id="your-category-id"
  data-mapping="pathname"
  data-strict="0"
  data-reactions-enabled="1"
  data-emit-metadata="0"
  data-input-position="bottom"
  data-theme="preferred_color_scheme"
  data-lang="zh-CN"
  crossorigin="anonymous"
  async
/>
```

## Inserting the Giscus Component via Swizzle

First, install the Giscus React component in your project:

`npm i @giscus/react`

Create a file named `GiscusComponent.js` under `/src/components/`.

Copy the following code into it; the corresponding ID values can be found in the configuration file mentioned above:

```javascript
// GiscusComponent.js
import React from "react";
import Giscus from "@giscus/react";
import { useColorMode } from "@docusaurus/theme-common";

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

  return (
    <Giscus
      repo="" // Enter your repo here
      repoId="" // Your repo id
      category=" " // Your category (default: Announcement)
      categoryId="" // Your category id
      mapping="pathname"
      term="Welcome to @giscus/react component!"
      strict="0"
      reactionsEnabled="1"
      emitMetadata="1"
      inputPosition="top"
      theme={colorMode}
      lang="zh-CN"
      loading="lazy"
      crossorigin="anonymous"
      async
    />
  );
}
```

Run Swizzle:

`npm run swizzle`

Select your theme configuration file (default is theme-classic):

```sh
> docusaurus swizzle

? Select a theme to swizzle: › - Use arrow-keys. Return to submit.
❯   @docusaurus/theme-classic
    @docusaurus/plugin-debug
    [Exit]
```

Scroll down to find `BlogPostItem` and press Enter to confirm:

```sh
BlogListPage (Unsafe)
    BlogListPaginator (Unsafe)
❯   BlogPostItem (Unsafe)
    BlogPostItem/Container (Unsafe)
    BlogPostItem/Content (Unsafe)
```

Press Enter to select `Wrap` and `YES: I know what I am doing!`:

```sh
? Which swizzle action do you want to do? › - Use arrow-keys. Return to submit.
❯   Wrap (Unsafe)
    Eject (Unsafe)
    [Exit]
```

Open `/src/theme/BlogPostItem/index.js` and modify the content to:

```javascript
// src/theme/BlogPostItem/index.js
import React from "react";
import { useBlogPost } from "@docusaurus/theme-common/internal";
import BlogPostItem from "@theme-original/BlogPostItem";
import GiscusComponent from "@site/src/components/GiscusComponent";
import useIsBrowser from "@docusaurus/useIsBrowser";

export default function BlogPostItemWrapper(props) {
  const { metadata } = useBlogPost();
  const isBrowser = useIsBrowser();

  const { frontMatter, slug, title } = metadata;
  const { enableComments } = frontMatter;

  // Prevent ReferenceError: window is not defined (https://docusaurus.io/docs/advanced/ssg)
  var isCurrentUrlBlog = false;
  if (isBrowser) {
    isCurrentUrlBlog = window.location.pathname === "/blog";
  }

  return (
    <>
      <BlogPostItem {...props} />
      {enableComments && !isCurrentUrlBlog && <GiscusComponent />}
    </>
  );
}
```

Next, add `enableComments: true` to the metadata at the top of the corresponding Blog page. For example:

```markdown
---
title: A Title
authors: Author
tags: [Tags]
enableComments: true
---
```

Note: if you run swizzle again, the component will be restored to its original state and you will need to modify it again.