bash - 用于创建静态 HTML 目录列表的 shell 脚本

Question

所以我正在创建一个 GitHub Pages 站点来列出我的 jglovier/gifs 中的所有 Gif。 repo 。 GH Pages 仅运行静态 HTML/CSS/JS 或 Jekyll，因此我不能使用 apache 目录列表或任何其他服务器生成的变体。

所以我想做的是在命令行上运行脚本并让它浏览目录的根目录，列出里面的所有文件(只深入一层)，然后将其输出到 html ul > li > a 结构，或类似这样的结构:

root/
|
├── accidents/
|   ├── accident2.gif
|   ├── accident3.gif
|   └── accident4.gif
├── bears/
|   ├── bears1.gif
|   ├── bears2.gif
|   └── bears3.gif
└── cats/
    ├── cat1.gif
    ├── cat2.gif
    └── cat3.gif

我希望 href 值是站点根目录的相对路径(即 href="/cats/cat.gif)，我需要它输出到_includes/site-index.html，它将被拉入 Jekyll 布局文件中，该文件环绕着我的index.md文件并在构建时生成index.html`。

我found this other question这是非常相似的，并试图为我的目的实现它的答案，但唉，我是一个 shell n00b 太多了，无法独自完成它。

Answer 1

#!/bin/bash

ROOT=/tmp/test
HTTP="/"
OUTPUT="_includes/site-index.html" 

i=0
echo "<UL>" > $OUTPUT
for filepath in `find "$ROOT" -maxdepth 1 -mindepth 1 -type d| sort`; do
  path=`basename "$filepath"`
  echo "  <LI>$path</LI>" >> $OUTPUT
  echo "  <UL>" >> $OUTPUT
  for i in `find "$filepath" -maxdepth 1 -mindepth 1 -type f| sort`; do
    file=`basename "$i"`
    echo "    <LI><a href=\"/$path/$file\">$file</a></LI>" >> $OUTPUT
  done
  echo "  </UL>" >> $OUTPUT
done
echo "</UL>" >> $OUTPUT

我的/tmp/测试

/tmp/test
├── accidents
│   ├── accident2.gif
│   ├── accident3.gif
│   └── accident4.gif
├── bears
│   ├── bears1.gif
│   ├── bears2.gif
│   ├── bears3.gif
│   └── bears4.gif
└── cats
    ├── cats1.gif
    └── cats2.gif

结果输出

<UL>
  <LI>accidents</LI>
  <UL>
    <LI><a href="/accidents/accident2.gif">accident2.gif</a></LI>
    <LI><a href="/accidents/accident3.gif">accident3.gif</a></LI>
    <LI><a href="/accidents/accident4.gif">accident4.gif</a></LI>
  </UL>
  <LI>bears</LI>
  <UL>
    <LI><a href="/bears/bears1.gif">bears1.gif</a></LI>
    <LI><a href="/bears/bears2.gif">bears2.gif</a></LI>
    <LI><a href="/bears/bears3.gif">bears3.gif</a></LI>
    <LI><a href="/bears/bears4.gif">bears4.gif</a></LI>
  </UL>
  <LI>cats</LI>
  <UL>
    <LI><a href="/cats/cats1.gif">cats1.gif</a></LI>
    <LI><a href="/cats/cats2.gif">cats2.gif</a></LI>
  </UL>
</UL>

您也可以使用 href 扩展 UL，但我不确定这是否是您想要的。

echo "  <UL><a href=\"/$path\">$path</a>" >> $OUTPUT

您必须在 _includes 的父文件夹中运行它