纯静态网站或博客,由于没有数据存储功能,经常借助第三方的评论系统以插件的方式集成进来,而又以 Github 的 Discussions 和 Issues 功能实现的居多。
- giscus - 可借助组件库在 React、Vue 和 Svelte 中使用,支持多种语言
- gitalk - 基于 Github Issue 和 Preact 开发的评论插件
- utterances - 借助 Github issues 实现的轻量的评论组件,giscus 灵感就是来源于它
本站采用的是 Giscus 的方案。UI 风格我很喜欢,简介清爽。色调也和我的网站很搭。
Giscus 为 React、Vue、Solid 和 Svelte 都提供了对应的 组件库。
这里以在 Docusaurus 中使用进行讲解:
安装
npm i @giscus/react
创建评论组件
接着我们以封装组件的形式,让评论功能成为我们网站代码的独立的一部分,在需要的地方引入即可。
import React from 'react';
import Giscus from "@giscus/react";
import { useColorMode } from '@docusaurus/theme-common';
export default function GiscusComponent() {
const { colorMode } = useColorMode();
return (
<div className="wrapper" id="Comment">
<Giscus
repo="fantingsheng/spacexcode-discus"
repoId="R_kgDOJoGL9w"
category="General"
categoryId="DIC_kwDOJoGL984CWxiW" // E.g. id of "General"
mapping="url" // Important! To map comments to URL
term="Welcome to @giscus/react component!"
strict="0"
reactionsEnabled="1"
emitMetadata="1"
inputPosition="top"
theme={colorMode}
lang="zh-Hans"
loading="lazy"
crossorigin="anonymous"
async
/>
</div>
);
}
这里将常用到的一些特性说明下:
- 如果你想关闭它的懒加载,只需要将
loading="lazy"
这一项去掉即可; - 关闭评论上方的表情回复,将
data-reactions-enabled="1"
参数设为0
; - 评论框的位置默认是放在评论的上方,这样在发表评论的时候就不必一定要滚动到底部,你可以通过
inputPosition
参数进行控制,它有两个值top
和bottom
;
今天着重要讲的是一个功能是如何在你的页面中拿到评论数并显示?