แอป

giscus

ระบบความคิดเห็นที่ขับเคลื่อนโดย GitHub Discussions ให้ผู้เยี่ยมชมแสดงความคิดเห็นและรีแอคชันบนเว็บไซต์ของคุณผ่าน GitHub! ได้รับแรงบันดาลใจอย่างมากจาก utterances

โอเพนซอร์ส 🌏
ไม่มีตัวติดตาม, ไม่มีโฆษณา, ฟรีตลอดไป 📡 🚫
ไม่ต้องมีฐานข้อมูล ข้อมูลทั้งหมดเก็บไว้ใน GitHub Discussions
รองรับธีมที่กำหนดเอง! 🌗
รองรับหลายภาษา 🌐
ปรับแต่งได้หลายอย่าง 🔧
โหลดความคิดเห็นและการแก้ไขใหม่จาก GitHub อัตโนมัติ 🔃
โอสต์ด้วยตัวเองได้! 🤳

หมายเหตุ
giscus ยังอยู่ในช่วงการพัฒนาอย่างต่อเนื่อง เหมือนกับ GitHub ที่พัฒนา Discussions และ API อย่างต่อเนื่องเช่นเดียวกัน ดังนั้นฟีเจอร์บางอย่างอาจหยุดทำงานหรือเปลี่ยนแปลงได้เสมอ

ทำงานยังไง

เมื่อถูกโหลด giscus จะใช้ API การค้นหาของ GitHub Discussions เพื่อค้นหาการสนทนาของหน้าเว็บนั้นผ่านการเชื่อมโยงที่เลือกไว้ (URL, pathname, <title>, ฯลฯ) หากไม่พบการสนทนาที่ตรงกัน บอต giscus จะสร้างการสนทนาใหม่อัตโนมัติเมื่อมีผู้แสดงความคิดเห็นหรือรีแอคชันครั้งแรก

ในการแสดงความคิดเห็น ผู้เยี่ยมชมจะต้องอนุญาตให้ แอป giscus โพสต์ในนามตนเอง ผ่าน GitHub OAuth หรืออีกทางเลือกหนึ่ง ผู้เยี่ยมชมสามารถแสดงความคิดเห็นในการสนทนาบน GitHub ได้โดยตรง คุณสามารถจัดการความคิดเห็นได้บน GitHub

การกำหนดค่า

ภาษา

เลือกภาษาที่จะใช้แสดง giscus ไม่พบภาษาของคุณ? มีส่วนร่วมแปลภาษา

คลังเก็บ

เลือกคลังเก็บที่จะเชื่อมต่อกับ giscus ตรวจสอบให้แน่ใจว่า:

คลังเก็บเปิดเป็นสาธารณะ, มิฉะนั้นผู้เยี่ยมชมจะไม่สามารถดูการสนทนา
แอป giscus ติดตั้งอยู่, มิฉะนั้นผู้เยี่ยมชมจะไม่สามารถแสดงความคิดเห็นหรือรีแอคชัน
การสนทนาเปิดใช้งานอยู่ โดยเปิดใช้งานในคลังเก็บของคุณ.

คลังเก็บ:

คลังเก็บสาธารณะบน GitHub ใช้คลังเก็บนี้เพื่อเชื่อมต่อกับการสนทนา

การเชื่อมโยงหน้าเว็บ ↔️ การสนทนา

เลือกการเชื่อมโยงระหว่างหน้าเว็บและการสนทนา

หัวข้อการสนทนาที่มี pathname ของหน้าเว็บ

giscus จะค้นหาการสนทนาที่ในหัวข้อมี pathname ใน URL ของหน้าเว็บประกอบอยู่

หัวข้อการสนทนาที่มี URL ของหน้าเว็บ

giscus จะค้นหาการสนทนาที่ในหัวข้อมี URL ของหน้าเว็บประกอบอยู่

หัวข้อการสนทนาที่มี <title> ของหน้าเว็บ

giscus จะค้นหาการสนทนาที่ในหัวข้อมีแท็ก HTML <title> ของหน้าเว็บประกอบอยู่

หัวข้อการสนทนาที่มี og:title ของหน้าเว็บ

giscus จะค้นหาการสนทนาที่ในหัวข้อมีแท็ก HTML <meta property="og:title"> ของหน้าเว็บประกอบอยู่

การสนทนาที่มีข้อความที่กำหนด

giscus จะค้นหาการสนทนาที่ในหัวข้อมีข้อความที่กำหนดประกอบอยู่

กำหนดหมายเลขการสนทนา

giscus จะโหลดการสนทนาจากหมายเลข ตัวเลือกนี้ไม่รองรับการสร้างการสนทนาใหม่อัตโนมัติ

ใช้การจับคู่หัวข้อแบบเข้มงวด

ป้องกันการจับคู่ผิดพลาดเนื่องจากระบบค้นหาแบบไม่ตรงตัวของ GitHub เมื่อมีหลายการสนทนาที่มีหัวข้อคล้ายกัน ดูเอกสารสำหรับข้อมูลเพิ่มเติม

หมวดหมู่การสนทนา

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

ค้นหาการสนทนาเฉพาะในหมวดหมู่นี้เท่านั้น

ในการค้นหาเพื่อจับคู่การสนทนา giscus จะค้นหาในหมวดหมู่นี้เท่านั้น

ฟีเจอร์

เลือกฟีเจอร์ที่ต้องการเปิดใช้งาน

เปิดใช้งานรีแอคชันในโพสต์หลัก

รีแอคชันสำหรับโพสต์หลักของการสนทนาจะถูกแสดงด้านบนความคิดเห็น

ส่งข้อมูลการสนทนา

ข้อมูลของการสนทนาจะถูกส่งเป็นระยะไปยังหน้าต่างหลัก (หน้าเว็บที่ฝัง giscus ไว้) เปิดใช้ตัวเลือกนี้แล้วเปิดคอนโซลของเบราว์เซอร์ในหน้านี้เพื่อดูตัวอย่าง ดูเอกสารสำหรับข้อมูลเพิ่มเติม

วางช่องพิมพ์ข้อความไว้ด้านบนความคิดเห็น

ช่องพิมพ์ข้อความจะถูกวางไว้ด้านบนความคิดเห็น เพื่อให้ผู้ใช้งานแสดงความคิดเห็นได้โดยไม่ต้องเลื่อนลงไปด้านล่างสุดของบทสนทนา

โหลดความคิดเห็นทีหลัง

เพิ่มแท็ก loading="lazy" ไปยัง <iframe> เพื่อหยุดการโหลดความคิดเห็นไว้จนกว่าผู้ใช้จะเลื่อนหน้าเว็บเข้าใกล้ส่วนความคิดเห็น

ธีม

เลือกธีมที่เข้ากับเว็บไซต์ของคุณ ไม่พบธีมที่ถูกใจ? มีส่วนร่วมสร้างธีมใหม่

เปิดใช้งาน giscus

ใส่โค้ด <script> ด้านล่างนี้ลงในเทมเพลตเว็บไซต์ของคุณในส่วนที่คุณต้องการให้ความคิดเห็นปรากฏอยู่ หากมี element ที่มี class giscus อยู่, ความคิดเห็นจะปรากฏตรง element นั้นแทน

คุณยังไม่ได้กำหนดค่าพื้นที่เก็บข้อมูลและ/หรือหมวดหมู่ของคุณ ค่าสำหรับฟิลด์เหล่านั้นจะไม่แสดงจนกว่าคุณจะกรอกข้อมูล

<script src="https://giscus.app/client.js"
        data-repo="[ใส่คลังเก็บที่น่ี]"
        data-repo-id="[ใส่ ID คลังเก็บที่นี่]"
        data-category="[ใส่หมวดหมู่ที่นี่]"
        data-category-id="[ใส่ ID หมวดหมู่ที่นี่]"
        data-mapping="pathname"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme="preferred_color_scheme"
        data-lang="th"
        crossorigin="anonymous"
        async>
</script>

คุณสามารถปรับแต่งรูปแบบการจัดวางได้โดยใช้ .giscus และ .giscus-frame ในหน้าเว็บของคุณ

หากคุณกำลังใช้งาน giscus พิจารณา ให้ดาว 🌟 giscus บน GitHub และเพิ่มหัวข้อ giscus ไปยังคลังเก็บของคุณ! 🎉

การใช้งานขั้นสูง

คุณสามารถเพิ่มการกำหนดค่าเพิ่มเติม (เช่น อนุญาตเฉพาะบางโดเมน) โดยทำตามขั้นตอนในคู่มือการใช้งานขั้นสูง

ในการใช้ giscus กับ React, Vue หรือ Svelte ดูไลบรารี giscus component

การย้ายข้อมูล

หากก่อนหน้านี้คุณใช้ระบบความคิดเห็นอื่นที่ใช้ GitHub Issues (เช่น utterances, gitalk) คุณสามารถแปลง issues ที่มีอยู่เป็นการสนทนาได้ หลังจากการแปลง ตรวจสอบแน่ใจว่าตั้งค่าการเชื่อมโยงระหว่างหน้าเว็บและหัวข้อการสนทนาถูกต้อง จากนั้น giscus จะใช้การสนทนานั้นอัตโนมัติ

เว็บไซต์ที่ใช้ giscus

การมีส่วนร่วม

ดู CONTRIBUTING.md

ลองใช้ดู 👇👇👇