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