分享 2023 年 5 月 27 日

Astro集成cusdis评论系统

在本站集成cusdis评论系统，支持留言评论

分享 Astro

前言

根据astro-air-blog的模板完成本站的搭建，教程非常详细，具体请参考Astro Air Blog 详细使用指南 - 驭风笔记 (yufengbiji.com)。

但是没有评论功能总觉得少了点什么，在评价区找到了相关方案，集成Cusdis评论功能。

注册Cusdis账号

在Cusdis注册一个账号，也可以使用github账号直接登录。
添加网站地址

点击Embed Code,复制代码

修改代码

下载下面三个文件到/static/js/目录下

https://cusdis.loongphy.com/js/widget/lang/zh-cn.js
https://cusdis.loongphy.com/js/cusdis.es.js
https://cusdis.loongphy.com/js/cusdis-count.umd.js

这三个文件zh-cn.js、cusdis.es.js及cusdis-count.umd.js直接使用的天真的和伤感的梦想家 (loongphy.com)的，再次感谢。

修改MarkdownPost.astro代码，在后面加上下列代码：

  <!-- 集成cusdis评论系统 -->
    <div class="component">      
        <div id="cusdis_thread"
        data-host="https://cusdis.com"
        data-app-id="XXX-XXX-XXX"
        data-page-id={ Astro.url }
        data-page-url={ Astro.url }
        data-page-title={ title }
      ></div>
    </div>
    <!-- 评论功能结束    -->   

    <Footer />
    <script is:inline>
      var script = document.createElement("script");
      script.src = "/static/js/initPost.js";
      document.head.appendChild(script);
    </script>
    <!-- 查看评论留言 -->
    <script defer src="/static/js/zh-cn.js"
    ></script>
    <script async defer src="/static/js/cusdis.es.js"
    ></script>
    <script
      defer
      data-host="https://cusdis.com"
      data-app-id="XXX-XXX-XXX"
      src="/static/js/cusdis-count.umd.js"
    ></script>
    <!-- 留言功能结束 -->

保存提交后，刷新页面就已经出现评论功能了。

评价内容可以在cusdis的控制台进行审核、回复、删除等操作。

在控制台审核通过后，可以在文章后面查看评论记录。

最后感谢

感谢天真的和伤感的梦想家 (loongphy.com)，使用了Loongphy/blog: 个人博客 (github.com)的源代码。

作者： ZhJy 发表日期：2023 年 5 月 27 日