使用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>{{ title }}</h1></main>
  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174226994887403.jpg" class="lazy" alt="Create Your Own Automated Social Images With Resoc ">
  <h2>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中文网其他相关文章！