如何使用 NameWidth & 使用 Apache Mod_autoindex 设置目录列表的样式HTML表格? [英] How to style Directory Listings with Apache Mod_autoindex using NameWidth & HTMLTable?

问题描述

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

考虑这些设置(# = 注释):

IndexOptions FancyIndexing索引选项 HTMLTable索引选项图标是链接IndexOptions SuppressDescriptionIndexOptions SuppressLastModifiedIndexOptions 抑制列排序#IndexOptions IconWidth=20#IndexOptions IconHeight=20索引选项名称宽度=*IndexOrderDefault 降序名称HeaderName header.htmlReadmeName footer.html</ifModule>

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

我该如何解决这个问题?

谢谢.

解决方案

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

您可以使用 CSS 使用 IndexStyleSheet 指令为单个列/元素设置样式:

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

2. 在 index_body.css 中，使用 padding-left 和 padding-right 属性设置您的首选列填充并包含 align 属性来替换将自动删除的默认 HTML align 标签.th 类是指列标题标签；td 类是指列内容；CSS 类名称的格式为 indexcol:

/*** Apache 自动索引样式表* 创建于 10/03/2019*//* 在 Name 列的右侧包括填充 */td.indexcolname {padding-right: 1em;}/* 保留 Last Modified 列的默认对齐方式 */td.indexcollastmod {对齐:右；}/* 对齐大小列标题标签并使列更宽 */th.indexcolsize {padding-left: 3em;对齐:右；}/* 对齐大小列值并使列更宽 */td.indexcolsize {padding-left: 3em;对齐:右；}

3. 注意:如果您的配置包含 IndexOptions SuppressHTMLPreamble 指令，则生成的索引页面 HTML 将不会自动包含指向您的 IndexStyleSheet URL 的链接.您可以手动添加一个链接到您的 HeaderName 文件(header.html，对于这个问题):

4. 一些额外的资源:

   IndexStyleSheet 的官方 Apache 文档

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

I am trying to adjust NameWidth while using HTMLTable but without success.

Consider these settings (# = comment):

<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>

With the above settings, an in-browser directory listing reveals that the WIDTH of the Name column is hardly wider than the width of the longest filename. Filenames are not truncated, but the right edge of the longest filename is only 1 character away from the next column. I wish to make the Name column wider than the longest filename, so there is more whitespace separating the right side of the filenames with the next column to the right. I can accomplish that (add extra whitespace horizontally) by deleting or commenting-out "IndexOptions HTMLTable". But disabling "HTMLTable" causes the icons to no longer be vertically centered with their associated filenames. And yes, I wish to retain the icons. Changing IconWidth & IconHeight does not fix vertical centering issues. I used header.html and footer.html to add a page title and a return link, but those files don't affect the directory listing content.

How do I resolve this?

Thank you.

解决方案

This can actually be done using only Apache directives. I'm very late answering this question, but I'm leaving this for future reference. This works for Apache v2.2+.

You can use CSS to style individual columns/elements using the IndexStyleSheet directive:

1. Add an IndexStyleSheet directive just before your HeaderName line e.g. IndexStyleSheet /url/to/css/index_body.css

2. In index_body.css, set your preferred column padding with padding-left and padding-right properties and include align properties to replace the default HTML align tags that will be automatically removed. th classes refer to the column header labels; td classes refer to the column contents; CSS class names are in the format 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. Note: If your configuration includes the IndexOptions SuppressHTMLPreamble directive, the resulting Index page HTML will not automatically include a link to your IndexStyleSheet URL. You can manually add a link to your HeaderName file (header.html, for this question):

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

4. Some additional resources:

   Official Apache documentation for IndexStyleSheet

   A GitHub project that allows you to theme your index listings

这篇关于如何使用 NameWidth & 使用 Apache Mod_autoindex 设置目录列表的样式HTML表格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！