用纯 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，或者有其他相关想法，欢迎在该帖下面留言。
我的另外两个主题帖：
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于