Hexo 博客 | 链接分享卡片生成配置
如果有接触国外社交媒体的同学可能会发现：在 Twitter / Facebook / Telegram 等平台粘贴一个链接，有时候会自动生成一个带介绍或者缩略图的分享卡片，可是有些链接就不会生成。我稍微摸索后发现，这其实是要经历特殊配置一番的。这里就介绍一下改如何在 Hexo 博客中实现这样的效果。
效果对比
在正文开始前，不妨先看看这些卡片的效果，评估一下你是否愿意花上这几分钟的时间。就拿 Twitter 举例。
不得不说，后者的效果还是远远好于前者的。尽管可能在文字内容上前者耗费了我更多的心血。
如果你想得到这样的效果，那么请你接着往下看。
实现方法
Twitter / Facebook 官方文档已经有十分严谨的介绍了，但是那些描述通常过于冗长，而且使用英文书写，对我们不太友好。毕竟是都是全球运营的企业，无可厚非。我无非在此再次记录一番操作。
通过阅读 官方文档 不难得到，目前 Twitter 支持 Summary card / Summary with large image / Player card / App card ，而博主最常使用的当属前两者。
参数都是通用的，我着重介绍我使用的 Summary card with large image 。
只有当网站的 <head> 标签内有类似以下内容时，卡片才会自动生成：
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="{Site name}" />
<meta name="twitter:creator" content="@YourName">
<meta name="twitter:title" content="{Title}" />
<meta name="twitter:description" content="{Desciption}" />
<meta name="twitter:image" content="{thumbnail}" />肯定不能我们每个页面手动添加，效率过于低下，而且重新 Generate 后全部失效。
我们只需要在生成器中，也就是在你的主题文件夹下 layout/_partial/head.ejs 插入以下代码。
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="<% config.title %>" />
<meta name="twitter:creator" content="@YourName">
<meta name="twitter:title" content="<% page.title %> | <%config.title%>" />
<meta name="twitter:description" content="<% page.description %>" />
<meta name="twitter:image" content="<% page.thumbnail %>" />这样每次 Generate 时候生成器都会在每个页面的 <head> 中插入对应页面的代码，而且细节也会根据页面的参数自动替换成对应的。
上述代码根据自己情况调整，如 thumbnail 是我自己设置的缩略图参数，放在每篇文章 Front-matter 中，极有可能和你的不一样，同样还有 creator 这些要配置，都要注意换成自己的。
重新生成、部署就能看到效果了。你可以通过 Twitter Card Validator 来检验是否配置成功。
在 Facebook 分享就不得不提 OpenGraph 了。OpenGragh 是一个让网页在社交网络中得以更加多元传播的一种协议，而 Facebook 就在使用。
同样的，我们在主题文件夹下 layout/_partial/head.ejs 插入以下代码。
<meta property="og:site_name" content="<% config.title %>">
<meta property="og:title" content="<% page.title %> | <% config.title %>" />
<meta property="og:type" content="website" />
<meta property="og:locale" content="<%- config.language %>" />
<meta property="og:description" content="<% page.description %>" />
<meta property="og:image" content="<% page.thumbnail %>" />再部署就可以了。
后
其实上述两种方法是可以以一种奇怪的形式互相兼容的。
像是我使用第二种协议在 <head> 标签内声明，而只要加上 summary_large_image 的强调，Twitter 就能知道你要使用这种类型的卡片，其他信息都能从 OpenGraph 的声明里对应取得。
而完成上面两者任意一种配置，在 Telegram 中粘贴链接都能很好的生成分享卡片，无需额外配置。不得不说国外社交平台还是挺团结的，不会专门搞自己独占的一套标准。
