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）：




 雄杰鑫电商资讯网 版权所有  鄂ICP备2024084503号