Install Waline Comment Component for Gatsby

Gatsby is a static website building framework based on react, which can be used to deploy online stores, official websites, and blogs. Using rich plugins, functions such as image lazy loading, Markdown document support, and visitor comments can be realized. The comment systems officially recommended by Gatsby include Disqus, Gitalk, etc. These comment systems have their own characteristics, but they cannot meet the needs. This article attempts to install the recently popular Waline comment system into the Gatsby project. Since Gatsby development has a great degree of freedom and each project is different, in order to facilitate the expression of ideas, the official blog theme gatsby-starter-blog is used as an example.

Idea

Since Waline does not yet have a Gatsby component, we need to implement the function by installing the Waline client library, creating a React component, and introducing the component in the appropriate location.

Basic Configuration

Deploy the Gatsby project according to the requirements, and configure the server and data side of the Waline comment system according to the Waline official tutorial.

Install Waline Library

In the project root directory, install the Waline library via package management.

yarn add -D @waline/client

After that, you can introduce the Waline component via the import statement in the comment component.

Create Comment Component

Create a Waline class component to encapsulate and reuse the comment function.

Create a new script comment.js in the src/components directory

import React, { PureComponent } from "react";

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;
    }
    const Waline = await (await import("@waline/client")).default;
    this.Waline = new Waline({
      el: this._commentRef.current,
      serverURL: "https://your.waline.url",
      visitor: true,
      path: this.props.slug,
    });
  }
  render() {
    return <div ref={this._commentRef} />;
  }
}

Because we only need the component to create the Waline object when it loads, and determine that it will not undergo frequent state changes, we define Comment as a class component instead of a function component, and inherit PureComponent, which can reduce performance loss.
In the render() function, we create a <div> as a container element, which is used to load the DOM nodes dynamically generated by Waline.
Add a prop named slug to the Comment component, which is passed in by the outer component to ensure that only the corresponding comments are displayed on a fixed page.

Add Component to Article Page

Open the src/templates/blog-post.js file and first add an import declaration:

import Comment from "../components/comment";

export const pageQuery = graphql`
  query BlogPostBySlug($slug: String!) {
    site {
      siteMetadata {
        title
      }
    }
    markdownRemark(fields: { slug: { eq: $slug } }) {
      id
      excerpt(pruneLength: 160)
      html
      fields {
        slug
      }

      frontmatter {
        title
        date(formatString: "MMMM DD, YYYY")
        description
      }
    }
  }
`;

At the end of the BlogPostTemplate function, insert the <Comment> tag and set the slug attribute before the closing tag </Layout>:

import Comment from '../components/comment' // Import our new component

const BlogPostTemplate = ({ data, pageContext, location }) => {
  const post = data.markdownRemark
  ...
  return (
    <Layout location={location} title={siteTitle}>
      <Comment slug={post.fields.slug} />
    </Layout>
  )
}