如何使用 Apache Mod_autoindex 使用 NameWidth 和 HTMLTable 设置目录列表的样式？答案

【问题标题】：How to style Directory Listings with Apache Mod_autoindex using NameWidth & HTMLTable?如何使用 Apache Mod_autoindex 使用 NameWidth 和 HTMLTable 设置目录列表的样式？
【发布时间】：2015-09-02 01:29:40
【问题描述】：

我在使用 HTMLTable 时尝试调整 NameWidth 但没有成功。

考虑这些设置（# = 评论）：

<IfModule mod_autoindex.c>
    IndexOptions FancyIndexing
    IndexOptions HTMLTable
    IndexOptions IconsAreLinks
    IndexOptions SuppressDescription
    IndexOptions SuppressLastModified
    IndexOptions SuppressColumnSorting
    #IndexOptions IconWidth=20
    #IndexOptions IconHeight=20
    IndexOptions NameWidth=*
    IndexOrderDefault Descending Name
    HeaderName header.html
    ReadmeName footer.html
</ifModule>

通过上述设置，浏览器内的目录列表显示名称列的宽度几乎不比最长文件名的宽度宽。文件名不会被截断，但最长文件名的右边缘距下一列仅 1 个字符。 我希望使名称列比最长的文件名更宽，因此文件名的右侧与右侧的下一列之间有更多的空格。我可以做到（水平添加额外的空格）通过删除或注释掉“IndexOptions HTMLTable”。但是禁用“HTMLTable”会导致图标不再以其关联的文件名垂直居中。是的，我希望保留这些图标。更改 IconWidth 和 IconHeight 并不能解决垂直居中问题。我使用 header.html 和 footer.html 添加页面标题和返回链接，但这些文件不会影响目录列表内容。

我该如何解决这个问题？

谢谢。

【问题讨论】：

您有解决方案吗？ mod_autoindex.c 文件在哪里？
我还没有找到解决方案，而且如您所见，也没有一个人给我回复的礼貌。 mod_autoindex.c 通常位于 Apache 安装的模块目录中：/etc/httpd/modules/

标签： html apache column-width directory-listing mod-autoindex

【解决方案1】：

这实际上可以仅使用 Apache 指令来完成。我非常迟到了回答这个问题，但我将其留作将来参考。这适用于 Apache v2.2+。

您可以通过 IndexStyleSheet 指令使用 CSS 来设置各个列/元素的样式：

在 HeaderName 行之前添加一个 IndexStyleSheet 指令，例如IndexStyleSheet /url/to/css/index_body.css
在index_body.css 中，使用padding-left 和padding-right 属性设置您的首选列填充，并包含align 属性以替换将自动删除的默认HTML align 标记。 th classes 指的是列标题标签； tdclasses 指栏目内容； CSS 类名的格式为indexcol<column name>:

    /**
     * Apache Auto-Index Style Sheet
     * Created 10/03/2019
     */
    /* Include padding to the right of the Name column */ 
    td.indexcolname {
      padding-right: 1em;
    }
    /* Preserve the default alignment for the Last Modified column */ 
    td.indexcollastmod {
      align: right;
    }
    /* Align the Size column header label and make the column wider */
    th.indexcolsize {
      padding-left: 3em;
      align: right;
    }
    /* Align the Size column values and make the column wider */
    td.indexcolsize {
      padding-left: 3em;
      align: right;
    }

注意：如果您的配置包含IndexOptions SuppressHTMLPreamble 指令，生成的索引页面HTML 将不会自动包含指向您的IndexStyleSheet URL 的链接。您可以手动添加指向您的HeaderName 文件的链接（header.html，针对此问题）：

    <link href="/url/to/css/index_body.css" rel="stylesheet">

一些额外的资源：

Official Apache documentation for IndexStyleSheet

A GitHub project that allows you to theme your index listings

【讨论】：

很遗憾，我的网络主机提供商不允许我访问使用 Apache 指令所需的权限。但是，感谢您抽出时间为这样做的人提供详细的解决方案。
作为原始发帖人，我并没有真正期待您的回复，但如果可以的话，我会提供帮助。您似乎（根据原始问题中的代码 sn-p）已经有了大部分指令，除非我误解了。那个配置 sn-p 是从哪里来的？ Apache 指令可以放在您需要目录列表的目录中的 .htaccess 文件中。
感谢您的帮助，吉姆。我今天能够实施您的建议。它运作良好。您的建议是对我最初问题的完整解决方案。非常感谢您抽出宝贵时间回复，尽管我的原始帖子已经发布了！
@JDW 不客气。请接受这个答案，因为它解决了您的问题。
我昨天忽略了点击复选标记。我很抱歉。您的回答现在已被接受。最良好的祝愿，吉姆！

【解决方案2】：

我使用 php 和 css3、html5 和一些 jquery 库创建了

https://github.com/gsivaprabu/xampp-lampp-wampp-custom-index-file

【讨论】：