使用RESOC創建自己的自動社交圖像

利用HTML和CSS創建自動化社交圖片，並將其集成到Eleventy博客中，最終部署到Netlify平台。本文將逐步指導您完成整個過程，無需複雜的代碼編寫，即可實現高水平的社交圖片自動化。

近期，自動化社交圖片成為熱門話題，GitHub、Jetpack等都推出了相關工具。 Ryan Filler和Zach Leatherman等開發者也已在其網站上實現了此功能，但需要大量的自定義代碼。如今，借助一些新工具，我們可以簡化這一流程。

本教程將指導您使用HTML和CSS創建自定義的自動化社交圖片，並通過配置將其集成到Eleventy博客，最後部署到Netlify。

如果您迫不及待想查看最終效果，請訪問項目鏈接或瀏覽項目代碼！

社交圖片是什麼？

在HTML的部分，我們插入一些Open Graph元數據：

<meta content="The blue sky strategy" property="og:title">
<meta content="Less clouds, more blue" property="og:description">
<meta content="/sky-with-clouds.jpg" property="og:image">

當我們在Facebook上分享此頁面時，我們和我們的朋友會看到：

LinkedIn、Twitter、WhatsApp、Slack、Discord、iMessage……所有這些網站的行為方式都大致相同：它們提供一個帶有視覺“卡片”的鏈接，使其更具空間感和上下文信息。

Twitter有自己的一套元數據標記——Twitter Cards，但它們非常相似。當Twitter找不到Twitter Cards時，會回退到Open Graph。

頁面標題和描述是必不可少的，但在上面的截圖中，它們與天空和雲彩圖片相比顯得非常小，更不用說可點擊區域的大小了。這就是社交圖片的力量。當鏈接被分享時，很容易理解這些圖片的影響力。

從Level 0到Level 3

並非所有社交圖片都是平等的。以下並非官方術語，但讓我們考慮一下這些社交圖片卡片的影響力級別：

Level 0

最基本的社交圖片是沒有圖片。鏈接可能會淹沒在大量內容中，可視區域小且缺乏視覺吸引力。

Level 1

一種經典技術是創建全站統一的社交圖片。雖然這種解決方案似乎具有良好的投入產出比，但有人可能會認為它比沒有圖片更糟糕。當然，我們會獲得一些關注，但反應可能是否定的，尤其當人們看到很多來自同一個網站的鏈接都看起來一樣時。它容易顯得重複且不必要。

Level 2

下一個級別是博客和媒體網站的標準做法：每篇文章都有其自己的特色圖片，並且彼此不同。對於新聞網站來說，這種做法是完全合理的，因為照片可以補充頁面內容。這裡的潛在缺點是，需要為每一篇已發布的文章尋找和創建圖片素材。

這可能會導致一些懶惰。我們都見過那些顯然是庫存照片的圖片。它可能會引起注意，但可能不是你真正想要的關注。

Level 3

最終級別：每個頁面都有內容豐富、有意義的社交圖片。 CSS-Tricks就是這樣做的。該團隊的社交圖片具有品牌特色。它們共享相同的佈局。它們提到了文章標題，以及作者姓名和個人資料圖片，這是普通的標題和描述無法顯示的。它們引人注目且令人難忘。

這種方法有一個顯而易見的先決條件：自動化。為每個可能的鏈接創建獨特的圖片是不可能的。想想看這需要多少額外工作。我們需要一些程序化的解決方案來幫助我們完成繁重的工作。

讓我們創建一個具有獨特社交圖片的博客

為了給自己一個構建獨特社交圖片的良好理由（和沙盒），我們將創建一個簡單的博客。當我撰寫和發布文章到這個博客時，我遵循一個簡單的兩步過程：

1. 撰寫和發布文章
2. 將已發布的URL發佈到我的社交網絡帳戶

這時社交圖片必鬚髮揮作用。我們希望讓我們的博客盡可能引人注目。但這並不是我們的唯一目標。這個博客應該樹立我們的個人品牌。我們希望當我們的朋友、同事和粉絲看到我們的社交帖子時，能記住我們。我們想要一些可重複、可識別且具有代表性的東西。

創建博客需要大量工作。雖然自動化社交圖片很酷，但花太多時間在這上面是不明智的。 （Chris在2020年底得出了同樣的結論）。因此，為了提高效率，我們正在製作一個Eleventy網站。 Eleventy是一個簡單的靜態網站生成器。與其從頭開始，不如使用現有的入門項目。事實上，讓我們選擇第一個，eleventy-base-blog。

訪問eleventy-base-blog GitHub頁面並將其用作模板：

讓我們創建存儲庫，並設置存儲庫名稱和描述。我們可以將其設置為公開或私有，這無關緊要。

接下來，我們將存儲庫克隆到本地，安裝軟件包並運行站點：

 git clone [你的倉庫URL]
cd my-demo-blog ### 或者你命名的任何名稱npm install
npm run serve

我們的網站正在http://localhost:8080運行。

現在讓我們部署它。 Netlify使這項任務變得非常快速（且免費！）。 （哦，劇透警告：我們的社交圖片自動化依賴於Netlify函數。）

因此，讓我們訪問Netlify並創建一個帳戶，如果您還沒有帳戶的話。無論哪種方式，創建一個新的站點：

允許Netlify訪問博客存儲庫。

Netlify部署我們的站點：

大約一分鐘後，博客就部署好了：

一個圖像模板統治所有

我們的社交圖片將基於一個圖像模板。為了設計這個模板，我們將使用我們已經了解和喜愛的技術：HTML和CSS。 HTML不會自動將自身轉換為圖像，但有一些工具可以做到這一點，最著名的就是帶有Puppeteer的headless Chrome。

但是，與其自己構建社交圖片堆棧，不如使用Resoc Image Template Development Kit。因此，從項目根目錄，我們可以在終端中運行：

 npx itdk init resoc-templates/default -m title-description

此命令在resoc-templates/default目錄中創建一個新的圖像模板。它還會在新瀏覽器窗口中打開。

我們可以按原樣使用此模板，但這只能讓我們在“有影響力”的範圍內達到Level 2。我們需要讓它達到Level 3並匹配CSS-Tricks模板的是：

• 標題右對齊，左側留有一些負空間。
• 底部有一個頁腳，其中包含由我們將在整個博客中使用的兩種顏色組成的背景漸變。
• 文章作者的姓名和個人資料圖片。

如果我們回到瀏覽器，我們可以在模板查看器的“參數”面板中看到模板需要兩個參數：標題和描述。這正是我們在終端中運行-m title-description時選擇的模板。但我們可以通過編輯resoc-templates/default/resoc.manifest.json來添加更多參數。具體來說，我們可以刪除第二個參數以獲得：

 {
  "partials": {
    "content": "./content.html.mustache",
    "styles": "./styles.css.mustache"
  },
  "parameters": [
    {
      "name": "title",
      "type": "text",
      "demoValue": "A picture is worth a thousand words"
    }
  ]
}

瀏覽器中的查看器會反映更改：

是時候設計圖像本身了，我們可以在resoc-templates/default/content.html.mustache中進行設計：

<div>
  <main><h1 id="title">{{ title }}</h1></main>
  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174226994887403.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Create Your Own Automated Social Images With Resoc">
  <h2 id="Philippe-Bernard">Philippe Bernard</h2>
</div>

這只是普通的HTML。好吧，除了{{ title }} 。這是Mustache，Resoc用來將參數值注入模板的模板引擎。我們甚至可以在“標題”字段中鍵入一些文本以查看它的工作原理：

查看預覽時，請注意我們缺少一個圖像profil-pic.jpg 。將您最好的個人資料圖片複製到resoc-templates/default/profil-pic.jpg ：

是時候在resoc-templates/default/styles.css.mustache中編寫CSS了。這篇文章的重點不是如何設置模板樣式，但這是我最終使用的樣式：

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

/* ... CSS 代碼... */

大部分尺寸依賴於vw和vh單位，以幫助預測模板可能呈現的各種上下文。我們將遵循Facebook的建議，即1200×630。另一方面，Twitter Cards的尺寸不同。我們可以以低分辨率（如600×315）呈現圖像，但讓我們使用1200×630，這樣我們只需要使用像素即可。

查看器以1200×630呈現Facebook預覽，並將其縮小以適應屏幕。如果預覽符合您的期望，那麼實際的Open Graph圖像也會如此。

到目前為止，模板符合我們的需求：

(以下內容繼續按照原文結構，對剩餘部分進行類似的改寫，保持內容一致性的同時，調整語言表達和段落結構，使之更流暢自然。)

以上是使用RESOC創建自己的自動社交圖像的詳細內容。更多資訊請關注PHP中文網其他相關文章！