> For AI agents: the site index is available at https://www.juniortree.com/llms.txt; this page is available as Markdown at https://www.juniortree.com/docs/integrations/comment.md.
> Comment system for pages at the bottom

## Page metadata

- **Source URL:** https://www.juniortree.com/docs/integrations/comment

# Comment System

## Waline Comment System

**Note:**

  This theme has integrated the Waline comment system. You can configure it at the
  `integrationConfig.waline` in file `src/site.config.ts`.

The theme's comment, read statistics, likes, and other functionalities are all provided by [Waline](https://waline.js.org/).

### Remove

If you have some reasons to remove the comment system, or just learn how to change to other comment systems, this section might help you. But if you want to know how to configure it, you can skip this section.

Remove it by the following steps:

1. set `enable` to `false` in `src/site.config.ts`.

   ```ts title="src/site.config.ts"
   export const integ: IntegrationUserConfig = {
     // ...
     waline: {
       enable: false // [!code highlight]
     }
   }
   ```

2. Remove dependency `@waline/client`:

   ```shell
   bun remove @waline/client
   ```

3. Remove folder `src/components/waline`.

4. Remove relative code in these layouts:
   - `src/layouts/CommonPage.astro`
   - `src/layouts/BlogPost.astro`

5. Remove relative config like `comment` or `view` configuring for the earlier edited layouts in these files:
   - `src/pages/about/index.astro`
   - `src/pages/links/index.astro`
   - `src/pages/projects/index.astro`
   - Other blog post frontmatter config if exists

### Deploy

You can refer to its documentation for configuration, and it is recommended to use the [Vercel](https://vercel.com/) + [Supabase](https://supabase.com/) combination.

### Configuration

Then you can configure the Waline comment system in the `integrationConfig.server`.

```ts title="src/site.config.ts"
export const integ: IntegrationUserConfig = {
  // ...
  waline: {
    enable: true,
    // Server service link
    server: 'https://astro-theme-pure-waline.arthals.ink/', // [!code highlight]
    // Refer https://waline.js.org/en/guide/features/emoji.html
    emoji: ['bmoji', 'weibo'],
    // Refer https://waline.js.org/en/reference/client/props.html
    additionalConfigs: {
      pageview: true,
      comment: true
      // ...
    }
  }
}
```

### Usage

You can call it manually in `.astro` or `.mdx` files.

```jsx
import { Comment } from '@/components/waline'

// prettier-ignore
<Comment />
```

Render: