给大家品鉴一个小项目

[oyps]

👉 仓库地址： https://github.com/iuroc/haixiu

怎么使用

🍑 方式一

直接访问：https://iuroc.github.io/haixiu/。

🍎 方式二

Fork 本项目，然后使用 Github Pages 部署 /docs 目录 。

项目特点

1. 纯静态网站，可直接用 Github Pages 部署
2. 支持数据分页和按标签显示，支持滚动到底部自动增加下一页内容
3. 基于 PhotoSwipe 实现高质量的图片查看器
4. 图片查看器切换图片时，缩略图列表跟随滚动，看到哪跟到哪
5. 图片查看器到最后一张时，自动增加下一页数据，不中断浏览
6. 基于 Location Hash 实现支持 history.back() 关闭图片查看器，兼容移动端返回键
7. 基于 Location Hash 实现支持 history.forward() 打开图片查看器，并自动恢复上一次位置
8. 通过 Hash 关闭图片查看器时，支持打断动画，体验很不错
9. 自动记录滚动条位置，消除 HashChange 事件对滚动条的影响

相关技术

1. 使用 Node.js Fetch API 爬虫
2. 将数据爬取后，分页存储到多个 JSON 文件中，文件名中标记了页码和标签信息
3. 前端使用 Van.js 框架构建响应式 UI
4. 前端通过 Fetch 直接请求静态 JSON 文件实现分页请求
5. 使用 PhotoSwipe 库实现图片查看器

[witfun]

图片内容不做评价，单纯就图片存储说下：抓取的图片的存储仅仅考虑本地（ GitHub ）存储吗？，GitHub 仓库存储不会违反 GitHub 资源滥用政策吗？其他的功能挺好的。

[oyps]

@witfun 因为图片量不是很大，所以就直接 Pages 存储了，图片列表都存到 JSON 里，把图片地址改成别的图床也是可以的，为了单纯的演示就直接放仓库里面了，图片内容是 V 站另一位兄弟的帖子里白嫖过来的哈哈，内容不是关键，关键是网站功能。这个项目，我试了下，用 Vercel 部署也很是不错。

[oyps]

@witfun 抓取到的数据写进 JSON 文件，图片地址都是相对路径，如果将图片上传到别处，只需要前端修改下图片 base 地址就行了。