3

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

我该如何解决这个问题？

谢谢你。

4

2 回答 2

2

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

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

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

  2. 在index_body.css中，使用 和 属性设置您的首选列填充，padding-left并padding-right包含属性以替换将自动删除 align的默认 HTML标记。类是指列标题标签；类是指列内容；CSS 类名采用以下格式：alignthtdindexcol<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;
    }
  1. 注意：如果您的配置包含该IndexOptions SuppressHTMLPreamble指令，则生成的索引页面 HTML 将不会自动包含指向您的IndexStyleSheetURL 的链接。您可以手动添加指向您的HeaderName文件的链接（header.html对于这个问题）：
    <link href="/url/to/css/index_body.css" rel="stylesheet">

  1. 一些额外的资源：

    IndexStyleSheet 的官方 Apache 文档

    一个 GitHub 项目，可让您对索引列表进行主题化

于 2019-03-10T11:59:11.443 回答
1

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

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

于 2016-04-22T09:02:37.180 回答