样式服务器生成的文件目录-CSDN博客

以下是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文件链接了一些资产。例如，脚本和样式表。如果您愿意，甚至还有一个图标。所有这些文件都将以`.`开头，因此它们不会显示在目录列表中。头上的东西会像：

<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上有一组表设计。