Hum
01月17日
一个优雅地分享本地文本的方法
| 本文为付费栏目文章，您已订阅，可阅读全文 |
一两年前我写了些东西想让我妈看一眼，写完了就在想怎么能做到 1）她那边用什么设备看都能看得舒服，2）不发布到他人可见的网络平台。当时心里想了几个传统思路都很快被我否掉了：
- 纯文本没有格式，看起来非常糟糕，配图还没办法处理；
- PDF 会有设备显示效果的差异，大屏幕上生产的 PDF 在 iPhone 上看会很难受；
- 拼长图的问题和 PDF 一样，有设备限制……
最简单的办法是生成一个自适应的网页，但要这么做的话，要么是发布到一个博客平台上，要么甚至要自己搭个什么才行，为了发点儿东西没必要这么大动干戈。
当时的最终手段是用 Evernote 分享笔记。这个方法虽然可行但自定义程度不高，比如说我想按自己的思路改个 CSS 就无法做到。
后来，我发现 CloudApp 可以上传 HTML 文件，还能根据 HTML 文件生成网页。做到了对方用什么设备都能看得舒服，而且我这里还可以统计已读数。
效果演示
后来我就琢磨怎么把整个过程也能在 iOS 上实现，恰好 Workflow 里内置了 CloudApp 的动作可以做到。不过就算不用 CloudApp，用其它公开 API 的上传服务和短链接服务应该也是没问题的。还是那句话：重点是思路，思路明白了其实就是换换工具的事。
思路整理
- 写好 Markdown；
- 将 Markdown 保存为 HTML（一般的编辑器都可以）；
- 将 HTML 文件上传到 CloudApp；
- 在 CloudApp 中，打开 HTML 文件的「原文件」的链接；
- 将第四步中打开的网页的链接做成短链接。
macOS 上的实现方法
第一步：生成 HTML
基本上现在 macOS 上的 Markdown 编辑器都可以做到导出 HTML，拿 Bear 来举例子：右上角的 ⓘ 中有多种分享的格式，其中一个是 HTML，把它从界面中拖出来就会在目标位置生成一个带有 Bear 风格的 HTML 文件。
从 Bear 导出 HTML
第二步：上传 HTML 到 CloudApp
接下来我们把这个 HTML 文件上传到 CloudApp，看到的结果会是这样：
第一次上传 HTML 到 CloudApp 后返回的网页
第三步：查看原文件
接下来，选择右上角菜单按钮中的 View original file，就会出现按照我们的 HTML 生成的文章页面：
View Original File
（用 CloudApp 就是因为这个原因，其它的服务没有这个「查看原文件」的功能）
第四步：将新网页的链接再次生成短链接
这个原文件的真实链接其实比较复杂，有可能带有中文和全角字符，而且看起来很「不雅」，和我们的初衷不符。所以下一步，我们把这个网页的链接保存下来，再使用 CloudApp、Droplr 或者其它可以追踪点击数的服务生成一个短链接就大功告成了：
使用 CloudApp 上传链接为短链接
随后我们把这个短链接分享给对方即可，不管是谁都可以在他的设备上非常舒服地看这些文字。
自适应的排版
在 macOS 上为 HTML 添加自定义样式
为了做到最好的效果，我们还需要为 HTML 配上一个自定义的样式，也就是给它配一个自定义的 CSS。在这顺便简单科普一下 CSS：
CSS 的全写是 Cascading Style Sheets，中文译名是「层叠样式表」（但大家一般都会用 CSS），是一种非常容易上手的编程语言。CSS 决定了一个网页的样式，或者用大家更容易理解的说法是「主题」，像是标题、列表、引用、加粗之类特殊格式的样式都归 CSS 管。我们在 TextEditor 这样的工具里写作的时候，看到的文本就是没有样式的。而当我们把文章上传到了各种博客平台就能看到不同的样式，这就是因为这些平台用的 CSS 不同。每个网页都是代码写出来的，一个网页所有代码中的 CSS 部分是独立的，我们可以根据自己的喜欢使用不同的 CSS 代码，可以理解为「换主题」、「换皮肤」…
Marked 2 和大部分 Markdown 编辑器，都可以让我们把用 Markdown 语法写好的文章带着 CSS 格式地将 HTML 文件导出来。
我们在这里以 Marked 2 举例。Marked 2 里内置了 9 个不同的 CSS 文件，也就是 9 个不同的主题，如果这 9 个主题我们都不喜欢，我们可以添加自己喜欢的 CSS 文件（我在文中使用的是老版少数派的 CSS 文件）：
在 Marked 2 的自定义 CSS 文件路径为：
~/Library/Containers/com.brettterpstra.marked2/Data/Library/Application Support/Marked 2/Custom CSS
我们把 CSS 文件放到这个路径下，再打开 Marked 2 的设置界面，在 Style 这个选项下的 Custom CSS 部分选择 +，之后通过 ⇧Shift-⌘Command-G，把上面的路径粘贴进去，就能看到我们刚刚添加的自定义 CSS 文件：
为 Marked 2 添加自定义 CSS 文件
添加完自定义 CSS 后，我们就可以在使用 Marked 2 浏览 Markdown 文件时都使用这个自定义的主题，这时候导出的 HTML，就包含了我们自定义的 CSS 文件：
保存带有 CSS 样式的 HTML
接下来和简单方法中的步骤一样，先把这个 HTML 上传到 CloudApp 里，CloudApp 会返回一个链接，把这个链接
iOS 上的实现方法
和在 macOS 上一样，在 iOS 上同样有简单和复杂两套办法来实现这个流程，简单和复杂的区别同样是能否自定义 CSS。
在 iOS 上可以通过 Workflow 做到自定义 CSS ，是个比较有意思，也可以利用到很多场景的技巧，感兴趣的别错过。
简单方法
第一步：生成 HTML
iOS 上的 Bear 也可以直接导出带有 Bear 风格的 HTML，效果看起来其实还不差：
Bear for iOS 导出 HTML
第二步：上传 HTML 到 CloudApp
一般的 Markdown 编辑器导出 HTML 后，都应该会有一个分享按钮让你进一步处理这个文件。Bear 里这个按钮在界面的右上角，点它触发 Share Sheet 之后可以直接用 Workflow（下载链接）把这个 HTML 文件上传到 CloudApp。
第三步：查看原文件
上传过后的步骤一样，需要在生成后的网页里，在右上角的菜单中选择 View original file：
在 iOS 上查看原文件
第四步：将新网页的链接再次生成短链接
这一步和 macOS 不同，因为 Workflow 中的 CloudApp 动作不能生成短链接，而且 CloudApp 这家公司把老的 iOS App 下架了，新的还没有上架。所以，最简单的操作是使用另一个服务 Droplr，它虽然不在 Workflow 里，但是有 iOS App，直接通过 Share Sheet 就能为一个网页做出短链接：
通过 Droplr 生成新网页的短链接
在 iOS 上为 HTML 添加自定义样式
在 iOS 为 HTML 添加自定义的样式应该有很多，但在我们这个流程里，因为要用到 Workflow，所以我讲一个通过 Workflow 添加样式的办法。
Workflow 概览
写完 Markdown 之后，全选复制 Markdown 文本，然后运行这个 Workflow 就能把带有自定义样式的 HTML 上传到 CloudApp 了。
前面说过，在一个 HTML 文件中，决定样式的 CSS 的代码是和正文独立的。说得更准确一点的话，是 CSS 会存在于 HTML 的 <head> 这个 Tag 之下，而正文是在 <body> 这个 Tag 之下。
根据这个特性，我们只要在 Workflow 里，事先把自定义的主题放在 <head> 的部分：
把 CSS 放在 head 的位置
如果你要修改 CSS，不要在这个 Text 框里做调整。我建议先把这个部分整个复制出来，然后把你自定义的 CSS 覆盖到原有的 CSS 部分，再整体粘贴回去。
Ending
最后再总结一下整个步骤：
- 先写 Markdown；
- 将 Markdown 保存为 HTML（一般的编辑器都可以）；
- 如果要自定义 CSS，要提前做好配置；
- 将 HTML 文件上传到 CloudApp（因为只有它可以查看原文件）；
- 在 CloudApp 中，打开 HTML 文件的「原文件」的链接；
- 将第四步中打开的网页的链接做成短链接（服务按各位的喜欢）。
不知道各位有这个「临时分享文本给他人」的需求时是怎么实现的，我这个方法其实也只是从我手边的工具里寻找的组合，如果你有完全不同的思路，或者可以用其它更便宜或者更简单的工具实现，欢迎在评论里分享你的想法。
上一期
下一期
精选评论（2） 我的评论
