赛博日记本

一个基于 Electron 的本地可视化日记管理桌面应用，将 Markdown 格式的日记文件转换为精美的交互式网页，支持日历视图、全文搜索和数据统计功能。所有数据存储在本地，无需联网，完全掌控你的日记文件。

日历视图

数据统计

技术栈

层级	技术	说明
桌面框架	Electron 43+	主进程预渲染 HTML，渲染进程 `loadFile()` 加载本地页面，菜单交互无 IPC/preload
构建脚本	Node.js CommonJS	`index.js` 读取 `diary/*.md`，注入 JSON 到 `template.html`
模板引擎	原生字符串替换	`{{DIARIES_DATA}}` / `{{STATS_DATA}}` 构建时替换
Markdown 渲染	markdown-it 14+	支持 HTML、链接、typographer
图表库	Chart.js 4.4.7	本地 `libs/chart.min.js`，不依赖 CDN
打包工具	electron-builder 26+	支持 macOS / Windows / Linux 打包

功能特性

1. 日历视图

以月历形式展示所有日记
有日记的日期显示紫色方块标记
方块大小根据日记字数动态变化（字数越多，方块越大）
点击日期可查看日记详情

2. 日记详情面板

右侧弹出详情面板
支持 Markdown 渲染（包括图片、链接等）
日记中引用同一级 resources/ 目录的图片：![描述](resources/xxx.jpg)
显示日记字数统计

3. 全文搜索

顶部搜索框支持按内容搜索
搜索结果显示日记预览（200 字）
实时匹配高亮

4. 统计图表

每日统计：按日期统计字数
每周统计：按周统计日记数量和字数
每月统计：按月统计日记数量和字数
每年统计：按年统计日记数量和字数
无日记的日期显示为 0
可点击图例小圆点快速跳转到对应日记

5. 年份/月份导航

年份/月份下拉选择器
上一月/下一月快捷切换
支持快速跳转到任意年月

6. 主题切换

赛博朋克：默认紫色赛博朋克风格（深色背景 + 紫色主色调）
21th 简约：浅色背景 + 蓝色强调色
主题切换后保持当前页面不变

安装步骤

环境要求

Node.js 14+（推荐 18+）
npm（随 Node.js 自带）

克隆仓库

git clone <repository-url>
cd cyber-diary

安装依赖

npm install

安装完成后 postinstall 会自动执行 npm run prepare，将 Chart.js 复制到 libs/ 目录。

使用方法

开发模式（推荐）

npm run dev

该命令会：

执行 npm run build，读取 diary/*.md，生成 build/index.html 并复制 resources/
启动 Electron，加载本地 build/index.html
自动打开 DevTools

开发模式下数据目录为项目内的 diary/，你可以直接编辑其中的 Markdown 文件。

菜单操作

应用顶部菜单栏提供以下操作：

菜单	功能	说明
文件 → 选择日记文件夹…	打开文件夹选择对话框	选择任意目录作为日记源，立即重新构建
文件 → 重新构建	手动触发构建	重新读取当前日记文件夹并刷新页面

选择新日记文件夹后，应用会：

读取新目录下的 .md 文件
从新目录同级查找 resources/，复制到构建输出
将选择的路径写入配置文件（下次启动自动恢复）
刷新页面显示新的日记内容

图片路径约定：日记文件中可以使用 resources/xxx.jpg 或 ../resources/xxx.jpg 两种方式引用同级目录下的资源，构建时会自动将路径统一处理为正确的相对位置。

首次启动与文件夹记忆

首次启动时，应用没有已保存的日记路径，会自动弹出系统文件夹选择框，让你指定日记存放目录。选择后该路径会被记录下来。

以后每次启动，应用会自动读取上一次选择的日记路径，直接使用该目录下的 .md 文件构建页面，无需再次选择。

记忆数据保存在 app.getPath('userData')/config.json，格式如下：

{
  "lastDiaryDir": "/home/user/我的日记"
}

如果已保存的路径被删除或不再可用，下次启动时会重新弹出文件夹选择框。

构建 HTML（不启动 Electron）

npm run build

输出：

build/index.html — 包含所有日记数据和统计信息的单页应用
build/resources/ — 复制自 resources/

CLI 模式（兼容旧用法）

node index.js --dir /path/to/custom-diary

不传入 --dir 时默认使用项目内 diary/ 目录。

打包成桌面应用

npm run dist

打包产物位于 dist/ 目录：

macOS：.dmg 文件
Windows：.exe 安装包
Linux：.AppImage 文件

打包配置说明：

asar: true — 源码打包为 asar
asarUnpack: diary/**/* — 开发模板数据不打包进 asar
extraResources: [{ from: 'diary', to: 'diary' }] — 包含初始日记模板

生产环境数据目录

打包应用只在 userData 存放构建产物和第三方库，不复制日记文件和资源：

路径	内容	来源
`app.getPath('userData')/build/`	构建输出的 `index.html`	每次构建生成
`app.getPath('userData')/libs/`	Chart.js 等第三方库	首次从 asar 复制

日记文件和资源（图片等）直接从用户选择的文件夹读取，每次构建时重新读取，不复制到 userData。

在 Linux 上，userData 默认为 ~/.config/cyber-diary/。

运行时构建流程

每次点击「重新构建」或选择新日记文件夹时：

main.js 调用 index.js.build(diaryDir, { buildDir })
读取 diaryDir 下的所有 .md 文件，渲染为 HTML
从 diaryDir/../resources/ 复制资源到 build/resources/
窗口加载新的 build/index.html

注意：resources/ 和 diary/ 必须始终同级。无论选择哪个文件夹作为日记源，其上级目录中的 resources/ 都会被同步到构建输出。支持任意层级的子目录嵌套。

日记文件规范

在 diary/ 文件夹中创建 Markdown 格式的日记文件，文件名必须遵循以下格式：

格式一：

yyyyMMdd.md

例如：

20260606.md（2026年6月6日）
20260705.md（2026年7月5日）

格式二：

yyMMdd.md

例如：

260606.md（自动转换为2026年6月6日）
260705.md（自动转换为2026年7月5日）

提示：6 位日期格式会自动添加 "20" 前缀，转换为 20xx 年的日期。

注意：

文件名必须是纯数字的日期格式
文件内容使用标准 Markdown 语法
支持标题、列表、加粗、链接等 Markdown 特性

示例日记内容

# 今天的心情

今天天气很好，阳光明媚。

## 工作
- 完成了项目报告
- 参加了团队会议

## 生活
晚上和朋友一起吃了火锅，很开心！

> 生活不止眼前的苟且，还有诗和远方。

界面风格

紫色赛博朋克风格（默认）

主题色：紫色（#9b59b6）
背景：深色赛博朋克风格，带渐变光晕效果（#0a0a0f）
卡片：半透明毛玻璃效果（rgba(255,255,255,0.05)）
页面风格：半透明方角设计
下拉菜单：紫色半透明边框，毛玻璃效果

21th 简约风格

主题色：蓝色（#0040ff）
背景：浅色简约风格（#c5c9c9）
卡片：白色背景，深色边框
字体：Geist 字体
页面风格：方角设计，带阴影效果

常见问题

Q：如何更新日记？

A：修改 diary/ 文件夹中的 Markdown 文件后，重新运行 npm run build 或重启应用即可更新。

Q：打包后日记数据存在哪里？

A：日记文件和资源（图片等）**不复制到 userData**，直接从你选择的文件夹读取。userData 下只存放构建产物（build/）和 Chart.js 等第三方库（libs/）。完整的目录结构请见生产环境数据目录。

Q：如何更换日记文件夹？

A：在菜单栏点击 **文件 → 选择日记文件夹…**，选择任意包含 .md 日记文件的目录。系统会自动重新构建并刷新页面。每次更换都会同步该目录同级的 resources/ 资源。选择后路径会被记忆，下次启动自动恢复。

Q：可以管理多个日记文件夹吗？

A：可以。每次通过 文件 → 选择日记文件夹… 切换即可。应用会记住最后使用的路径，下次启动时自动加载。可以通过修改 ~/.config/cyber-diary/config.json 中的 lastDiaryDir 字段手动指定。

Q：日记中的图片如何引用？

A：使用相对路径引用同级 resources/ 目录中的文件，例如 ![照片](resources/photo.jpg) 或 ![照片](../resources/photo.jpg) 均可。支持任意层级的子目录嵌套，例如 ![图标](resources/images/icons/star.png) 也会被正确复制到构建输出。

Q：为什么某些日期没有显示？

A：系统会自动填充第一篇和最后一篇日记之间的所有日期。如果日期超出这个范围，则不会显示。

Q：搜索结果预览字数可以调整吗？

A：可以在 index.js 第 38 行修改预览字数。

Q：如何删除日记？

A：直接删除 diary/ 文件夹中对应的 .md 文件，重新构建即可。

Q：应用可以离线使用吗？

A：可以。Chart.js 已本地化到 libs/chart.min.js，不依赖任何 CDN，完全离线可用。

项目结构

cyber-diary/
├── main.js            # Electron 主进程入口（菜单、文件对话框、构建调度）
├── index.js           # 构建脚本，导出 build(diaryDir)
├── prepare.js         # 复制 Chart.js 到 libs/
├── template.html      # HTML 模板（自包含 CSS+JS）
├── package.json       # 项目配置 + electron-builder 配置
├── diary/             # 日记文件存放目录（开发环境）
├── resources/         # 静态资源（图片等，与 diary/ 同级）
├── build/             # 生成的 HTML 文件（git-ignored）
│   ├── index.html     # 构建输出
│   └── resources/     # 复制自 resources/
├── libs/              # 本地第三方库
│   └── chart.min.js   # Chart.js 本地副本
└── extra/             # 实验性备用模板

生产环境运行时目录（AppImage 首次启动后）

~/.config/cyber-diary/
├── config.json         # 配置信息（最近使用的日记文件夹路径）
├── build/
│   ├── index.html      # 构建输出
│   └── resources/      # 复制自 diaryDir/../resources/
└── libs/
    └── chart.min.js

日记文件和资源（图片等）**不复制到 userData**，直接从用户选择的文件夹读取。

开发说明

数据流

开发模式：
  diary/*.md                     → index.js (markdown-it render + stats) → build/index.html
  resources/                     → 从 diary/ 同级复制                → build/resources/

生产模式（菜单选择文件夹）：
  任意文件夹/*.md                 → main.js 调用 index.js.build()     → userData/build/index.html
  任意文件夹/../resources/        → 从 diaryDir 同级复制              → userData/build/resources/

template.html 中的 {{DIARIES_DATA}} 和 {{STATS_DATA}} 在构建时被替换为 JSON 数据。

重要约束

build/ 已被 .gitignore 忽略，修改 template.html 或 JS 后需运行 npm run build 再提交
diary/*.md 内容不得删除或修改（除非明确要求）
template.html 中 Chart.js 必须保持本地路径 ../libs/chart.min.js，不得改回 CDN
不要添加框架、bundler 或 transpiler（除非明确要求）
resources/ 始终与 diary/ 同级，构建时会自动同步到构建输出
生产环境菜单栏提供「选择日记文件夹…」和「重新构建」功能，无需修改配置文件

License

This project is licensed under the PolyForm Noncommercial License 1.0.0.

Free for personal study, hobby, academic research, non-profit & government organizations.
Commercial use, corporate internal production deployment, paid SaaS, commercial bundling are strictly prohibited.
If you need commercial licensing, contact: jianyuewushuang@163.com.

See the full legal terms in LICENSE.