博客搭建 — 接入 giscus 评论插件

WebSite
,

介绍

Giscus 是一个基于 GitHub Discussion 的评论系统。
仓库中的 Discussions 便是存放评论的地方。

准备

  1. 新建一个公开的仓库
    Create a public repository

  2. 找到仓库中的 Settings 设置，勾选 Discussions，并点击 Set up discussions，开启评论区
    Enable GitHub Discussions

  3. 安装 Giscus App
    Install Giscus App

  4. 选择刚刚创建好的仓库，点击保存
    Select warehouse

  5. 前往 Giscus 页面，只需要填写仓库名称和 Discussion 分类
    Fill in the name
    Select classification

  6. 获取 data-repo, data-repo-id, data-category 和 data-category-id 这四个属性
    Get property

使用

支持原生 JS，React，Vue，Svelte 等，可以参考giscus 组件库

本文以 Vue 为例

npm i @giscus/vue

封装一个 comment.vue 的组件

<template>
  <Giscus
    id="comments"
    repo="hai-zou/poseidon"
    repoId="R_kgDOIPqaJQ"
    category="General"
    categoryId="DIC_kwDOIPqaJc4CW4xW"
    mapping="pathname"
    term="Welcome to component!"
    inputPosition="top"
    theme="light"
    lang="zh-CN"
    loading="lazy"
  />
</template>