🔴 Live Demo
Interactive Comment System
Comments are powered by GitHub Discussions and load below:
⚙️ Giscus Configuration
Setup Requirements
// config/giscus.yml
repo: 'your-username/your-repo'
repoId: 'R_YOUR_REPO_ID'
category: 'General'
categoryId: 'DIC_YOUR_CATEGORY_ID'
mapping: 'pathname' # or 'url', 'title', etc.
reactionsEnabled: true
emitMetadata: false
inputPosition: 'bottom' # or 'top'
theme: 'preferred_color_scheme'
lang: 'en'
loading: 'lazy'GitHub Repository Setup
- Enable Discussions: Go to your repository Settings → Features → Discussions
- Install Giscus App: Visit giscus app and install it for your repository
- Get Configuration: Use giscus.app to generate your config
- Configure Template: Update your
config/giscus.ymlwith the generated values
✨ Key Features
🗣️ Rich Discussions
- Markdown support
- Emoji reactions
- Threaded replies
- Code syntax highlighting
🔒 Authentication
- GitHub OAuth login
- No separate accounts
- Spam protection
- Moderation tools
🎨 Customization
- Theme integration
- Custom styling
- Multiple languages
- Responsive design
💻 Usage Examples
Blog Post Integration
// In your blog post template
import GiscusComments from '@site/src/components/GiscusComments';
export default function BlogPost({ content, metadata }) {
return (
<Layout>
<article>
<h1>{metadata.title}</h1>
<div>{content}</div>
{/* Comments section */}
<section className='margin-top--xl'>
<h2>Comments</h2>
<GiscusComments />
</section>
</article>
</Layout>
);
}Documentation Pages
// In MDX documentation
---
title: Your Documentation Page
---
import GiscusComments from '@site/src/components/GiscusComments';
# Your Documentation Content
Your documentation content here...
## Questions and Feedback
<GiscusComments />🗺️ Discussion Mapping
Available Mapping Options
- pathname: Use page path (recommended)
- url: Use full URL
- title: Use page title
- og:title: Use OpenGraph title
- specific: Use specific term
- number: Use discussion number
🔗 Related Resources
Learn more about the comments system and GitHub Discussions