Logo 📚 Digital Library

侧边栏优化

下面给你一个 最有效、最不影响 Trilium 功能、且 对分享页面（Shared Note）生效 的解决方案：
通过自定义 CSS 固定侧边栏宽度 + 自动换行/省略长标题。

Trilium 的分享页面（/share/...）本质上仍是 Trilium 的前端，只是功能精简版，所以可以通过自定义 CSS 注入来修复。

✅ 最推荐解决方案#

方案 1：固定侧边栏宽度 + 长标题省略（不撑宽）#

给侧边栏设置一个固定宽度，例如 260px，并让标题超过宽度后自动变省略号（避免换行导致 UI 抖动）。

CSS 代码放到：「外观」->「自定义 CSS」#

（或分享模板 CSS，如果你做了自定义分享模板）

/* 固定分享页面的侧边栏宽度 */
#app-sidebar, 
#sidebar {
    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;
    flex: 0 0 260px !important;
}

/* 防止长标题撑开 sidebar */
#app-sidebar .note-title,
#sidebar .note-title,
.sidebar-item-title,
.tree-node-label {
    white-space: nowrap !important;   /* 不换行 */
    overflow: hidden !important;      /* 隐藏超出部分 */
    text-overflow: ellipsis !important; /* 用 … 显示省略 */
    max-width: 240px !important;
    display: block !important;
}

✔ 效果#

  • 长标题不会再撑开侧边栏
  • 分享页面在移动端侧边栏不会占满全屏
  • 右侧仍然有空白区域可点击关闭 sidebar
  • 使用最兼容的 CSS，无需改代码模板

✅ 可选方案 2：允许自动换行（适用于你想显示全标题时）#

如果你更希望标题换行，不显示省略号，可以这样：

#app-sidebar, 
#sidebar {
    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;
}

/* 标题允许换行，避免撑宽 */
#app-sidebar .note-title,
#sidebar .note-title,
.sidebar-item-title,
.tree-node-label {
    white-space: normal !important;
    word-break: break-all !important;
}

✔ 这样长标题会自动换成两行或三行，不撑宽 sidebar。

🧠 为什么 Trilium 分享页面会被撑宽？#

分享页面是用 Tree 结构显示的侧边栏（左树状导航）。
当笔记名非常长时：

  • 标签是 inline-block
  • 没有 max-width
  • 没有 overflow
  • 没有 ellipsis/wrap

所以浏览器只好：把整个 sidebar 区域强制拉宽 → 移动端直接崩坏。

📌 你应该使用哪个方案？#

需求推荐方案
希望统一宽度、清爽、专业方案 1（固定宽度 + 省略）
希望标题全文可读方案 2（自动换行）
希望比 260px 更窄随意调整 CSS 里的宽度数字即可

🛠 如需专门为「分享页面」生效（不影响编辑 UI）#

Trilium 分享页面 <body> 有类名：theme-shared
你可以加作用域防止影响主界面：

body.theme-shared #sidebar {
    width: 260px !important;
}
body.theme-shared .tree-node-label {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

如果你需要#

✓ 只对某个分享链接生效
✓ 自定义 Trilium 分享模板（HTML/EJS）
✓ 自动根据屏幕大小调整 sidebar
我可以继续帮你写（CSS 或 JS 都可）。

你希望 固定宽度 + 省略号 还是 固定宽度 + 换行？

 

对，你现在用的是 TriliumNext 0.99.x（新版），
自定义 CSS 已经从「外观」里移除，
统一改为：

✅ 在根笔记（Root note / __root）添加属性来注入全局 CSS#

TriliumNext 0.99.x 的正确做法是：

✔ 步骤：在 root note 添加 appStyles 属性#

  1. 打开左侧最顶部的 根节点（通常名字是“ROOT”或你的 Workspace 名称）
  2. 在右侧属性面板点击 ＋ Add attribute
  3. 创建属性：
  • Name（属性名）：appStyles
  • Type：text
  • Value（内容）：粘贴 CSS

例如：

#app-sidebar, 
#sidebar {
    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;
    flex: 0 0 260px !important;
}

.tree-node-label, 
.sidebar-item-title, 
.note-title {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 240px !important;
    display: block !important;
}

保存即可立即生效（包括分享页面）。

✔ 如果你只想让 CSS 作用于“分享页面”#

分享页面的 <body> 有 theme-shared 类名。

则把 CSS 包在：

body.theme-shared #sidebar {
    width: 260px !important;
}

body.theme-shared .tree-node-label {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

这样就不会影响 Trilium 本地 UI，只作用于共享笔记页面。

✔ 为什么新版要用 appStyles？#

TriliumNext 0.99.x 做了：

  • 重写主题系统
  • 移除「自定义 CSS」界面
  • 改为通过 note 属性注入全局 CSS
  • 分享页面也继承 root note 的 appStyles

这是目前官方推荐方式。

🧪 如果你愿意，我可以给你写一个 最适合分享页面的完整 CSS 修复方案#

包含：

  • 固定 sidebar 宽度
  • 长标题省略号
  • 移动端自适应
  • 修复遮挡
  • 右侧空白点击折叠栏仍可用

需要的话告诉我你想 260px？240px？还是更窄？