从零搭建二次元动漫图库 - 纯静态方案与实现原理

项目简介

我最近搭建了一个纯静态的二次元动漫图库网站，地址是 https://tu.hakimi.de5.net。

这个图库收录了 1182 张 动漫图片（402 张横图 + 780 张竖图），支持分类浏览、随机获取、API 调用等功能，界面采用了精美的二次元风格设计。

核心特点：

纯 HTML/CSS/JavaScript 静态网站，无需后端
瀑布流布局，响应式设计
樱花飘落动画背景
随机图片 API，支持外部调用
部署在 EdgeOne Pages，全球免费加速

基础架构

技术栈

前端：HTML5 + CSS3 + JavaScript（零框架）
部署：EdgeOne Pages（免费静态托管）
域名：tu.hakimi.de5.net
图片源：外部图床（list.yppp.net）

目录结构

anime-images/
├── index.html           # 主页
├── css/
│   └── style.css        # 样式文件
├── js/
│   └── main.js          # 核心逻辑
├── images/
│   ├── landscape.txt    # 横图 URL 列表
│   └── portrait.txt     # 竖图 URL 列表
├── api/
│   ├── random.html      # 随机图片 API（前端实现）
│   └── random.js        # 随机图片 API（Edge Function）
├── docs/
│   └── index.html       # API 文档
└── edgeone.json         # EdgeOne 部署配置

核心原理

1. 瀑布流布局原理

使用 CSS columns 属性实现瀑布流效果：

.gallery {
  columns: 4;          /* 4 列布局 */
  column-gap: 1.25rem; /* 列间距 */
}

.gallery-item {
  break-inside: avoid; /* 防止图片被分割到两列 */
}

优势：

无需 JavaScript 计算位置
自动适应不同高度的图片
响应式：桌面端 4 列 → 平板 3 列 → 手机 2 列

2. 图片懒加载原理

图片采用 loading="lazy" 属性，浏览器自动实现懒加载：

1	<img src="https://..." alt="动漫图片" loading="lazy">

加载流程：

图片进入视口前显示加载占位符（旋转动画）
图片进入视口时浏览器自动开始加载
加载完成后移除占位符，显示图片

3. 随机图片 API 原理

提供两种实现方式：

方式一：前端 302 跳转（api/random.html）

<script>
  fetch('/images/landscape.txt')
    .then(res => res.text())
    .then(text => {
      const urls = text.split('\n').filter(line => line.trim());
      const randomUrl = urls[Math.floor(Math.random() * urls.length)];
      window.location.href = randomUrl;  // 302 跳转
    });
</script>

方式二：Edge Function 后端（api/random.js）

export default async function (req) {
  const urls = await fetch('...').then(r => r.text());
  const urlList = urls.split('\n').filter(l => l.trim());
  const randomUrl = urlList[Math.floor(Math.random() * urlList.length)];
  
  return Response.redirect(randomUrl, 302);
}

调用方式：

浏览器访问：https://tu.hakimi.de5.net/api/random.html
API 调用：GET https://tu.hakimi.de5.net/api/random
指定类型：GET https://tu.hakimi.de5.net/api/random?type=landscape

4. 樱花动画原理

使用 Canvas 2D 实现花瓣飘落效果：

class Petal {
  update() {
    this.y += this.speed;                    // 下落
    this.x += Math.sin(this.y * sway) * swayAmount;  // 左右摇摆
    this.rotation += rotationSpeed;          // 旋转
  }
  
  draw() {
    ctx.bezierCurveTo(...);  // 贝塞尔曲线绘制花瓣形状
  }
}

性能优化：

仅 30 个花瓣对象
requestAnimationFrame 控制帧率
Canvas 比 DOM 动画性能更好

二次元界面设计

配色方案

采用紫色/粉色动漫主题：

--primary: #a78bfa;      /* 主色：淡紫色 */
--accent: #f472b6;       /* 强调色：粉色 */
--bg: #0f0a1a;           /* 背景：深紫黑 */
--bg-card: #1e1630;      /* 卡片背景 */

视觉特效

卡片悬停效果：

图片放大 1.08 倍
卡片上浮 8px
渐变边框显现
紫色光晕阴影

导航栏：

旋转樱花图标
渐变下划线动画
毛玻璃背景效果

加载动画：

三环不同速度旋转
呼吸文字淡入淡出

部署流程

1. EdgeOne Pages 部署

在项目根目录创建 edgeone.json：

{
  "build": {
    "command": "echo 'No build needed'",
    "output": "."
  }
}

2. 绑定自定义域名

在 EdgeOne 控制台绑定域名 tu.hakimi.de5.net，添加 CNAME 记录即可。

3. 推送代码自动部署

1
2
3

git add .
git commit -m "更新图库内容"
git push origin main

EdgeOne Pages 会自动拉取代码并部署。

使用场景

作为图床

可以在博客、论坛等地方引用图片：

1	<img src="图片URL" alt="动漫图片">

调用随机 API

在你的网站添加随机图片：

1	<img src="https://tu.hakimi.de5.net/api/random.html" alt="随机动漫图片">

集成到博客

我已经在博客的 ACG 页面集成了这个图库，点击即可跳转浏览。

总结

这个项目展示了如何用纯静态技术构建一个功能完整的图库网站：

CSS Columns 实现瀑布流，无需 JS 计算
Canvas 实现樱花动画，性能优秀
纯前端 实现随机 API，零后端成本
EdgeOne Pages 免费部署，全球加速

总成本：0 元（图片使用外部图床，部署使用 EdgeOne 免费版）

如果你对二次元图片感兴趣，欢迎访问 https://tu.hakimi.de5.net 浏览！

📝 番星 · 科技研究记录

番星的博客