Home / server / Questions / 312796
Accepted
pvorb
Asked: 2011-09-19 14:02:08 +0800 CST

Custom autoindex pages with nginx

  • 772

Is there a way to define your own autoindex pages in nginx?

I want to add my own HTML and CSS to the generated autoindex pages.

nginx

5 Answers

  1. Best Answer

    Using XSLT is possible to customize autoindex's xml output using the xslt module:

    location / {
    autoindex on;
    autoindex_format xml;
    xslt_stylesheet /path/to/custom.xslt
}

    It's what I did on this project: ngx-superbindex

    • 10

  2. Same answer as gibatronic: harness the power of xslt! Have a look at this sample xslt file:

    <?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template match="/">
    <html>
    <body>
        <h3>Dafshabbat</h3>
        <table border="0">
        <tr bgcolor="#9acd32">
            <th>name</th>
            <th>size</th>
            <th>date</th>
        </tr>
        <xsl:for-each select="list/*">
        <xsl:sort select="@mtime"/>

            <xsl:variable name="name">
                <xsl:value-of select="."/>
            </xsl:variable>
            <xsl:variable name="size">
                <xsl:if test="string-length(@size) &gt; 0">
                        <xsl:if test="number(@size) &gt; 0">
                            <xsl:choose>
                                    <xsl:when test="round(@size div 1024) &lt; 1"><xsl:value-of select="@size" /></xsl:when>
                                    <xsl:when test="round(@size div 1048576) &lt; 1"><xsl:value-of select="format-number((@size div 1024), '0.0')" />K</xsl:when>
                                    <xsl:otherwise><xsl:value-of select="format-number((@size div 1048576), '0.00')" />M</xsl:otherwise>
                            </xsl:choose>
                        </xsl:if>
                </xsl:if>
            </xsl:variable>
            <xsl:variable name="date">
                <xsl:value-of select="substring(@mtime,9,2)"/>-<xsl:value-of select="substring(@mtime,6,2)"/>-<xsl:value-of select="substring(@mtime,1,4)"/><xsl:text> </xsl:text>
                <xsl:value-of select="substring(@mtime,12,2)"/>:<xsl:value-of select="substring(@mtime,15,2)"/>:<xsl:value-of select="substring(@mtime,18,2)"/>
            </xsl:variable>

        <tr>
            <td><a href="{$name}"><xsl:value-of select="."/></a></td>
            <td align="right"><xsl:value-of select="$size"/></td>
            <td><xsl:value-of select="$date"/></td>
        </tr>

        </xsl:for-each>
        </table>
    </body>
    </html>
    </xsl:template>
</xsl:stylesheet>

    What I particularly like is the ability to sort by date, defined here with: <xsl:sort select="@mtime"/>

    It certainly requires more effort to setup compared to adding a couple of directives in a .htaccess file. And, xml files are cumbersome to write and read. However, the customization potential is great and very nice to have!

    See an introductory tutorial on w3schools.

    • 8

  3. turns out you can add valid html with the http addition module.

    i don't claim to understand it fully, but there's a repository that does exactly what you want, so you can try and go from there.

    Edit (2019):

    After looking into it, this is actually a rather simple task.

    • create a hidden folder, e.g. .assets, so autoindex won't display it.
    • inside it, create an html file containing whatever you want to append to your webpage.
    • then simply add add_after_body /.assets/my_html_file.html to your nginx rules. ta-da!

    Note that, according to the docs, this module is not part of a default compilation. I found that the nginx package on ubuntu has it, though.

    • 5

  4. The existence of the Fancy Index module would suggest that the built-in autoindex module has no customisation ability. I'm not sure if I'd recommend the fancy index module, though -- it doesn't look like it's particularly up-to-date (last edited 2007...)

    • 2

  5. You could also try h5ai:

    http://larsjung.de/h5ai/

    They provide a really nice interface for browsing the files.

    • -1