ข้ามไปยังเนื้อหา

Cactus Comments ระบบแสดงความคิดเห็นบน Matrix

เผยแพร่เมื่อ
Cactus Comments ระบบแสดงความคิดเห็นบน Matrix

ก่อนหน้านี้เว็บผมใช้ Mastodon ทำระบบแสดงความคิดเห็น แต่ก็ยังมีข้อเสียอยู่คือ ไม่มีช่องให้แสดงความคิดเห็นบนเว็บไซต์เราเอง ต้องคลิกลิงก์ไปพิมพ์ความเห็นบนเว็บอื่น แล้วก็ต้องมีบัญชี Fediverse ก่อนถึงจะแสดงความคิดเห็นได้

จนได้มาเจอกับ Cactus Comments โครงการโอเพนซอร์สที่ใช้ Matrix มาทำระบบแสดงความคิดเห็น ซึ่งแก้ปัญหาทั้งสองข้อของผมได้ คือมีช่องให้แสดงความเห็นบนหน้าเว็บ และไม่ต้องล็อกอินก็แสดงความคิดเห็นได้ เลยตัดสินใจลองเปลี่ยนมาใช้แทน

เพิ่ม Cactus Comments ในเว็บไซต์แบบ Lazy Load

จริงๆ วิธีเพิ่ม Cactus Comments บนเว็บไซต์ไม่ได้ยาก แค่ไปลงทะเบียนเว็บไซต์กับบอต แล้วเพิ่มโค้ดบนเว็บไซต์ ทำตามคู่มือบนเว็บของ Cactus ได้เลย

แต่ถ้าเพิ่มด้วยวิธีการปกติ เวลาโหลดหน้าเว็บ Cactus จะถูกโหลดด้วยทันที ทำให้เว็บใช้เวลาโหลดนานขึ้น และถ้าผู้ใช้ไม่ได้เลื่อนไปถึงส่วนความคิดเห็น ก็จะเป็นการโหลดข้อมูลโดยไม่จำเป็น

วิธีแก้ก็ไม่ยาก คือการทำ Lazy load แทนที่จะโหลด Cactus ทันที ก็ให้โหลด Cactus ตอนเลื่อนหน้าเว็บมาใกล้ถึงส่วนความคิดเห็นแทน

ตัวอย่างโค้ดของในเว็บไซต์นี้ ผมใช้ Intersection Observer API สร้างแท็ก script และ link สำหรับโหลดไฟล์ของ Cactus เมื่อหน้าเว็บเลื่อนถึงจุดที่ต้องการ แล้วกำหนด data attributes ที่ Cactus ต้องใช้ให้เรียบร้อย

const cactusComment = document.getElementById('cactus_comment');
const cactusJS = document.createElement('script');
const cactusCSS = document.createElement('link');
const observer = new IntersectionObserver(
  (entries, observer) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        cactusJS.src = 'https://latest.cactus.chat/cactus.js';
        cactusJS.dataset.defaultHomeserverUrl =
          'https://matrix.cactus.chat:8448';
        cactusJS.dataset.serverName = 'cactus.chat';
        cactusJS.dataset.siteName = '<ชื่อเว็บไซต์>';
        cactusJS.dataset.commentSectionId = '<section id>';
        cactusCSS.rel = 'stylesheet';
        cactusCSS.href = 'https://latest.cactus.chat/style.css';
        cactusComment.append(cactusJS, cactusCSS);
        observer.unobserve(entry.target);
      }
    });
  },
  { rootMargin: '0px 0px 350px 0px' }
);
observer.observe(cactusComment);

และเพื่อความเร็วในการโหลดความเห็น ก็สั่งให้เบราว์เซอร์โหลดทั้ง 2 ไฟล์นี้มาแคชไว้ก่อนด้วย prefetch แบบนี้

<link rel="prefetch" href="https://latest.cactus.chat/cactus.js" />
<link rel="prefetch" href="https://latest.cactus.chat/style.css" />

จัดการความคิดเห็น

สำหรับการจัดการความคิดเห็นอาจจะยุ่งยากนิดนึง เพราะ Cactus ไม่มีหน้ารวมสำหรับดูความคิดเห็นทั้งหมดบนเว็บไซต์เรา ทำให้ต้องเข้าไป join ห้องสำหรับแต่ละ section id ที่ Cactus สร้างขึ้นบน Matrix ทีละห้อง ซึ่งถ้าเว็บใครมีหลายหน้าก็อาจจะลำบากหน่อย

วิธีการ join ห้องแบบง่ายๆ คือ ไปที่ Cactus ที่อยู่บนเว็บเรา กดปุ่มล็อกอิน เลือก Use a Matrix client จากนั้นล็อกอินด้วยบัญชี Matrix ที่เราใช้ลงทะเบียนกับ Cactus แล้วกด join ให้เรียบร้อย

โดยเมื่อเรา join ห้องแล้ว เราสามารถเปิดการแจ้งเตือนเมื่อมีข้อความใหม่ได้ และจะได้สิทธิ์ Admin มาครอง ทำให้ลบความคิดเห็น หรือแบนผู้ใช้ได้ โดยเมื่อเราแบนผู้ใช้จากห้องใดห้องหนึ่ง Cactus จะแบนผู้ใช้นั้นจากทุกห้องของเว็บไซต์เราให้อัตโนมัติ

นอกจากนี้เรายังสามารถเพิ่มผู้ดูแลคนอื่นๆ ได้ โดยเชิญผู้ใช้เข้าร่วมห้อง moderation ที่ Cactus สร้างขึ้นตอนลงทะเบียนเว็บ แล้วกำหนดสิทธิ์ Moderation หรือ Admin ให้กับผู้ใช้คนนั้น แล้ว Cactus ก็จะกำหนดสิทธิ์ที่เราเลือกให้ผู้ใช้คนนั้นในทุกห้องของเว็บไซต์เราให้อัตโนมัติ


ใครสนใจอยากนำไปใช้บนเว็บตัวเองบ้าง ลองใช้ Cactus Comments ดูก่อนได้ด้านล่างนี้เลยครับ 👇

ความคิดเห็น

แสดงความคิดเห็นได้โดยไม่ต้องเข้าสู่ระบบ พิมพ์ความคิดเห็นแล้วกด Post ได้เลยครับ

RSS สร้างด้วย Hugo ซอร์สโค้ด