Question

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

所以我想要做的是在命令行上运行一个脚本，让它浏览目录的根目录，列出里面的所有文件（只有一层深度），并输出到html {{ 1}}结构，或类似的东西：

ul > li > a

我希望href值是站点 - 根相对路径（即root/ | ├── accidents/ | ├── accident2.gif | ├── accident3.gif | └── accident4.gif ├── bears/ | ├── bears1.gif | ├── bears2.gif | └── bears3.gif └── cats/ ├── cat1.gif ├── cat2.gif └── cat3.gif。gif href="/cats/cat _ includes / site-index.html ), and I need it to output into index.md {{1} } index.html`在build。

我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 / test

/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

的父文件夹中运行它

Answer 2

很简单，没有空的dirs（尽管在脚本末尾可以得到空的，但无论如何都要简单地附加它们）

#!/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>

Answer 3

我知道它说要使用shell脚本，但为什么不使用Jekyll来做呢。 Github页面会在每次提交时自动构建jekyll站点，因此您可以设置它并忘记它。

基本示例

---
---

<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>

目录树

---
---
<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,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#039;")}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>

Answer 4

tree -H . -o _includes/site-index.html应该完成您要求的一切。

shell脚本创建静态HTML目录列表

4 个答案:

基本示例

目录树