知识点:

  • 技巧:把 Markdown 转化为 HTML

CloudApp 和 Droplr 是一对儿比较奇特的服务。我们可以首先把它们看作短链接服务,因为它们可以把很长的链接转化为一定格式的短链接,就像这样:

将长链接转换为短链接

但是它们又都可以让我们上传文件、图片、视频,并返回一个短链接。这样我们每次给别人发送图片之类的文件,就不必每次上传,也不必担心压缩。每次只要把这个链接发送给对方,让对方下载就行。

根据这个特性,我就在琢磨如果我们上传一个 HTML 文件会发生什么事?其结果让我喜出望外,当我们上传一个 HTML 文件到 CloudApp,我们就可以获得一个人人都能访问的 HTML 网页。我们还可以自定义这个网页的 CSS 也就是样式。

效果演示视频

也许你会问,这么做的意义是什么?我们就来简单地说一下。

HTML 的自适应优势

HTML 有一个优势,是自适应,也就是任何屏幕都可以用最佳的比例来呈现内容。

过去我们经常在微博上看到有些人因为微博过长而把内容转换成长图,这种长图只是在小屏幕的手机上才有不错的观看体验,而当对方的设备是电脑或者 iPad 这样的大屏设备,长图的体验就非常糟糕。而这个原因很简单,就是因为图片不能自适应。不能根据不同屏幕的比例来缩放大小。

但是我们却偶尔会有分享较长想法的冲动。这些想法不足以成文章,所以我们不想发到博客里;不希望示人,所以我们不想发到微博里……也有时候我们写东西就只是为了让另外一个人看,我们希望对方看的时候不管屏幕是什么都有很好的体验,而且对方看完之后我们还能够把这个东西删掉,手动地阅后即焚。

最简单的一个例子,就是我在《15 从 Pocket 中导出多篇文章》中使用的例子——把对方想要的文章做成个列表发给对方。

为了不超纲,当时我用的方法是 PDF,但是 PDF 和图片一样无法自适应,而且 iPhone 上的 PDF 文件没办法完全自定义格式,这点还不及图片。

而如果转化成 HTML 就不一样了,那就是直接转化成了一个网页,对方不管什么设备打开,看到的东西都是一致的。

而通过捷径做到这一点,只需要用「上传到 CloudApp」替换掉最后那个「制作 PDF」的操作:

操作替换

这样我们在运行捷径后会获得一个链接,你可以用「拷贝到剪贴板」直接把这个链接放到剪贴板里,更方便分享。

随后我们打开这个链接,看到的应该是纯代码的样式:

打开 CloudApp 操作生成的链接

不必担心,在右上角的菜单中,我们选择「View original file」,就可以打开一个新网页,内容是我们的列表:

获取列表页面的方法

这个网页的网址可以分享给任何人,比如现在大家就可以点击这里直接查看效果。如果你确定需要看到这个网页的人已经看到了这个网页,获取到了他应该获取的信息,你就可以在自己的 CloudApp 账户中直接删除这个文件。

用 CloudApp 做一个带样式的文章

了解了原理之后,我们来玩一些高级的。

在《16 用 Evernote 做摘抄》这一篇我们已经接触过了把 HTML 转化成富文本,见识到了它的效果:

HTML 转化成富文本的效果

那么我们现在可以用 CloudApp 做临时网页了,我们要怎么自定义这个网页的样式呢?

很简单。只要知道一点点 HTML 的结构,再找一些现成的开源的 CSS 主题即可。

我们先来看结构。

一个完整的带有样式的 HTML 文件,一般包含有 4 个部分:

<!DOCTYPE html>  
<html>  
<head>  
</head>  
<body>  
</body>  
</html>
  • 第一部分 <!DOCTYPE html>:必须写在最开头,而且没有对应的 </!DOCTYPE html> 结尾。
  • 第二部分 <html></html>,它会包住第三部分 <head></head> 和第四部分 <body></body>
  • 第三部分 <head></head>,我们的 CSS 样式就放在这里。
  • 第四部分 <body></body>,这里用来放正文。

现在来说明一下在捷径里应该如何拆解这些部分,让我们每次只考虑正文,不必考虑其它就能生成一个带样式的网页。

我们再看一下一个 HTML 的基本结构(加入 CSS 的部分):

<!DOCTYPE html>  
<html>  
<head>  
<style>  
这之间是 CSS 代码  
</style>  
</head>  
<body>  
</body>  
</html>

因为我们要考虑的只有正文,所以样式的部分,也就是 CSS 代码所在的 <head></head> 部分可以是固定的。所以我们可以直接把 <body> 之上的所有部分放在一个「文本」操作中,这是我们在捷径中的 HTML 的「头」的部分:

HTML 中「头」的部分

随后我们再来看「尾」的部分,这部分其实就只剩下了 </body> 和 </html> 这两行了:

HTML 中「尾」的部分

随后我们看正文的部分。也就是在 <body> 和 </body> 之间的部分。

这部分最终也需要被转化成 HTML 代码,因为我们最后是要把一个 HTML 文件上传到 CloudApp。

但我们肯定又不想写 HTML 代码,我们想用 Markdown 语法把想写的东西写出来。换句话说,我们想写 Markdown,然后转化成 HTML。这时候,我们在捷径里,需要转换两层格式:

在捷径中将 Markdown 转化为 HTML
  1. 先用「从 Markdown 制作多信息文本」把 Markdown 转化成富文本。
  2. 再用「从多信息文本制作 HTML」把由 Markdown 转化来的富文本再转化成 HTML。

这样我们就完成了正文部分。

最后我们把 HMTL 文件的「头」、「尾」和「正文」都放在同一个「文本」操作中,就可以把它上传到 CloudApp 了。

捷径下载:上传少数派风格的 HTML 到 CloudApp

最后要说一下这个捷径插图的问题。

这个捷径最终是希望能够根据文章生成网页的,而且在用 HTML。所以理论上它应该可以插图。事实上如果不嫌麻烦的话也可以插图,我们后面也会教如何用捷径上传图片到图床。

但是插入图片这件事很难批量自动化,一般都是手动的,这样会大大提高捷径的复杂度,但效果并没有那么明显。

从节省时间方面来说,单纯做到文本转网页是性价比最高的。

附:一些公开的 CSS 模板

在这篇文章中我们用的 CSS 模板是少数派过去的格式,在网上还有大量免费的 CSS 模板可供下载,我从中选了一些比较常用的:CSS 模板下载