简介
这份自定义 CSS 样式可以让 Obsidian 的标签页以类似于 VS Code 的多行堆叠显示方式呈现，提供更好的标签管理和浏览体验。该样式基于 Ob 英文论坛中 Tabs in multiple rows - Share & showcase - Obsidian Forum 分享的灵感，结合了 BT 主题的 Tab 的 safari-tab-style 样式调整，使得标签页在多行显示时更加整洁美观，并优化了标签页的布局和按钮操作。
效果如下：
使用方法
CSS代码
/* @settings
name: 【Tab-熊猫】多行标签页堆叠显示
id: 多行标签页堆叠显示
settings:
-
id: 隐藏最小化按钮
title: 是否隐藏最小化按钮
type: class-toggle
default: true
addCommand: true
*/
/* 2024-04-04_21:48：来源：https://gist.github.com/digitalsignalperson/56fe3cbcf41707cb97362234cb07ccb0 */
.workspace .mod-root .workspace-tab-header-container {
display: table;
}
.workspace .mod-root .workspace-tab-header-container-inner {
flex-wrap: wrap;
}
/* !激活边框长度固定需要用!important */
.workspace .mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-headerr {
flex: unset !important;
}
/* ! 当前tab加上显著边框 by Calmwaves 2023-12-27_10:18:15 */
.is-focused .mod-active .workspace-tab-header.is-active {
color: slateblue !important;
}
/* !排布间距设置 */
.workspace .mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header {
min-width: 250px;
margin-top: 4px;
margin-bottom: 4px;
margin-right: 4px;
}
/* ======tab样式设置 来自BT的safari-tab-style======== */
.workspace-tabs:not(.mod-stacked) .workspace-tab-header::before,
.workspace-tabs:not(.mod-stacked) .workspace-tab-header::after,
.workspace .mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header-inner::after {
display: none;
}
.mod-vertical:not(.mod-left-split):not(.mod-right-split) .workspace-tabs:not(.mod-stacked) .workspace-tab-header-container-inner,
.mod-horizontal:not(.mod-left-split):not(.mod-right-split) .workspace-tabs:not(.mod-stacked) .workspace-tab-header-container-inner {
align-items: center;
margin: 0;
width: 100%;
}
.mod-vertical:not(.mod-left-split):not(.mod-right-split) .workspace-tabs:not(.mod-stacked) .workspace-tab-header,
.mod-horizontal:not(.mod-left-split):not(.mod-right-split) .workspace-tabs:not(.mod-stacked) .workspace-tab-header {
border-radius: 6px;
box-shadow: none;
height: calc(var(--header-height) * 0.7);
padding: 0 !important;
/* transition: 400ms, background-color 150ms ease-in-out; */
}
.mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header {
/* transition: 400ms; */
}
.workspace-tabs:not(.mod-stacked) .workspace-tab-header:first-child {
margin-left: 0;
}
.mod-root:not(.mod-left-split):not(.mod-right-split) .workspace-tabs:not(.mod-stacked) .workspace-tab-header-inner {
padding: 0 4px 0 8px;
/* transition: 400ms; */
}
.mod-root:not(.mod-left-split):not(.mod-right-split) .workspace-tabs:not(.mod-stacked) .workspace-tab-header-inner,
.mod-root:not(.mod-left-split):not(.mod-right-split) .workspace-tabs:not(.mod-stacked) .workspace-tab-header-inner-close-button,
.mod-root:not(.mod-left-split):not(.mod-right-split) .workspace-tabs:not(.mod-stacked) .workspace-tab-header-inner-icon {
color: var(--text-muted);
}
.workspace .mod-root .workspace-tab-header-inner::after {
display: none;
}
.mod-root:not(.mod-left-split):not(.mod-right-split) .workspace-tabs:not(.mod-stacked) .workspace-tab-header.is-active {
flex-grow: 1.67;
}
.mod-root .workspace-tabs:not(.mod-stacked).mod-active .workspace-tab-header.is-active .workspace-tab-header-inner,
.mod-root .workspace-tabs:not(.mod-stacked).mod-active .workspace-tab-header.is-active .workspace-tab-header-inner-title,
.mod-root .workspace-tabs:not(.mod-stacked).mod-active .workspace-tab-header.is-active .workspace-tab-header-inner-close-button,
.mod-root .workspace-tabs:not(.mod-stacked).mod-active .workspace-tab-header.is-active .workspace-tab-header-inner-icon {
color: var(--text-noraml);
font-weight: bold;
}
.mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header.is-active:hover {
background-color: var(--background-modifier-border);
}
.theme-light .mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header {
border: 1px solid var(--tab-outline-color);
}
.mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header {
border: 1px solid rgba(var(--mono-rgb-0), .25);
}
/* ==========其他按钮设置========== */
/* ! 直接隐藏掉关闭和最小化按钮 */
/* 不显示最大最小化后，使那块区域可以双击及拖动 */
.隐藏最小化按钮.mod-windows .titlebar-button,
body.隐藏最小化按钮 .is-hidden-frameless:not(.is-fullscreen) .workspace-tabs.mod-top-right-space .workspace-tab-header-container:after {
display: none;
}
body.隐藏最小化按钮 {
/* !新标签页按钮固定设置 */
.titlebar .workspace-tab-header-new-tab,
.mod-root .workspace-tab-header-new-tab {
display: block;
position: absolute;
top: 0px !important;
right: 80px !important;
z-index: 10;
}
/* !折叠触发按钮调整 */
.sidebar-toggle-button {
display: block;
position: absolute;
top: 0px !important;
right: 10px !important;
z-index: 10;
}
/* !下拉菜单调整 */
.workspace-tab-header-tab-list {
display: block;
position: absolute;
top: 0px !important;
right: 50px !important;
z-index: 10;
}
.mod-left-split .workspace-tab-header-tab-list,
.mod-right-split .workspace-tab-header-tab-list {
display: none;
}
}
body:not(.隐藏最小化按钮) {
/* !折叠触发按钮调整 */
.sidebar-toggle-button {
display: table-cell;
}
/* !下拉菜单调整 */
.mod-left-split .workspace-tab-header-tab-list,
.mod-right-split .workspace-tab-header-tab-list {
/* display: none !important; */
}
/* !新标签页按钮固定设置 */
.titlebar .workspace-tab-header-new-tab,
.mod-root .workspace-tab-header-new-tab {
display: table-cell;
}
}
- 复制上述提供的自定义 CSS 样式代码；
- 在 Obsidian 中打开设置 → 外观 → CSS 代码 → 打开文件夹，将代码保存为
.css文件；
特点
- 多行标签页堆叠显示：标签页可以在多行中堆叠显示，提高标签管理效率；
- 显著边框设置：激活状态的标签页会有显著的边框突出，便于识别当前活跃标签；
- 样式优化：调整标签页之间的间距和按钮位置，使得整体布局更加美观和易用性更强；
- 自定义按钮位置：新标签页、折叠按钮等操作按钮位置进行了调整，便于快速操作。
参考资料
- Source：Tabs in multiple rows - Share & showcase - Obsidian Forum
- Link：obsidian tabs in multiple rows · GitHub 22
求助问题
该CSS代码存在许多问题，我是强行固定住按钮位置，由于个人习惯又将最小最大化以及关闭按钮给取消了。
该CSS有2个选项，隐藏最小化按钮 和 不隐藏最小化按钮：
如果隐藏的话bug少点，目前使用起来没啥问题，如果不隐藏的话，堆叠模式就看起来很乱，按钮乱飞的：
还有就是我用的默认主题没检测到，楼下反应说存在第一行首行缩进的问题。
