📝 备忘录功能使用指南
✨ 功能特性
🌐 网页端功能
- ✅ 实时添加、编辑、删除备忘录
- 📸 支持图片附件(多张)
- 📎 支持文件附件(多个文件)
- 🏷️ 4种分类:一般、待办、想法、笔记
- ⭐ 3种优先级:普通、重要、紧急
- 🔍 实时搜索功能
- 📊 分类筛选
- ✓ 标记完成状态
- 💾 浏览器本地存储(LocalStorage)
🎨 美观设计
- 🌈 渐变色卡片设计
- 🎯 响应式布局
- 🖼️ 图片网格展示
- 🔍 图片放大查看
- 📱 移动端适配
- ✨ 流畅动画效果
🚀 使用方法
1️⃣ 网页端使用
访问网站的 /memos 页面,或点击导航栏的 “Memos” 链接。
添加备忘录
- 输入标题(可选)
- 输入内容
- 选择分类(一般/待办/想法/笔记)
- 选择优先级(普通/重要/紧急)
- 可选:点击”添加图片”上传图片
- 可选:点击”添加文件”上传文件
- 点击”添加备忘录”按钮
管理备忘录
- 筛选:点击分类按钮查看特定类别
- 搜索:在搜索框输入关键词
- 完成:点击 ✓ 图标标记完成
- 删除:点击 🗑️ 图标删除
- 查看图片:点击图片可放大查看
2️⃣ 命令行使用(可选)
如果想让备忘录永久保存到网站文件(部署后所有人可见):
交互式添加
./add_memo.sh
命令行直接添加
ruby add_memo.rb "备忘内容" "标题" "分类" "优先级"
示例:
ruby add_memo.rb "完成项目文档" "项目任务" "todo" "urgent"
提交到Git
git add _data/memos.yml
git commit -m "Add new memo"
git push
📊 数据存储
浏览器本地存储
- 位置:浏览器 LocalStorage
- 特点:
- ✅ 即时保存,无需刷新
- ✅ 仅本地可见,私密性高
- ✅ 支持图片和文件(Base64编码)
- ⚠️ 更换浏览器或设备后不可见
- ⚠️ 清除浏览器数据会丢失
服务器存储(可选)
- 位置:
_data/memos.yml - 特点:
- ✅ 永久保存
- ✅ 所有设备同步
- ✅ 部署后公开可见
- ⚠️ 需要手动使用命令行添加
- ⚠️ 图片和文件需单独托管
🎯 分类说明
| 分类 | 图标 | 说明 | 适用场景 |
|---|---|---|---|
| 一般 | 📋 | 通用备忘 | 日常记录、随手笔记 |
| 待办 | ✅ | 任务事项 | 需要完成的任务 |
| 想法 | 💡 | 创意灵感 | 突发奇想、项目构思 |
| 笔记 | 📖 | 学习笔记 | 学习内容、知识点 |
⭐ 优先级说明
| 优先级 | 标识 | 颜色 | 说明 |
|---|---|---|---|
| 普通 | 📌 | 蓝色 | 一般事项 |
| 重要 | ⭐ | 黄色 | 需要重点关注 |
| 紧急 | 🔥 | 红色 | 需要立即处理 |
📱 支持的文件类型
图片
- JPG/JPEG
- PNG
- GIF
- WebP
- SVG
文件
- Word文档
- Excel表格
- 文本文件
- 其他任意格式
💡 使用技巧
- 快速添加:只填写内容即可,标题和附件都是可选的
- 批量上传:图片和文件都支持一次选择多个
- 搜索技巧:搜索会匹配标题和内容
- 优先级管理:紧急和重要的备忘会有明显的视觉标识
- 完成标记:待办事项完成后可标记,方便追踪
- 图片预览:点击图片可全屏查看
🔧 技术实现
- 前端: HTML5 + CSS3 + JavaScript
- 存储: LocalStorage API
- 布局: Flexbox + Grid
- 图片处理: FileReader API + Base64
- 后端: Jekyll + Ruby (可选)
🐛 已知限制
- LocalStorage 有大小限制(通常5-10MB),大量图片可能超出限制
- Base64 编码会增加文件体积(约33%)
- 备忘录数据仅存在当前浏览器中
- 清除浏览器缓存会丢失数据
🎁 未来计划
- 导出备忘录为 Markdown
- 云端同步功能
- 标签系统
- 提醒功能
- 拖拽排序
- 归档功能
💖 享受使用备忘录功能!如有问题或建议,欢迎反馈。