如何使用 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>

使用上述设置，in-browser 目录列表显示名称列的宽度几乎不比最长文件名的宽度宽。文件名没有被截断，但最长文件名的右边缘距离下一列只有 1 个字符。 我希望使“名称”列比最长的文件名更宽，这样文件名的右侧与右侧的下一列之间会有更多的空格分隔。我可以做到这一点（添加额外的水平空白）通过删除或 commenting-out "IndexOptions HTMLTable"。但是禁用 "HTMLTable" 会导致图标不再与其关联的文件名垂直居中。是的，我希望保留图标。更改 IconWidth 和 IconHeight 不会解决垂直居中问题。我使用 header.html 和 footer.html 添加页面标题和 return link，但这些文件不会影响目录列表内容。

我该如何解决这个问题？

谢谢。

Answer 1

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

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

Answer 2

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

您可以使用 CSS 通过 IndexStyleSheet 指令为个人 columns/elements 设置样式：

在 HeaderName 行之前添加一个 IndexStyleSheet 指令，例如IndexStyleSheet /url/to/css/index_body.css
在 index_body.css 中，使用 padding-left 和 padding-right 属性设置您喜欢的列填充，并包含 align 属性以替换默认值 HTML align 将被自动删除的标签。 th classes 指的是列 header 标签； td classes指的是专栏内容； CSS class 名称的格式为 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 将不会自动包含 link 到您的 IndexStyleSheet URL .您可以手动添加一个 link 到您的 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

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

How to style Directory Listings with Apache Mod_autoindex using NameWidth & HTMLTable?

html

apache

column-width

directory-listing

mod-autoindex