Skip to content

Getting Started

Jump to bottom
poboll edited this page Jan 20, 2026 · 1 revision

快速上手指南

本文档将在 5 分钟内帮您快速体验 Snaply 的核心功能。

🎯 学习目标

完成本教程后，您将学会：

  • ✅ 启动 Snaply 服务
  • ✅ 上传第一张图片
  • ✅ 添加标签和管理图片
  • ✅ 复制图片链接
  • ✅ 配置基础设置

📋 前置条件

在开始之前，确保您已：

🚀 第一步：启动服务

打开终端，进入项目目录：

cd snaply
pnpm dev

您将看到：

  VITE v7.2.4  ready in 500 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://192.168.1.100:5173/

  Server running at http://localhost:3000

打开浏览器访问：http://localhost:5173

🎨 界面介绍

Snaply 采用 Windows 98/2000 复古风格界面：

┌────────────────────────────────────────┐
│  Snaply 图床 - Y2K Edition       [_][□][×]│
├────────────────────────────────────────┤
│  [Upload]  [Gallery]  [Config]        │
├────────────────────────────────────────┤
│                                        │
│        拖拽图片到这里上传              │
│        或点击选择文件                  │
│                                        │
│        支持: JPG, PNG, GIF, WebP      │
│                                        │
└────────────────────────────────────────┘

📤 第二步：上传图片

方法 1: 拖拽上传（推荐）

  1. 从文件管理器拖拽图片到窗口
  2. 观看 DOS 风格进度条
  3. 上传完成！

方法 2: 点击上传

  1. 点击上传区域
  2. 选择一张或多张图片
  3. 点击"打开"

上传进度

您会看到经典的 DOS 风格进度指示器：

[████████████████░░░░] 80% - Uploading image.jpg

🖼️ 第三步：查看图片

切换到画廊

点击顶部的 "Gallery" 按钮

画廊视图

┌────────────────────────────────────────┐
│  [Upload]  [Gallery]  [Config]        │
├────────────────────────────────────────┤
│  🔍 [Search...]  🏷️ [All Tags ▼]      │
├────────────────────────────────────────┤
│  ┌──────┐  ┌──────┐  ┌──────┐        │
│  │ 图1  │  │ 图2  │  │ 图3  │        │
│  └──────┘  └──────┘  └──────┘        │
└────────────────────────────────────────┘

查看图片详情

点击任意图片，右侧弹出详情窗口：

┌─ Image Details ──────────────────┐
│                                  │
│  📷 [图片预览]                    │
│                                  │
│  📝 文件名: image.jpg            │
│  📏 尺寸: 1920x1080              │
│  💾 大小: 1.2 MB                 │
│  📅 日期: 2026/01/20             │
│                                  │
│  🏷️ 标签: [截图] [工作]         │
│                                  │
│  📋 [复制直链]  [复制 Markdown]  │
│  🗑️ [删除图片]                   │
└──────────────────────────────────┘

🏷️ 第四步：添加标签

手动添加标签

  1. 在图片详情页，找到"标签"区域
  2. 输入标签名称（如"工作"）
  3. 按回车键添加
  4. 标签立即保存

删除标签

点击标签旁的 ❌ 按钮即可删除

📋 第五步：复制链接

Snaply 提供三种链接格式：

1. 直链

http://localhost:3000/uploads/abc123.jpg

用途: 直接在浏览器打开、插入 HTML

点击 "Copy Direct Link" 按钮

2. Markdown 格式

![image.jpg](http://localhost:3000/uploads/abc123.jpg)

用途: Markdown 文档、博客、GitHub

点击 "Copy Markdown" 按钮

3. Base64 编码

data:image/jpeg;base64,/9j/4AAQSkZJRg...

用途: 嵌入 HTML/CSS、离线使用

点击 "复制 Base64 编码" 按钮

⚙️ 第六步：基础配置

点击顶部的 "Config" 按钮

配置存储

┌─ 存储设置 ────────────────────────┐
│                                   │
│  存储类型: ● 本地存储              │
│           ○ Amazon S3             │
│           ○ MinIO                 │
│                                   │
│  上传目录: ./uploads              │
│  公开 URL: [                   ]  │
│            (可选，配置 CDN 域名)  │
│                                   │
└───────────────────────────────────┘

配置 CDN（可选）

如果您有 CDN，在"公开 URL"填写：

https://cdn.example.com

图片链接将自动使用该域名：

https://cdn.example.com/uploads/abc123.jpg

🤖 第七步：启用 AI（可选）

如果您想体验 AI 自动打标：

使用 Ollama（免费本地）

  1. 安装 Ollama

    brew install ollama

  2. 下载模型

    ollama pull llava

  3. 启动服务

    ollama serve

  4. 配置 Snaply

    • Config → AI 标签
    • ✅ 启用 AI 自动打标
    • AI 提供商: Ollama
    • Base URL: http://localhost:11434
    • 模型: llava
    • 点击 "🧪 测试 AI 连接"
    • 保存设置

测试 AI 打标

上传一张新图片，几秒后会自动生成标签：

上传图片: cat.jpg
↓ (3 秒后)
自动生成标签: [动物, 猫咪]

详细配置请参考 AI 功能配置

🎓 进阶功能

批量操作

  1. 在画廊中按住 Shift 点击多张图片
  2. 点击 "批量删除" 按钮

标签筛选

  1. 点击顶部的 "All Tags ▼" 下拉菜单
  2. 选择一个标签
  3. 只显示该标签的图片

搜索图片

在搜索框输入关键词（文件名或标签）

✅ 完成！

恭喜！您已经掌握了 Snaply 的基本用法。

下一步建议

🆘 遇到问题？

🎮 快捷键

快捷键 功能
⌘/Ctrl + U 打开上传
⌘/Ctrl + G 切换到画廊
⌘/Ctrl + , 打开配置
Esc 关闭弹窗
Delete 删除选中图片

最后更新: 2026-01-20

下一步: 基础配置

Clone this wiki locally