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);
}
<p>/<em> 隐藏侧边栏和工具栏 </em>/</p><h1>tree-pane, #note-actions-toolbar, #tab-bar {</h1><pre class='brush:php;toolbar:false;'>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）：
<button onclick="toggleLearningMode()">切换学习模式</button>
<p><script>
function toggleLearningMode() {
const styleId = 'learning-mode-style';
const existingStyle = document.getElementById(styleId);</p><pre class='brush:php;toolbar:false;'>if (existingStyle) {
// 已启用，关闭模式
existingStyle.remove();
document.body.style.cssText = '';
document.getElementById('tree-pane').style.display = '';
} else {
// 启用学习模式
const style = document.createElement('style');
style.id = styleId;
style.textContent = `
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; }
`;
document.head.appendChild(style);
}} </script>
这个按钮可以在阅读时一键进入或退出学习模式，提升交互体验。
4. 扩展建议
你还可以进一步增强学习模式：
- 增加“深色模式”切换：通过 JS 动态切换 light/dark 主题
- 设置字体大小调节滑块
- 自动隐藏图片或代码块，用于纯文本复习
- 导出为 PDF 时自动应用该样式
基本上就这些。利用 Trilium 的自定义 CSS 和 HTML 能力，你可以轻松打造适合个人习惯的学习视图，让笔记更聚焦、更高效。
