肇鑫的日常博客

日常

为MWeb添加推特卡片的支持

当我们分享链接到推特时，如果链接对应的网站支持推特卡片。推特就会生成相应的卡片，效果如下图，这比单纯的文字加链接的效果要好很多。

twitter_card_summary_larget_image

特别提示：本文是对于MWeb的深度定制，建议你看完全文之后，再决定是否动手。

新建一个网站

强烈建议你新建一个网站用来练手。右键MWeb的库，选择新建分类，然后选择做为站点，选择一个主题（我们以octopress主题为例），然后点右侧的编辑，选择“复制当前主题到新主题”。这样做的好处是，你对于主题的修改，都是在复制后的主题进行的，一旦出现问题，删掉这个主题就可以了，不会影响到已有的主题。

copy_theme_to_modify

自定义扩展

双击进入主题的文件夹，你会看到一个叫extensions的文件夹。双击进入这个文件夹。里面一般会有一个或者两个文件，分别叫site.json和document.json。这两个文件对应了MWeb设置中的站点扩展和文档扩展。

extension_preferences

虽然也可以在MWeb中直接添加站点扩展和分享扩展。但是那个添加的方式MWeb应该是做错了。添加的内容成了全局的，一旦添加，所有的站点就都有了，而不是指定的站点才有。
直接编辑这两个文件，生成的扩展，是只针对当前主题对应的站点的，不会引起混乱。

站点扩展

用文本编辑器打开site.json。复制下面的内容，插入到文件的第二行。

{
    "title":"twitter:site",
    "variableName":"twitter:site",
    "inputFieldHeight":22,
    "exampleText":"@owenzhao"
},
{
    "title":"twitter:creator",
    "variableName":"twitter:creator",
    "inputFieldHeight":22,
    "exampleText":"@owenzhao"
},
{
    "title":"og:image",
    "variableName":"og:image",
    "inputFieldHeight":50,
    "exampleText":"图片路径或地址"
},

文档扩展

打开document.json文件。（如果不存在，可以复制一份site.json，然后改名为document.json，删除掉第一行左中括号和最后一行又中括行中间的内容。）复制下面的内容，插入到文件的第二行。

{
    "title":"og:description",
    "variableName":"og:description",
    "inputFieldHeight":240,
    "exampleText":"文章摘要"
}

如果原本document.json中就有内容，上面代码最后的}之后需要加一个英文的逗号。

为了方便 ，我将og:image属性放在了站点扩展，这样只需指定一张图片，就可以一直使用了。
如果你想要每个文章都单独指定一张图片，可以将og:image那一段大括号的内容，从站点扩展，移动到文档扩展。
一旦og:image放在了文档扩展，你就必须每个文件都单独指定一张图片。不然，生成网站的时候就会遇到错误。

填写内容

打开MWeb，添加必要的属性。

站点扩展

fill_site_extensions

  • twitter:site，是你站点对应的推特，如果没有，就填成你自己的。
  • twitter:creator，是作者，也就是你自己的推特。
  • og:image，是卡片的题图。需要把它放在主题的asset/img/下。建议图片大小不要小于1600x900。
    • 如果你的是在文档中指定的，那就是是media/开头的地址。

注意：站点扩展，每个站点都需要单独设置。

文档扩展

打开你要修改的文章，点开最右侧的ℹ️标志，粘贴一段文字，或者编写文档摘要到og:description文本框即可。

修改模版

之后就是修改模板了。一个MWeb生成的模版，大致可以分成head，body和footer三部分。

  • head对应，主题中的header.html文件。
  • body，根据性质的不同，分别对应主题中的post.html，page.html， category.html， archives.html文件。
  • footer就对应footer.html。

根据推特的要求，它的信息，必须写在html文件的head的meta中，这个是在模版的header.html中。这里，我们遇到了一个较大的困难。我们的一部分内容，是只有在post.html才可以得到。header.html无法取到相应的数据。

我的解决方案是修改header.html文件，将/head及之后的内容移动到对应body的部分，即需要移动内容到post.html，page.html， category.html， archives.html文件中。

注意：如果你使用的是其他的主题，可能对应body的不是我写的这几个文件，有可能是别的文件，或者甚至更多。但修改的原理是相同的。

删减head.html

用文本编辑器打开head.html。剪切</header>以及以后的内容，我这里对应的是第42行开始。

修改其他模版文件

将剪切的内容粘贴到post.html，page.html， category.html， archives.html文件的顶部。

插入推特信息

将下面的代码，插入到post.html，page.html的顶部。另外两个文件不必插入。

<!--Twitter Meta-->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="{{ext_twitter:site}}" />
<meta name="twitter:creator" content="{{ext_twitter:creator}}" />
<meta name="twitter:title" content="{{post.title}}" />
<meta property="og:url" content="{{siteURL}}{{post.url}}" />
<meta property="og:title" content="{{pageTitle}}" />
<meta property="og:description" content="{{post.ext_og:description}}" />
<meta property="og:image" content="{{siteURL}}{{ext_og:image}}" />

完成

保存所有文件，在MWeb中的站点，选择清空并重新生成网站，然后同步网站到你的服务器就可以了。

以后，你只要分享任意该网站的文章链接到推特，就可以同步生成推特卡片了。

参考资料