首頁 >web前端 >css教學 >我如何在我的部落格文章中顯示 Bluesky 的點贊

我如何在我的部落格文章中顯示 Bluesky 的點贊

Barbara Streisand原創: 2024-11-24 17:40:141064瀏覽

我現在真的很享受在 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中文網其他相關文章！

JavaScript css html edge Static String define if for date timestamp Error using public Attribute Collection number function default dom this display ul github everything cms Access

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：如何使用模式在 D3.js 中將圖像加入圓圈？下一篇：如何使用模式在 D3.js 中將圖像加入圓圈？

看更多