640?wx_fmt=png&tp=webp&wxfrom=5

写在前面

  • 印象笔记：很多人都接触过印象笔记，这是一款用来收集整理的利器。作为一款众所周知的产品，相信大多数人都感受过它的强大。

  • workflow：这是一款手机端定制工作流的强大的app，不断扩展的组件库和系统api调用，让它可以拥有越来越强大的自动化处理能力。我们完全可以把自己日常生活中的一些繁琐的流程简化成一个工作流。如果看完本文章你对定制工作流感兴趣，推荐少数派workflow入门系列文章。

碎片知识收集为什么困难

　　想象一下，你在某篇公众号文章中发现了某段有价值的东西，如果你想收集起来，有时候不得不中断阅读的过程，打开某个可以收藏文字的app(如印象笔记)，新建一个文章粘贴保存。你也可以等到阅读完整篇文章再进行收集，但有的文章太长，极大可能你就不想再浏览一遍再专门进行收集了。 
　　知识零散地分布在众多的平台，今天在微信，明天在知乎。这个牛逼的作者在豆瓣风声水起，那个大神却在简书里侃侃而谈。统一收集绝对是痛点，你可以分别在他们所在的平台收藏他们的文章，但不可避免地你需要管理多个平台的知识库。他们有很多经验与你分享，你当然很有必要收集起来，所以简化收集过程并将知识统一纳入我们惯用的空间进行储存是很重要的。

简要介绍下我制作的这个workflow

特点

  1. 任意地方收集你的知识

  2. 通过下拉通知栏快捷操作

  3. 几乎不影响阅读体验

  4. 显示摘录时间

  5. 印象笔记排版美观

使用

  • 方式一

  1. 拷贝文章中某段某句

  2. 点击下拉通知栏workflow收集项

  3. 关闭通知栏继续阅读

标准版640压缩.gif

 

  • 方式二（感谢微信好友@聪聪 的补充）

  1. 选中文章中某段某句

  2. 点击共享

  3. 选择run workflow

  4. 执行完毕自动返回继续阅读

tmpdir--16_8_25_13_29_58.jpg

　　第一次使用方式二的时候，点击共享时需要按以下步骤配置出run workflow的选项。

IMG_2392.JPG

扩展使用

　　上面仅仅只是演示了一个最简单的版本，workflow还可以做到更多，总结出属于自己的工作流使工作事半功倍。 
　　如果基于上面的版本进行扩展，你会想到其他什么方案？

  • 贴标签

标签版640压缩.gif

 

  • 加注释

注释版640压缩.gif

  • 多文章存储

　　还有一种我已经实现的扩展是可以利用多个文章来分别存储，这种实现跟贴标签类似，只不过贴标签是在同一个文章里，有时候内容多了可能并不方便管理，多个文章也就相当于提前分好了类别。

最终效果图

IMG_2366.PNG

分享制作过程

　　好了，看完了上面的演示，接下来讲下具体的制作过程，让更多喜欢折腾的人也能自己动起手来，然后突然发现这么一折腾还能产生一些不错的想法，再一起交流促进，这样就再好不过了。

先讲下两者大概的分工

  • workflow：主要的工作是对文字内容进行各种组装，如格式化时间、自定义html修饰文本、生成富文本等等。它最后输出一段富文本到印象笔记，传输到印象笔记的内容会按照两个参数来决定将内容添加到哪个文章末尾来进行储存，这个后面会详讲。
  • 印象笔记：印象笔记其实并没有做太多的事情，它在这里最大的好处是可以在笔记内显示网页。当然，它庞大的用户基数和优良的体验也让它成为了知识整理存放的不二之选。

解析workflow各个流程

　　在说清楚各个流程都具体干了哪些事情之前，先大概讲下workflow这类工作流应用的工作理念，它原则上是给你提供了一系列动作（Action），主要分成两大类，一类是系统级别的各种开放式接口，一类是应用级别各个应用特殊开发的URL SCHEMES，在workflow中已经被封装成一个个动作，也配有专门的解释，不需要用户关心具体的URL SCHEMES代码是什么，图形化的界面方便更多用户使用。少数派有一些很优秀的文章专门介绍URL SCHEMES，推荐大家阅读下少数派特约作者写的URL Schemes使用详解。

　　通过这一系统的动作组合往往就可以实现很多新奇的工作流，官方和很多第三方平台提供了许多定制好的工作流，只不过多数与我们自身并不十分相符，所以我更愿意尝试去总结出自己平常的一些操作。当然你并不能通过workflow实现所有你想得到的idea，但尝试去总结打造，过程仍然是相当有趣的。

1. 格式化时间显示

    动作流程：

  • 获取系统当前时间  >>> 
  • 自定义格式化  >>> 
  • 保存格式化后时间字符串  >>> 

2016-08-24 235836.jpg

　　这一步骤的重点，在自定义时间格式上，我们只需要分别对应上各个单位对应的英文字母，中间加上我们想显示的连接符就ok了。

经过这一步骤格式化之后，我们就可以获得需要的时间显示了。

2016-08-25 160928.png

2. 添加注释处理

    动作流程：

  • 注释开关  >>> 
  • 判断是否进行该动作  >>> 
  • 获取用户输入  >>> 
  • 保存用户输入  >>> 
  • 拼接成HTML代码  >>> 
  • 保存拼接结果  >>> 
<table style="font-size:11pt;margin-top:0.5em;">
  <tbody>
    <tr>
      <td style="color:#a9a9a9;padding-right:0.5em;vertical-align:top;width:2px;">
        注
      </td>
      <td style="padding-left:0.5em;width:10000px;vertical-align:top;color:#555555;border-left:1px solid #a9a9a9;">
        这是一篇workflow评测文
      </td>
    </tr>
  </tbody>
</table>

2016-08-25 093957.png

　　这里为了解析的需要将所有操作都放在一起，所以特意添加多一个注释开关(将开关的输入改为true既可打开)，我平时使用会将这注释与下文即将提到的贴标签等功能分别独立成不同的workflow，因为有些操作需要中断阅读跳转到workflow才能完成，比如添加注释。所以分成多个workflow按需操作是种不错的选择。

3. 贴标签处理

    动作流程：

  • 标签开关  >>> 
  • 判断是否进行该动作  >>> 
  • 用户选择列表某一标签  >>> 
  • 保存该标签  >>> 
  • 拼接成HTML代码  >>> 
  • 保存拼接结果  >>> 
<span style="padding: 1px 6px;border-radius: 10px;background-color: rgb(237,108,0);color: white;">
  观点
</span>

2016-08-25 171657.png

　　这里并没有太大的难点，标签列表需要提前添加好，目前暂没有提供多选标签的操作，想动动手的小伙伴们可以自己试试看。

4. 拼接成完整网页代码

　　将上述的时间，注释结果，标签结果拼接成一整块代码，对应生成到印象笔记效果图中的一项。以下是最终生成的网页代码，可以看到上面生成的片段代码都被拼凑到一起了。

2016-08-25 0948391.jpg

<div style="padding-top:1em; padding-bottom:1em;border-bottom:1px dotted #d3d3d3;">
    <div style="font-size:10pt; margin-bottom:1em;padding-left: 8px;border-left: 5px solid rgb(237,108,0);color:#888888;">
        16-08-25 16:15:16<span
            style="padding: 1px 6px;border-radius: 10px;background-color: rgb(237,108,0);color: white;">精进</span></div>
    <div style="font-size:12pt;">workflow+印象笔记，定制高效碎片知识管理工作流</div>
    <table style="font-size:11pt;margin-top:0.5em;">
        <tbody>
        <tr>
            <td style="color:#a9a9a9;padding-right:0.5em;vertical-align:top;width:2px;">注</td>
            <td style="padding-left:0.5em;width:10000px;vertical-align:top;color:#555555;border-left:1px solid #a9a9a9;">
                这是一篇workflow评测文
            </td>
        </tr>
        </tbody>
    </table>
</div>

5. 编译网页代码为富文本

　　上一步拼接好的完整代码会原原本本地传入这个动作中，这是一个重要的动作，将传入的网页代码转化为富文本，经过这一步转化，原来看起来很没有章法的代码就变成拥有漂亮格式的富文本了。

2016-08-25 09483912.jpg

　　看吧，这效果应该还是不错的，如果你是一名前端开发者，那就更有你的发挥空间了，你完全可以定制出自己喜欢的排版风格。不是专业的小伙伴可以评论出来，我会根据实际情况来帮你们实现。

2016-08-25 161026.png

6. 添加至印象笔记指定文章

　　这一步应该说是整个workflow的关键动作，这是印象笔记提供的一个可以在指定文章末尾添加内容的动作。第一个参数Note Title顾名思义就是指定文章的名称，第二个参数In Notebook是指定文章所在的笔记本名。

2016-08-25 094839123.jpg

　　注1：这里的指定文章和指定笔记本都是需要印象笔记或者国际版中实际存在的，两个参数都没有中英文限制，只要实际存在既可。

　　注2：这个动作是通过网络请求添加至印象笔记的，所以在使用过程中，你切换到了印象笔记有时候并不能马上看到结果，是因为这时候印象笔记还没来得及同步网络添加的笔记数据，这种情况下一般手动同步一下就可以看到了。

如何在自己的手机上(IOS)体验

  1. 从app store获取workflow应用，现价￥18

  2. 在印象笔记建好一个“Note”的笔记本，并在该笔记本下新建一个“MainPanel”的文章

  3. 点击workflow分享链接在safari打开(会提示在workflow应用内打开)

  4. 授权印象笔记后即可使用

各个体验版本

640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=

写在结尾

　　作为一名喜欢瞎折腾的技术宅，平时实在没有太多的好料可以拿出来分享，懒是最主要一个原因，其次是不善于总结。保持输出是一个好的选择也是一个好的习惯，希望自己可以保持每隔一段时间的输出，与诸君共勉。