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）：
function toggleLearningMode() {const styleId = 'learning-mode-style';const existingStyle = document.getElementById(styleId);
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);}
}
这个按钮可以在阅读时一键进入或退出学习模式，提升交互体验。
4. 扩展建议
你还可以进一步增强学习模式：
增加“深色模式”切换：通过 JS 动态切换 light/dark 主题设置字体大小调节滑块自动隐藏图片或代码块，用于纯文本复习导出为 PDF 时自动应用该样式
基本上就这些。利用 Trilium 的自定义 CSS 和 HTML 能力，你可以轻松打造适合个人习惯的学习视图，让笔记更聚焦、更高效。
以上就是Linux Trilium笔记用CSS主题切换HTML学习模式的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1596898.html
微信扫一扫 
支付宝扫一扫 
