最近有很多关于自动社交图片的讨论。GitHub已经创建了自己的。一个WordPress插件已经被Jetpack收购。肯定有兴趣!像Ryan Filler和Zach Leatherman这样的人已经在他们的网站上实现了社交图片。他们不得不自己编码很多东西。但是，情况正在发生变化，有一些工具可以使这个过程更顺利。
在本教程中，我们将用HTML和CSS创建我们自己的自动社交图片，将它们整合到Eleventy博客中--主要是通过配置--并将我们的网站部署到Netlify。
什么又是社交图片？
在HTML的<head> 部分，我们插入一些Open Graph标记：
<meta property="og:title" content="The blue sky strategy" />
<meta property="og:description" content="Less clouds, more blue" />
<meta property="og:image" content="/sky-with-clouds.jpg" />
当我们在Facebook上分享这个页面时，我们和我们的朋友会看到这个：
LinkedIn、Twitter、WhatsApp、Slack、Discord、iMessage......所有这些网站的行为方式基本相同：它们提供一个伴随链接的视觉 "卡片"，给它更多空间和背景。
Twitter有它自己的一套标记与它的Twitter卡片，但它们是非常相似的。当Twitter找不到它们的时候，它就会退回到Open Graph。
我们的页面有一个标题和描述是很自然的。但在上面的截图中，与天空和云彩的图片所获得的空间和注意力相比，它们是相当小的，更不用说可点击区域的大小了。这就是社交图片的力量。很容易理解这些图片在分享链接时能产生的影响。
从0级到3级
不是所有的社交图片都是平等的。这些不是官方术语，但让我们考虑一下关于这些社交图片卡的影响程度的编号 "级别"。
0级
最基本的社会形象是没有形象。由于面积小，没有多少视觉效果，链接可能会在内容的海洋中丢失。
第1级
一个经典的技术是创建一个全站的社会形象。虽然这个解决方案似乎提供了一个很好的结果-努力比率，但人们可以说这比没有图像更糟糕。当然，我们得到了一些关注，但反应可能是负面的，特别是如果人们看到很多链接到这个网站，看起来都是一样的。它有可能让人感觉到重复和不必要的。
第二层
下一个层次是博客和媒体网站的标准：一个帖子的社会形象。每个帖子都有自己的特色图片，而且它们在不同的帖子中是不同的。这种做法对于一个新闻网站来说是完全合法的，因为照片是对页面内容的补充。这里的潜在缺点是，它需要努力为每一个发表的帖子寻找和创建艺术作品。
这可能会导致一些懒惰的现象。我们都接触过明显是图片库照片的图片。它可能会得到关注，但也许不是你真正想要的那种关注。
需要一张故意让不同的人围着一张桌子工作的图片吗？外面有一大堆这样的图片
第三层次
最后一个层次：每页的、内容丰富的、有意义的社交图片。CSS-Tricks就在做这个。该团队的社交图片是有品牌的。他们共享相同的布局。他们提到了帖子的标题，以及作者的名字和个人照片，这是普通的标题和描述所不能显示的。它们吸引了人们的注意力，让人记忆深刻。
CSS-Tricks的社交卡包含了与帖子相关的信息，值得一看。
这种方法有一个明显的要求：自动化。为每个可能的链接创建独特的图像是不可能的。想想看，那是多么大的开销。我们需要一些程序化的解决方案来帮助完成繁重的工作。
让我们建立一个有独特社交图片的博客文章
为了给我们自己一个很好的小借口（和沙盒）来建立独特的社会形象，我们将把一个快速的博客放在一起。当我在这个博客上撰写和发布文章时，我遵循一个快速的两步流程。
- 撰写和发布文章
- 将发表的网址发布到我的社交网络账户上
这时社会形象必须大放异彩。我们想让我们的博客有最好的机会被关注。但这并不是我们唯一的目标。这个博客应该建立我们的个人品牌。我们希望我们的朋友、同事和追随者在看到我们的社交帖子时能记住我们。我们想要的是可重复的、可识别的、能代表我们自己的东西。
创建一个博客是一个很大的工作。虽然自动化的社会形象很酷，但花太多的时间在上面是不明智的。(克里斯在2020年底也得出了同样的结论）。所以，为了提高效率，我们要做一个Eleventy网站。Eleventy是一个简单的静态网站生成器。与其从头开始，不如使用其中的一个启动项目。事实上，让我们选择第一个项目，eleventy-base-blog。
这只是一个基础模板。我们只是用它来确保我们有帖子可以分享。
请访问1111-base-blog的GitHub页面，把它作为一个模板。
让我们创建仓库，并设置一个仓库的名称，描述。我们可以把它变成公共的或私人的，这并不重要。
接下来，我们在本地克隆我们的版本库，安装软件包，并运行网站。
git clone [your repo URL]
cd my-demo-blog ### Or whatever you named it
npm install
npm run serve
我们的网站运行在http://localhost:8080 。
现在我们来部署它。Netlify使这个任务变得超级快（而且免费！）。(哦，剧透一下：我们的社会图像自动化依赖于Netlify功能。)
所以，让我们去Netlify创建一个账户，也就是说，如果你还没有一个账户。不管怎样，创建一个新的网站。
点击 "New site from Git"（从Git中新建网站）按钮，链接项目回购以进行托管和部署。
通过允许Netlify访问博客库的过程。
只需保留默认值，然后点击 "Deploy site "按钮。
Netlify部署了我们的网站。
一分钟左右后，博客被部署了。
网站已经部署好了--我们都准备好了!
一个图像模板来统治他们
我们的社交图片将基于一个图片模板。为了设计这个模板，我们将使用我们已经知道并喜爱的技术。HTML和CSS。HTML不会自动变成图片，但有一些工具可以做到这一点，最著名的是Puppeteer的无头Chrome。
然而，我们没有自己建立社会图像堆栈，而是使用Resoc图像模板开发工具包。因此，从项目根部我们可以在终端运行这个命令。
npx itdk init resoc-templates/default -m title-description
这个命令在resoc-templates/default 目录中创建一个新的图像模板。它也会在一个新的浏览器窗口中打开。
浏览器提供了一个模板配置的浏览器预览，以及改变数值的用户界面。
我们可以按原样使用这个模板，但这只能让我们达到 "有影响力 "的第二级。我们需要的是使其达到第三级，并与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 class="wrapper">
<main>
<h1>{{ title }}</h1>
</main>
<footer>
<img src="profil-pic.jpg" />
<h2>Philippe Bernard</h2>
</footer>
</div>
这只是普通的HTML。好吧，除了{{ title }} 。这是Mustache，Resoc使用的模板框架，用于向模板注入参数值。我们甚至可以在 "标题 "字段中输入一些文本，看看它的工作情况。
看一下预览图，注意到我们缺少一张图片，profil-pic.jpg 。把你最好的个人资料图片复制到resoc-templates/default/profil-pic.jpg 。
现在简介图片已经设置好了。
现在是写CSS的时候了，resoc-templates/default/styles.css.mustache 。这篇文章的重点不是如何为模板设计样式，但这里是我最终使用的：
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Raleway&display=swap');
.wrapper {
display: flex;
flex-direction: column;
}
main {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}
h1 {
text-align: right;
margin: 2vh 3vw 10vh 20vw;
background: rgb(11,35,238);
background: linear-gradient(90deg, rgba(11,35,238,1) 0%, rgba(246,52,12,1) 100%);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
font-family: 'Anton';
font-size: 14vh;
text-transform: uppercase;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
h2 {
color: white;
margin: 0;
font-family: 'Raleway';
font-size: 10vh;
}
footer {
flex: 0 0;
min-height: 20vh;
display: flex;
align-items: center;
background: rgb(11,35,238);
background: linear-gradient(90deg, rgba(11,35,238,1) 0%, rgba(246,52,12,1) 100%);
padding: 2vh 3vw 2vh 3vw;
}
footer img {
width: auto;
height: 100%;
border-radius: 50%;
margin-right: 3vw;
}
大多数尺寸都依赖于vw 和vh 单位，以帮助预测模板可能被呈现的各种情况。我们将遵循Facebook的建议，即1200×630。另一方面，Twitter卡片的尺寸是不同的。我们可以用低分辨率渲染图片，比如600×315，但我们还是用1200×630，这样我们就只需要用像素来工作。
查看器以1200×630渲染Facebook的预览，并将其缩小以适应屏幕。如果预览能满足你的期望，实际的Open Graph图像也会如此。
到目前为止，该模板符合我们的需求：
那图像呢？
在我们完成模板之前，还有一件小事要补充。我们的一些博客文章会有图片，但不是所有的文章。在一个帖子没有图片的情况下，用图片来填补左边的空间会很酷。
这是一个新的模板参数，所以我们需要再一次更新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"
},
{
"name": "sideImage",
"type": "imageUrl",
"demoValue": "https://resoc.io/assets/img/demo/photos/pexels-photo-371589.jpeg"
}
]
}
让我们在resoc-templates/default/content.html.mustache 中声明一个额外的div：
<div class="wrapper">
<main>
{{#sideImage}}
<div class="sideImage"></div>
{{/sideImage}}
<h1>{{ title }}</h1>
</main>
<footer>
<img src="profil-pic.jpg" />
<h2>Philippe Bernard</h2>
</footer>
</div>
新的{{#sideImage}} ... {{/sideImage}} 语法是一个Mustache部分。它只有在定义了sideImage 参数时才会出现。
我们需要一点额外的CSS来处理图片。注意，我们在这里能够使用Mustache语法来插入特定帖子的background-image 值。下面是我在resoc-templates/default/styles.css.mustache 文件中的处理方法：
{{#sideImage}}
.sideImage {
position: absolute;
width: 100%;
height: 100%;
background-image: url({{{ sideImage }}});
background-repeat: no-repeat;
background-size: auto 150vh;
background-position: -35vw 0vh;
-webkit-mask-image: linear-gradient(45deg, rgba(0,0,0,0.5), transparent 40%);
}
{{/sideImage}}
我们的模板看起来很好!
我们提交我们的模板。
git add resoc-templates
git commit -m "Resoc image template"
在我们自动生成社交图片之前，让我们手动生成一个，只是作为一个预告。查看器提供了一个命令行，为我们的测试目的生成相应的图片。
复制它，从终端运行它并打开output-image.jpg 。
社会图像自动化
好了，我们通过命令行创建了一张图片。我们现在应该做什么呢？调用它的次数与我们博客上的页面一样多？这听起来像是一个无聊的任务，而且这种方法还有一个更深的问题：时间。即使创建一张图片需要类似于两秒钟的时间，我们可以乘以页面的数量，我们很容易看到努力在不断增长。
原始的Eleventy博客模板几乎是即时生成的，但我们应该为像社交图片这样的边缘化的东西等待大约1分钟？这是不可以接受的。
与其在构建时执行这个任务，我们不如用Netlify Function和Netlify on-demand builder来推迟它，懒惰的风格。事实上，我们并没有直接使用Netlify功能--Eleventy插件将为我们处理这个问题：
现在让我们来安装它。我们可以用这个命令为Eleventy添加Resoc Social Image插件，以及其配套的Netlify插件。
npm install --save-dev @resoc/eleventy-plugin-social-image @resoc/netlify-plugin-social-image
为什么有两个插件？第一个是专门针对Eleventy的，而第二个则是与框架无关的（例如，它可以用于Next.js）。
在项目的根部编辑.eleventy.js ，这样我们就可以导入这个插件：
const pluginResoc = require("@resoc/eleventy-plugin-social-image");
将其配置在.eleventy.js 的顶部附近，就在现有的eleventyConfig.addPlugin 之后：
eleventyConfig.addPlugin(pluginResoc, {
templatesDir: 'resoc-templates',
patchNetlifyToml: true
});
templatesDir 是我们存放图片模板的地方。 是要求该插件在 中为我们配置 。patchNetlifyToml netlify.toml @resoc/netlify-plugin-social-image
我们希望我们所有的页面都有自动社交图片。所以，让我们打开主模板，_includes/layouts/base.njk ，在文件的顶部添加这个：
{% set socialImageUrl %}
{%- resoc
template = "default",
slug = (title or metadata.title) | slug,
values = {
title: title or metadata.title,
sideImage: featuredImage
}
-%}
{% endset %}
这声明了一个新的变量，名为socialImageUrl 。这个变量的内容是由resoc 短代码提供的，它需要三个参数：
template是我们模板的子目录（它在resoc-templates/default）。slug是用来建立社交图片的URL（例如：/social-images/brand-new-post.jpg）。我们对页面标题进行lug-ify，以提供一个独特和可分享的URL。values是内容，正如在resoc-templates/default/resoc.manifest.json中所定义的那样。title是显而易见的，因为页面已经有一个标题。sideImage被设置为一个名为featuredImage的元，我们将为插图页面定义这个元。
现在我们可以打开_includes/layouts/base.njk ，将我们的光标放在<head> ，添加一些新的标记来填充所有这些东西
<meta name="og:title" content="{{ title or metadata.title }}"/>
<meta name="og:description" content="{{ description or metadata.description }}"/>
<meta name="og:image" content="{{ socialImageUrl }}"/>
<meta name="og:image:width" content="1200"/>
<meta name="og:image:height" content="630"/>
标题和描述标记类似于现有的<title> 和<meta name="description"> 。我们使用socialImageUrl ，作为og:image meta的现状。我们还提供了社交图片的尺寸来完善这些东西。
自动化的社交图片已经准备好了!
让我们来部署这个
当我们再次部署博客时，所有页面将显示我们模板的纯文本版本。要看到完整的版本 ，我们给现有的页面分配一个图片。这需要我们编辑其中一个帖子--我创建了四个帖子，正在编辑第四个，posts/fourthpost.md--所以在现有的元后面有一个featuredImage：
---
title: This is my fourth post.
description: This is a post on My Blog about touchpoints and circling wagons.
date: 2018-09-30
tags: second tag
layout: layouts/post.njk
featuredImage: https://resoc.io/assets/img/demo/photos/pexels-pixabay-459653.jpg
---
在这里使用一个外部URL就足够了，但我们通常会用Eleventy把图片放到img 目录中，并在_includes/layouts/base.njk 中一次性提供基本URL。
再次建立网站：
npm run build
当运行git status ，我们可能会注意到除了我们自己编辑的文件外，还有两个修改过的文件。在.gitignore ，该插件添加了resoc-image-data.json 。这个文件存储了Netlify插件内部使用的社会图像数据，而netlify.toml 现在包含了Netlify插件的配置。
部署时间!
git commit -a -m "Automated social images"
git push
Netlify得到通知并部署网站。一旦最新版本上线，将主页分享到某个地方（例如Slack给自己或者使用Facebook的调试器）。下面是主页的社交卡的样子，它不包含图片：
这是我们的纯文本卡片。
这是包含图片的帖子的情况。
很完美
结论
到目前为止，自动社交图片主要是开发人员愿意探索和玩弄许多不同的想法和方法的问题，有些容易，有些困难。我们把事情做得相对简单。
只需几行代码，我们就能在一个基于Eleventy并托管在Netlify上的博客上快速设置自动社交图片。我们花了最多时间的部分是图片模板，但这并不是问题。在查看器和Mustache已经集成的情况下，我们专注于我们所知道的、所喜爱的和所重视的东西：网页设计。
希望像Resoc图像模板开发工具包及其相关工具能帮助使自动社交图像从一个小众的爱好变成主流。
