Obsidian 学习笔记

Appearance

焦点写作模式 ​

灵感来源于 iA Writer 和 Ulysses 的焦点模式。在编辑时自动隐藏干扰元素，让你专注于当前段落。

基础焦点模式 ​

css
/* 淡化非当前行 */
.cm-s-obsidian .cm-line:not(.cm-active) {
  opacity: 0.4;
  transition: opacity 0.3s ease;
}

/* 悬停恢复 */
.cm-s-obsidian .cm-line:not(.cm-active):hover {
  opacity: 0.7;
}

完整禅模式 ​

css
/* === 禅模式 === */

/* 自动隐藏侧边栏 */
.workspace-ribbon,
.workspace-split.mod-left-split,
.workspace-split.mod-right-split {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* 悬停显示 */
.workspace-ribbon:hover,
.workspace-split.mod-left-split:hover,
.workspace-split.mod-right-split:hover {
  opacity: 1;
}

/* 居中内容 */
.markdown-source-view,
.markdown-preview-view {
  max-width: 650px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

/* 隐藏状态栏 */
.status-bar {
  opacity: 0;
  transition: opacity 0.3s;
}

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

/* 隐藏标签页栏 */
.workspace-tab-header {
  opacity: 0;
  transition: opacity 0.3s;
}

.workspace-tab-header:hover {
  opacity: 1;
}

深度阅读模式 ​

css
/* === 深度阅读 === */

/* 衬线字体 */
.markdown-preview-view {
  font-family: 'Noto Serif SC', 'Source Han Serif', serif;
  font-size: 16px;
  line-height: 2;
  max-width: 720px;
  margin: 0 auto;
  padding: 3rem 2rem;
}

/* 首行缩进 */
.markdown-preview-view p {
  text-indent: 2em;
  margin-bottom: 0.8em;
}

/* 引用块美化 */
.markdown-preview-view blockquote {
  border-left: 3px solid var(--interactive-accent);
  background: rgba(124, 58, 237, 0.04);
  padding: 0.5em 1em;
  border-radius: 0 6px 6px 0;
  font-style: italic;
}

/* 段落间距加大 */
.markdown-preview-view h2 {
  margin-top: 2em;
}

打字机模式 ​

css
/* === 打字机模式：当前行始终居中 === */

/* 增加上下空间 */
.cm-s-obsidian .cm-scroller {
  padding-top: 40vh;
  padding-bottom: 40vh;
}

/* 当前行样式 */
.cm-active {
  background: rgba(124, 58, 237, 0.04) !important;
}

配合插件

打字机模式可以配合 typewriter 插件使用，实现更稳定的当前行居中效果。

配合 Style Settings ​

css
/* @settings
name: 焦点模式设置
id: focus-mode
settings:
  -
    id: focus-opacity
    title: 非焦点行透明度
    type: variable-number-slider
    default: 0.4
    min: 0.1
    max: 0.8
    step: 0.1
  -
    id: content-width
    title: 内容宽度
    type: variable-number-slider
    default: 650
    min: 500
    max: 1000
    step: 50
    format: px
*/

:root {
  --focus-opacity: 0.4;
  --content-width: 650px;
}

.cm-s-obsidian .cm-line:not(.cm-active) {
  opacity: var(--focus-opacity);
}

.markdown-source-view {
  max-width: var(--content-width);
  margin: 0 auto;
}

相关内容 ​