关键字: 文章配图、Mac OS X、命令行、截屏、脚本
有点标题党的感觉，其实这是一篇讲解如何使用命令行自定义文字并自动截屏制作文章配图的干货分享。
主编建议，如果可能的话，请为文章配图
昨天在简书上随意浏览文章时，看到『首页投稿』主编一鸣的文章《文章人气低？怪排版咯》，深刻的体会到了严谨的写作者不一定能写出高人气的文章，但能写出高人气文章的作者具备的优良特质中肯定不止是严谨。
从半年起团队内部就强推 markdown 语法写作，追求简洁明了的表达，与一鸣老师文章的中心思想大概相仿，但浅了一个层次。若使用富文本编辑器写出的文章排版都给人脏乱的感觉，那么使用 markdown 语法写作也无力回天，简洁就是 mardkown 语法的属性，不以学会如何排版为目的而苦苦寻找更人性化的编辑器的行为都在绕圈子、走弯路。
若学习文章的写作排版算是内功修炼，其实一鸣老师的文章已经算是师傅领进了门，修行深浅要看各自的悟性与对自己的较劲程度了。
文章中还提到一点，那就是配图，在『首页投稿』公告中明文写着尽量配图，寓意很明显，这也是为了改善简书平台的阅读体验，予写作者及阅读者都很善意。
4. 如果可能的话，配张图。
简书改版后的文章列表页面会显示文章中的缩略图，为了保证网站整体的美观，我们建议您为自己的文章配张图。
就像上文提到的能写出爆文的写作者肯定具备获取品质优质、符合文章中心主题配图的能力，或享受生活随拍点滴趣事，或打开 PS 等软件作图渲染，或从资源库中简单筛选，言而总之，高配的人生是没有极限的。
该文是为低配写作者提供一些思路，从纯文字分享或随便找图的状态中提升到写文章可以轻松配图，而且图片内容至少能与文章有些关联。文中的技巧可以直接拿去用当然最好，若由于电脑系统等问题无法操作那就权当提供了一种解决文章配图问题的思路。
解决配图难的简单解决思路
后面会详细讲解如何制作图片的命令用法，最后会提供完整的一键运行生成批量图片的脚本代码。
先摊开说明一下如何有信心确保制作的图片内容会与文章有关联，那就是每位作者写出的文字都包含的属性：日期、心情、地点、天气、亲友......而这个属性又可以使用文字，准确的说是使用单词组合表达出来，那么把这个单词组合按自己的创意打印出来，截取合适的屏幕区域就制作好了文章配图，就这么简单。
简单的事件想做好并不一定很轻松，下面开始讲解要用到的命令。
命令行操作：文字打印、日期输出、截屏
快捷键 Command + 空格 打开系统搜索 termainal 或 iterm 回车就会启动命令行窗口。
打印文字仅使用 figlet 命令，类似功能的命令还有 toilet banner 等，该命令最简单的用法就是直接敲入想打印的文字，比如程序猿入门学习时的常规输出。
$ figlet hello world
_ _ _ _ _
| |__ ___| | | ___ __ _____ _ __| | __| |
| '_ \ / _ \ | |/ _ \ \ \ /\ / / _ \| '__| |/ _` |
| | | | __/ | | (_) | \ V V / (_) | | | | (_| |
|_| |_|\___|_|_|\___/ \_/\_/ \___/|_| |_|\__,_|
figlet 命令支持的参数很多，我们只使用两个参数，都是为了指定想打印文字的�字体格式。
# 查看 figlet 支持的字体库路径
$ figlet -I2
/usr/local/Cellar/figlet/2.2.5/share/figlet/fonts
# 查看字体库中的字体名称
$ ls `figlet -I2 ` | grep flf | cut -d '.' -f 1
3-d
3x5
...
weird
whimsy
# figlet -d fonts_path -f font_name output
$ figlet -d `figlet -I2` -f roman hello
oooo oooo oooo
`888 `888 `888
888 .oo. .ooooo. 888 888 .ooooo.
888P"Y88b d88' `88b 888 888 d88' `88b
888 888 888ooo888 888 888 888 888
888 888 888 .o 888 888 888 888
o888o o888o `Y8bod8P' o888o o888o `Y8bod8P'
其实这一步已经完成了文章配图解决方案里最重要的环节，就像制造航空母舰前期的炼钢阶段，只能说很重要但还有许多可以改善使用体验的地方。
如果你查看那个字体库会发现有太多的字体了，下面的脚本中列举了十几种适合数字、字母单词打印输出的推荐字体。该脚本的作用就是把想打印的文字使用推荐的字体遍历输出一遍，供各位继续筛选最佳的字体。
#!/usr/bin/env bash
# filename: list.sh
# usage:
# bash list.sh
array=(starwars roman puffy stop trek speed smisome1 sblood rowancap rounded o8 nancyj-fancy)
text="$1"
test -z "$1" && text="hello"
for font in "${array[@]}"
do
echo -e "\n${font}:\n"
echo "${text}" | figlet -d `figlet -I2` -f ${font} -k
done
上面的代码不可以直接运行，需要写入脚本文件 list.sh， 在命令行中调用运行它。
# 未提供打印文字，就打印默认文字 "hello"
$ bash list.sh
$ bash list.sh jandy
打印操作介绍后，接下来讲解一下与所有地球人息息相关的属性：日期，可能是举国欢庆的日期、亲朋好友的生日、发布文章的日期.....
$ date
2017年 1月 7日 星期六 10时22分01秒 CST
# 指定日期格式
$ date "+%y%m%d"
170107
$ date "+%Y%m%d"
20170107
# 日期平移，往后推一天
$ date -v +1d "+%y%m%d"
170108
# 日期平移，往前推一天
$ date -v -1d "+%y%m%d"
170106
下面使用 date 与 figlet 命令组合模拟打印一个标题。
#!/usr/bin/env bash
# filename: banner.sh
# usage:
# bash banner.sh
timestamp=$(date "+%y%m%d")
echo "${timestamp}" | figlet -d `figlet -I2` -f starwars -k
echo "记录 - 陪胎 第74日「上海」"
运行效果如下：
$ bash banner.sh
__ ______ ___ __ ___ ______
/_ | |____ | / _ \ /_ | / _ \ |____ |
| | / / | | | | | | | | | | / /
| | / / | | | | | | | | | | / /
| | / / | |_| | | | | |_| | / /
|_| /_/ \___/ |_| \___/ /_/
记录 - 陪胎 第74日「上海」
如果时间很紧急，可以直接使用 Mac 截屏的快捷键 Command + Shift + 4 截取合适的屏幕区域，截图会自动保存在桌面，直接拖拽到编辑中作文章配图即可。
时间充足又足够 “懒” 的人可以继续阅读后续操作，看能 “懒” 出什么境界。
无论使用触摸板还是拖动鼠标截取屏幕部分区域时，要么左上角定位不准，要么右下角长宽不适，那么如何避免呢？使用软件修图算是暴力解法，如果有这么“勤快”就不会有写这篇笔记的初衷了。
鼠标可以做的任何操作，逻辑上都可以通过命令行现实，截屏的操作自然也不能例外，下面介绍截屏命令 screencapture 的最基本用法。
# 截取全屏，并预览
$ screencapture the_whole_screen.png
$ open the_whole_screen.png
# 打开当前目录，更直观
$ open ./
文章配图需要突出要表达的内容，我们只需要截取定义打印文字的区域块，下面来介绍下如何截取需要的那部分屏幕。
截取部分屏幕需要传三个信息，一个点及向右延伸的宽度、向下延伸的高度，而一个点需要经纬度，即共四个参数。屏幕左上角就是起点 (0, 0)，而整个屏幕不过是象限谱中的第三象限。
为了便于计算，建议把命令窗口紧贴左上角，更简单的做法是进入全屏模式，记得把状态栏的高度考虑在内，高度与宽度要一点点试错。
# usage: screencapture [-icMPmwsWxSCUtoa] [files]
# -R<x,y,w,h> capture screen rect
# screencapture -R<left_top_x, left_top_y, width, height> file.png
# (0, 22) 为起点，截取宽度为 700、高度为 350 的屏幕
$ screencapture -R0,22,700,350 700x350.png
现在可以来一套打印文本并自动截取屏的组合拳。
#!/usr/bin/env bash
# filename: banner.sh
# usage:
# bash banner.sh
clear
timestamp=$(date "+%y%m%d")
echo "${timestamp}" | figlet -d `figlet -I2` -f starwars -k
echo "记录 - 陪胎 第74日「上海」"
screencapture -R0,22,900,300 170107.png
执行一下看效果如何：
$ bash banner.sh
$ open 170107.png
170107.png
"懒" 就是累一次，就可以轻松好多天
有一种悲伤就是有一颗想写作的心，却没有输出干货的能力，只好力所能及地记录一下生活中的点点滴滴，可以理解为日记的公开版，标题格式很简单 人生阶段 第N日「地点」。
每天在简书要发布时，都要去拷贝前一天的记录标题来修改，此类的记录笔记使用统一的标题、统一的配图，若一次能生成很多天的标题与配图，想想就很美。
#!/usr/bin/env bash
# filename: figlet-1.sh
# usage:
# bash figlet-1.sh
i=0
daynum=74
foldername="covers-1/"
mkdir -p "${foldername}"
while [[ $i -lt 30 ]]
do
clear
timestamp=$(date -v +${i}d "+ %y%m%d")
echo "${timestamp}" | figlet -d `figlet -I2` -f starwars -k
echo -e "\t 记录 - 陪胎 第${daynum}日「上海」\n\n"
sleep 1
imagename=$(date -v +${i}d '+%y%m%d')
screencapture -R0,22,900,300 "${foldername}/${imagename}.png"
let i+=1
let daynum+=1
done
-
mkdir创建文件夹，用来放置批量截取的图片 -
clear命令用来清理命令界面 -
sleep N串行堵塞，延迟 N 秒，避免几个命令间隔太短，保证截屏画质 -
whilelet涉及到计算、语法结构等，可忽略 - 为了左边距，为了文字对齐，请自行调整代码输出字符串中的空格数量
上述脚本运行的结果就是会创建文件夹 covers-1，在该文件夹内有未来 30 天我记录生活笔记的配图；存入草稿，需要时就从私密笔记里打开存入本地，妈妈再不也用担心我记录生活文字的配图问题了。
配图&标题 库存列表
下面这个脚本是用来生成心情相关的配图。
#!/usr/bin/env bash
# filename: figlet-2.sh
# usage:
# bash figlet-2.sh
keywords=(Happy Sorry Crazy Bored Tired Angry)
keywords[6]="Da Ka"
folder="covers-2/"
mkdir -p "${folder}"
for index in "${!keywords[@]}"
do
clear
keyword=${keywords[$index]}
timestamp=$(date "+%y%m%d")
echo " ${keyword}" | figlet -d `figlet -I2` -f puffy -k
echo -e " ${timestamp} 打卡\n\n"
sleep 1
screencapture -R0,22,700,350 "${folder}/${index}.png"
done
�心情也可以打卡
写在最后，屏幕都可以使用命令截取，执行命令后输出的内容自然也可以直接拷贝至系统粘贴板上，省得鼠标选中复制等操作。
$ figlet hello | pbcopy
# 定位到编辑器对应位置，直接 `Command + V`
有表达不清楚的地方，或命令用法解释不到位的地方，或运行结果不是预期效果时，或有想法但无从下手时，欢迎反馈，会第一时间回复。
花絮，雨朦朦的家庭聚会
昨天中午看到一鸣老师的文章，傍晚时产生关于脚本自动生成配图的想法，一鼓作气在睡前把脚本命令搞定。
今日与老婆大人来同事家进行家庭聚会，中午包的饺子，吃过饭后，他们一群人在玩牌，输的罚做俯卧撑，我借口在卧室整理笔记。
老婆大人有孕在身，输了自然要唤我去替罚俯卧撑，于是在客厅地面的俯卧撑与卧室书桌的码字间交错，手臂酸了也不知是因俯卧撑做多了还是码字太慢耗得太久了。
网友评论