{"id":21839132,"url":"https://github.com/mooncat126/gitalk-comments","last_synced_at":"2025-03-21T15:20:54.741Z","repository":{"id":186628692,"uuid":"673855542","full_name":"mooncat126/gitalk-comments","owner":"mooncat126","description":"gitalk blog comment board using: nuxt gitalk 博客留言板","archived":false,"fork":false,"pushed_at":"2023-08-08T05:23:28.000Z","size":25,"stargazers_count":0,"open_issues_count":9,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-26T10:41:42.359Z","etag":null,"topics":["blog","gitalk","notion-blog","nuxt"],"latest_commit_sha":null,"homepage":"https://xyu.house/","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mooncat126.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-08-02T15:18:08.000Z","updated_at":"2023-08-08T05:25:06.000Z","dependencies_parsed_at":null,"dependency_job_id":"aa15c026-02ee-4ac2-82a8-f8d9b415428c","html_url":"https://github.com/mooncat126/gitalk-comments","commit_stats":null,"previous_names":["mooncat126/gitalk-comments"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mooncat126%2Fgitalk-comments","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mooncat126%2Fgitalk-comments/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mooncat126%2Fgitalk-comments/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mooncat126%2Fgitalk-comments/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mooncat126","download_url":"https://codeload.github.com/mooncat126/gitalk-comments/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244819801,"owners_count":20515646,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blog","gitalk","notion-blog","nuxt"],"created_at":"2024-11-27T21:16:12.287Z","updated_at":"2025-03-21T15:20:54.704Z","avatar_url":"https://github.com/mooncat126.png","language":null,"readme":"[English](README_en.md) | [中文](README.md)\n\n# gitalk-comments\nnotion-blog的免费gitalk博客留言板。\n\n\u003cimg width=\"973\" alt=\"スクリーンショット 2023-08-07 11 11 21\" src=\"https://github.com/mooncat126/gitalk-comments/assets/112956463/943d8a74-5959-4fbf-944f-84047a6f6264\"\u003e\n\n# 步骤\n为了在Nuxt.js中集成Gitalk博客留言板，您需要遵循以下步骤：\n\n### 1. 设置GitHub应用\n\n确保你在GitHub上创建了一个OAuth应用并将Client ID和Client Secret填入Gitalk的配置中。\n\n1. 登录您的GitHub账号\n首先，确保您已登录到GitHub。\n\n2. 创建一个新的OAuth应用\n在浏览器中，导航到：https://github.com/settings/applications/new 来创建一个新的OAuth应用。\n\n  - 填写必要的应用详情：\n    - `Application name`: 为您的应用命名。例如，可以命名为 \"My Blog Gitalk Integration\"。\n    - `Homepage URL`: 您博客的主页URL。\n    - `Application description`: 描述您的应用（可选）。\n    - `Authorization callback URL`: 这通常应设置为博客的URL。Gitalk在身份验证过程中会使用它。\n  - 点击\"Register application\"。\n\n\n3. 获取Client ID和Client Secret\n完成OAuth应用的注册后，您将被重定向到您的应用详情页面。在这里，您会看到Client ID和Client Secret。请确保妥善保存这些信息，但不要将Client Secret公之于众或存储在前端代码中。\n\n4. 在Gitalk配置中使用Client ID和Client Secret\n当您在Nuxt项目中配置Gitalk时，使用从上述步骤中获取的Client ID和Client Secret。\n\n### 2. 安装所需的依赖\n\n首先，你需要安装Gitalk：\n\n```bash\nnpm install gitalk\n```\n\n### 3. 创建一个Gitalk组件\n\n在你的Nuxt项目中，建立一个新的组件来容纳Gitalk。例如在 `components/GitalkComponent.vue`:\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cdiv id=\"gitalk-container\"\u003e\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport 'gitalk/dist/gitalk.css'\nimport Gitalk from 'gitalk'\n\nexport default {\n  mounted() {\n    const gitalk = new Gitalk({\n      clientID: '你的GitHub Application Client ID',\n      clientSecret: '你的GitHub Application Client Secret',\n      repo: '存储你的评论的GitHub仓库名称',\n      owner: '仓库拥有者的GitHub用户名',\n      admin: ['仓库管理员的GitHub用户名'],\n      id: location.pathname,      // 用于区分不同文章的评论\n      distractionFreeMode: false  // Facebook-like distraction free mode\n    })\n    \n    gitalk.render('gitalk-container')\n  }\n}\n\u003c/script\u003e\n```\n\n### 4. 在页面中集成Gitalk组件\n\n在你的Nuxt页面中，你可以简单地导入并使用Gitalk组件。例如，在 `pages/post/_id.vue`:\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003c!-- Your post content here --\u003e\n    \u003cGitalkComponent /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport GitalkComponent from '~/components/GitalkComponent'\n\nexport default {\n  components: {\n    GitalkComponent\n  }\n}\n\u003c/script\u003e\n```\n\n### 注意事项\n\n- 为了安全，不要在前端代码中暴露你的`clientSecret`。考虑使用env环境参数或其他后端服务来隐藏这个秘密。\n- Gitalk使用GitHub issues作为评论。你所选择的仓库会存储所有的评论。\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmooncat126%2Fgitalk-comments","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmooncat126%2Fgitalk-comments","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmooncat126%2Fgitalk-comments/lists"}