{"id":15147237,"url":"https://github.com/presentkim/vuepress-plugin-giscus-comment","last_synced_at":"2026-02-15T02:30:51.017Z","repository":{"id":57690246,"uuid":"470547146","full_name":"PresentKim/vuepress-plugin-giscus-comment","owner":"PresentKim","description":"Add \u003cGiscus/\u003e component to VuePress@v2","archived":false,"fork":false,"pushed_at":"2022-03-25T03:14:33.000Z","size":97,"stargazers_count":3,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-10T03:14:48.027Z","etag":null,"topics":["comment","comment-system","giscus","vue","vue3","vuejs","vuepress","vuepress-next","vuepress-plugin","vuepress2","vuepress2-plugin"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PresentKim.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-03-16T11:08:10.000Z","updated_at":"2025-02-28T04:30:20.000Z","dependencies_parsed_at":"2022-09-26T22:30:24.939Z","dependency_job_id":null,"html_url":"https://github.com/PresentKim/vuepress-plugin-giscus-comment","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PresentKim%2Fvuepress-plugin-giscus-comment","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PresentKim%2Fvuepress-plugin-giscus-comment/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PresentKim%2Fvuepress-plugin-giscus-comment/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PresentKim%2Fvuepress-plugin-giscus-comment/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PresentKim","download_url":"https://codeload.github.com/PresentKim/vuepress-plugin-giscus-comment/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247128742,"owners_count":20888234,"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":["comment","comment-system","giscus","vue","vue3","vuejs","vuepress","vuepress-next","vuepress-plugin","vuepress2","vuepress2-plugin"],"created_at":"2024-09-26T12:23:55.182Z","updated_at":"2025-10-07T02:43:13.013Z","avatar_url":"https://github.com/PresentKim.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vuepress-plugin-giscus-comment\n\n[![npm](https://img.shields.io/npm/v/vuepress-plugin-giscus-comment.svg)](https://www.npmjs.com/package/vuepress-plugin-giscus-comment) [![GitHub license](https://img.shields.io/github/license/PresentKim/vuepress-plugin-giscus-comment.svg)](https://github.com/PresentKim/vuepress-plugin-giscus-comment/blob/master/LICENSE)\n\u003e Note: This plugin is provided for [**VuePress 2**](https://v2.vuepress.vuejs.org/)\n\n[Giscus](https://giscus.app/) plugin for VuePress 2.   \nThis plugin register `\u003cGiscusComment/\u003e` custom element to your VuePress site.  \nYou are free to use it on any theme or page.\n\n## Installation\n\n```bash\nyarn add -D vuepress-plugin-giscus-comment\n# OR\nnpm install -D vuepress-plugin-giscus-comment\n```\n\n## Usage\n\n\u003e #### **`Method 1`**: Using the simple plugin configuration array\n\u003e This method is simple and the most common.\n\u003e ```javascript\n\u003e module.exports = {\n\u003e     plugins: [\n\u003e         ['vuepress-plugin-giscus-comment',{/*options*/}]\n\u003e     ]\n\u003e };\n\u003e ```\n\u003e\n\u003e When using with TypeScript, you can specify the type as shown below.\n\u003e ```typescript\n\u003e import {GiscusCommentPluginConfig} from 'vuepress-plugin-giscus-comment'\n\u003e \n\u003e module.exports = {\n\u003e     plugins: [\n\u003e         ['vuepress-plugin-giscus-comment', {/*options*/}] as GiscusCommentPluginConfig\n\u003e     ]\n\u003e };\n\u003e ```\n\n\u003e #### **`Method 2`**: Using the plugin configuration generator function\n\u003e This method is a goes well with TypeScript.\n\u003e ```typescript\n\u003e import {GiscusCommentPlugin} from 'vuepress-plugin-giscus-comment';\n\u003e \n\u003e module.exports = {\n\u003e     plugins: [\n\u003e         new GiscusCommentPlugin({/*options*/})\n\u003e     ]\n\u003e }\n\u003e ```\n\n## :card_file_box: Options\n\nThe plugin option has an interface as shown below.\n\n```typscript\ninterface GiscusCommentPluginOptions{\n    /** @description The repository name */\n    repo: `${string}/${string}`;\n\n    /** @description The repository id */\n    repoId: string;\n    \n    /** \n     * @description The discussion category name of repository\n     * Required if 'mapping' value is not 'specific'\n    */\n    category?: string;\n\n    /** \n     * @description The discussion category id of repository\n     * Required if 'mapping' value is not 'specific'\n    */\n    categoryId?: string;\n\n    /**\n     * @description The mapping method between the embedding page and the embedded discussion\n     * @default 'pathname'\n     */\n    mapping?: 'url' | 'title' | 'og:title' | 'pathname' | 'specific' | 'number';\n    \n    /**\n     * @description Not required by Common mapping method\n     * Required when 'mapping' value is 'specific' or 'number'\n     */\n    term?: string|number;\n    \n     /**\n     * @description Whether to enable reactions for main post\n     * @default true\n     */\n    reactionsEnabled?: boolean;\n\n    /**\n     * @description Whether to enable emit discussion metadata\n     * @default false\n     */\n    emitMetadata?: boolean;\n\n    /**\n     * @description The theme name or custom theme css path that apply to giscus\n     * @default 'light'\n     */\n    theme?:\n        'light' | 'light_high_contrast' | 'light_protanopia' |\n        'dark' | 'dark_high_contrast' | 'dark_protanopia' | 'dark_dimmed' |\n        'transparent_dark' | 'preferred_color_scheme' |\n        `/${string}` | `https://${string}`;\n\n    /**\n     * @description The location of comment box\n     * @default 'bottom'\n     */\n    inputPosition?: 'top' | 'bottom';\n\n    /**\n     * @description The language name that apply to giscus\n     * @default 'en'\n     */\n    lang?:\n        'de' | 'en' | 'es' | 'fr' | 'gsw' | 'id' | 'it' | 'ja' |\n        'ko' | 'pl' | 'ro' | 'ru' | 'tr' | 'vi' | 'zh-CN' | 'zh-TW';\n\n    /**\n     * @description Whether to load the comments lazily\n     * @default true\n     */\n    lazyLoading?: boolean;\n}\n```\n\n\u003e Example:\n\u003e ```typescript\n\u003e import {GiscusCommentPlugin} from 'vuepress-plugin-giscus-comment';\n\u003e \n\u003e module.exports = {\n\u003e     plugins: [\n\u003e         new GiscusCommentPlugin({\n\u003e                repo: '[ENTER REPOSITORY NAME HERE]',\n\u003e                repoId: '[ENTER REPOSITORY ID HERE]',\n\u003e                category: '[ENTER CATEGORY NAME HERE]',\n\u003e                categoryId: '[ENTER CATEGORY ID HERE]',\n\u003e                mapping: 'url',\n\u003e                reactionsEnabled: false,\n\u003e                emitMetadata: true,\n\u003e                theme: 'dark',\n\u003e                inputPosition: 'top',\n\u003e                lang: 'en',\n\u003e                lazyLoading: false\n\u003e            })\n\u003e     ]\n\u003e }\n\u003e ```\n\n\u003e ### :bulb: How to get my repo and category ids?\n\u003e \n\u003e You can easily get it from [**Giscus Main page**](https://giscus.app/).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpresentkim%2Fvuepress-plugin-giscus-comment","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpresentkim%2Fvuepress-plugin-giscus-comment","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpresentkim%2Fvuepress-plugin-giscus-comment/lists"}