我如何在我的博客文章中显示 Bluesky 的点赞-css教程-PHP中文网

我现在真的很享受在 Bluesky 度过的时光。整个体验中我真正喜欢的一件事是，该项目几乎是开源的，人们正在使用该平台构建一些非常酷的东西，并且有一些很好的 API 可供使用。

我熟悉 Webmentions 标准，以及如何使用它通过显示互联网上链接的点赞和评论/回复等数据来促进跨站点对话。几年前，我与 Webmentions 合作，在我的网站上显示来自其他社交媒体平台的 Webmention 数据。然而，当您只能从 API 获取一些数据时，常常感觉需要跳过很多环节。

在这篇文章中，我们将使用 Bluesky API 来获取喜欢您与公共博客文章关联的 Bluesky 帖子的用户头像集合，以便您可以在您的网站。

How I show Bluesky likes on my blog posts

工作流程

鉴于此网站是使用 Eleventy 构建的静态网站，因此需要执行几个步骤才能将已发布的博客文章与 Bluesky 帖子关联起来。

发布博客文章，这会触发静态站点构建
发布 Bluesky 帖子，链接到已发布的博客文章
将 Bluesky 帖子的 ID 与已发布的博客文章关联起来（例如在 CMS 中）
重建网站
利润

技术选择

该网站是一个静态网站，很少使用客户端 JavaScript。如果博客文章具有与其关联的 Bluesky 帖子 ID，则此功能的 JavaScript 代码有条件地在我的博客页面模板上运行。

这种方法的替代方案是（在我的例子中）使用 Edge Function 在请求时修改静态 HTML 响应，但在过去，我以这种方式调用第三方 API 时遇到了性能问题，例如第一个字节的时间 (TTFB) 比期望的要慢。阅读我如何修复我的残酷 TTFB 了解更多背景信息。

此外，我网站上的此功能是逐步增强的，页面的功能不依赖于显示 Bluesky 点赞。因此，如果客户端调用 Bluesky API 失败也没关系，我们可以适当地清理 DOM。如果我们在服务器上运行相同的代码，它可能会阻止页面的呈现（至少没有适当的错误处理），并且该帖子将无法被阅读。真是耻辱。

由于我的网站是静态网站，从技术上讲，我可以在构建时获取 Bluesky 数据，并在每个博客文章上静态呈现数据。然而，我希望这个功能能够通过近乎实时的交互体验来带来欢乐。另外，每分钟左右重新构建我的网站以保持数据同步并不理想。

优化性能

考虑到我们正在加载 n 个第三方图像（用户头像），图像的大小很重要。幸运的是，Bluesky API 为每个用户提供了至少两种图像尺寸，我们希望使用最小的一个。

此外，考虑到我们正在加载 n 张图像，并且我们不知道它们需要多长时间才能加载，也不知道它们会对页面布局产生多大影响，因此我们做了一些考虑来避免累积布局偏移（CLS））尽可能多。这些将与下面的代码示例一起概述。

在您的博客文章上显示 Bluesky 点赞的先决条件

Bluesky 帐户
一个网站
一些博客文章
一种将 Bluesky 帖子 ID 与您的博客文章数据一起存储的方法（例如，如果您用 Markdown 编写博客，则将帖子 ID 存储在您的 Front Matter 中；如果您使用 CMS，请向您的博客文章添加一个字段内容模型等）

代码

让我们看一下使奇迹发生的 HTML、CSS 和 JavaScript。

超文本标记语言

HTML 包含在一个部分元素内。该组件包含：

h3 元素，将填充喜欢的总数（您的标题级别元素可能会有所不同），
Bluesky 帖子的链接，鼓励人们喜欢它，以及
一个空的 ul 元素，准备填充 Bluesky 头像。

对于 CSS 类，我使用 BEM 语法，但您可以使用您喜欢的任何 CSS 系统。为了定位 JavaScript 中的 DOM 元素，我使用了以 data-bsky 为前缀的数据属性；您可以在 JavaScript 中使用 CSS 类来定位 DOM 元素，但我更喜欢使用数据属性来分离关注点。如果您愿意，您甚至可以在元素上使用 ID，并使用 JavaScript 定位这些元素。

与博客文章关联的 bskyPostId 被添加到该组件旁边的元标记上的数据属性中。这对于我的设置来说是独一无二的，因为我正在构建一个静态站点，并且需要在单独的 JavaScript 文件中访问客户端的构建时变量。例如，如果您使用不同的框架，您可以在应用程序状态下访问您的 bskyPostId。根据您的需要进行编辑。

<meta data-bsky-post-id="${post.bskyPostId}" />

<section>



<h3>
  
  
  The CSS
</h3>

<p>The CSS you see here has been slightly modified from my implementation to avoid you having to use my custom properties and personal spacing preferences. Please add what you need to make your implementation right for you.</p>

<p>I’d like to call out the magic number min-height: 400px on the parent container class, .post__likes; this is to maintain a fixed height of at least 400px for the element on page load, so that the avatars don't shift the page content around as they gradually load in (the container will expand vertically on mobile). This is to prevent a bad CLS score. In the JavaScript code below, you’ll notice that I’ve specified a limit on the number of avatars fetched, based on how many avatars will fit comfortably inside this fixed-height container.<br>
</p>

<pre class="brush:php;toolbar:false">.post__likes {
  min-height: 400px; /* to avoid CLS as much as possible! */
}

.post__likesTitle {
  font-size: 2rem;
  color: #000;
}

.post__likesCta {
  color:  #000;
  font-size: 1.25rem;
  font-style: italic;
  display: block;
}

.post__likesList {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.post__like {
  width: 4rem;
  aspect-ratio: 1/1;
  margin-right: -1rem;
  border-radius: 100%;
  filter: drop-shadow(0px 0.125rem 0.125rem rgba(0, 0, 0, 0.25));
}

.post__like__avatar {
  border-radius: 100%;
}

.post__like--howManyMore {
  width: 4rem;
  aspect-ratio: 1/1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  font-weight: bold;
  font-style: italic;
  background-color: #208bfe; /* Bluesky blue */
  color: #fff;
}

登录后复制

JavaScript

免责声明：此代码以纯 JavaScript 形式提供；如果您愿意，您可以将此代码改编为您自己的网站框架，但用纯 JavaScript 编写此代码的好处在于您可以按原样在任何前端使用它。

首先，您需要定义一些变量。 LIMIT 指定您想要在页面上显示的头像的最大数量，具体取决于您想要显示它们的方式。我的限制设置为 59，因为四行可以容纳多少个头像（还有额外的空间来显示还有多少个喜欢）。您可以使用此 API 端点获取的最大头像数量为 100。

bskyPostId 是从元标记中获取的，如上面 HTML 部分所述（您可能需要根据您的框架和现有代码以不同的方式执行此操作）。

为了在获取数据后修改 DOM，我们需要使用 document.querySelector() 访问容器、likesContainer 和 likesCount 元素。

将 myDid 的值替换为您自己的 Bluesky DID。其他一切都很好。

<meta data-bsky-post-id="${post.bskyPostId}" />

<section>



<h3>
  
  
  The CSS
</h3>

<p>The CSS you see here has been slightly modified from my implementation to avoid you having to use my custom properties and personal spacing preferences. Please add what you need to make your implementation right for you.</p>

<p>I’d like to call out the magic number min-height: 400px on the parent container class, .post__likes; this is to maintain a fixed height of at least 400px for the element on page load, so that the avatars don't shift the page content around as they gradually load in (the container will expand vertically on mobile). This is to prevent a bad CLS score. In the JavaScript code below, you’ll notice that I’ve specified a limit on the number of avatars fetched, based on how many avatars will fit comfortably inside this fixed-height container.<br>
</p>

<pre class="brush:php;toolbar:false">.post__likes {
  min-height: 400px; /* to avoid CLS as much as possible! */
}

.post__likesTitle {
  font-size: 2rem;
  color: #000;
}

.post__likesCta {
  color:  #000;
  font-size: 1.25rem;
  font-style: italic;
  display: block;
}

.post__likesList {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.post__like {
  width: 4rem;
  aspect-ratio: 1/1;
  margin-right: -1rem;
  border-radius: 100%;
  filter: drop-shadow(0px 0.125rem 0.125rem rgba(0, 0, 0, 0.25));
}

.post__like__avatar {
  border-radius: 100%;
}

.post__like--howManyMore {
  width: 4rem;
  aspect-ratio: 1/1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  font-weight: bold;
  font-style: italic;
  background-color: #208bfe; /* Bluesky blue */
  color: #fff;
}

登录后复制

接下来，我们将定义两个使用 Bluesky API 中的数据修改 DOM 的函数。

仅当帖子上的点赞数多于 getLikes API 获取的点赞数时，drawHowManyMore 函数才会运行。同样，我在 CSS 中使用 BEM 语法；如果您使用不同的东西，您将需要更新哪些类添加到 likesMore 元素。

drawLikes 函数循环访问来自 getLikes API 的点赞数据，并为每个演员创建一个 img 元素。请注意，我们将 like.actor.avatar 字符串中的 avatar 替换为 avatar_thumbnail。这是为了显示 128x128px 的图像，而不是默认的 1000x1000px。不要忘记 img 元素上的 alt 文本属性。

const LIMIT = 59;

const bskyPostId = document.querySelector("[data-bsky-post-id]").dataset.bskyPostId;

const container = document.querySelector("[data-bsky-container]");
const likesContainer = document.querySelector("[data-bsky-likes]");
const likesCount = document.querySelector("[data-bsky-likes-count]");

const myDid = "add_your_did";
const bskyAPI = "https://public.api.bsky.app/xrpc/";
const getLikesURL = `${bskyAPI}app.bsky.feed.getLikes?limit=${LIMIT}&uri=`;
const getPostURL = `${bskyAPI}app.bsky.feed.getPosts?uris=`;

登录后复制

在 GitHub 上查看完整的 JavaScript 文件。

一些很酷的观察结果

从 Bluesky 用户点赞帖子到他们的头像出现在博客文章上只需要几秒钟。
点赞的演员按点赞时间戳降序排序，因此当有人点赞您在 Bluesky 上的帖子时，他们会出现在头像的左上角列表。我希望这能创造比预期更多的快乐（至少对于从左到右阅读的地理区域而言）。
Bluesky getPosts API 的更新速度比 getLikes API 更快。这意味着在页面刷新时，点赞数通常是最新的，并且头像可能需要一两秒的时间才能在另一次刷新时出现。

在 Bluesky 上与我分享您的结果

我希望不用说，我很想看到您的实现以及您如何使此代码在您的网站上工作。当您准备好在 Bluesky 上发布相关内容时，请在回复中标记@whitep4nth3r.com，我希望它能将我的头像出现在您的博文上。

以上是我如何在我的博客文章中显示 Bluesky 的点赞的详细内容。更多信息请关注PHP中文网其他相关文章！