Linux 探索之旅 | 第五部分第七課：Shell 實現圖片展示網頁

程式設計師聯盟發表於2017-04-26
Linux網頁

Linux 探索之旅 | 第五部分第七課：Shell 實現圖片展示網頁

-- 作者 謝恩銘 轉載請註明出處

《Linux探索之旅》全系列

內容簡介

  1. 前言
  2. 成果展示
  3. 生成縮圖
  4. 我的答案
  5. 可能的優化
  6. 第五部分第八課預告

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 檔案就是一個網頁檔案，用來展示這些圖片。

因此，這個指令碼需要依次做以下的事：

  1. 根據目錄中的每張圖片，生成對應縮圖。

  2. 生成一個 HTML 檔案，把縮圖都插入其中。

  3. 給每張縮圖繫結一個連結，會連結到原始圖片。

為了寫出這個指令碼，需要有一些前端的網路知識，比如 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>複製程式碼

最終成品

你將要用指令碼來生成的網頁是像下面這樣的：

Linux 探索之旅 | 第五部分第七課：Shell 實現圖片展示網頁

你點選這 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複製程式碼

我們依順序解釋一下上面的程式碼：

  1. 首先，我們確認使用者有沒有輸入表示指令碼名字的引數：如果輸入了引數，那麼我們的指令碼就被命名為使用者輸入的那個名字；如果沒有輸入引數，那麼用預設的指令碼名字 gallery.sh。

  2. 確保指令碼檔案被清空。就是那行 echo '' > $output 所做的工作。

  3. 如果要存放圖片縮圖的目錄（取名叫「 thumbnails 」）不存在，那麼建立它。

  4. 把 HTML 檔案的開頭寫入指令碼檔案。

  5. 做一個 for 迴圈，遍歷當前目錄下所有常用的圖片格式的檔案。對每一個被遍歷到圖片，用 convert 命令生成縮圖（用 -thumbnail
    引數），縮圖尺寸是 200 x 200，縮圖都存放到 thumbnails 這個子目錄下。

  6. 程式碼中的 200x200 後面緊跟的 > 符號是為了達到「 如果原始圖片的尺寸已經小於 200 x 200，那麼就直接用原始圖片，不需要為之生成縮圖 」的目的。參見 convert 命令的文件（ man convert ）。

  7. 對於每一個被 for 迴圈遍歷到的圖片，我們將其標籤用 echo 寫入指令碼，並新增連結到原始圖片的連結。

  8. 把 HTML 檔案的結尾寫入指令碼檔案。

5. 可能的優化

正如我之前所說，我們給出的解方是最基礎的，你可以在此基礎上做不少優化。

下面提出幾點優化的設想：

  1. 對網頁的樣式做一定優化，需要用到 CSS 檔案。
  2. 使使用者能夠選擇包含要展示的圖片的目錄。對於我們上面的程式，要展示的圖片必須和指令碼檔案在同一個目錄下。
  3. 為指令碼新增一個引數，用於指定縮圖尺寸。
  4. 在每張縮圖下面顯示圖片的名字。
  5. 在每張縮圖下面顯示圖片的其他資訊，例如：圖片原始尺寸，最近一次修改圖片的時間，等等。要獲取這些資訊，需要呼叫 convert 命令。

要完成這些優化，你需要自己去查詢一些手冊，看一些文件，做一些測試。

但是請相信我，你會很享受這種學習的過程。如果不經歷這樣自我學習的過程，何來提高呢？對吧。

6. 第五部分第八課預告

今天的課就到這裡，一起加油吧！

下一課我們來做一個 Shell 指令碼的進階練習：Linux探索之旅 | 第五部分第八課：用Shell做統計練習

微信公眾號「程式設計師聯盟」ProgrammerLeague
我是謝恩銘，在巴黎奮鬥的軟體工程師。
我的簡介
我的經歷
熱愛生活，喜歡游泳，略懂烹飪。
人生格言：「向著標杆直跑」

相關文章