如何使用 NameWidth 和 HTMLTable 通过 Apache Mod_autoindex 设置目录列表样式？

Question

我尝试在使用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 添加页面标题和返回链接，但这些文件不会影响目录列表内容。

我该如何解决这个问题？

谢谢。

Answer 1

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

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

1. 在您的行IndexStyleSheet之前添加一个指令，例如HeaderNameIndexStyleSheet /url/to/css/index_body.css

2. 在 中index_body.css，使用padding-left和padding-right属性设置您的首选列填充，并包含align属性以替换align将自动删除的默认 HTML 标记。 th类指的是列标题标签；td类指的是列内容；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;
    }

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

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

4. 一些额外的资源：

   IndexStyleSheet 的官方 Apache 文档

   一个 GitHub 项目，允许您为索引列表设置主题