返乡式开发：用 AI 给我的故乡做了个文旅名片

彭于晏689
59 阅读3分钟

周末试水当下爆火的 AI 开发，借着国内领先的 TRAE 为 PRO 会员提供的 800 专属额度落地了这个想法，本仓库代码全程由 AI 生成，欢迎各位开发者加入交流，觉得有趣的话不妨动动小手点个 star～

🌊 水韵宝应 (Water Charm Baoying)

"中国荷藕之乡" —— 江苏宝应县文旅门户网站
A modern tourism portal for Baoying County, the Hometown of Lotus Root.

项目地址：github.com/zzzjian1/Ba…

线上演示地址：www.baoying.website

欢迎来到 水韵宝应 项目！这是一个基于现代 Web 技术栈构建的沉浸式旅游门户网站。本项目不仅展示了宝应的自然风光与人文底蕴，还集成了多语言、路线规划、视频互动等实用功能，致力于为游客提供最佳的数字导览体验。

✨ 核心特性 (Features)

1. 🌏 国际化体验 (i18n)

  • 中英双语切换: 全站支持中文与英文一键切换，内容覆盖导航、景点介绍、路线规划及页脚信息。
  • 无缝衔接: 语言状态持久化，刷新页面不丢失。

2. 🎭 沉浸式视觉与互动

  • 打字机特效 (Typewriter): 首页标题采用优雅的逐字浮现动画，配合 "水韵宝应 荷藕之乡" 的标语，营造唯美意境。
  • B站视频嵌入: 首页集成 Bilibili 高清宣传片播放器，支持弹幕、倍速与高清画质，秒开无缓冲。
  • 弹幕互动 (Danmaku): 首页背景带有飘逸的弹幕评论效果，增加社区氛围。
  • 动态导航栏: 智能感应页面滚动与背景色，自动在透明/白底模式间切换，保证在任何页面（如白底的路线页）都清晰可见。

3. 🗺️ 深度导览服务

  • 景点大全: 收录了 宝应湖国家湿地公园、纵棹园、宁国寺（江淮第一刹）、宝应博物馆 等核心景点。
    • 新增: 黄金海岸水上乐园（夏日热门）、印象江南（高端休闲SPA）。
  • 美食地图: 汇集 泾河西瓜、全藕宴、长鱼面、小官庄肉圆 等地道风味。
  • 路线规划: 提供三条精选路线，满足不同人群需求：
    1. 经典人文一日游: 逛园林、拜古刹、品历史、享SPA。
    2. 湿地娱乐亲子游: 游湿地、吃全藕、玩水上乐园。
    3. 全域深度两日游: 深入曹甸古战场与夏集桃花源。

4. 📊 实用工具集成

  • 访问量统计: 页脚集成 不蒜子 (Busuanzi) 统计，实时展示 PV (浏览量) 和 UV (访客数)。（开发环境下自动隐藏，避免数据污染）
  • 在线预约: 精美的模态框交互，模拟门票与导游预约流程。
  • 响应式设计: 完美适配桌面、平板和手机端。

🏗️ 技术栈 (Tech Stack)

本项目采用 React 生态中最前沿的技术组合：

📂 项目结构 (Project Structure)

/
├── app/                  # Next.js App Router 页面路由
│   ├── attractions/      # 景点列表与详情
│   ├── food/             # 美食特产
│   ├── routes/           # 路线规划
│   ├── about/            # 关于我们
│   └── page.tsx          # 首页 (Hero & Features)
├── components/           # UI 组件库
│   ├── Navbar.tsx        # 智能导航栏
│   ├── Footer.tsx        # 页脚 (含访问统计)
│   ├── Hero.tsx          # 首屏 (含打字机/视频)
│   ├── VideoModal.tsx    # B站视频弹窗
│   ├── TypewriterText.tsx# 打字机文字组件
│   └── ...
├── data/                 # 数据中心 (JSON)
│   ├── attractions.json  # 景点数据
│   ├── food.json         # 美食数据
│   ├── routes.json       # 路线数据
│   └── timeline.json     # 历史时间轴
└── public/               # 静态资源 (图片/视频)
avatar
文章
阅读
粉丝