526互联

在Next.js博客中快速引入Waline评论系统

发布时间 2023-09-14 09:46:01作者: 一只鬆

之前我在研究Next.js博客时，发现它们很多缺少一个作为博客的基本的东西：评论，就算有，也是Gistus这类依赖于GitHub的评论系统，而在国内还是尽量选择一个无需登录的评论系统，于是我选择了Waline作为评论系统，在引入过程中遇到了一些坑，不过最后还是引入完成了。

模板选择

我选择了Netlify的一个Next.js博客模板，虽然简朴，但是可以作为试验的一个地方。
模板Github仓库地址：
https://github.com/netlify-templates/nextjs-blog-theme

引入Waline

首先我们需要以包形式安装Waline。

npm i -D @waline/client

然后在博客根目录下，我们找到components文件夹，在里面新建一个JS组件，比如Comment.js。

然后在Comment.js中加入以下代码

import { useEffect } from 'react';
import { init } from '@waline/client';

import '@waline/client/dist/waline.css';

const WalineComment = () => {
  useEffect(() => {
    init({
      el: '#waline',
      serverURL: 'https://你的Waline后端地址',
      // 此处可以配置更多配置，参考Waline官方文档...
    });
  }, []);

  return <div id="waline" />;
};

export default WalineComment;

这样我们就建立了一个Js评论组件。

引入页面

我们打开博客文件根目录，找到pages/posts/[slug].js这个文件，这个React组件负责渲染文章页面。
接下来在页头加入

import WalineComment from '../../components/Comment';

然后我们在需要加入Waline评论系统的地方引入容器，比如我是在这里加入代码（该文件约59至60行）

</header>
        <main>
          <article className="prose dark:prose-dark">
            <MDXRemote {...source} components={components} />
          </article>
		  //引入Waline评论系统
          <WalineComment />
      <div id="waline"></div>
        </main>
        <div className="grid md:grid-cols-2 lg:-mx-24 mt-12">

现在我们输入命令启动开发服务器查看效果

npm run dev

效果图（确保正确填写了Waline后端地址）：
效果图