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 显示随机图片,效果如图:

preview.png

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

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

我的另外两个主题帖:

2 操作
zqhjl 在 2021-03-25 17:28:20 更新了该帖
zqhjl 在 2021-03-23 10:31:56 更新了该帖

广告 我要投放

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • chjchen 1
    支持者 订阅者

    辛苦了。

  • 其他回帖
  • zqhjl 1 赞同
    作者

    这个是之前出现的 bug,现在已经修复了

  • crowds21
    订阅者

    报一个 Bug,不知道是模板的问题还是 siyuan 的问题.

    我这边尝试应用之后,提示都是 Meteor 模板应用成功,然后 templates 文件夹下只有一个 Notion-Cover 的空文件夹

    1 回复