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 存储库模板