https://github.com/mooncat126/gitalk-comments
gitalk blog comment board using: nuxt gitalk 博客留言板
https://github.com/mooncat126/gitalk-comments
blog gitalk notion-blog nuxt
Last synced: 2 months ago
JSON representation
gitalk blog comment board using: nuxt gitalk 博客留言板
- Host: GitHub
- URL: https://github.com/mooncat126/gitalk-comments
- Owner: mooncat126
- Created: 2023-08-02T15:18:08.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-08-08T05:23:28.000Z (almost 2 years ago)
- Last Synced: 2025-01-26T10:41:42.359Z (4 months ago)
- Topics: blog, gitalk, notion-blog, nuxt
- Homepage: https://xyu.house/
- Size: 24.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[English](README_en.md) | [中文](README.md)
# gitalk-comments
notion-blog的免费gitalk博客留言板。
# 步骤
为了在Nuxt.js中集成Gitalk博客留言板，您需要遵循以下步骤：
### 1. 设置GitHub应用
确保你在GitHub上创建了一个OAuth应用并将Client ID和Client Secret填入Gitalk的配置中。
1. 登录您的GitHub账号
首先，确保您已登录到GitHub。
2. 创建一个新的OAuth应用
在浏览器中，导航到：https://github.com/settings/applications/new 来创建一个新的OAuth应用。
- 填写必要的应用详情：
- `Application name`: 为您的应用命名。例如，可以命名为 "My Blog Gitalk Integration"。
- `Homepage URL`: 您博客的主页URL。
- `Application description`: 描述您的应用（可选）。
- `Authorization callback URL`: 这通常应设置为博客的URL。Gitalk在身份验证过程中会使用它。
- 点击"Register application"。
3. 获取Client ID和Client Secret
完成OAuth应用的注册后，您将被重定向到您的应用详情页面。在这里，您会看到Client ID和Client Secret。请确保妥善保存这些信息，但不要将Client Secret公之于众或存储在前端代码中。
4. 在Gitalk配置中使用Client ID和Client Secret
当您在Nuxt项目中配置Gitalk时，使用从上述步骤中获取的Client ID和Client Secret。
### 2. 安装所需的依赖
首先，你需要安装Gitalk：
```bash
npm install gitalk
```
### 3. 创建一个Gitalk组件
在你的Nuxt项目中，建立一个新的组件来容纳Gitalk。例如在 `components/GitalkComponent.vue`:
```vue
import 'gitalk/dist/gitalk.css'
import Gitalk from 'gitalk'
export default {
mounted() {
const gitalk = new Gitalk({
clientID: '你的GitHub Application Client ID',
clientSecret: '你的GitHub Application Client Secret',
repo: '存储你的评论的GitHub仓库名称',
owner: '仓库拥有者的GitHub用户名',
admin: ['仓库管理员的GitHub用户名'],
id: location.pathname, // 用于区分不同文章的评论
distractionFreeMode: false // Facebook-like distraction free mode
})
gitalk.render('gitalk-container')
}
}
```
### 4. 在页面中集成Gitalk组件
在你的Nuxt页面中，你可以简单地导入并使用Gitalk组件。例如，在 `pages/post/_id.vue`:
```vue
import GitalkComponent from '~/components/GitalkComponent'
export default {
components: {
GitalkComponent
}
}
```
### 注意事项
- 为了安全，不要在前端代码中暴露你的`clientSecret`。考虑使用env环境参数或其他后端服务来隐藏这个秘密。
- Gitalk使用GitHub issues作为评论。你所选择的仓库会存储所有的评论。