mastodon post

mastodon-post

一個用於顯示mastodon post及其元資料的 Web 元件。

演示|自訂模板演示|進一步閱讀

範例

一般用法範例：

 < 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 元件可讓您：

• 將常規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. 跳過此步驟並直接透過第 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 >

但是，您可以使用id為mastodon-post-template的<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屬性來定位具有特定id <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 啟發了這個 Web Component 儲存庫模板