以下是根据你提供的完整设计要求与截图内容整理的 README.md 排版方案,适合放入你项目根目录下的 README.md 文件中👇
一个无需后端、无需服务器、零部署的纯前端网站 使用在线 CDN(ECharts 5 + 中国地图 JSON),所有数据均存储于浏览器
localStorage,支持一键导出/导入 JSON 备份。这里记录了我的旅行、阅读、兴趣爱好与生活点滴,见证每一步成长的足迹。
运行方式:
- ✅ 纯前端,无需任何服务器
- ✅ 在线加载 CDN(ECharts 5、中国地图 JSON)
- ✅ 图片使用 base64 假图占位,后续可替换
- ✅ 数据全存
localStorage - ✅ 一键导出/导入 JSON 文件进行备份与恢复
- 封面标题 + 一句话简介
- 按钮「进入网站」 → 导航页
- 背景渐变 + 响应式布局
- 圆形头像(占位)
- 昵称、出生年月、所在城市
- 个性签名展示
- 微信二维码已移除
- ECharts 中国地图(省级)在线秒加载
- 新增旅程:输入省市名 → 高亮并持久化
- 悬浮高亮省份:显示「省市名 + 旅行时间 + 喜欢程度(五星)」
- 点击省份:跳转详情页
trip-detail.html?province=xxx
- 顶部:省份名 + 返回按钮
- 中部:照片占位瀑布流(支持多张上传)
- 下部:时间、同行人、感想、喜欢程度(可编辑)
- 底部:编辑 / 删除按钮(删除后取消地图高亮)
- 瀑布流布局,自动追加占位图
- 点击图片弹窗(支持缩放与关闭)
- 独立点赞持久化(
localStorage记录)
-
支持列表视图 / 卡片视图切换,并自动记忆上次选择
-
单条信息包含:
- 书名、封面(占位图)
- 评分(1~5 星)
- 正文(可插图)
- 阅读日期
-
支持增删改查 + 导入导出 JSON
-
网格卡片布局(图片 + 标题)
-
点击进入详情页:
- 长文内容
- 作品展示(占位图)
- 时间轴记录成长历程
分为四个 Tab 页面:
| 模块 | 功能描述 |
|---|---|
| 📋 档案 | 宠物信息卡 + 体重折线图 + 性格标签 |
| 🐾 成长记录 | 时间轴(里程碑/体重两色点)+ 富文本内容 |
| 🖼️ 照片合集 | 独立瀑布流、点赞、幻灯片浏览、年月筛选 |
| 📅 日常点滴 | 月历 + 图文日记 + 标签 + 搜索功能 |
通用功能:增删改、导出导入、删除二次确认提示
所有模块数据均保存在浏览器的 localStorage,结构如下:
{ profile: { nickname, birthday, city, signature }, trips: [{ province, date, rating, companions, notes }], books: [{ title, score, content, date }], pets: { info, records, photos, diaries }, gallery: [{ src, likes }], hobbies: [{ name, content, timeline }] }
支持:
- ✅ 一键导出为 JSON 文件
- ✅ 一键导入 JSON 文件(自动覆盖)
- HTML5 + CSS3 + JavaScript
- ECharts 5(CDN加载)
- 在线中国地图 JSON(省级)
- 本地存储:
localStorage - 数据导入导出:
FileReader+Blob
直接打开 index.html 即可
不需要 Node.js / Python / 本地服务器 全部使用在线 CDN + 浏览器本地存储运行
(来自截图)
当前已完成模块:导航栏、我的、旅程、相册、读书、兴趣爱好、宠物模块的交互与数据支持
- 优化 UI 主题与动效
- 为相册添加年份筛选与批量删除
- 添加阅读模块 Markdown 富文本支持
- 实现宠物时间轴的折线与卡片联动
- 支持主题色切换(亮/暗)
该项目旨在:
打造一个无需登录、随开即用、可导出的纯前端个人成长网站。
不依赖任何后端或服务器,所有数据均在本地浏览器保存。
理想用户场景:希望以最低成本记录成长轨迹、旅行足迹与阅读笔记的个人创作者。
作者:盼哥 PyAI 实验室 GitHub:Tom-python0121/my-personal-blog