【Node】Web 版 日记笔记 博客

数据使用 data.json 存储

参考：

1. Heynote 1.8.0
2. Heynote 介绍 2.2K Star开源专为程序员打造的记事本

我现在使用 Heynote 记笔记，但 Heynote 是个本地应用，于是想搞个 Web 版的记东西，并且自动渲染成博客

介绍

一个基于 Web 的实时记事本和博客系统，支持动态添加、编辑和删除文本块，支持 markdown 语法高亮，并可以实时保存数据。 用户可以通过简单的按钮操作插入时间、日记、笔记，并在文本块之间灵活插入新内容，并且自动渲染成博客。

效果

功能特性

• 实时编辑：每个文本块都可以实时编辑，内容自动保存
• 动态插入：
  • 在当前块前或后插入新文本块
  • 在光标位置插入时间和日期
• 自动保存：所有更改会自动保存到数据文件中
• 响应式设计：适配不同屏幕尺寸
• 博客系统：
  • 支持文章发布和管理 📆是日记 📘是笔记
  • 文章列表展示
  • 单文章详情页面

项目结构

▼
text
复制代码
real-time-notepad/
├── public/               # 静态资源文件
│   ├── blog.js          # 博客相关的 JavaScript
│   └── blog.css         # 博客样式文件
├── views/               # HTML 文件
│   ├── index.html      # 主页面
│   ├── blog.html       # 博客列表页面
│   └── article.html    # 文章详情页面
├── data.json           # 数据存储文件
├── index.js            # 服务器主文件
├── README.md           # 项目说明文件
└── package.json        # 项目依赖配置文件

使用方法

1. 记事本功能：

   • 编辑文本块，不同块自由移动
   • 插入日记和笔记的标题、时间戳
   • 添加新文本块
   • 快捷键 ctrl+enter 当前块后面插入新块，alt+enter 当前块前面插入新块
   • data.json 与页面上的数据顺序保持一致

2. 博客功能：

   • 访问 /blog 查看博客（热力图+笔记列表）