Trilium Notes可通过自定义CSS和HTML实现学习模式：1. 在笔记子项中添加text/css类型笔记并编写样式，隐藏树状栏、工具栏，优化字体与布局；2. 创建text/html子笔记插入切换按钮，通过JavaScript动态控制学习模式开关；3. 可扩展深色模式、字体调节等功能，提升专注阅读体验。
Trilium Notes 是一个功能强大的开源笔记应用，支持通过自定义 CSS 来实现主题切换，并可结合 HTML 和 JavaScript 增强显示效果。如果你想在 Trilium 中实现“学习模式”（比如夜间阅读、极简界面、字体优化等），可以通过 CSS 主题配合 HTML 注入来完成。
1. 启用自定义 CSS 支持
Trilium 允许你在特定笔记中注入 CSS 和 JavaScript，用于修改界面样式或行为。
操作步骤：
- 打开你希望作为“学习模式”的笔记
- 在笔记属性中添加类型为 text/css 的子笔记
- 将你的 CSS 样式写入该子笔记内容中
保存后，该样式会自动应用到当前笔记及其子笔记（如果启用继承）。
立即学习“前端免费学习笔记（深入）”；
2. 创建学习模式的 CSS 样式
以下是一个适用于“学习模式”的简洁 CSS 示例，优化阅读体验：
/* 学习模式 - 极简阅读风格 */
body {
font-family: "Helvetica Neue", Arial, sans-serif;
line-height: 1.8;
font-size: 18px;
color: #333;
background-color: #f9f9f9;
max-width: 800px;
margin: 40px auto;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
/ 隐藏侧边栏和工具栏 /
tree-pane, #note-actions-toolbar, #tab-bar {
display: none !important;
}
main-pane {
margin-left: 0 !important;
}
/ 优化标题层次 /
h1, h2, h3 {
color: #2c3e50;
margin-top: 1em;
border-bottom: 1px solid #eee;
padding-bottom: 0.3em;
}
/ 引用块美化 /
blockquote {
background-color: #f1f9ff;
border-left: 5px solid #3498db;
padding: 15px 20px;
margin: 20px 0;
font-style: italic;
}
这个样式隐藏了左侧树状结构、标签栏和操作按钮，只保留正文内容，营造专注阅读环境。
3. 添加“切换学习模式”按钮（HTML + JS）
你可以创建一个按钮，点击后动态切换学习模式的开启与关闭。
方法：在笔记中插入一个 HTML 子笔记（MIME 类型为 text/html）：
