bluesky post

bluesky-post

一個用於顯示藍調帖子及其元數據的Web組件。

演示|自定義模板演示|進一步閱讀

例子

一般用法示例：

 < 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 > 

特徵

此Web組件允許您：

• 將常規的藍調郵政鏈接變成引用的藍調帖子
• 表現出帖子元數據與帖子旁邊，例如回復計數，重新計數，例如計數
• 使用data-key="name"數據屬性，使用自定義模板為頁面上的所有實例
• 使用template屬性使用自定義模板進行特定實例
• 使用data-key屬性和典型的JavaScript鍵參考檢索嵌套的數據，例如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>元素與bluesky-post-template的id自定義模板，該ID將用於頁面上的每個組件的每個實例。這是一個示例，它只是將布魯斯基帖子的虛榮指標視為<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 >

您還可以通過使用具有特定id的<template>的template屬性來使用同一頁面上的不同模板：

 < 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 Public Post API響應中的數據點。 Bluesky官方的文檔在此處有一個狀態響應的示例。

請注意，對於<a>和<img>元素，如果返回的字符串以http開頭，則將不應用於其內容，而是分別將其應用於href和src屬性。

查看自定義模板演示以及供參考的源代碼。

信用

感謝以下人員：

• 扎克·萊瑟曼（Zach Leatherman）啟發此Web組件回購模板