Buat gambar sosial automatik anda sendiri dengan RESOC

Buat imej sosial automatik dengan HTML dan CSS dan mengintegrasikannya ke dalam blog sebelas dan akhirnya digunakan ke platform Netlify. Artikel ini akan membimbing anda melalui keseluruhan proses langkah demi langkah, mencapai automasi imej sosial peringkat tinggi tanpa penulisan kod kompleks.

Baru -baru ini, gambar sosial automatik telah menjadi topik hangat, dan GitHub, Jetpack dan lain -lain telah melancarkan alat yang berkaitan. Pemaju seperti Ryan Filler dan Zach Leatherman juga telah melaksanakan ciri ini di laman web mereka, tetapi memerlukan banyak kod tersuai. Pada masa kini, dengan beberapa alat baru, kami dapat mempermudah proses ini.

Tutorial ini akan membimbing anda untuk membuat imej sosial automatik tersuai menggunakan HTML dan CSS, mengintegrasikannya ke dalam sebelas blog melalui konfigurasi, dan akhirnya digunakan untuk Netlify.

Jika anda tidak sabar untuk melihat hasil akhir, sila lawati pautan projek atau semak kod projek!

Apakah gambar sosial?

Dalam html Sebahagiannya, kami memasukkan beberapa metadata graf terbuka:

<meta content="Strategi langit biru" property="og:title">
<meta content="Kurang awan, lebih biru" property="og:description">
<meta content="/sky-with-clouds.jpg" property="og:image">

Apabila kami berkongsi halaman ini di Facebook, kami dan rakan -rakan kami akan melihat:

LinkedIn, Twitter, WhatsApp, Slack, Discord, iMessage ... semua laman web ini berkelakuan kira -kira dengan cara yang sama: mereka menyediakan pautan dengan "kad" visual untuk menjadikannya lebih banyak maklumat spatial dan kontekstual.

Twitter mempunyai kad metadata sendiri -twitter kad, tetapi mereka sangat serupa. Apabila Twitter tidak dapat mencari kad Twitter, ia kembali untuk membuka graf.

Tajuk dan deskripsi halaman adalah penting, tetapi dalam tangkapan skrin di atas, mereka kelihatan sangat kecil berbanding gambar langit dan awan, belum lagi saiz kawasan yang boleh diklik. Ini adalah kuasa gambar sosial. Apabila pautan dikongsi, mudah untuk memahami pengaruh imej -imej ini.

Dari tahap 0 hingga tahap 3

Tidak semua gambar sosial sama. Berikut adalah istilah rasmi, tetapi mari kita pertimbangkan tahap pengaruh kad imej sosial ini:

Tahap 0

Gambar sosial yang paling asas ialah tiada gambar. Pautan boleh dibanjiri dengan banyak kandungan, dengan kawasan visual kecil dan kekurangan rayuan visual.

Tahap 1

Teknologi klasik adalah untuk mewujudkan gambar sosial bersatu di seluruh laman web . Walaupun penyelesaian ini seolah-olah mempunyai nisbah input-output yang baik, seseorang mungkin berfikir ia lebih buruk daripada tidak mempunyai gambar. Sudah tentu, kita akan mendapat perhatian, tetapi tindak balas mungkin negatif, terutamanya apabila orang melihat banyak pautan dari laman web yang sama kelihatan sama. Ia terdedah kepada pengulangan dan tidak perlu.

Tahap 2

Tahap seterusnya adalah amalan standard untuk blog dan laman web media: Setiap jawatan mempunyai imej tersendiri dan berbeza antara satu sama lain. Amalan ini benar -benar munasabah untuk laman web berita, kerana foto boleh menambah kandungan halaman. Kelemahan yang berpotensi di sini adalah keperluan untuk mencari dan membuat bahan imej untuk setiap artikel yang diterbitkan.

Ini boleh menyebabkan beberapa kemalasan. Kita semua melihat gambar yang jelas gambar stok. Ia mungkin menarik perhatian, tetapi mungkin bukan perhatian yang anda mahukan.

Tahap 3

Tahap Akhir: Setiap halaman mempunyai gambar sosial yang kaya dan bermakna. Itulah yang dilakukan oleh CSS-Tricks. Gambar sosial pasukan adalah seperti jenama. Mereka berkongsi susun atur yang sama. Mereka menyebut tajuk artikel, serta nama dan gambar profil pengarang, yang tidak dapat dilihat oleh tajuk dan penerangan biasa. Mereka menarik dan tidak dapat dilupakan.

Terdapat prasyarat yang jelas untuk pendekatan ini: automasi. Mewujudkan imej yang unik untuk setiap pautan yang mungkin adalah mustahil. Fikirkan berapa banyak kerja tambahan yang diperlukan. Kami memerlukan beberapa penyelesaian programatik untuk membantu kami melakukan pengangkat berat.

Mari buat blog dengan gambar sosial yang unik

Untuk memberi diri anda alasan yang baik (dan kotak pasir) untuk membina gambar sosial yang unik, kami akan membuat blog yang mudah. Apabila saya menulis dan menyiarkan artikel ke blog ini, saya mengikuti proses dua langkah yang mudah:

1. Menulis dan menerbitkan artikel
2. Post yang diterbitkan URL ke akaun rangkaian sosial saya

Gambar sosial mesti memainkan peranan pada masa ini. Kami mahu menjadikan blog kami sebagai menarik perhatian. Tetapi itu bukan satu -satunya matlamat kami. Blog ini harus membina jenama peribadi kami. Kami berharap rakan -rakan, rakan sekerja dan peminat kami akan mengingati kami apabila mereka melihat jawatan sosial kami. Kami mahu sesuatu yang berulang, dikenali dan mewakili.

Membuat blog memerlukan banyak kerja. Walaupun gambar sosial automatik adalah sejuk, tidak bijak untuk menghabiskan terlalu banyak masa di atasnya. (Chris sampai pada kesimpulan yang sama pada akhir tahun 2020). Jadi, untuk menjadi lebih cekap, kami membuat laman web sebelas. Eleventy adalah penjana laman web statik yang mudah. Daripada bermula dari awal, gunakan projek starter sedia ada. Malah, mari kita pilih yang pertama, Blog-Base Elektronik.

Lawati halaman GitHub-Blog Electronic-base dan gunakannya sebagai templat:

Mari buat repositori dan tetapkan nama dan keterangan repositori. Kita boleh menetapkannya awam atau swasta, tidak mengapa.

Seterusnya, kami mengklon repositori secara tempatan, memasang pakej dan jalankan laman web:

 klon git [URL repositori anda]
CD My-Demo-Blog ### atau apa sahaja nama yang anda namakan NPM Pasang
NPM Run berkhidmat

Laman web kami berjalan di http: // localhost: 8080.

Sekarang mari kita gunakannya. Netlify menjadikan tugas ini sangat cepat (dan percuma!). (Oh, amaran spoiler: Automasi imej sosial kami bergantung pada fungsi Netlify.)

Oleh itu, mari lawati Netlify dan buat akaun jika anda belum mempunyai akaun. Sama ada cara, buat laman web baru:

Benarkan Netlify untuk mengakses repositori blog.

Netlify menggunakan laman web kami:

Selepas kira -kira satu minit, blog itu dikerahkan:

Satu templat imej menguasai semua

Imej sosial kami akan berdasarkan templat imej. Untuk merancang templat ini, kami akan menggunakan teknik yang sudah kami ketahui dan suka: HTML dan CSS. HTML tidak secara automatik menukar dirinya kepada imej, tetapi ada alat yang boleh melakukan ini, terutamanya krom tanpa kepala dengan dalang.

Walau bagaimanapun, bukannya membina tumpukan imej sosial sendiri, gunakan Kit Pembangunan Templat Imej RESOC. Jadi, dari direktori root projek, kita boleh menjalankannya di terminal:

 NPX ITDK INIT RESOC-Templates/Default -M Title-Description

Perintah ini mewujudkan templat imej baru dalam direktori resoc-templat/lalai. Ia juga akan dibuka dalam tetingkap penyemak imbas baru.

Kita boleh menggunakan templat ini seperti itu, tetapi ini hanya membolehkan kita mencapai tahap 2 dalam julat "pengaruh". Apa yang kita perlukan untuk mendapatkannya ke tahap 3 dan sepadan dengan template trik CSS ialah:

• Tajuk itu diselaraskan dengan betul, meninggalkan ruang negatif di sebelah kiri.
• Terdapat footer di bahagian bawah yang mengandungi kecerunan latar belakang yang terdiri daripada dua warna yang akan kita gunakan di seluruh blog.
• Nama dan profil gambar pengarang artikel.

Jika kita kembali ke penyemak imbas, kita dapat melihat dalam panel "Parameter" penonton templat yang templat memerlukan dua parameter: tajuk dan keterangan. Ini betul -betul templat yang kami pilih apabila kami menjalankan -m title-description di terminal. Tetapi kita boleh menambah lebih banyak parameter dengan mengedit resoc-templates/default/resoc.manifest.json . Khususnya, kita boleh memadamkan parameter kedua untuk mendapatkan:

 {
  "Partials": {
    "Kandungan": "./content.html.mustache",
    "Gaya": "./styles.css.mustache"
  },
  "Parameter": [
    {
      "Nama": "Tajuk",
      "jenis": "teks",
      "Demovalue": "Gambar bernilai seribu perkataan"
    }
  ]
}

Penonton dalam penyemak imbas mencerminkan perubahan:

Sudah tiba masanya untuk mereka bentuk imej itu sendiri, kita boleh merancangnya dalam resoc-templates/default/content.html.mustache :

<div>
  <main><h1>{{title}}</h1></main>
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174226994887403.jpg" class="lazy" alt="Buat imej sosial automatik anda sendiri dengan RESOC">
  <h2>Philippe Bernard</h2>
</div>

Ini hanya HTML biasa. Ok, kecuali {{ title }} . Ini adalah enjin templat yang kumis, RESOC menggunakan untuk menyuntik nilai parameter ke dalam templat. Kami juga boleh menaip beberapa teks ke dalam medan tajuk untuk melihat bagaimana ia berfungsi:

Apabila melihat pratonton, sila ambil perhatian bahawa kami kehilangan imej profil-pic.jpg . Salin gambar profil terbaik anda ke resoc-templates/default/profil-pic.jpg :

Sudah tiba masanya untuk menulis CSS dalam resoc-templates/default/styles.css.mustache . Titik jawatan ini bukan cara gaya templat, tetapi ini adalah gaya yang saya gunakan menggunakan:

 @import url ('https://fonts.googleapis.com/css2?family=anton&family=raleway&display=swap');

/ * ... kod css ... */

Kebanyakan dimensi bergantung kepada unit VW dan VH untuk membantu meramalkan pelbagai konteks templat yang mungkin hadir. Kami akan mengikuti cadangan Facebook, iaitu 1200 × 630. Kad Twitter, sebaliknya, berbeza dengan saiz. Kita boleh menjadikan imej pada resolusi rendah (seperti 600 × 315), tetapi mari kita gunakan 1200 × 630 jadi kita hanya perlu menggunakan piksel.

Penonton membuat pratonton Facebook pada 1200 × 630 dan zoom ke bawah untuk menyesuaikan skrin. Jika pratonton memenuhi jangkaan anda, begitu juga imej graf terbuka yang sebenarnya.

Setakat ini, templat memenuhi keperluan kita:

(Kandungan berikut terus menulis semula bahagian -bahagian yang tinggal mengikut struktur teks asal. Sambil mengekalkan konsistensi kandungan, menyesuaikan ekspresi bahasa dan struktur perenggan untuk menjadikannya lebih lancar dan lebih semula jadi.)

Atas ialah kandungan terperinci Buat gambar sosial automatik anda sendiri dengan RESOC. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!