需求：從當前目錄遞迴尋找特定 HTML 檔案，自動生成一個包含所有檔案超連結的索引頁面，方便瀏覽器單一入口存取。本文示範使用 find、while 迴圈與 vim 批次編輯的完整流程。

步驟 1：尋找目標檔案並輸出清單

find . -iname "*valid*.*" > valid.txt

輸出範例：

./ValidityState-002.html
./ValidityState-customError-expected.txt
./ValidityState-customError.html
...

步驟 2：Shell 迴圈生成初步 HTML 片段

cat valid.txt | while read line; do
  echo "$line" >> index.html
done

產出格式：./ValidityState-002.html

步驟 3：vim 批次編輯補全標籤（若步驟 2 未直接輸出完整標籤）

若中間產出為 href="./xxx.html">./xxx.html，需補全 <a> 與 </a>：

1. 開啟檔案：vim index.html
2. 行首插入 <a href=：:%s/^/<a href=/
3. 行尾插入 </a>：:%s/$/<\/a>/

進階優化：單一指令完成完整索引頁

cat > generate_index.sh << 'EOF'
#!/bin/bash
OUTPUT="index.html"
echo "
" > "$OUTPUT"
find . -type f -iname "*.html" | sort | while read filepath; do
  # 移除開頭 ./ 並轉義 HTML 特殊字元
  display="${filepath#./}"
  href=$(printf '%s\n' "$display" | sed 's/&/\&/g; s//\>/g; s/"/\"/g')
  echo "
$href
" >> "$OUTPUT"
done
echo "
" >> "$OUTPUT"
EOF
chmod +x generate_index.sh
./generate_index.sh

進階版功能亮點

• 自動產出合法 HTML5 結構（含 DOCTYPE、meta charset、ul/li 語意化）。
• HTML 實體編碼防止 XSS/顯示異常。
• 支援遞迴搜尋、排序、副檔名過濾。
• 可擴充：加入檔案大小、修改時間、標題提取（grep -oP '(?<=)' "$filepath"）。

Windows 環境替代方案

• PowerShell：Get-ChildItem -Recurse -Filter *.html | ForEach-Object { "$($_.Name)" } | Set-Content index.html
• 工具：Everything + 導出 CSV → Excel 公式批次產生超連結。

掌握 Shell 文字處理管線，能將重複手工操作轉化為可複用自動化腳本，大幅提升運維與開發效率。