图片画廊使用手册

目录导航

1. 项目概述

本图片画廊是一个功能丰富、响应式的Web应用，用于展示和管理照片集。它具有现代化的UI设计、流畅的交互体验和专业的图片查看功能，适合个人摄影师、设计团队或摄影爱好者使用。

核心功能特点

响应式瀑布流布局

根据屏幕尺寸自动调整列数，适配各种设备

智能懒加载

优先加载可见区域图片，提高页面加载速度

优雅的灯箱效果

支持大图查看、图片信息展示和RGB直方图

平滑的图片加载过渡

从模糊到清晰的渐进式显示

专业EXIF信息提取

自动显示照片拍摄参数

便捷的缩略图生成

一键为本地图片生成缩略图

集成评论系统

基于Waline实现，支持用户对图片进行评论和互动

2. 快速开始

2.1 环境要求

2.2 安装依赖

# 安装Sharp库用于生成缩略图
npm install sharp

2.3 本地启动项目

# 方式1：使用Python内置HTTP服务器
python -m http.server 8000

# 方式2：使用Node.js HTTP服务器
npx http-server -p 8000

# 方式3：直接在浏览器中打开index.html

2.4 本地访问项目

在浏览器中输入 http://localhost:8000 即可访问图片画廊。

3. 部署指南

3.1 部署到存储桶

存储桶（Bucket）是云服务提供商提供的对象存储服务，适合静态网站部署。以下是主流云服务商的部署步骤：

3.1.1 AWS S3 部署

  1. 创建S3存储桶
    • 登录AWS管理控制台，进入S3服务
    • 点击"创建存储桶"，输入存储桶名称（全局唯一）
    • 选择区域，点击"创建"
  2. 配置静态网站托管
    • 进入存储桶属性页面
    • 找到"静态网站托管"，点击"编辑"
    • 选择"启用"，设置默认索引文档为 index.html
    • 点击"保存更改"
  3. 设置存储桶权限
    • 进入存储桶权限页面
    • 关闭"阻止公共访问（存储桶设置）"
    • 点击"编辑"存储桶策略，添加适当的策略
  4. 上传项目文件
    • 使用AWS CLI或S3控制台上传所有项目文件
    • 确保 index.html、style.css、script.js 等文件直接放在存储桶根目录
    • 上传 images 和 thumbnails 文件夹及其内容
  5. 访问网站
    • 在存储桶属性的"静态网站托管"部分获取访问URL

3.1.2 阿里云OSS部署

  1. 创建OSS存储桶
    • 登录阿里云控制台，进入OSS服务
    • 点击"创建存储桶"，输入名称和选择区域
    • 存储类型选择"标准存储"，访问权限选择"公共读"
    • 点击"确定"
  2. 配置静态网站托管
    • 进入存储桶概览页面，点击"静态网站托管"
    • 点击"设置"，启用静态网站托管
    • 默认首页设置为 index.html，点击"保存"
  3. 上传项目文件
    • 使用OSS控制台或OSS Browser工具上传所有项目文件
    • 确保文件结构正确
  4. 访问网站
    • 在静态网站托管设置中获取访问域名

3.1.3 腾讯云COS部署

  1. 创建COS存储桶
    • 登录腾讯云控制台，进入COS服务
    • 点击"创建存储桶"，输入名称和选择区域
    • 访问权限选择"公有读私有写"
    • 点击"确定"
  2. 配置静态网站
    • 进入存储桶配置页面，选择"静态网站"选项卡
    • 点击"编辑"，启用静态网站
    • 默认首页设置为 index.html，点击"保存"
  3. 上传项目文件
    • 使用COS控制台或COS Browser工具上传所有项目文件
  4. 访问网站
    • 在静态网站配置中获取访问域名

3.1.4 通用部署注意事项

3.2 传统Web服务器部署

如果您有自己的Web服务器，也可以直接部署：

  1. 上传文件
    • 使用FTP或SCP工具将项目文件上传到服务器
    • 放在Web服务器的根目录或子目录
  2. 配置服务器
    • 确保服务器支持静态文件访问
    • 对于Apache/Nginx，无需特殊配置
  3. 访问网站
    • 通过服务器域名或IP地址访问
    • 例如：http://your-domain.com/

4. 项目结构

├── images/             # 原图存放目录
├── thumbnails/         # 缩略图存放目录
├── index.html          # 主页面
├── style.css           # 样式文件
├── script.js           # JavaScript逻辑
├── generate-thumbnails.js  # 缩略图生成脚本
├── favicon.ico         # 网站图标
└── 使用手册.md         # 本使用说明

5. 基本使用

5.1 查看图片

  1. 在画廊首页浏览图片缩略图
  2. 点击任意图片打开灯箱查看大图
  3. 使用键盘方向键切换上下一张图片

5.2 灯箱功能

5.2.1 打开与关闭

5.2.2 图片操作

5.2.3 图片信息查看

5.3 图片信息与EXIF数据

5.3.1 显示内容

5.3.2 数据来源

  1. EXIF数据：优先从图片中自动提取
  2. 预设数据：EXIF提取失败时使用script.js中的预设值

5.4 RGB直方图

5.4.1 功能说明

RGB直方图提供图片色彩分布的可视化展示，显示红、绿、蓝三个通道的像素分布情况，帮助专业用户分析图片色彩。

5.4.2 技术特点

6. 内容管理

6.1 添加新照片

6.1.1 准备图片

将图片放入images目录，支持以下格式：

6.1.2 更新图片数据

打开script.js文件，在images数组中添加新的图片对象：

{ src: 'images/您的图片文件名.jpg',        // 图片路径
  thumbnail: 'thumbnails/您的图片文件名_thumb.jpg',  // 缩略图路径（可选）
  title: '图片标题',                     // 图片标题
  author: '摄影师名称',                  // 摄影师
  camera: '相机型号',                   // 相机型号（预设）
  lens: '镜头型号',                     // 镜头型号（预设）
  focalLength: '焦距',                  // 焦距（预设）
  aperture: '光圈',                    // 光圈（预设）
  shutterSpeed: '快门速度',             // 快门速度（预设）
  iso: 'ISO值'                        // ISO值（预设）
}

6.1.3 缩略图配置

6.2 生成缩略图

6.2.1 运行生成脚本

node generate-thumbnails.js

6.2.2 脚本功能

6.2.3 配置选项

在generate-thumbnails.js中可修改：

const thumbnailConfig = {
    width: 400,    // 缩略图宽度（像素）
    quality: 70,   // 图片质量（0-100）
    suffix: '_thumb' // 缩略图文件名后缀
};

7. 高级特性

7.1 响应式设计

7.1.1 瀑布流列数适配

7.1.2 灯箱适配

7.2 懒加载功能

7.2.1 功能说明

7.2.2 占位符策略

7.3 图片加载效果

7.3.1 过渡动画

8. 配置与定制

8.1 修改灯箱样式

在style.css中自定义灯箱外观：

8.2 修改瀑布流配置

8.3 自定义图片加载效果

修改.lightbox-image和.lightbox-image.loaded类：

.lightbox-image {
    filter: blur(15px);       /* 修改模糊程度 */
    transition: all 0.8s ease; /* 修改过渡时间 */
}

9. 性能优化

9.1 图片优化

9.2 懒加载优化

9.3 缩略图生成优化

10. 浏览器兼容性

浏览器 版本要求 支持情况
Chrome 60+ 完全支持
Firefox 55+ 完全支持
Safari 12+ 完全支持
Edge 79+ 完全支持
IE 不支持 -

11. 常见问题与解决方案

11.1 图片无法显示

11.2 缩略图未生成

11.3 缩略图显示异常

11.4 EXIF信息未显示

11.5 RGB直方图未显示

11.6 灯箱功能异常

11.7 灯箱图片无模糊到清晰效果

11.8 页面加载速度慢

11.9 移动端显示异常

11.10 本地服务器启动失败

11.11 图片排序不符合预期

11.12 键盘快捷键不工作

11.13 液态玻璃效果异常

11.14 图片下载功能异常

11.15 全屏功能异常

11.16 图片旋转功能异常

11.17 图片缩放功能异常

11.18 页面样式错乱

11.19 JavaScript错误

11.20 部署到服务器后功能异常

12. 技术说明

12.1 主要技术栈

12.2 核心技术实现

12.3 代码结构

13. 评论区配置

13.1 评论系统概述

本图片画廊集成了Waline评论系统，支持用户对图片进行评论和互动。Waline基于LeanCloud，提供了丰富的评论功能和管理后台。

13.2 LeanCloud设置

13.2.1 注册LeanCloud账号

  1. 访问 LeanCloud官网 注册账号
  2. 登录后进入控制台

13.2.2 创建应用

  1. 点击"创建应用"按钮
  2. 输入应用名称（如"DFGallery-Comments"）
  3. 选择应用类型为"开发版"
  4. 点击"创建"按钮

13.2.3 获取应用凭证

  1. 进入创建的应用控制台
  2. 点击左侧导航栏中的"设置" → "应用凭证"
  3. 记录下"App ID"和"App Key"，后续配置需要使用

13.3 部署Waline服务端

Waline支持多种部署方式，以下是两种常用方法：

13.3.1 使用Vercel一键部署

  1. 访问 Waline Vercel部署页面
  2. 登录Vercel账号并部署
  3. 打开Settings → Environment Variables，填写参数（CLIENT_KEY和VALUE）：
    • LEAN_ID：CLIENT_KEY填写LEAN_ID，VALUE填写LeanCloud的App ID
    • LEAN_KEY：CLIENT_KEY填写LEAN_KEY，VALUE填写LeanCloud的App Key
    • LEAN_MASTER_KEY：CLIENT_KEY填写LEAN_MASTER_KEY，VALUE填写LeanCloud的Master Key
  4. 点击"Deploy"部署
  5. 部署完成后，获取Vercel分配的域名（如https://your-waline.vercel.app）
  6. 可以在Settings → Domains中添加自定义域名（可选）

13.3.2 使用Docker部署（可选）

如果您有自己的服务器，也可以使用Docker部署Waline服务端：

docker run -d \
  --name waline \
  -e LEAN_ID=你的AppID \
  -e LEAN_KEY=你的AppKey \
  -e LEAN_MASTER_KEY=你的MasterKey \
  -e SITE_NAME=DFGallery \
  -e SITE_URL=https://你的网站地址 \
  -p 8360:8360 \
  lizheming/waline:latest

13.4 配置项目中的评论系统

13.4.1 修改评论系统配置

  1. 打开项目根目录下的 index.html 文件
  2. 找到Waline初始化代码（约第472-496行）
  3. 修改 serverURL 为您部署的Waline服务端地址：
window.initWaline = function(imageTitle) {
    // 如果已经存在实例，先销毁
    if (window.walineInstance) {
        window.walineInstance.destroy();
    }
    
    // 使用图片标题作为path，区分不同图片的评论
    window.walineInstance = init({
        el: '#waline-container',
        serverURL: 'https://你的-waline-服务端地址/', // 修改为您的Waline服务端地址
        lang: 'zh-CN',
        emoji: ['https://unpkg.com/@waline/emojis@1/tw-emoji', 'https://unpkg.com/@waline/emojis@1/bilibili'],
        path: imageTitle || 'default', // 使用图片标题作为path
    });
};

13.4.2 配置选项说明

以下是一些常用的Waline配置选项，您可以根据需要添加到初始化代码中：

配置项 说明 默认值
serverURL Waline服务端地址 无（必填）
lang 评论区语言 'zh-CN'
emoji 表情列表 无
path 评论区分页标识 当前页面路径
avatar 头像类型 'mp'
placeholder 评论框占位符 '说点什么吧...'
requiredFields 必填字段 ['nick']
pageSize 每页评论条数 10

13.5 管理评论

部署完成后，您可以通过以下方式管理评论：

  1. 访问您的Waline服务端地址 + /ui/register 注册管理员账号
  2. 登录后进入管理后台
  3. 您可以在后台查看、编辑、删除评论，管理用户等

13.6 常见问题

13.6.1 评论区不显示

13.6.2 评论无法提交

13.6.3 头像无法显示

14. 注意事项