← 全部文章

教程

JustZix 里的 Notion 微调——更宽的页面、字体与专注模式

18 5月 2026 · 作者 JustZix Team

Notion 在内容上很灵活,但在外观上很死板。一条窄窄的文字栏、一种字体、没有专注模式、数据库表格糊成一团灰色。这些你在设置里改不了——但用一条 JustZix 的 CSS 规则就能改。本指南带你过一遍六个真正改变 Notion 日常使用的微调,每个都是可直接粘贴的片段。

为什么用 CSS,而不是 Notion 设置

Notion 刻意把外观掌控在自己手里——它希望每个页面在每台设备上看起来都一样。这对团队来说合理,但当你有一块 27 英寸的显示器、文字只占屏幕三分之一时就令人沮丧。JustZix 在浏览器里把你的 CSS 叠加到 notion.so 上:Notion 对这个改动一无所知,而你得到了自己的布局。规则限定到该域名,所以它处处生效——你的私人工作区和公司工作区都生效——而不用碰账号。

更宽的页面与全宽

Notion 有一个按页面的“全宽”开关,但你得在每个页面手动切换。一条 CSS 规则把它全局做掉,还让你挑选自己的最大宽度:

/* 每个 Notion 页面更宽的内容栏 */
.notion-page-content {
  max-width: 1100px !important;
  width: 100% !important;
}

/* 页头(封面、标题)与正文对齐 */
.notion-page-content > .notion-cover,
.notion-page-content > [class*="layout"] {
  max-width: 1100px !important;
}

把 max-width 设成适合你显示器的值——900 px 适合舒适阅读,1300 px 则是表格式的变体。.notion-page-content 选择器既涵盖普通页面,也涵盖作为记录打开的数据库页面。

专注模式——隐藏侧边栏和顶栏

当你写较长的文档时,左侧面板和顶栏只会分散注意力。专注模式把两者都隐藏,把整个屏幕交给内容:

/* 专注模式:隐藏侧边导航和顶栏 */
.notion-sidebar-container {
  display: none !important;
}
.notion-topbar {
  opacity: 0;
  transition: opacity .2s ease;
}
.notion-topbar:hover {
  opacity: 1;
}

/* 内容收回被隐藏侧边栏让出的空间 */
.notion-frame {
  margin-left: 0 !important;
}

顶栏并不会完全消失——它变成透明,当你悬停时回来,所以你仍然能用到“分享”菜单和页面历史。把这个微调保留为一条单独的规则,想要恢复完整导航时从操作栏切换它。

自定义字体与行高

Notion 提供三种字体。如果你偏好某种特定的系统字体,或者只是想在长篇阅读时有更大的行高,直接覆盖它:

/* 正文里的自定义字体与更松的行高 */
.notion-page-content,
.notion-page-content [placeholder] {
  font-family: "Charter", "Iowan Old Style", Georgia, serif !important;
  line-height: 1.7 !important;
  font-size: 17px !important;
}

/* 标题保持无衬线以形成对比 */
.notion-page-content h1,
.notion-page-content h2,
.notion-page-content h3 {
  font-family: "Inter", system-ui, sans-serif !important;
}

有样式的标注块与引用块

Notion 默认的标注块和引用块低调到近乎隐形。把它们加强一下,让它们真正吸引视线:

/* 更醒目的标注块 */
.notion-callout-block {
  border-left: 4px solid #2f6fed !important;
  border-radius: 6px;
  background: rgba(47,111,237,.07) !important;
}

/* 带更大、柔和强调的引用块 */
.notion-quote-block {
  border-left: 4px solid #888 !important;
  font-style: italic;
  padding-left: 16px !important;
}

/* 标签更清晰的折叠块 */
.notion-toggle-block > div:first-child {
  font-weight: 600;
}

数据库——斑马纹行与粘性表头

长长的数据库表格用眼睛很难追踪。交替的行条纹,加上滚动时固定的表头,能解决这两个问题:

/* 表格视图里的斑马纹 */
.notion-collection-item:nth-child(even) {
  background: rgba(0,0,0,.035) !important;
}

/* 滚动时粘性的表头 */
.notion-table-view-header-row,
.notion-collection-view-header {
  position: sticky !important;
  top: 0;
  z-index: 5;
  background: var(--bg, #fff) !important;
}

/* 表头下更清晰的分隔线 */
.notion-table-view-header-row {
  border-bottom: 2px solid #ccc !important;
}

隐藏评论与代码块微调

评论线程有时有用,但在参考页面上它们只会把页边搞乱。代码块则受益于更大的等宽字体:

/* 隐藏页边的评论线程 */
.notion-discussion,
[class*="comment-thread"] {
  display: none !important;
}

/* 更易读的代码块 */
.notion-code-block {
  font-family: "JetBrains Mono", "Fira Code", monospace !important;
  font-size: 14px !important;
  border-radius: 8px;
  background: #1e1e2e !important;
}
.notion-code-block code {
  line-height: 1.55 !important;
}

如果你偏好只是折叠评论而不是隐藏它们,可以换成一条在 document_idle 点击折叠按钮的 JS 规则——但对大多数页面而言,一个静态的 display: none 就够了。

把微调组合成一套

上面每个微调都能单独使用,但真正的便利在于把它们保留为单独的、命名的规则:“Notion——宽页面”“Notion——专注模式”“Notion——斑马纹数据库”。然后你从操作栏在某个页面上恰好打开你需要的那个,想要恢复导航时一键关掉专注模式。

Notion 的现成规则在我们的目录里——看看 notion.so 的示例,复制适合你的,再为你的显示器调一调。下载 JustZix,几分钟就把 Notion 改造成适合你的样子。