定制你的 Trilium Notes：主题开发与界面个性化指南

【免费下载链接】trilium Build your personal knowledge base with Trilium Notes 项目地址: https://gitcode.com/gh_mirrors/tr/trilium

引言：突破默认界面的束缚

你是否曾觉得 Trilium Notes 的默认界面无法完全匹配你的工作流？作为一款强大的个人知识库工具，Trilium Notes 提供了丰富的主题定制功能，让你能够打造专属于自己的知识管理环境。本文将深入探讨主题开发的核心原理、CSS 变量系统、自定义主题创建流程以及高级界面定制技巧，帮助你将 Trilium Notes 打造成既美观又高效的个人知识空间。

读完本文后，你将能够：

• 理解 Trilium Notes 的主题系统架构
• 掌握 CSS 变量的自定义方法
• 创建并部署个性化主题
• 实现高级界面定制与交互优化
• 解决主题开发中的常见问题

Trilium 主题系统架构解析

主题系统核心组件

Trilium Notes 的主题系统基于 CSS 变量（CSS Variables）实现，通过动态加载不同的样式表来切换主题。核心组件包括：

1. 主题配置系统：通过 options.js 和 options_init.js 管理主题相关配置
2. CSS 变量定义：在主题样式表中定义界面元素的视觉属性
3. 主题切换机制：通过修改 theme 配置项实现主题切换

主题加载流程

主题加载的完整流程如下：

CSS 变量系统详解

核心 CSS 变量体系

Trilium Notes 使用一套完整的 CSS 变量体系来定义界面元素的样式，主要包括以下类别：

变量类别	作用	示例变量
基础样式	定义字体、大小等基础属性	--main-font-family, --main-font-size
颜色系统	定义各类元素的颜色	--main-background-color, --main-text-color
组件样式	定义按钮、输入框等组件样式	--button-background-color, --input-text-color
布局样式	定义面板、标签等布局元素样式	--left-pane-background-color, --active-tab-background-color

关键 CSS 变量详解

以下是一些核心 CSS 变量的详细说明及其在默认主题中的取值：

/* 基础字体设置 */
--main-font-family: Montserrat;
--main-font-size: normal;
--monospace-font-family: JetBrainsLight;

/* 主要颜色定义 */
--main-background-color: white;
--main-text-color: black;
--main-border-color: #ccc;

/* 交互元素样式 */
--button-background-color: transparent;
--button-border-color: #ddd;
--button-text-color: black;
--primary-button-background-color: #6c757d;
--primary-button-text-color: white;

/* 面板样式 */
--left-pane-background-color: #F3F3F3;
--left-pane-text-color: #333;
--active-tab-background-color: #ddd;
--inactive-tab-background-color: #f0f0f0;

自定义主题开发实战

主题开发环境准备

开始主题开发前，需要准备以下环境和工具：

1. Trilium Notes 开发版或安装版
2. 代码编辑器（如 VS Code）
3. 浏览器开发者工具（用于实时调试）
4. 文件同步工具（可选，用于开发时自动刷新）

创建自定义主题的步骤

1. 新建主题 CSS 文件

在 src/public/stylesheets/ 目录下创建自定义主题文件，建议命名为 theme-<主题名>.css，如 theme-dark-blue.css。

2. 定义 CSS 变量

以默认的 theme-light.css 为基础，重定义需要自定义的 CSS 变量。以下是一个深色主题的示例：

/* theme-dark-blue.css */
:root {
    --theme-style: dark;
    
    /* 字体设置保持不变，继承默认主题 */
    
    /* 颜色系统 - 深色主题 */
    --main-background-color: #1a202c;
    --main-text-color: #e2e8f0;
    --main-border-color: #4a5568;
    
    --accented-background-color: #2d3748;
    --more-accented-background-color: #4a5568;
    
    /* 按钮样式 */
    --button-background-color: #4a5568;
    --button-border-color: #718096;
    --button-text-color: #e2e8f0;
    
    --primary-button-background-color: #3182ce;
    --primary-button-text-color: white;
    --primary-button-border-color: #3182ce;
    
    /* 面板样式 */
    --left-pane-background-color: #2d3748;
    --left-pane-text-color: #e2e8f0;
    
    /* 其他元素样式... */
}

3. 配置主题选项

修改 options_init.js，将自定义主题添加到可用主题列表中：

// 在initNotSyncedOptions函数中修改theme默认值
optionService.createOption('theme', 'dark-blue', false);

4. 应用与测试主题

1. 保存主题文件
2. 在 Trilium 设置中切换到自定义主题
3. 检查界面元素是否正确应用了新样式
4. 使用浏览器开发者工具调试样式问题

高级界面定制技巧

字体定制

Trilium 支持自定义各类界面元素的字体，通过修改以下 CSS 变量实现：

/* 字体家族定制 */
--main-font-family: "Microsoft YaHei", sans-serif;
--tree-font-family: "Microsoft YaHei", sans-serif;
--detail-font-family: "Microsoft YaHei", sans-serif;
--monospace-font-family: "Consolas", monospace;

/* 字体大小定制（百分比） */
--main-font-size: 110%;
--tree-font-size: 105%;
--detail-font-size: 110%;
--monospace-font-size: 100%;

布局调整

通过调整面板宽度和可见性实现布局定制：

/* 调整面板宽度 */
--left-pane-width: 30; /* 左侧面板占比30% */
--right-pane-width: 25; /* 右侧面板占比25% */

也可以通过配置选项进行调整：

// options_init.js 中设置默认布局
optionService.createOption('leftPaneWidth', '30', false);
optionService.createOption('leftPaneVisible', 'true', false);
optionService.createOption('rightPaneWidth', '25', false);
optionService.createOption('rightPaneVisible', 'true', false);

交互效果定制

通过 CSS 过渡和动画效果增强界面交互体验：

/* 添加元素过渡效果 */
.note-item {
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* 自定义滚动条样式 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--main-background-color);
    border-left: 1px solid var(--scrollbar-border-color);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-background-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--more-accented-background-color);
}

主题开发常见问题解决

变量覆盖优先级问题

当自定义主题没有定义某些变量时，Trilium 会自动使用 theme-light.css 中的默认值。如果需要确保某些变量被正确覆盖，请检查：

1. 变量名是否拼写正确
2. 是否使用 :root 选择器（自定义主题）
3. CSS 文件是否被正确加载

主题切换不生效

如果切换主题后界面没有变化，可能的原因包括：

1. 主题文件路径或文件名错误
2. CSS 语法错误导致样式表无法解析
3. 浏览器缓存问题，可尝试清除缓存或使用无痕模式

跨平台兼容性

在不同操作系统上，某些字体和样式可能表现不一致。解决方法：

1. 使用跨平台兼容的字体族（Font Family）
2. 避免依赖系统特定的字体
3. 在关键样式上使用相对单位（如 em、rem）而非固定像素值

主题分享与部署

主题打包与分享

完成主题开发后，可以将 CSS 文件分享给其他用户。分享时建议包含：

1. 主题名称和简短描述
2. 截图预览
3. 安装说明
4. 自定义变量说明

部署到生产环境

对于普通用户，安装自定义主题的步骤：

1. 在 Trilium 中打开「选项」→「外观」→「自定义 CSS」
2. 将主题 CSS 代码粘贴到自定义 CSS 文本框中
3. 保存并刷新界面

对于高级用户，可以通过文件系统部署：

1. 将主题文件复制到 Trilium 的 data/custom-themes/ 目录
2. 在设置中选择新主题

结语：打造你的理想知识环境

Trilium Notes 的主题系统为用户提供了强大的界面定制能力，通过本文介绍的方法，你可以完全改变 Trilium 的外观，使其更符合个人审美和工作需求。无论是深色模式、极简风格还是个性化色彩方案，主题定制都能帮助你打造一个既美观又高效的个人知识管理空间。

随着 Trilium Notes 的不断发展，主题系统也将变得更加完善。未来可能会支持更精细的样式控制、主题切换动画和主题商店等功能。保持关注项目更新，及时获取主题开发的新特性和最佳实践。

最后，鼓励你分享自己创建的主题，参与社区讨论，共同丰富 Trilium Notes 的生态系统。如有任何问题或建议，可以通过项目的 issue 系统或社区论坛进行反馈。

附录：常用 CSS 变量参考表

变量类别	变量名	功能描述	默认值（浅色主题）
基础样式	--main-font-family	主字体	Montserrat
	--main-font-size	主字体大小	normal
	--monospace-font-family	等宽字体	JetBrainsLight
颜色系统	--main-background-color	主背景色	white
	--main-text-color	主文本色	black
	--main-border-color	边框颜色	#ccc
	--accented-background-color	强调背景色	#f5f5f5
	--muted-text-color	次要文本色	#666
组件样式	--button-background-color	按钮背景色	transparent
	--button-text-color	按钮文本色	black
	--primary-button-background-color	主要按钮背景色	#6c757d
布局样式	--left-pane-background-color	左面板背景色	#F3F3F3
	--active-tab-background-color	活动标签背景色	#ddd
	--inactive-tab-background-color	非活动标签背景色	#f0f0f0

【免费下载链接】trilium Build your personal knowledge base with Trilium Notes 项目地址: https://gitcode.com/gh_mirrors/tr/trilium