Cara saya menunjukkan suka Bluesky pada catatan blog saya-tutorial css-php.cn

Saya sangat seronok meluangkan masa di Bluesky sekarang. Salah satu perkara yang saya sangat nikmati tentang keseluruhan pengalaman ialah projek ini adalah Sumber Terbuka, orang ramai sedang membina beberapa perkara yang sangat menarik dengan platform dan terdapat beberapa API yang bagus untuk berseronok.

Saya biasa dengan standard Webmentions dan cara ia boleh digunakan untuk memudahkan perbualan merentas tapak dengan menunjukkan data seperti suka dan komen/balas kepada pautan di internet. Saya bekerja dengan Webmentions beberapa tahun yang lalu untuk memaparkan data Webmention daripada platform media sosial lain di tapak saya. Walau bagaimanapun, ia sering terasa seperti banyak gelung untuk dilalui, apabila anda hanya boleh mendapatkan beberapa data daripada API.

Dalam siaran ini, kami akan menggunakan Bluesky API untuk mengambil koleksi avatar pengguna yang menyukai siaran Bluesky yang telah anda kaitkan dengan catatan blog awam, supaya anda boleh memaparkan sesuatu yang kelihatan seperti ini pada tapak web anda.

How I show Bluesky likes on my blog posts

Aliran kerja

Memandangkan tapak web ini adalah tapak statik yang dibina dengan Eleventy, ia memerlukan beberapa langkah untuk mengaitkan catatan blog yang diterbitkan dengan siaran Bluesky.

Terbitkan catatan blog, yang mencetuskan binaan tapak statik
Terbitkan siaran Bluesky yang memaut ke catatan blog yang diterbitkan
Kaitkan ID siaran Bluesky dengan catatan blog yang diterbitkan itu (dalam CMS, contohnya)
Bina semula tapak
Keuntungan

Pilihan teknikal

Tapak web ini ialah tapak statik yang menggunakan JavaScript sisi pelanggan dengan berhati-hati. Kod JavaScript untuk fungsi ini berjalan pada templat halaman blog saya dengan syarat jika catatan blog mempunyai ID Bluesky Post yang dikaitkan dengannya.

Alternatif kepada pendekatan ini ialah (dalam kes saya) menggunakan Fungsi Edge untuk mengubah suai respons HTML statik pada masa permintaan, tetapi pada masa lalu saya mempunyai masalah prestasi dengan memanggil API pihak ketiga dengan cara ini, seperti Masa ke Bait Pertama (TTFB) yang lebih perlahan daripada yang diingini. Baca Cara Saya Memperbaiki TTFB Brutal saya untuk lebih banyak konteks.

Selain itu, ciri ini pada tapak web saya adalah peningkatan progresif, dan fungsi halaman tidak bergantung pada menunjukkan suka Bluesky. Oleh itu, jika panggilan ke API Bluesky gagal pada pelanggan, tidak mengapa dan kami boleh membersihkan DOM dengan sewajarnya. Jika kami menjalankan kod yang sama ini pada pelayan, ia boleh menyekat pemaparan halaman (sekurang-kurangnya tanpa pengendalian ralat yang betul), dan siaran itu tidak akan dibaca. Sangat memalukan.

Dengan tapak saya menjadi tapak statik, secara teknikalnya saya boleh mengambil data Bluesky pada masa bina dan memaparkan data secara statik pada setiap catatan blog. Walau bagaimanapun, saya mahu ciri ini membawa kegembiraan dengan menjadi pengalaman interaktif hampir masa nyata. Selain itu, adalah tidak sesuai untuk membina semula tapak web saya setiap minit atau lebih, untuk memastikan data disegerakkan.

Mengoptimumkan prestasi

Memandangkan kami memuatkan n imej pihak ketiga (avatar pengguna), saiz imej adalah penting. Nasib baik, API Bluesky menyediakan sekurang-kurangnya dua saiz imej untuk setiap pengguna, dan kami mahu menggunakan yang terkecil.

Selain itu, memandangkan kami sedang memuatkan n imej dan kami tidak tahu berapa lama ia akan diambil untuk memuatkan atau berapa banyak kesannya pada reka letak halaman, beberapa pertimbangan telah dibuat untuk mengelakkan Anjakan Susun Atur Terkumpul (CLS ) sebanyak mungkin. Ini akan digariskan bersama contoh kod di bawah.

Prasyarat untuk menunjukkan suka Bluesky pada catatan blog anda

Akaun Bluesky
Tapak web
Beberapa catatan blog
Satu cara untuk menyimpan ID siaran Bluesky dengan data catatan blog anda (cth. jika anda menulis blog anda dalam tanda turun, simpan ID siaran dalam perkara hadapan anda; jika anda menggunakan CMS, tambahkan medan pada catatan blog anda model kandungan, dsb)

Kod itu

Mari kita lihat HTML, CSS dan JavaScript yang membuat keajaiban berlaku.

HTML

HTML terkandung dalam elemen bahagian. Komponen ini mengandungi:

elemen h3, yang akan diisi dengan jumlah bilangan suka (elemen tahap tajuk anda mungkin berbeza-beza),
pautan ke siaran Bluesky untuk menggalakkan orang ramai menyukainya, dan
elemen ul kosong, sedia untuk diisi dengan avatar Bluesky.

Untuk kelas CSS saya menggunakan sintaks BEM, tetapi anda boleh menggunakan apa sahaja sistem CSS yang anda suka. Untuk menyasarkan elemen DOM dalam JavaScript, saya menggunakan atribut data yang diawali dengan data-bsky; anda boleh menyasarkan elemen DOM menggunakan kelas CSS dalam JavaScript, tetapi saya lebih suka menggunakan atribut data untuk memisahkan kebimbangan. Anda juga boleh menggunakan ID pada elemen dan menyasarkan mereka yang mempunyai JavaScript jika anda mahu.

bskyPostId yang dikaitkan dengan catatan blog ditambah ke dalam atribut data pada teg meta di sebelah komponen ini. Ini adalah unik semata-mata untuk persediaan saya, memandangkan saya sedang membina tapak statik dan memerlukan akses kepada pembolehubah masa binaan pada bahagian klien dalam fail JavaScript yang berasingan. Anda mungkin mempunyai akses kepada bskyPostId anda dalam keadaan apl anda, contohnya, jika anda menggunakan rangka kerja yang berbeza. Edit mengikut kesesuaian anda.

<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;
}

Salin selepas log masuk

JavaScript

Penafian: kod ini disediakan dalam JavaScript biasa; anda boleh menyesuaikan kod ini kepada rangka kerja tapak web anda sendiri sekiranya anda mahu, tetapi keindahan menulis ini dalam JavaScript biasa ialah anda boleh menggunakannya pada mana-mana bahagian hadapan sebagaimana adanya.

Pertama, anda perlu menentukan beberapa pembolehubah. LIMIT menentukan bilangan maksimum avatar yang anda mahu paparkan pada halaman anda bergantung pada cara anda mahu memaparkannya. Had saya ditetapkan kepada 59 kerana itulah bilangan avatar yang sesuai pada empat baris (dengan ruang tambahan untuk memaparkan berapa banyak lagi suka yang ada). Bilangan maksimum avatar yang boleh anda ambil dengan titik akhir API ini ialah 100.

bskyPostId diambil daripada teg meta seperti yang diterangkan dalam bahagian HTML di atas (anda mungkin perlu melakukan ini secara berbeza bergantung pada rangka kerja anda dan kod sedia ada).

Untuk mengubah suai DOM selepas mengambil data, kita perlu mengakses elemen kontena, likesContainer dan likesCount menggunakan document.querySelector().

Tukarkan nilai myDid dengan Bluesky DID anda sendiri. Dan segala-galanya bagus untuk dilakukan.

<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;
}

Salin selepas log masuk

Seterusnya, kami akan mentakrifkan dua fungsi yang mengubah suai DOM menggunakan data daripada API Bluesky.

Fungsi drawHowManyMore hanya berjalan jika terdapat lebih banyak suka pada siaran daripada apa yang telah diambil oleh API getLikes. Sekali lagi, saya menggunakan sintaks BEM untuk CSS saya; jika anda menggunakan sesuatu yang berbeza, anda perlu mengemas kini kelas mana yang ditambahkan pada elemen likesMore.

Fungsi drawLikes bergelung melalui data suka daripada API getLikes dan mencipta elemen img untuk setiap pelakon. Ambil perhatian bahawa kami menggantikan avatar dengan avatar_thumbnail dalam rentetan like.actor.avatar. Ini adalah untuk memaparkan imej yang berukuran 128x128px, bukannya 1000x1000px lalai. Jangan lupa atribut teks alt pada elemen 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=`;

Salin selepas log masuk

Lihat fail JavaScript penuh di GitHub.

Beberapa pemerhatian yang keren

Hanya mengambil masa beberapa saat daripada pengguna Bluesky menyukai siaran ke avatar mereka muncul pada catatan blog.
Pelakon suka diisih mengikut cap masa-seperti-turun, jadi apabila seseorang menyukai siaran anda di Bluesky, mereka muncul di kiri atas avatar senarai. Ini, saya harap, mewujudkan lebih banyak kegembiraan daripada yang dimaksudkan (sekurang-kurangnya untuk geografi membaca kiri ke kanan).
API getPosts Bluesky dikemas kini lebih cepat daripada API getLikes. Ini bermakna bahawa pada muat semula halaman, nombor suka biasanya dikemas kini dan avatar mungkin mengambil masa satu atau dua saat lagi untuk muncul pada muat semula yang lain.

Kongsi keputusan anda dengan saya di Bluesky

Saya harap saya ingin melihat pelaksanaan anda dan cara anda menjadikan kod ini berfungsi untuk anda di tapak web anda. Apabila anda sudah bersedia untuk menyiarkannya di Bluesky, tandai pemegang @whitep4nth3r.com dalam balasan, dan saya akan suka ia meletakkan wajah saya pada catatan blog anda.

Atas ialah kandungan terperinci Cara saya menunjukkan suka Bluesky pada catatan blog saya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!