📝 备忘录功能使用指南

📝 备忘录功能使用指南

✨ 功能特性

🌐 网页端功能

  • ✅ 实时添加、编辑、删除备忘录
  • 📸 支持图片附件(多张)
  • 📎 支持文件附件(多个文件)
  • 🏷️ 4种分类:一般、待办、想法、笔记
  • ⭐ 3种优先级:普通、重要、紧急
  • 🔍 实时搜索功能
  • 📊 分类筛选
  • ✓ 标记完成状态
  • 💾 浏览器本地存储(LocalStorage)

🎨 美观设计

  • 🌈 渐变色卡片设计
  • 🎯 响应式布局
  • 🖼️ 图片网格展示
  • 🔍 图片放大查看
  • 📱 移动端适配
  • ✨ 流畅动画效果

🚀 使用方法

1️⃣ 网页端使用

访问网站的 /memos 页面,或点击导航栏的 “Memos” 链接。

添加备忘录

  1. 输入标题(可选)
  2. 输入内容
  3. 选择分类(一般/待办/想法/笔记)
  4. 选择优先级(普通/重要/紧急)
  5. 可选:点击”添加图片”上传图片
  6. 可选:点击”添加文件”上传文件
  7. 点击”添加备忘录”按钮

管理备忘录

  • 筛选:点击分类按钮查看特定类别
  • 搜索:在搜索框输入关键词
  • 完成:点击 ✓ 图标标记完成
  • 删除:点击 🗑️ 图标删除
  • 查看图片:点击图片可放大查看

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

文件

  • PDF
  • Word文档
  • Excel表格
  • 文本文件
  • 其他任意格式

💡 使用技巧

  1. 快速添加:只填写内容即可,标题和附件都是可选的
  2. 批量上传:图片和文件都支持一次选择多个
  3. 搜索技巧:搜索会匹配标题和内容
  4. 优先级管理:紧急和重要的备忘会有明显的视觉标识
  5. 完成标记:待办事项完成后可标记,方便追踪
  6. 图片预览:点击图片可全屏查看

🔧 技术实现

  • 前端: HTML5 + CSS3 + JavaScript
  • 存储: LocalStorage API
  • 布局: Flexbox + Grid
  • 图片处理: FileReader API + Base64
  • 后端: Jekyll + Ruby (可选)

🐛 已知限制

  1. LocalStorage 有大小限制(通常5-10MB),大量图片可能超出限制
  2. Base64 编码会增加文件体积(约33%)
  3. 备忘录数据仅存在当前浏览器中
  4. 清除浏览器缓存会丢失数据

🎁 未来计划

  • 导出备忘录为 Markdown
  • 云端同步功能
  • 标签系统
  • 提醒功能
  • 拖拽排序
  • 归档功能

💖 享受使用备忘录功能!如有问题或建议,欢迎反馈。