bluesky post

bluesky-post

ส่วนประกอบของเว็บเพื่อแสดงโพสต์ Bluesky และข้อมูลเมตาของพวกเขา

การสาธิต การสาธิตเทมเพลตที่กำหนดเอง | การอ่านเพิ่มเติม

ตัวอย่าง

ตัวอย่างการใช้งานทั่วไป:

 < script type =" module " src =" bluesky-post.js " > </ script >

< bluesky-post >
  < a href =" https://bsky.app/profile/darn.es/post/3l7m6ivb6ha2q " >
    Discuss on Bluesky
  </ a >
</ bluesky-post >

ตัวอย่างการใช้เทมเพลตที่กำหนดเอง:

 < script type =" module " src =" bluesky-post.js " > </ script >

< template id =" bluesky-post-template " >
  < blockquote data-key =" content " > </ blockquote >
</ template >

< bluesky-post >
  < a href =" https://bsky.app/profile/darn.es/post/3l7m6ivb6ha2q " >
    Discuss on Bluesky
  </ a >
</ bluesky-post >

ตัวอย่างการใช้เทมเพลตที่กำหนดเองที่ซับซ้อนมากขึ้น:

 < script type =" module " src =" bluesky-post.js " > </ script >

< template id =" bluesky-post-template " >
  < dl >
    < dt > Reposts </ dt >
    < dd data-key =" repostCount " > </ dd >
    < dt > Replies </ dt >
    < dd data-key =" replyCount " > </ dd >
    < dt > Likes </ dt >
    < dd data-key =" likeCount " > </ dd >
  </ dl >
  < a data-key =" url " >
    View original post from < strong data-key =" username " > </ strong > on < strong data-key =" hostname " > </ strong >
  </ a >
</ template >

< bluesky-post >
  < a href =" https://bsky.app/profile/darn.es/post/3l7m6ivb6ha2q " >
    Discuss on Bluesky
  </ a >
</ bluesky-post > 

คุณสมบัติ

องค์ประกอบเว็บนี้ช่วยให้คุณ:

• เปลี่ยนลิงค์โพสต์บลูส์ปกติเป็นโพสต์ Bluesky ที่ยกมา
• พื้นผิวข้อมูลเมตาโพสต์ข้างโพสต์เช่นการตอบกลับจำนวนการนับซ้ำนับซ้ำเช่นนับ
• ใช้เทมเพลตที่กำหนดเองสำหรับอินสแตนซ์ทั้งหมดของส่วนประกอบบนหน้าโดยใช้คุณลักษณะข้อมูล data-key="name"
• ใช้เทมเพลตที่กำหนดเองสำหรับอินสแตนซ์เฉพาะโดยใช้ template เทมเพลต
• ดึงข้อมูลที่ซ้อนกันโดยใช้แอตทริบิวต์ data-key และการอ้างอิงคีย์จาวาสคริปต์ทั่วไปเช่น data-key="record.text"

การติดตั้ง

คุณมีตัวเลือกเล็กน้อย (เลือกหนึ่งในนั้น):

1. ติดตั้งผ่าน NPM: npm install @daviddarnes/bluesky-post
2. ดาวน์โหลดแหล่งข้อมูลด้วยตนเองจาก GitHub ไปยังโครงการของคุณ
3. ข้ามขั้นตอนนี้และใช้สคริปต์โดยตรงผ่าน CDN ของบุคคลที่สาม (ไม่แนะนำสำหรับการใช้งานการผลิต)

การใช้งาน

ตรวจสอบให้แน่ใจว่าคุณรวม <script> ในโครงการของคุณ (เลือกหนึ่งในนั้น):

 <!-- Host yourself -->
< script type =" module " src =" bluesky-post.js " > </ script > 

 <!-- 3rd party CDN, not recommended for production use -->
< script
  type =" module "
  src =" https://www.unpkg.com/@daviddarnes/[email protected]/bluesky-post.js "
> </ script > 

 <!-- 3rd party CDN, not recommended for production use -->
< script
  type =" module "
  src =" https://esm.sh/@daviddarnes/[email protected] "
> </ script >

ใช้เทมเพลตที่กำหนดเอง

เทมเพลตเริ่มต้นสำหรับส่วนประกอบจะเป็นเช่นนี้:

 < figure >
  < blockquote data-key =" record.text " > </ blockquote >
  < figcaption >
    < cite >
      < a data-key =" url " > @ < span data-key =" username " > </ span > </ a >
    </ cite >
    < dl >
      < dt > Reposts </ dt >
      < dd data-key =" repostCount " > </ dd >
      < dt > Replies </ dt >
      < dd data-key =" replyCount " > </ dd >
      < dt > Likes </ dt >
      < dd data-key =" likeCount " > </ dd >
    </ dl >
  </ figcaption >
</ figure >

อย่างไรก็ตามคุณสามารถปรับแต่งเทมเพลตได้โดยใช้องค์ประกอบ <template> ด้วย id ของ bluesky-post-template ซึ่งจะใช้สำหรับทุกอินสแตนซ์ของส่วนประกอบในหน้า นี่คือตัวอย่างที่เพียงแค่เปิดเผยตัวชี้วัดความไร้สาระของโพสต์บลูส์กี้เป็น <dl> ::

 < template id =" bluesky-post-template " >
  < dl >
    < dt > Reposts </ dt >
    < dd data-key =" repostCount " > </ dd >
    < dt > Replies </ dt >
    < dd data-key =" replyCount " > </ dd >
    < dt > Likes </ dt >
    < dd data-key =" likeCount " > </ dd >
  </ dl >
</ template >

นอกจากนี้คุณยังสามารถใช้เทมเพลตที่แตกต่างกันในหน้าเดียวกันโดยใช้ template เพื่อกำหนดเป้าหมาย <template> องค์ประกอบที่มี id เฉพาะ:

 < template id =" custom-template " >
  < a data-key =" record.text, url " > </ a >
</ template >

< bluesky-post template =" custom-template " >
  < a href =" https://bsky.app/profile/darn.es/post/3l7m6ivb6ha2q " >
    Discuss on Bluesky
  </ a >
</ bluesky-post >

ข้อมูลถูกนำไปใช้โดยใช้แอตทริบิวต์ data-key ข้อมูล ค่าของแอตทริบิวต์นี้ควรสอดคล้องกับจุดข้อมูลภายในการตอบสนองการโพสต์สาธารณะของ Bluesky เอกสารอย่างเป็นทางการของ Bluesky มีตัวอย่างของการตอบสนองสถานะที่นี่

โปรดทราบว่าสำหรับ <a> และ <img> องค์ประกอบค่าจะไม่ถูกนำไปใช้กับเนื้อหาของมันหากสตริงที่ถูกส่งคืนเริ่มต้นด้วย http และจะนำไปใช้กับแอตทริบิวต์ href และ src ตามลำดับ

ตรวจสอบการสาธิตเทมเพลตที่กำหนดเองรวมถึงซอร์สโค้ดสำหรับการอ้างอิง

เครดิต

ด้วยขอบคุณผู้คนต่อไปนี้:

• Zach Leatherman สำหรับสร้างแรงบันดาลใจให้กับเทมเพลต repo ส่วนประกอบของเว็บนี้