내 블로그 게시물에 Bluesky 좋아요를 표시하는 방법-CSS 튜토리얼-php.cn

저는 지금 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를 드물게 사용하는 정적 사이트입니다. 이 기능에 대한 JavaScript 코드는 블로그 게시물에 연결된 Bluesky Post ID가 있는 경우 내 블로그 페이지 템플릿에서 조건부로 실행됩니다.

이 접근 방식의 대안은 (제 경우) Edge 함수를 사용하여 요청 시 정적 HTML 응답을 수정하는 것입니다. 하지만 과거에는 이러한 방식으로 타사 API를 호출할 때 다음과 같은 성능 문제가 있었습니다. 원하는 것보다 느린 TTFB(Time to First Byte). 자세한 내용은 Brutal TTFB를 수정한 방법을 읽어보세요.

또한 내 웹사이트의 이 기능은 점진적인 향상 기능이며 페이지 기능은 Bluesky 좋아요 표시에 의존하지 않습니다. 따라서 클라이언트에서 Bluesky API 호출이 실패하더라도 문제가 되지 않으며 DOM을 적절하게 정리할 수 있습니다. 서버에서 동일한 코드를 실행하는 경우 페이지 렌더링이 차단될 수 있으며(적어도 적절한 오류 처리 없이) 게시물이 읽히지 않습니다. 부끄럽습니다.

내 사이트가 정적 사이트이기 때문에 기술적으로는 빌드 타임에 Bluesky 데이터를 가져와 각 블로그 게시물에서 데이터를 정적으로 렌더링할 수 있었습니다. 하지만 저는 이 기능이 실시간에 가까운 상호작용 경험을 제공함으로써 즐거움을 가져다주기를 원했습니다. 게다가 데이터 동기화를 유지하기 위해 매분마다 웹사이트를 다시 구축하는 것은 이상적이지 않습니다.

성능 최적화

n개의 타사 이미지(사용자 아바타)를 로드하는 경우 이미지 크기가 중요합니다. 다행히 Bluesky API는 각 사용자에게 최소 두 가지 이미지 크기를 제공하는데 우리는 가장 작은 크기를 사용하고 싶습니다.

또한, n개의 이미지를 로드하고 있으며 이미지를 로드하는 데 시간이 얼마나 걸릴지, 페이지 레이아웃에 얼마나 많은 영향을 미칠지 알 수 없기 때문에 누적 레이아웃 이동(CLS)을 방지하기 위해 몇 가지 고려 사항이 만들어졌습니다. ) 최대한 많이. 아래의 코드 예시와 함께 이에 대한 개요가 설명됩니다.

블로그 게시물에 Bluesky 좋아요를 표시하기 위한 전제 조건

블루스카이 계정
웹사이트
일부 블로그 게시물
블로그 게시물 데이터와 함께 Bluesky 게시물 ID를 저장하는 방법(예: 블로그를 마크다운으로 작성하는 경우 게시물 ID를 머리말에 저장하고, CMS를 사용하는 경우 블로그 게시물에 필드를 추가하세요) 콘텐츠 모델 등)

코드

마법을 실현하는 HTML, CSS, JavaScript를 살펴보겠습니다.

HTML

HTML은 섹션 요소 내에 포함되어 있습니다. 이 구성 요소에는 다음이 포함됩니다.

총 좋아요 수로 채워지는 h3 요소(제목 수준 요소는 다를 수 있음)
사람들의 좋아요를 독려하기 위한 Bluesky 게시물 링크
Bluesky 아바타로 채워질 준비가 된 빈 ul 요소.

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로 작성하는 것의 장점은 모든 프런트 엔드에서 그대로 사용할 수 있다는 것입니다.

먼저 몇 가지 변수를 정의해야 합니다. LIMIT는 표시 방법에 따라 페이지에 표시할 최대 아바타 수를 지정합니다. 내 한도는 59개로 설정되었습니다. 그 이유는 4개 행에 얼마나 많은 아바타가 잘 들어맞는지(좋아요가 몇 개 더 있는지 표시할 수 있는 추가 공간이 있기 때문)입니다. 이 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을 수정하는 두 가지 함수를 정의하겠습니다.

drawHowManyMore 함수는 getLikes API로 가져온 것보다 게시물에 좋아요가 더 많은 경우에만 실행됩니다. 다시 말하지만, 저는 CSS에 BEM 구문을 사용하고 있습니다. 다른 것을 사용하는 경우 likesMore 요소에 추가되는 클래스를 업데이트해야 합니다.

drawLikes 함수는 getLikes API의 좋아요 데이터를 반복하고 각 배우에 대한 img 요소를 생성합니다. like.actor.avatar 문자열에서 아바타를avatar_thumbnail로 대체합니다. 이는 기본 1000x1000px 대신 128x128px의 이미지를 표시하기 위한 것입니다. img 요소의 대체 텍스트 속성을 잊지 마세요.

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보다 빠르게 업데이트됩니다. 즉, 페이지를 새로 고칠 때 좋아요 수가 일반적으로 최신 상태이며, 다시 새로 고칠 때 아바타가 표시되는 데 1~2초 정도 더 걸릴 수 있습니다.