Next.js 使用 giscus 评论插件

注意

Next.js默认会将script脚本放在DOM渲染完成后执行。

不能像放在静态文件或模板引擎渲染的HTML中。

代码

使用.giscus类选择器，将指定的元素放在合适的位置即可。

React Component

import Script from "next/script";

export default function Comment() {
    return <div className="giscus">
        <Script src={process.env.GISCUS_JS}
                data-repo={process.env.GISCUS_REPO}
                data-repo-id={process.env.GISCUS_REPO_ID}
                data-category={process.env.GISCUS_CATEGORY}
                data-category-id={process.env.GISCUS_CATEGORY_ID}
                data-mapping={process.env.GISCUS_MAPPING}
                data-strict={process.env.GISCUS_STRICT}
                data-reactions-enabled={process.env.GISCUS_REACTIONS_ENABLED}
                data-emit-metadata={process.env.GISCUS_EMIT_METADATA}
                data-input-position={process.env.GISCUS_INPUT_POSITION}
                data-theme={process.env.GISCUS_THEME}
                data-lang={process.env.GISCUS_LANG}
                crossOrigin={process.env.GISCUS_CROSSORIGIN as "anonymous" | "use-credentials"}
                async
        >
        </Script>
    </div>

}

Layout

<div>
    <div>111</div>
    <Comment/>
    <div>222</div>
</div>

官方文档

https://giscus.app

https://nextjs.org/docs/app/guides/scripts