IMG_4051.png

推特治国

自从Trump就任美国第45任总统以来,他就因为其与美国主流价值观迥异的思想和言论,不断引发西方舆论阵地上的碰撞和喧嚣。由于Trump偏爱将Twitter作为其政治思想的传播源,同时因为他较为激进的思想和毫无顾忌的言论,他总能成为Twitter上的热点人物,被戏称为“推特治国”。

国内外也逐渐出现各式各样对他的恶搞,川普推特生成器就是其中之一。不过网上的各种生成器都有点瑕疵,还不如自己做一个。

我总共做了两版生成器,原理都差不多,请根据自己喜好下载使用:

142fd27d3e87414f9b187edbbcec4de8.png

@realDonaldTrump,这个是生成大尺寸推文的,生成文章开头的样例。

251eefd492444838882fa950c044e8a3.png

@realDonaldTrump brief,这个是生成小尺寸推文的,样例如下:

IMG_4052.png

下面介绍一下制作步骤。

推文界面的获取

首先简单知道下,网页内容是由HTML语言写成的,HTML语言表示的各种网页元素经过CSS样式的渲染,以及javascript脚本的辅助调整,最终转化为我们看到的网页。

要获取川普推特生成器最终生成的界面,就先需要从Twitter网页上提取这三种元素。通过各种浏览器的开发者工具,我们可以很容易地提取它们。

以Chrome为例,访问推特的手机版页面后,通过开发者管理器可以看到HTML源码:

捕获.JPG

其中<head>部分包含CSS样式和javascript脚本,把<head>部分复制下来即可:

捕获.JPG

之后对川普的推文部分右键 > 检查,开发者工具中的HTML就展开并定位到了你右键的那个元素,然后在开发者工具的HTML代码中逐级向上移动鼠标,直到通过页面中的蓝色框选区域确定了对应川普推文的那个<div>元素,最后把这个<div>元素复制下来。

142fd27d3e87414f9b187edbbcec4de8.png

由于川普的头像图片是浏览器通过图片的 HTTP 链接另行下载才能显示的,而 Workflow 的 Make Rich Text from HTML 动作不会去下载图片,所以你需要将图片转化成 Data URI 替换掉拷贝下来的 HTML 文件中该图片的 HTTP 链接。有兴趣的可以自己查查相关的资料,这里就不细说了吧……

然后把上面处理好的<head>与<div>元素存入workflow,这部分就搞定了:

IMG_4055.jpg

各部分文字内容的生成

川普的推特有三部分文字内容需要我们另行生成,分别是:

  1. 推文内容
  2. 转发数与点赞数
  3. 发推的时间

最后使用 Make Rich Text from HTML 动作生成川普的推特。

推文内容的生成

显而易见,这个应使用 Ask for Input 动作完成:

IMG_4057.png

转发数和点赞数的生成

以转发数为例,这里使用 10000 ~ 50000 的随机数生成转发数:

IMG_4056.png

需要注意的是,推特中转发数和点赞数是含有千位分割符的!要造假恶搞,当然应该注意细节,如果不对随机数文本做相应处理,这个推特生成器就显得不那么真实了。

这里使用正则表达式替换动作来快速实现分隔符的插入。Workflow 的正则表达式是部分基于 ICU 的语法的,通过 $n 我们可以表示 Find Text 中第 n 个括号匹配到的内容。在这个Workflow里,Find Text 中两个括号 (\d*) 和 (\d{3}) 分别匹配数字的千位以上位和百十个位,在 Replace With 里填入 "$1,$2" 即可实现在千位和百位间插入逗号。

发推时间生成

这里通过 Date 动作获取当前时间,并通过 Format Date 动作对时间进行格式处理,Format String 部分的语法是基于 Unicode Technical Standard #35 的:

IMG_4059.png

生成最终的 Rich Text

最后把上面生成的内容插入到<div>元素里:

IMG_4058.png

然后把<head>和<div>元素拼在一起,使用 Make Rich Text from HTML 生成,就大功告成了!

IMG_4060.png

使用演示

很简单,输入推文,生成推特:

IMG_4061.png

IMG_4062.png

好了,然后截个图去裁剪一下去祸害别人吧!

IMG_4064.png