静态博客一键贴图

发表于

##引子

在Mac下，使用Markdown写博客，最蛋疼的一点就是贴图的问题。

通常我们在文章中加入一张图，要做如下操作：

  1. 随便找个工具或者用系统工具截图；
  2. 将截图存储到桌面或者随便什么地方；
  3. 修改截图文件名；
  4. 将截图上传到图床或者云空间去；
  5. 在文档中写上图片的Markdown标签，指向图片；
  6. 如果图床又前缀，还要相应的修改图片url

一个字，烦躁的很！如果一篇文章中涉及到多张图片，来源多样，那更加烦不胜烦累觉不爱。

这里参考了之前的两篇文章，使用几个知识点，做到两组快捷键完成以上操作。

##准备工具

「这里使用的素材，没有特别说明的，都是Mac下的」

###Alfred

Mac神器，这里不再过多介绍。

实现这个逻辑需要使用到Alfred的Workflow，所以，需要用点软妹币拿下PowerPack。

###云存储平台

这里选择qiniu，国内一款比较不错的平台，重点是平台工具支持的比较全面。

##开始作业

###确定目录

这个图片存储的目录，非常重要，是本机写入和云端同步的必需。

###搞定存储

注册qiuniu帐号，新建空间，获取开发者的key, 在命令行跑起来。（这个时候会用到之前的目录）

###编写Alfred

  1. 先呼出Alfred的管理界面：

  2. 在workflow下面的+添加一个空白workflow（Blank）

  3. 配置界面输入自己的信息

  4. 新建一个Trigger–> HotKey 这里选择了Ctrl+Cmd+V
  5. 新建一个Action–> Run Script
  6. 贴入以下代码段：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
    property fileTypes : {¬
    {«class PNGf», ".png"}, ¬
    {JPEG picture, ".jpg"}}
on getType() --判断剪贴板中的数据类型，暂时只支持png和jpg，优先用png
    repeat with aType in fileTypes
        repeat with theInfo in (clipboard info)
            if (first item of theInfo) is equal to (first item of aType) then return aType
        end repeat
    end repeat
    return missing value
end getType
set theType to getType()
if theType is not missing value then
    set filePath to "/Users/chentao/Pictures/pics/" --这里换成你自己放置图片的路径
    set fileName to do shell script "date \"+%Y%m%d%H%M%S\" | md5" --用当前时间的md5值做文件名
    if fileName does not end with (second item of theType) then set fileName to (fileName & second item of theType as text)
    set markdownUrl to "![](http://chentaohome.qiniudn.com/" & fileName & ")" --这里如果没有用到图床，就把前面前缀去掉，用到的话换成你自己图床的url
    set filePath to filePath & fileName
    try
        set imageFile to (open for access filePath with write permission)
        set eof imageFile to 0
        write (the clipboard as (first item of theType)) to imageFile -- as whatever
        close access imageFile
        set the clipboard to markdownUrl
        try
            tell application "System Events"
                keystroke "v" using command down
            end tell
        end try
    on error
        try
            close access imageFile
        end try
        return ""
    end try
else
    return ""
end if
  1. language选择/usr/bin/osascript
  2. 将markdownUrl改成你的七牛空间地址，如果你的空间名为test，则改为http://test.qiniudn.com/

##DONE
到此为止，大功告成。

试验一下：

  • 使用QQ截图或者系统截图将图片截到剪贴板

  • 将光标点到需要插入图片的位置，按快捷键CTL + CMD + V（也可以自己在Alfred中自定义其它快捷键），会看到在文章中多出了一行类似下面的东西

    ![](http://chentaohome.qiniudn.com/4304843053ab5b333a9dece9490257fb.png)

说明成功了，如果你使用的是Mou这类可以实时预览的编辑器，这时候就可以在右侧窗口看到图片咯。