GithubXDiscord

customization-guide > CSS 结构和样式指南

CSS 结构和样式指南

Notionpresso 提供了灵活且可扩展的 CSS 结构。本节将介绍 CSS 变量系统、主要样式设计要点以及缩进应用原理。

CSS 变量系统

Notionpresso 使用 CSS 变量定义全局样式。这使得主题更改和整体样式调整变得容易。

主要的 CSS 变量如下:

.notion {
  --notion-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif,
    "Segoe UI Emoji", "Segoe UI Symbol";
  --notion-max-width: 720px;
  --notion-header-height: 45px;
  --notion-indent: 27px;

  /* 颜色变量 */
  --fg-color: rgb(55, 53, 47);
  --fg-color-0: rgba(55, 53, 47, 0.09);
  --fg-color-1: rgba(55, 53, 47, 0.16);
  --fg-color-2: rgba(55, 53, 47, 0.4);
  --fg-color-3: rgba(55, 53, 47, 0.6);
  --fg-color-4: #000;
  --fg-color-5: rgb(233, 233, 231);
  --fg-color-6: rgba(55, 53, 47, 0.8);
  --fg-color-icon: var(--fg-color);

  --bg-color: #fff;
  --bg-color-0: rgba(135, 131, 120, 0.15);
  --bg-color-1: rgb(247, 246, 243);
  --bg-color-2: rgba(135, 131, 120, 0.15);

  --select-color-0: rgb(46, 170, 220);
  --select-color-1: rgba(35, 131, 226, 0.28);
  --select-color-2: #d9eff8;
}

通过重新定义这些变量,可以轻松更改整体样式。

主要样式设计要点

  1. 类命名规则: 所有类都以 notion- 开头。这可以防止样式冲突。

    例如: .notion-block, .notion-h1, .notion-toggle

  2. 块级样式: 所有块级元素都应用 notion-block 类。

    .notion-block {
      display: block;
    }
    
  3. 颜色应用: 颜色通过 CSS 变量应用。

    .notion-text {
      color: var(--fg-color);
    }
    
  4. 响应式设计: 使用 --notion-max-width 变量实现响应式设计。

    .notion-body {
      width: 100%;
      max-width: var(--notion-max-width);
      margin: 0 auto;
    }
    

缩进应用原理

Notionpresso 使用递归结构实现缩进。这通过 CSS 处理如下:

.notion-block > .notion-block {
  margin-left: var(--notion-indent);
}

.notion-block > .notion-display-contents > .notion-block {
  margin-left: var(--notion-indent);
}

这些 CSS 规则自动应用于嵌套块。可以通过调整 --notion-indent 变量轻松更改缩进程度。

暗模式和自定义主题

Notionpresso 默认支持暗模式。暗模式通过以下方式实现:

[data-theme="dark"] .notion {
  --fg-color: rgba(255, 255, 255, 0.9);
  --bg-color: #2f3437;
  /* 其他暗模式相关变量... */
}

此外,可以轻松应用自定义主题。使用 data-theme 属性应用所需的主题:

<Notion data-theme="custom">{/* Notion 内容 */}</Notion>

并且可以在 CSS 中定义样式如下:

.notion[data-theme="custom"] {
  --fg-color: #333;
  --bg-color: #f4f4f4;
  /* 其他自定义主题相关变量... */
}

使用这种方法,可以通过选择器优先级轻松覆盖默认样式。

样式定制示例

  1. 全局字体更改:

    .notion[data-theme="custom"] {
      --notion-font: "Roboto", sans-serif;
    }
    
  2. 标题样式更改:

    .notion[data-theme="custom"] .notion-h1 {
      font-size: 2.5em;
      color: var(--select-color-0);
      border-bottom: 2px solid var(--fg-color-1);
    }
    
  3. 缩进调整:

    .notion[data-theme="custom"] {
      --notion-indent: 20px;
    }
    
  4. 暗模式实现:

    [data-theme="dark"] .notion[data-theme="custom"] {
      --fg-color: rgba(255, 255, 255, 0.9);
      --bg-color: #2f3437;
      /* 其他颜色变量也应适当调整 */
    }
    

通过遵循这些 CSS 结构和样式指南,可以使用 Notionpresso 实现一致且易于维护的样式。此外,可以根据需要进行更详细的定制。