Next.js博客引入Waline评论系统

2023 年 9 月 28 日 星期四(已编辑)
/ ,
41
这篇文章上次修改于 2023 年 12 月 25 日 星期一,可能部分内容已经不适用,如有疑问可询问作者。

Next.js博客引入Waline评论系统

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

前言

如果你没有Waline后端,请先参考Waline官方文档部署一个

模板选择

我选择了Netlify的一个Next.js博客模板,虽然简朴,但是可以作为试验的一个地方。 模板Github仓库

引入Waline

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

npm i -D @waline/client

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

然后在Comment.js中加入以下代码 ```javascript 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

; };

export default WalineComment; ``` 这样我们就建立了一个Js评论组件。

引入页面

我们打开博客文件根目录,找到pages/posts/[slug].js这个文件,这个React组件负责渲染文章页面。 接下来在页头加入 javascript import WalineComment from '../../components/Comment'; 然后我们在需要加入Waline评论系统的地方引入容器

//引入Waline评论系统
<WalineComment />
<div id="waline"></div>

比如我是在这里加入代码(该文件约59至60行) javascript </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

个人示例仓库

  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...