bash 用于创建静态 HTML 目录列表的 shell 脚本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21395159/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
shell script to create a static HTML directory listing
提问by Joel Glovier
So I'm creating a GitHub Pages site to list all of the Gifs in my jglovier/gifsrepo. GH Pages runs only static HTML/CSS/JS or Jekyll, so I cannot use an apache directory listing or any other server generated variant.
所以我正在创建一个 GitHub Pages 站点来列出我的jglovier/gifs 存储库中的所有Gif。GH Pages 只运行静态 HTML/CSS/JS 或 Jekyll，所以我不能使用 apache 目录列表或任何其他服务器生成的变体。
So what I'd like to do is run a script on the command line and have it browse the root for directories, list all the files inside (which only go one level deep), and output that to an html ul > li > astructure, or something similar to this:
所以我想做的是在命令行上运行一个脚本并让它浏览目录的根目录，列出里面的所有文件（只有一层深），并将其输出到一个 htmlul > li > a结构，或类似的东西对此：
root/
|
├── accidents/
| ├── accident2.gif
| ├── accident3.gif
| └── accident4.gif
├── bears/
| ├── bears1.gif
| ├── bears2.gif
| └── bears3.gif
└── cats/
├── cat1.gif
├── cat2.gif
└── cat3.gif
I'd like the href values to be site-root relative paths (i.e. href="/cats/cat.gif), and I need it to output into_includes/site-index.html, which will get pulled into a Jekyll layout file that wraps around myindex.mdfile and generatesindex.html` on build.
我希望 href 值是站点根相对路径（即构建时的href="/cats/cat.gif ), and I need it to output into_includes/site-index.html , which will get pulled into a Jekyll layout file that wraps around myindex.md file and generatesindex.html`。
I found this other questionwhich is very similar, and tried to implement it's answer for my purposes, but alas I'm too much of a shell n00b to accomplish it on my own.
我发现了另一个非常相似的问题，并试图为我的目的实现它的答案，但可惜的是，我对 shell n00b 太过分了，无法自己完成它。
回答by Peter van der Does
#!/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
My /tmp/test
我的/tmp/test
/tmp/test
├── accidents
│?? ├── accident2.gif
│?? ├── accident3.gif
│?? └── accident4.gif
├── bears
│?? ├── bears1.gif
│?? ├── bears2.gif
│?? ├── bears3.gif
│?? └── bears4.gif
└── cats
├── cats1.gif
└── cats2.gif
The resulting output
结果输出
<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>
You could expand the UL with href too, but I wasn't sure if that's what you wanted.
您也可以使用 href 扩展 UL，但我不确定这是否是您想要的。
echo " <UL><a href=\"/$path\">$path</a>" >> $OUTPUT
You would have to run this in the parent folder of _includes
您必须在 _includes 的父文件夹中运行它
回答by Reinstate Monica Please
Simple enough with no empty dirs (although can get empty ones at end of script and append them simply anyway)
足够简单，没有空目录（尽管可以在脚本末尾获取空目录并简单地附加它们）
#!/bin/bash
root="root"
echo "<ul>"
for file in "$root"/*/*; do
parentpath="${file#*/}"
parent="${parentpath%/*}"
filename="${file##*/}"
if [[ -z $oldparent ]]; then
echo " <li> $parent </li>" && oldparent="$parent"
echo " <ul>"
elif [[ $oldparent != $parent ]]; then
echo " </ul>"
echo " <li> $parent </li>" && oldparent="$parent"
echo " <ul>"
fi
echo " <li><a href=\"$parentpath\">$filename</a></li>"
done
echo " </ul>"
echo "</ul>"
e.g.
例如
$ ./abovescript
<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>
</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>
<li><a href="cats/cats3.gif">cats3.gif</a></li>
</ul>
</ul>
回答by samdd
I know it said to use a shell script, but why not use Jekyll to do it. Github pages automatically builds the jekyll site on every commit, so you can set it up and forget about it.
我知道它说使用 shell 脚本，但为什么不使用 Jekyll 来做到这一点。Github 页面会在每次提交时自动构建 jekyll 站点，因此您可以设置它并忘记它。
Basic example
基本示例
---
---
<head>
<title>Index of /</title>
</head>
<body>
<h1>Index of /</h1>
<ul>
{% for url in site.static_files %}
<li><a href="{{ site.baseurl | escape }}{{ url.path | escape }}">{{ url.path | escape }}</a> </li>
{% endfor %}
</ul>
</body>
Directory tree
目录树
---
---
<h1>Index of ./</h1>
<ul></ul>
<style>body{background:#303030;margin:0;font-family:Roboto,Helvetica,Arial,sans-serif;overflow:hidden;display:flex;flex-direction:column;height:100%;width:100%}*{color:#fff;text-decoration:none}h1{background:#ff1959;font-size:1.3125rem;font-weight:500;line-height:64px;padding:0 20px;box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12);margin:0}h1+ul{height:100%;padding:20px;overflow-y:auto;overflow-x:hidden}.folder>a:nth-child(1){height:15px;display:inline-block}.folder>a:nth-child(1):hover{text-decoration:underline;text-decoration-color:#ff1959}.file{position:relative;height:50px}.file a{position:absolute;display:inline-block;height:calc(100% - 20px);width:100%;font-size:1rem;font-weight:400;line-height:30px;padding:0 10px;padding-top:4px;margin:10px 0;transition:background-color .5s ease;color:#ff6892}.file:hover a{background-color:rgba(255,255,255,.1)}ul,ul.tree ul{list-style:none;margin:0;padding:0}li{display:block}ul ul{margin-left:10px}ul li{margin:0;padding:0 20px;color:#369;border-left:1px solid #ff1959}ul li:last-child{border-left:none}ul li:before{position:relative;height:28px;width:20px;color:#fff;border-bottom:1px solid #ff1959;content:"";display:inline-block;left:-20px}ul li:last-child:before{border-left:1px solid #ff1959}</style><script>var c=document.getElementsByTagName("ul")[0];function escapeHtml(e){return e.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'")}for(var files=[{% for url in site.static_files %}'{{ url.path | replace: "'", "\'" }}',{% endfor %}],i=0;i<files.length;i++){var url=files[i].split("/").slice(1);console.group(files[i]);for(var x=0;x<url.length;x++){var file=url[x];if(file)for(var element=null,parent=null,y=0;y<x+1;y++){var el=document.querySelector("[ref="+JSON.stringify(y+"-"+url[y])+"]");if(!el){var type="folder";url[y].indexOf(".")>-1&&(type="file"),el=document.createElement("li");var a=document.createElement("a");a.innerHTML=escapeHtml(url[y]),a.href=url.slice(0,x+1).join("/"),el.appendChild(a),el.setAttribute("ref",y+"-"+url[y]),el.setAttribute("level",y),el.setAttribute("class",type),parent?parent.appendChild(el):c.appendChild(el)}parent=el}}console.groupEnd(files[i])}document.title=document.querySelector("h1").innerHTML+=" ("+files.length+" items)"</script>
