ดาวน์โหลด mastodon post - mastodon post ดาวน์โหลดซอร์สโค้ด

mastodon post

ส่วนประกอบของบุคคลที่สาม

v1.3.0

ดาวน์โหลด

`mastodon-post`

Web Component เพื่อแสดง mastodon post และข้อมูลเมตาของพวกเขา

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

ตัวอย่าง

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

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

< mastodon-post >
  < a href =" https://mastodon.design/@DavidDarnes/109824258017750161 " >
    Discuss on Mastodon
  </ a >
</ mastodon-post >

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

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

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

< mastodon-post >
  < a href =" https://mastodon.design/@DavidDarnes/109824258017750161 " >
    Discuss on Mastodon
  </ a >
</ mastodon-post >

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

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

< template id =" mastodon-post-template " >
  < dl >
    < dt > Reposts </ dt >
    < dd data-key =" reblogs_count " > </ dd >
    < dt > Replies </ dt >
    < dd data-key =" replies_count " > </ dd >
    < dt > Favourites </ dt >
    < dd data-key =" favourites_count " > </ dd >
  </ dl >
  < a data-key =" url " >
    View original post from < img alt =" avatar " data-key =" account.avatar " />
    < strong data-key =" account.display_name " > </ strong > on
    < strong data-key =" hostname " > </ strong >
  </ a >
</ template >

< mastodon-post >
  < a href =" https://mastodon.design/@DavidDarnes/109824258017750161 " >
    Discuss on Mastodon
  </ a >
</ mastodon-post >

คุณสมบัติ

Web Component นี้ช่วยให้คุณ:

เปลี่ยนลิงก์ mastodon post แบบปกติให้เป็น mastodon post ที่ยกมา
แสดงข้อมูลเมตาของโพสต์ควบคู่ไปกับโพสต์ เช่น จำนวนการตอบกลับ จำนวนการบล็อกซ้ำ จำนวนรายการโปรด
ใช้เทมเพลตที่กำหนดเองสำหรับอินสแตนซ์ทั้งหมดของส่วนประกอบบนเพจโดยใช้แอตทริบิวต์ data-key="name"
ใช้เทมเพลตแบบกำหนดเองสำหรับอินสแตนซ์เฉพาะโดยใช้แอตทริบิวต์ template
ดึงข้อมูลที่ซ้อนกันโดยใช้แอตทริบิวต์ data-key และการอ้างอิงคีย์ JavaScript ทั่วไป เช่น data-key="account.display_name" หรือ data-key="media_attachments[0]preview_url"

การติดตั้ง

คุณมีทางเลือกไม่กี่ทาง (เลือกอย่างใดอย่างหนึ่ง):

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

การใช้งาน

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

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

 <!-- 3rd party CDN, not recommended for production use -->
< script
  type =" module "
  src =" https://www.unpkg.com/@daviddarnes/[email protected]/mastodon-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 =" content " > </ blockquote >
  < figcaption >
    < cite >
      < a data-key =" url " >
        < span data-key =" username " > </ span >
        @
        < span data-key =" hostname " > </ span >
      </ a >
    </ cite >
    < dl >
      < dt > Reposts </ dt >
      < dd data-key =" reblogs_count " > </ dd >
      < dt > Replies </ dt >
      < dd data-key =" replies_count " > </ dd >
      < dt > Favourites </ dt >
      < dd data-key =" favourites_count " > </ dd >
    </ dl >
  </ figcaption >
</ figure >

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

 < template id =" mastodon-post-template " >
  < dl >
    < dt > Reposts </ dt >
    < dd data-key =" reblogs_count " > </ dd >
    < dt > Replies </ dt >
    < dd data-key =" replies_count " > </ dd >
    < dt > Favourites </ dt >
    < dd data-key =" favourites_count " > </ dd >
  </ dl >
</ template >

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

 < template id =" custom-template " >
  < a data-key =" content, url " > </ a >
</ template >

< mastodon-post template =" custom-template " >
  < a href =" https://mastodon.design/@DavidDarnes/109824258017750161 " >
    Discuss on Mastodon
  </ a >
</ mastodon-post >

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

 < template id =" mastodon-post-template " >
  < figure >
    < blockquote data-key =" content " > </ blockquote >
    < figcaption >
      < cite >
        < a data-key =" url " >
          View original post from
          < img alt =" avatar " data-key =" account.avatar " />
          < strong data-key =" account.display_name " > </ strong > on
          < strong data-key =" hostname " > </ strong >
        </ a >
      </ cite >
    </ figcaption >
  </ figure >
</ template >

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

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