บล็อก Notion ของ oopy: ปลั๊กอินปรับแต่ง floating table of contents

นี่คือ floating table of contents ที่สามารถนำไปใช้กับบล็อก Notion ของ oopy ได้

[คุณสมบัติ]

1. ทำ UI ให้เหมือนกับ floating table of contents ที่แสดงด้านขวาใน Notion ทุกประการ (ยกเว้นป๊อปโอเวอร์ที่แสดงเมื่อ hover)
2. คลิก indicator เพื่อเลื่อนสกอลล์ / indicator จะแสดงตำแหน่งปัจจุบันให้ทราบ

[วิธีติดตั้ง]

1. ไปที่หน้าผู้ดูแลระบบ oopy > แก้ไข html > เพิ่มแท็ก script ด้านล่างใน body แล้วบันทึก
2. <script src="https://roseline124.github.io/custom-js/…;
3. ล้างแคชแล้วรีเฟรชแบบบังคับ

[จุดที่ต่างจาก floating-toc ของ oopy]

มี floating-toc ซึ่งเป็นฟีเจอร์ทดลองที่ oopy สร้างไว้เช่นกัน
https://www.oopy.io/ko/guides/tips-and-tricks/floating-toc

ปลั๊กอินปรับแต่งนี้แตกต่างจาก floating-toc ของ oopy ดังนี้

1. แม้ไม่มีบล็อก table of contents ก็ยังตรวจจับ heading และแสดงเป็น indicator ได้
2. ทำงานในทุกหน้าที่มี heading โดยไม่ต้องตั้งค่าแยกในแต่ละหน้า
3. floating-toc จะแสดงข้อความของ heading tag ทั้งหมด แต่ปลั๊กอินนี้เพื่อไม่ให้รบกวนพื้นที่คอนเทนต์ จะแสดงเพียง 4~6 ตัวอักษรเมื่อ hover ที่ indicator (ข้อเสีย)

[guseod24]

• ตอนนี้ได้จำลอง popover ของ Notion แบบเดียวกันไว้แล้ว!