Docusaurus 添加 waline 评论

虽然没人会来评论，不过添加一下评论系统才算完整的博客。

本来打算是用 giscus 的，但是功能太少了，添加一个图片都很麻烦。后来发现了这个 waline，感觉特别棒：一来是不需要实际的服务器，二来是可以先审核评论，防止有人乱发内容。

前面的部分直接看官方的文档就好了很简单。

从 “HTML 引入” 部分开始需要处理 Docusaurus 部分了，首先安装 waline：

yarn add @waline/client

创建一个 React 组件（代码来自 github 的 issues，找不到链接了），我自己是放在 src/components/waline.js 中，可以随便放，在引入的时候注意路径即可：

import React, { PureComponent } from "react";
import { init } from "@waline/client";

import "@waline/client/waline.css";

export default class Comment extends PureComponent {
  constructor(props) {
    super(props);
    this._commentRef = React.createRef();
  }

  async componentDidMount() {
    if (typeof window === "undefined") {
      return;
    }
    if (!this._commentRef.current) {
      return;
    }

    this.Waline = init({
      el: this._commentRef.current,
      serverURL: "https://your.waline.site",
      visitor: true,
      path: this.props.id,
      dark: 'html[data-theme="dark"]',
    });
  }

  render() {
    return <div className="comment-area" ref={this._commentRef} />;
  }
}

现在我们需要把这个组件插入在自己的主题中，但是默认是没有主题文件可以编辑的。

运行如下的指令来生成文件：

# 博客
yarn swizzle @docusaurus/theme-classic BlogPostPage
# 文档
yarn swizzle @docusaurus/theme-classic DocItem/Layout

选择 Eject (Unsafe) 回车

选择 YES: I know what I am doing! 回车

在对应的位置插入组件：

src/theme/BlogPostPage

import Comment from "../../components/waline";
function BlogPostPageContent({ sidebar, children }) {
      ...
      <hr />
      <Comment />
    </BlogLayout>
  );
}

src/theme/DocItem/Layout/index.js

import Comment from "../../../components/waline";
export default function DocItemLayout({ children }) {
            ...
            <DocItemContent>{children}</DocItemContent>
            <DocItemFooter />
            <hr />
            <Comment />
            ...
}

完毕。