nginx做图床可访问页面

好的！以下是 index.html 和 Nginx 配置文件 的最终版本，并附有详细的中文注释，方便你学习和理解。

---

1. index.html 最终版#

    图片图床
    

    
    
        ×
        
    

    
        // 手动指定图片列表
        const images = [
            'cristina-gottardi-CSpjU6hYo_0-unsplash.jpg',
            'jeremy-thomas-E0AHdsENmDg-unsplash.jpg',
            'docker_20250202_000650.png',
            'vecteezy_teenage-boy-face-with-hair-style-covering-face-for-avatar_23431112.svg',
        ];

        // 动态加载图片并显示
        function loadGallery() {
            const gallery = document.getElementById('gallery');
            images.forEach(image => {
                const imgElement = document.createElement('img');
                imgElement.src = image;
                imgElement.alt = 'Gallery Image';
                gallery.appendChild(imgElement);

                // 添加点击事件：点击图片时打开模态框
                imgElement.addEventListener('click', () => openModal(image));
            });
        }

        // 打开模态框
        function openModal(imageSrc) {
            const modal = document.getElementById('modal');
            const modalImg = document.getElementById('modal-img');
            modal.style.display = 'block'; // 显示模态框
            modalImg.src = imageSrc; // 设置模态框中的图片
        }

        // 关闭模态框
        function closeModal() {
            const modal = document.getElementById('modal');
            modal.style.display = 'none'; // 隐藏模态框
        }

        // 绑定关闭事件
        const modal = document.getElementById('modal');
        const closeBtn = document.querySelector('.close');
        closeBtn.addEventListener('click', closeModal); // 点击关闭按钮
        modal.addEventListener('click', (event) => {
            if (event.target === modal) {
                closeModal(); // 点击模态框背景关闭
            }
        });

        // 页面加载完成后执行
        window.onload = loadGallery;
    

---

2. Nginx 配置文件最终版#

# HTTP 服务器块，用于将 HTTP 请求重定向到 HTTPS
server {
    listen 80; # 监听 80 端口
    server_name page.luoxingding.com; # 域名

    # 重定向所有 HTTP 请求到 HTTPS
    return 301 https://$host$request_uri;
}

# HTTPS 服务器块
server {
    listen 443 ssl; # 监听 443 端口（HTTPS）
    server_name page.luoxingding.com; # 域名

    # SSL 证书路径
    ssl_certificate /etc/letsencrypt/live/page.luoxingding.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/page.luoxingding.com/privkey.pem;

    # 推荐的 SSL 配置
    ssl_protocols TLSv1.2 TLSv1.3; # 支持的 SSL 协议版本
    ssl_prefer_server_ciphers on; # 优先使用服务器端的加密套件
    ssl_ciphers HIGH:!aNULL:!MD5; # 加密套件配置

    # 根目录
    root /var/www/blog; # 网站根目录
    index index.html; # 默认首页文件

    # 静态文件缓存配置
    location ~* \.(?:ico|css|js|gif|jpe?g|png|woff2?|eot|ttf|otf|svg|map)$ {
        expires 30d; # 缓存 30 天
        add_header Cache-Control "public, no-transform"; # 缓存控制头
    }

    # 默认路径配置
    location / {
        try_files $uri $uri/ =404; # 尝试访问文件或目录，如果不存在则返回 404
    }

    # Docusaurus 路径配置
    location ^~ /docu/ {
        alias /var/www/notes/; # 路径别名
        try_files $uri $uri/ /docu/index.html; # 尝试访问文件或目录，如果不存在则返回 index.html
        index index.html; # 默认首页文件
        autoindex on; # 启用目录列表
    }

    # Astro 路径配置
    location ^~ /astro/ {
        alias /var/www/wiki/; # 路径别名
        try_files $uri $uri/ /astro/index.html; # 尝试访问文件或目录，如果不存在则返回 index.html
        index index.html; # 默认首页文件
        autoindex on; # 启用目录列表
    }

    # Vitepress 路径配置
    location ^~ /vitepress {
        alias /var/www/vitepress/; # 路径别名
        try_files $uri $uri/ /vitepress/index.html; # 尝试访问文件或目录，如果不存在则返回 index.html
        index index.html; # 默认首页文件
        autoindex on; # 启用目录列表
    }

    # 图床路径配置
    location ^~ /img {
        alias /var/www/images/; # 路径别名
        try_files $uri $uri/ /img/index.html =404; # 尝试访问文件或目录，如果不存在则返回 index.html 或 404
        index index.html; # 默认首页文件
        autoindex on; # 启用目录列表

        # 静态文件缓存配置
        location ~* \.(?:ico|css|js|gif|jpe?g|png|woff2?|eot|ttf|otf|svg|map)$ {
            expires 30d; # 缓存 30 天
            add_header Cache-Control "public, no-transform"; # 缓存控制头
        }
    }

    # 错误页面配置
    error_page 404 /404.html; # 自定义 404 错误页面
    location = /404.html {
        internal; # 内部重定向，外部无法直接访问
    }
}

---

3. 如何保存和使用#

1. 保存 index.html：
   • 将 index.html 的内容复制到一个文件中，保存为 /var/www/images/index.html。
2. 保存 Nginx 配置：
   • 将 Nginx 配置内容复制到 /etc/nginx/sites-available/images 文件中。

   • 创建符号链接：

     sudo ln -s /etc/nginx/sites-available/images /etc/nginx/sites-enabled/

   • 测试并重启 Nginx：

     sudo nginx -t
     sudo systemctl restart nginx

3. 压缩文件：
   • 将 index.html 和 Nginx 配置文件保存到本地后，右键点击文件，选择“压缩”即可生成 .zip 文件。

---

总结#

通过以上配置，你可以实现：

• 一个功能完善的静态图床。
• 图片点击放大功能。
• 高性能的 Nginx 静态文件服务。

如果有其他问题或需要进一步优化，请随时告诉我！