作者 谢恩铭 转载请注明出处
公众号「程序员联盟」（微信号：ProgrammerLeague ）
原文：http://www.jianshu.com/p/04481bd05346
《Linux探索之旅》全系列
内容简介
- 前言
- 成果展示
- 生成缩略图
- 我的答案
- 可能的优化
- 第五部分第八课预告
1. 前言
今天的封面图片是不是比较搞笑？哈哈... Linux Freedom （Linux 自由）。
我第一次看到这张 Linux 企鹅版自由女神像的时候，笑不动了。
好吧，我笑点低...
上一课 Linux探索之旅 | 第五部分第六课：一朝Shell函数倾，斗转星移任我行 中我们学习了 Shell 中很关键的知识点 ：函数。
既然我们已经基本学完了 Shell 的基础知识，是时候实战演练一下了。
在这个练习中，我们将会综合运用之前学习过的一些 Shell 和 Linux 知识点。别忘了，我们在 Shell 程序中是可以调用 Linux 命令的，例如：
ls
cp
mv
grep
cut
mkdir
sort
还有 「管道、流、重定向」 （ Linux探索之旅 | 第三部分第二课：流、管道、重定向，三管齐下 ）等等。
你也许还会在使用一些命令时忘了如何用，那你可以查一下命令的使用手册 （ Linux探索之旅 | 第二部分第八课：RTFM 阅读那该死的手册 ）。
本练习需要实现的项目是：
创建一个网页，这个网页展示一系列图片 （有点像一个画廊，Gallery ），而展示的图片是存放在本地的一个文件夹里的。
说起来总比做起来简单，你将会发现这是个不小的挑战。
话休絮烦，我们开始吧。
2. 成果展示
首先，我们给脚本文件起名叫 gallery.sh （gallery 是英语「画廊」的意思）
对于这个练习的第一个版本，我们暂时把脚本文件放在一个目录中，这个目录包含了要展示的所有图片。
这个脚本会为我们生成一个 HTML 文件，这个 HTML 文件就是一个网页文件，用来展示这些图片。
因此，这个脚本需要依次做以下的事：
-
根据目录中的每张图片，生成对应缩略图。
-
生成一个 HTML 文件，把缩略图都插入其中。
-
给每张缩略图绑定一个链接，会链接到原始图片。
为了写出这个脚本，需要有一些前端的网络知识，比如 HTML。
如果对 Web 开发不是很了解，可以先去看看我的 《 Web 探索之旅 》这个电子书。
当然了，如果你没有前端的知识也不要紧，跟着我写就可以了。
给出一个 HTML5 的基本的图片例子代码：
<!DOCTYPE html>
<html>
<body>
<h2>Spectacular Mountain</h2>
< img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;" >
</body>
</html>
最终成品
你将要用脚本来生成的网页是像下面这样的：
你点击这 8 张图片中的任意一张，都会跳转到原始图片。
当然了，这只是初级版本，你可以优化。不过编程不就是循序渐进的嘛，首先做出一个可以运行的版本，之后再「添砖加瓦」。
3. 生成缩略图
这是个好问题。我们在 Linux 探索之旅 的过程中可没有学过如何为图片生成缩略图。
缩略图：
缩略图的英文是 thumbnail。代表网页上或计算机中图片经压缩方式处理后的小图，其中通常会包含指向完整尺寸的图片的超链接。
为了不让你纠结，我就告诉你我们要用到的命令吧。
其实有一个 convert 命令，就可以帮助我们从图片生成缩略图。
convert 是英语「转换」的意思。
convert 命令有好多参数，可以用来做很多事情。对于生成缩略图，我们需要用到的参数就是 -thumbnail 。前面说了，thumbnail 就是「缩略图」的意思。
我们的脚本接收一个参数，就是要生成的 HTML 的文件名。如果没有给出文件名，那么就用默认的 gallery.html。
好了，如果你有基本的 HTML 的知识。那么已经可以开始写了。如果还不知道 HTML，那么可以去看一下 W3C 推出的官方教程：
4. 我的答案
我给出我的解法，你的代码当然不必和我一样，但我想基本原理是一样的。
#!/bin/bash
# Verification of parameter
# If no parameter, use a default value
if [ -z $1 ]
then
output='gallery.html'
else
output=$1
fi
# Preparation of files and folders
echo '' > $output
if [ ! -e thumbnails ]
then
mkdir thumbnails
fi
# Beginning of HTML
echo '<!DOCTYPE html>
<head>
<title>My Gallery</title>
</head>
<body>
<p>' >> $output
# Generation of thumbnails and the HTML web page
for image in `ls *.jpg *.png *.jpeg *.gif 2>/dev/null`
do
convert $image -thumbnail '200x200>' thumbnails/$image
echo '<a href="'$image'">< img src="thumbnails/'$image'" alt=""/></a>' >> $output
done
# End of HTML
echo ' </p>
</body>
</html>' >> $output
我们依顺序解释一下上面的代码：
-
首先，我们确认用户有没有输入表示脚本名字的参数：如果输入了参数，那么我们的脚本就被命名为用户输入的那个名字；如果没有输入参数，那么用默认的脚本名字 gallery.sh。
-
确保脚本文件被清空。就是那行
echo '' > $output所做的工作。 -
如果要存放图片缩略图的目录（取名叫「 thumbnails 」）不存在，那么创建它。
-
把 HTML 文件的开头写入脚本文件。
-
做一个 for 循环，遍历当前目录下所有常用的图片格式的文件。对每一个被遍历到图片，用 convert 命令生成缩略图（用
-thumbnail
参数），缩略图尺寸是 200 x 200，缩略图都存放到 thumbnails 这个子目录下。 -
代码中的 200x200 后面紧跟的
>符号是为了达到「 如果原始图片的尺寸已经小于 200 x 200，那么就直接用原始图片，不需要为之生成缩略图 」的目的。参见 convert 命令的文档（man convert）。 -
对于每一个被 for 循环遍历到的图片，我们将其标签用 echo 写入脚本，并添加链接到原始图片的链接。
-
把 HTML 文件的结尾写入脚本文件。
5. 可能的优化
正如我之前所说，我们给出的解方是最基础的，你可以在此基础上做不少优化。
下面提出几点优化的设想：
- 对网页的样式做一定优化，需要用到 CSS 文件。
- 使用户能够选择包含要展示的图片的目录。对于我们上面的程序，要展示的图片必须和脚本文件在同一个目录下。
- 为脚本添加一个参数，用于指定缩略图尺寸。
- 在每张缩略图下面显示图片的名字。
- 在每张缩略图下面显示图片的其他信息，例如：图片原始尺寸，最近一次修改图片的时间，等等。要获取这些信息，需要调用 convert 命令。
要完成这些优化，你需要自己去查找一些手册，看一些文档，做一些测试。
但是请相信我，你会很享受这种学习的过程。如果不经历这样自我学习的过程，何来提高呢？对吧。
6. 第五部分第八课预告
今天的课就到这里，一起加油吧！
下一课我们来做一个 Shell 脚本的进阶练习：Linux探索之旅 | 第五部分第八课：用Shell做统计练习
我是 谢恩铭，在巴黎奋斗的软件工程师。
我创建了程序员联盟的 知识星球，欢迎加入。
热爱生活，喜欢游泳，略懂烹饪。
人生格言：「向着标杆直跑」
网友评论
欢迎订阅《程序员联盟》https://toutiao.io/subject/138092