Linux 探索之旅 | 第五部分第七课：Shell 实现图片展示网页

-- 作者谢恩铭转载请注明出处

《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 推出的官方教程：

英文版：www.w3schools.com/html/defaul…
中文版：www.w3school.com.cn/html/index.…

4. 我的答案

我给出我的解法，你的代码当然不必和我一样，但我想基本原理是一样的。

#!/bin/bash# Verification of parameter
# If no parameter, use a default valueif [ -z $1 ]
thenoutput='gallery.html'
elseoutput=$1
fi# Preparation of files and foldersecho '' > $outputif [ ! -e thumbnails ]
thenmkdir 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`
doconvert $image -thumbnail '200x200>' thumbnails/$imageecho '<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做统计练习

微信公众号「程序员联盟」ProgrammerLeague
我是谢恩铭，在巴黎奋斗的软件工程师。
我的简介
我的经历
热爱生活，喜欢游泳，略懂烹饪。
人生格言：「向着标杆直跑」