Joplin教程
🤖 摘要：本文详解在Joplin中通过自定义CSS实现IDENotion极简风格。文章推荐直接编辑joplin.css替代浏览器样式表。内容涵盖多端路径、圆角卡片、侧边栏净化、排版优化及暗色适配代码，并附调试技巧与版本指南，助力高效完成界面美化。
💡 前置说明：<code>userchrome.css</code> 与 <code>userstyle.css</code> 是 浏览器专属（Firefox/Chromium）的 UI 覆盖文件，Joplin 基于 Electron + React 架构，不支持直接调用。实现 IDENotion 风格需通过 Joplin 内置的 <code>joplin.css</code> 自定义机制或社区主题插件完成。下文已为你修正技术路径并提供可直接落地的配置方案。
📦 Starred Blocks（笔记结构模板）
- [ ] 核心目标：还原 IDENotion 的极简留白、圆角卡片、Notion 排版与柔和动效
- [ ] 环境准备：Joplin Desktop ≥ 2.13 | 开发者工具开启 | 备份原始配置
- [ ] 主题切换：设置 → 外观 → 主题 → <code>Custom CSS</code>（或 <code>Dark/Light + Override</code>）
- [ ] CSS 注入路径：
- Windows: <code>%APPDATA%\joplindev\resources\joplin.css</code>
- macOS: <code>~/Library/Application Support/joplin/resources/joplin.css</code>
- Linux: <code>~/.config/joplin/resources/joplin.css</code>
- [ ] 生效验证：重启 Joplin → 检查 DevTools（<code>Ctrl+Shift+I</code>）→ Network 确认文件加载
- [ ] 版本兼容：Joplin 大版本更新后需重新校验选择器，建议锁定小版本或备份 CSS
🎨 IDENotion 风格实现要点
| 视觉特征 | CSS 实现策略 | 注意事项 |
|---|---|---|
| 全局圆角+微阴影 | <code>border-radius: 12px !important; box-shadow: …</code> | 避免过度使用导致性能下降 |
| 侧边栏极简留白 | <code>.Sidebar { background: #fafafa; border-right: none; }</code> | 可搭配 <code>#f8f9fa</code> 提升层次 |
| Notion 排版引擎 | <code>.ProseMirror { font-family: 'Inter', system-ui, sans-serif; line-height: 1.8; }</code> | 推荐系统字体栈保障跨平台 |
| 高亮/选中态柔和化 | <code>::selection { background: #e0f2fe; color: #0c4a6e; }</code> | 避免与原主题冲突 |
| 暗色模式平滑过渡 | <code>* { transition: background 0.3s ease, color 0.3s ease; }</code> | 需配合 Joplin <code>appearance.mode</code> |
🛠️ 核心 CSS 片段（可直接追加至 <code>joplin.css</code>）
/* ====== 全局容器圆角与悬浮感 ====== */
.App, .NoteList, .Editor, .SearchResults {
border-radius: 14px !important;
box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important;
}
/* ====== 侧边栏净化 ====== */
.Sidebar {
background: #fafafa !important;
border-right: none !important;
}
.Sidebar .NoteItem:hover {
background: #f1f5f9 !important;
}
/* ====== Notion 风格编辑器 ====== */
.ProseMirror {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
line-height: 1.85 !important;
padding: 24px !important;
}
.ProseMirror h1, .ProseMirror h2 { letter-spacing: -0.02em; }
/* ====== 柔和高亮与选中态 ====== */
::selection { background: #e0f2fe !important; color: #0c4a6e !important; }
.NoteItem.selected { background: #f8fafc !important; }
/* ====== 暗色模式适配（可选） ====== */
@media (prefers-color-scheme: dark) {
.App, .NoteList, .Editor { box-shadow: 0 4px 16px rgba(0,0,0,0.25) !important; }
.Sidebar { background: #18181b !important; }
.ProseMirror { color: #e4e4e7 !important; background: #0f0f11 !important; }
}🔍 调试与避坑指南
- 选择器失效：Joplin 更新会重构 DOM，使用 DevTools <code>Elements</code> 面板实时核对类名，优先用 <code>!important</code> 覆盖
- 主题冲突：若启用官方主题（如 <code>Joplin Dark</code>），需在其 CSS 下方追加自定义文件，或使用 <code>@import</code> 隔离作用域
- 性能优化：避免对 <code>*</code> 或全局标签使用复杂动画；阴影值建议 <code>< rgba(0,0,0,0.15)</code>
- 备份策略：将 <code>joplin.css</code> 纳入 Git 管理，提交时附带 <code>package.json</code> 版本与 Joplin build 号
