mastodon post تنزيل - mastodon post تنزيل كود المصدر

mastodon post

مكونات الطرف الثالث

v1.3.0

تنزيل

`mastodon-post`

مكون ويب لعرض 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 >

سمات

يتيح لك مكون الويب هذا ما يلي:

قم بتحويل رابط 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 على التوالي.

تحقق من العرض التوضيحي للقالب المخصص بالإضافة إلى الكود المصدري للرجوع إليه.