Obsidian 学习笔记

Appearance

宽内容区与布局调整 ​

Obsidian 默认内容区宽度有限，大屏显示器上浪费空间。通过 CSS 片段可以自由调整内容宽度、侧边栏尺寸和整体布局。

宽内容区 ​

基础版：移除宽度限制 ​

css
/* 移除内容区宽度限制 */
.markdown-source-view,
.markdown-preview-view {
  max-width: 100% !important;
  margin: 0 auto;
  padding: 0 2rem;
}

进阶版：响应式宽度 ​

css
/* 根据屏幕宽度自适应 */
.markdown-source-view,
.markdown-preview-view {
  max-width: 100% !important;
  margin: 0 auto;
}

/* 小屏：紧凑 */
@media (max-width: 768px) {
  .markdown-source-view,
  .markdown-preview-view {
    padding: 0 1rem;
  }
}

/* 中屏：适中 */
@media (min-width: 769px) and (max-width: 1199px) {
  .markdown-source-view,
  .markdown-preview-view {
    max-width: 800px !important;
    padding: 0 2rem;
  }
}

/* 大屏：宽内容 */
@media (min-width: 1200px) {
  .markdown-source-view,
  .markdown-preview-view {
    max-width: 1000px !important;
    padding: 0 3rem;
  }
}

/* 超宽屏：限制最大宽度 */
@media (min-width: 1600px) {
  .markdown-source-view,
  .markdown-preview-view {
    max-width: 1200px !important;
  }
}

紧凑侧边栏 ​

css
/* 紧凑文件列表 */
.nav-file-title,
.nav-folder-title {
  padding: 2px 8px !important;
  font-size: 13px;
  line-height: 1.4;
}

.nav-file {
  margin: 0 !important;
}

/* 折叠箭头 */
.nav-folder-collapse-indicator {
  width: 12px;
  height: 12px;
  opacity: 0.7;
}

/* 缩进层级 */
.nav-folder .nav-folder {
  padding-left: 12px;
}

侧边栏宽度调整 ​

css
/* 左侧边栏 */
.workspace-ribbon {
  width: 44px;
}

.workspace-split.mod-left-split {
  max-width: 320px;
  min-width: 200px;
}

/* 右侧边栏 */
.workspace-split.mod-right-split {
  max-width: 350px;
  min-width: 250px;
}

/* 拖动条样式 */
.workspace-split.mod-root {
  --divider-width: 2px;
}

内容居中 ​

css
/* 编辑器居中 */
.markdown-source-view,
.markdown-preview-view {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

/* 阅读模式加大边距 */
.markdown-preview-view {
  padding: 2rem 2rem;
}

隐藏界面元素 ​

隐藏标题栏（macOS） ​

css
/* 标题栏按钮自动隐藏 */
.titlebar-button {
  opacity: 0;
  transition: opacity 0.2s;
}

.titlebar:hover .titlebar-button {
  opacity: 1;
}

隐藏状态栏 ​

css
/* 隐藏底部状态栏 */
.status-bar {
  display: none;
}

/* 或半透明自动显示 */
.status-bar {
  opacity: 0;
  transition: opacity 0.3s;
}

.status-bar:hover {
  opacity: 1;
}

隐藏帮助按钮 ​

css
/* 隐藏右上角帮助 */
.workspace-ribbon-action[aria-label="帮助"] {
  display: none;
}

卡片式布局 ​

css
/* 笔记区域卡片化 */
.markdown-preview-view {
  background: var(--background-secondary);
  border-radius: 12px;
  margin: 16px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 深色模式阴影 */
.theme-dark .markdown-preview-view {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

相关内容 ​