Feng's xLog

I previously read an article on Laomai's blog, which said that switching from NextJS to Astro is very suitable for building static blogs. It is flexible and the process is not complicated. It gave me a new direction for tinkering. Currently, in addition to using WordPress for my main website, I also have other platforms such as Typecho and Xlog. I have also tinkered with static blogs in the past, using Hexo and Hugo (although that was a long time ago and I have almost forgotten how to set up and use them). Of course, we have also used platforms with backends like Ghost and Halo before.

Since Astro is so interesting, let's play with it. The official tutorials are available in Chinese, and I have to say, they are easy to follow. The key is to choose a good theme. It is said that changing themes can be a bit tricky (not as convenient as other platforms), but it shouldn't affect our enthusiasm for tinkering. Once you have chosen a theme, the deployment process is almost complete. Making small modifications and following the official tutorials is quite simple. Once you have set the necessary information, you can upload it to your own GitHub and deploy it using Vercel (of course, you can also preview it locally).

The most confusing thing about Astro for me was how to add comments to it. I struggled for a long time but couldn't figure it out. Later, with the guidance of Laomai, I was able to solve it. I would like to thank Laomai once again for giving me a tutorial even during their lunch break. Thank you, thank you! Now, let's record the process of adding comments to Astro.

• Create a new file in the component directory src/components/, for example, Comments.astro. Remember the file name, as it will be referenced later.

1. If you want to add Giscus comments, follow the instructions from Giscus to deploy it first. They will provide you with the necessary configuration code. Then, add the following code to the previously created Comments.astro component:

<section class="giscus mx-auto mt-10 w-full"></section>
<script
  src="https://giscus.app/client.js"
  data-repo="username/repo"
  data-repo-id="repo-id"
  data-category="Blog Posts Comments"
  data-category-id="DIC_kwDOB3LMn84CaXpn"
  data-mapping="url"
  data-strict="0"
  data-reactions-enabled="1"
  data-emit-metadata="0"
  data-input-position="bottom"
  data-theme="preferred_color_scheme"
  data-lang="en"
  data-loading="lazy"
  crossorigin="anonymous"
  async
</script>

This is just an example code. Please refer to the code provided by Giscus for the actual implementation. Mine is just for reference.
2. To add Twikoo comments, follow the Twikoo tutorial to deploy it first, and then modify the following code accordingly:

<div id="tcomment"></div>
<script>
  document.addEventListener('astro:page-load', () => {
    function loadTwikoo() {
      const commentsContainer = document.getElementById('tcomment');
      if (commentsContainer) {
        const script = document.createElement('script');
        script.src = 'https://cdn.staticfile.org/twikoo/1.6.32/twikoo.all.min.js';
        script.async = true;
        script.onload = () => {
          const initScript = document.createElement('script');
          initScript.innerHTML = `
            twikoo.init({
                envId: 'Your Environment ID',
                el: '#tcomment',
            });
        `;
          document.body.appendChild(initScript);
        };
        document.body.appendChild(script);
      }
    }
    loadTwikoo();
  });
</script>

3. Adding Artalk comments can be done by referring to Twikoo and making some modifications.
4. To add Waline comments, use the following code:

<link rel="stylesheet" href="https://unpkg.com/@waline/client@v3/dist/waline.css"/>
<div id="waline"></div>
<script type="module">
    import { init } from 'https://unpkg.com/@waline/client@v3/dist/waline.js';
    init({
      el: '#waline',
      serverURL: 'https://waline.vercel.app',
    });
</script>

These are the four comment systems I can think of for now. Except for Giscus and Waline, which I figured out myself, the other two were solved with the guidance of Laomai. After defining the Comments.astro component, you can add the desired comment system by adding a line of code in src/layouts/PostDetails.astro, for example:

// Other code...
      <Content />
    </article>
    <Comments />  // Add this line of code to reference the component we defined earlier
  </main>
  <Footer />
</Layout>
// Other code...

With this, the comments for Astro are set up. The joy that tinkering brings is sometimes indescribable. As for whether to use Astro as the main platform, let's not say for now (once the fun wears off, we might stop tinkering).