mastodon post

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" 사용하여 중첩된 데이터를 검색합니다.

설치

몇 가지 옵션이 있습니다(다음 중 하나 선택).

1. npm을 통해 설치: npm install @daviddarnes/mastodon-post
2. GitHub에서 프로젝트로 소스를 수동으로 다운로드하세요.
3. 이 단계를 건너뛰고 타사 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 >

그러나 페이지에 있는 구성 요소의 모든 인스턴스에 사용되는 mastodon-post-template id 가 있는 <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 >

특정 id 가진 <template> 요소를 대상으로 지정하기 위해 template 속성을 사용하여 동일한 페이지에서 다른 템플릿을 사용할 수도 있습니다.

 < 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 데이터 속성을 사용하여 적용됩니다. 이 속성의 값은 Mastodon 공개 상태 API 응답 내의 데이터 포인트와 일치해야 합니다. 공식 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 속성에 각각 적용됩니다.

사용자 정의 템플릿 데모와 참조용 소스 코드를 확인하세요.

신용 거래

다음 분들께 감사드립니다.

• 이 웹 구성 요소 저장소 템플릿에 영감을 준 Zach Leatherman