nginx - 有没有办法在没有任何第三方实用程序的情况下在 nginx 中创建一个简单的静态图片库?

标签 nginx image-gallery

我只是希望能够一次共享多张图片的链接。

最佳答案

最简单的方法是转换 nginx 的文件列表。您可以通过将 nginx 输出列表制作为 XML 并使用 XSLT 对其进行转换来做到这一点。内置模块ngx_http_autoindex_module会做前者,通常是动态模块ngx_http_xslt_filter_module (又名 ngx_http_xslt_module )将执行后者。

首先,在nginx.conf中加载模块如果需要的话:

load_module "/usr/lib/nginx/modules/ngx_http_xslt_filter_module.so";

然后,在您的 sites-available/website.com ,添加一个位置,告诉 nginx 使用 STLylesheet gal.xslt 转换 xml 索引并将文件夹的名称作为参数传递。
location ~ /gal/([A-z]+)/$ {
    autoindex on;
    autoindex_format xml;
    xslt_string_param title $1;
    xslt_stylesheet gal.xslt;
    try_files $uri/ =404;
}

最后,创建 gal.xslt/etc/nginx说的是,

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="utf-8" indent="yes" />
<xsl:template match="/">
    <xsl:text disable-output-escaping='yes'>&lt;!DOCTYPE html&gt;</xsl:text>
    <html>
    <head>
        <title><xsl:value-of select="$title" /></title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <style>
        img, video {
            display: block;
            max-width: 20cm;
            max-height: 20cm;
            margin: 2mm;
            vertical-align: bottom;
            image-orientation: from-image;
        }
        @media all and (max-width: 20.4cm) {
            img {
                max-width: calc(100% - 4mm);
            }
        }
        body {
            margin: 0;
        }
        </style>
    </head>
    <body>
        <xsl:for-each select="list/file">
            <xsl:choose>
                <xsl:when test="contains(' mp4 webm mkv avi wmv flv ogv ', concat(' ', substring-after(., '.'), ' '))">
                    <video controls="" src="{.}" alt="{.}" title="{.}"/>
                </xsl:when>
                <xsl:otherwise>
                    <img src="{.}" alt="{.}" title="{.}"/>
                </xsl:otherwise>
            </xsl:choose>
        </xsl:for-each>
    </body>
    </html>
</xsl:template>
</xsl:stylesheet>

现在将一些图像放入/var/www/html/gal/foo ,重启nginx,导航到website.com/gal/foo您将看到一个简单但可用且响应迅速的图片库。

关于nginx - 有没有办法在没有任何第三方实用程序的情况下在 nginx 中创建一个简单的静态图片库?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39575873/

相关文章:

python - Django:静态/媒体文件不同服务器

jquery - 使用 jQuery 从多个图像设置图像的 box-shadow

javascript - 如何将 jquery 事件添加到添加的类中?

node.js - Google Compute Engine、Nginx 和 Meteor 上的 502 错误网关

node.js - nginx 位置打破 Node ( sails )路线

html - 图片库中的文本对齐

wordpress - 如何告诉 Wordpress 在图库中使用字幕媒体库?

php - 从数据库显示图像

Nginx 没有重定向到 https

django - 使用 Nginx 和 fastcgi 部署的 Django 为空 'current url'