Notion 主题 题头图（Cover）

用纯 CSS 写了一个题头图样式，但会影响到所有文档的编辑页面布局，同时考虑到部分用户可能不需要这个功能，因此相关样式默认是注释。

等插件块出来之后可能会改进，但负面影响可能无法改变。

如果你想应用该样式，可以打开 theme.css，以 题头图 为搜索条件找到以下代码：

/* 题头图样式 */
/* .vditor-ir {
  overflow-x: hidden;
}

.vditor-ir__gutter {
  top: 27.3vh;
}

.vditor:not(.panelVditor) > .vditor-content > .vditor-ir > .vditor-reset {
  margin-top: 27.3vh !important;
}

.vditor:not(.panelVditor)
  > .vditor-content
  > .vditor-ir
  > .vditor-reset
  > .vditor-ir__node--expand:first-child
  .vditor-ir__preview {
  margin-top: -24px;
}

.vditor:not(.panelVditor)
  > .vditor-content
  > .vditor-ir
  > .vditor-reset
  > div[data-type="html-block"]:first-child
  .vditor-ir__preview {
  transform: translateX(-23.5vw) translateY(-33vh);
  height: 0px;
}

.vditor:not(.panelVditor)
  > .vditor-content
  > .vditor-ir
  > .vditor-reset
  > div[data-type="html-block"]:first-child
  iframe {
  height: 28.5vh;
  min-height: 10vh;
  width: 100vw;
  object-fit: cover;
} */

去除代码注释即可。

我同时还上传了一个配套的 Notion-Cover 模板，可以通过 {{Cover 命令直接插入题头图。

该模板参考了 Meteor 中的题头图语法，调用 Lorem Picsum 的 API 显示随机图片，效果如图：

随机图片加载可能比较缓慢，你也可以按照 Lorem Picsum 的教程修改图片 URL，选择自己喜欢的图片。

重点：如果你发现了题头图及配套模板的任何 bug，或者有其他相关想法，欢迎在该帖下面留言。

我的另外两个主题帖：

• 思源笔记主题 Notion
• 思源笔记主题 Atom One Dark