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组件回购模板