Linux Trilium笔记用CSS主题切换HTML学习模式

絕刀狂花

发布： 2025-11-18 23:06:05

原创

249人浏览过

Trilium Notes可通过自定义CSS和HTML实现学习模式：1. 在笔记子项中添加text/css类型笔记并编写样式，隐藏树状栏、工具栏，优化字体与布局；2. 创建text/html子笔记插入切换按钮，通过JavaScript动态控制学习模式开关；3. 可扩展深色模式、字体调节等功能，提升专注阅读体验。

linux trilium笔记用css主题切换html学习模式

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;

登录后复制

}

PhotoAid Image Upscaler

PhotoAid出品的免费在线AI图片放大工具

查看详情

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>

这个按钮可以在阅读时一键进入或退出学习模式，提升交互体验。