为服务器生成的文件夹目录添加样式

以下内容是 Keith Knittel的客座文章。Keith 使用了本站上的教程来构建自己的自定义文件目录。我想，嘿，这应该是在本站上更好地解释的教程。所以我们来了。

您可能知道，如果服务器上的目录中存在“index.html”文件，那么如果 URL 与该目录匹配，它就会像服务该文件一样。例如

httpdocs
  - my_folder
    - index.html
    - cool_mountain.jpg

因此，如果您访问

http://thatwebsite.com/my_folder/

它将渲染 `index.html`。但是，如果 `index.html`（或类似文件）丢失了怎么办？您可以配置这种行为。您可以将其配置为拒绝访问该目录。或者您可以允许它，并让它输出一个可浏览的文件目录（有点像 FTP）。

这可能很有用。只需上传文件，它们就会立即出现，无需代码更改。但是有点无聊。

它们看起来都一样：一个没有样式、可排序的列表。要构建一个看起来更好一点的目录，我们将使用

• sortable.js
• 我们 HTAccess 文件中的一行代码
• 一点点 PHP
• 当然还有 CSS

我们还将使用一种简单的方法来“隐藏”目录中的某些文件，以防止它们出现在最终文件列表中。作为上下文，这里有一个 演示。

预检

首先，我们将确保服务器配置为显示隐藏文件。我们将使用像 `.index.php` 这样的文件名（注意文件名开头的“.”）。一个特定于操作系统的 Google 搜索可能会找到答案。我们将使用隐藏文件来使这工作，因此我们需要能够看到它们才能使用它们。使它们隐藏意味着它们最终不会出现在目录列表中，这通常是可取的。

.htaccess

在我们的 `.htaccess` 文件中，我们可以使用 Options +Indexes 来显示目录，但我们想使用一个隐藏的索引文件，以便我们可以构建自己的页面。我们将改为使用它来定义我们希望负责显示文件目录的确切文件

DirectoryIndex .index.php

添加错误重定向是一个好主意，但为了这个简短教程的简便起见，我们只添加一个 404。顺便说一下：您可以将目录中的任何页面替换为“.index.php”或“.404-error.php”，它将加载该页面。很酷。

ErrorDocument 404 .404-error.php

.index.php

我们的 `.index.php` 文件链接了一些资产。例如，一个脚本和一个样式表。如果您愿意，甚至还有一个 favicon。所有这些文件都将以 `.` 开头，因此它们不会出现在目录列表中。头部中的内容将类似于

<link rel="shortcut icon" href=".favicon.ico">
<link rel="stylesheet" href=".style.css">
<script src=".sorttable.js"></script>

<table> 元素是文件和元数据的列表的合理选择，因此我们将使用它。这就是 sortable.js 的作用。Sortable 是一个非常易于使用的库，我们只需在表格上添加 sortable 类，它就能正常工作。以下是最基本的 PHP 代码，它读取所有文件、循环遍历它们并输出所需内容

<table class="sortable">
  <thead>
    <tr>
      <th>Filename</th>
      <th>Type</th>
      <th>Size <small>(bytes)</small></th>
      <th>Date Modified</th>
    </tr>
  </thead>
  <tbody>
  <?php
    // Opens directory
    $myDirectory=opendir(".");

    // Gets each entry
    while($entryName=readdir($myDirectory)) {
      $dirArray[]=$entryName;
    }

    // Finds extensions of files
    function findexts($filename) {
      $filename=strtolower($filename);
      $exts=split("[/\\.]", $filename);
      $n=count($exts)-1;
      $exts=$exts[$n];
      return $exts;
    }

    // Closes directory
    closedir($myDirectory);

    // Counts elements in array
    $indexCount=count($dirArray);

    // Sorts files
    sort($dirArray);

    // Loops through the array of files
    for($index=0; $index < $indexCount; $index++) {

      // Gets File Names
      $name=$dirArray[$index];
      $namehref=$dirArray[$index];

      // Gets Extensions
      $extn=findexts($dirArray[$index]);

      // Gets file size
      $size=number_format(filesize($dirArray[$index]));

      // Gets Date Modified Data
      $modtime=date("M j Y g:i A", filemtime($dirArray[$index]));
      $timekey=date("YmdHis", filemtime($dirArray[$index]));

      // Print 'em
      print("
      <tr class='$class'>
        <td><a href='./$namehref'>$name</a></td>
        <td><a href='./$namehref'>$extn</a></td>
        <td><a href='./$namehref'>$size</a></td>
        <td sorttable_customkey='$timekey'><a href='./$namehref'>$modtime</a></td>
      </tr>");
    }
  ?>
  </tbody>
</table>

这是一个简化的版本。这里有一个 更强大的版本，它可以清理文件扩展名、目录、隐藏文件等等。

CSS

要为我们的目录添加样式，我们可以在我们的（隐藏的）`.style.css` 文件中做任何我们想做的事情。我们可以应用自定义的精美图标，例如

/* images */
table tr td:first-of-type a[href$=".jpg"],
table tr td:first-of-type a[href$=".png"],
table tr td:first-of-type a[href$=".gif"],
table tr td:first-of-type a[href$=".svg"],
table tr td:first-of-type a[href$=".jpeg"] {
  background-image: url(./.images/image.png);
}

您可以执行任何您喜欢的样式！在 CodePen 上有一个 表格设计集合。

结束

这种设置的美妙之处在于，上传非敏感文件并与他人共享真的非常容易，您只需刷新页面并发送链接即可。如果由于某种原因您希望恢复到默认的无样式目录，您只需转到 htaccess 文件并将 DirectoryIndex .index.php 替换为 Options +Indexes，您将返回到默认目录。

演示

这里 有一个在本网站上的演示。我还使用这种确切的技术构建了自己的有趣的图像目录：asecrettoeverybody.com