Notion 主题 题头图(Cover)

本贴最后更新于 1321 天前,其中的信息可能已经事过景迁

用纯 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,或者有其他相关想法,欢迎在该帖下面留言。

我的另外两个主题帖:

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    22024 引用 • 87841 回帖 • 3 关注
2 操作
svchord 在 2021-03-25 17:28:20 更新了该帖
svchord 在 2021-03-23 10:31:56 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 请问,这个题头图还能这样用吗?我找了下 notion 主题的 css 文件,里面好像已经没有这个设置了。一直想找能通过模版来设置题头图的功能。谢谢你,Notion 主题非常棒~~

  • 其他回帖
  • svchord 1 赞同

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

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

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

    1 回复
  • 辛苦了。

推荐标签 标签

  • Dubbo

    Dubbo 是一个分布式服务框架,致力于提供高性能和透明化的 RPC 远程服务调用方案,是 [阿里巴巴] SOA 服务化治理方案的核心框架,每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 596 关注
  • CodeMirror
    1 引用 • 2 回帖 • 127 关注
  • Tomcat

    Tomcat 最早是由 Sun Microsystems 开发的一个 Servlet 容器,在 1999 年被捐献给 ASF(Apache Software Foundation),隶属于 Jakarta 项目,现在已经独立为一个顶级项目。Tomcat 主要实现了 JavaEE 中的 Servlet、JSP 规范,同时也提供 HTTP 服务,是市场上非常流行的 Java Web 容器。

    162 引用 • 529 回帖 • 5 关注
  • SEO

    发布对别人有帮助的原创内容是最好的 SEO 方式。

    35 引用 • 200 回帖 • 15 关注
  • 区块链

    区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。所谓共识机制是区块链系统中实现不同节点之间建立信任、获取权益的数学算法 。

    91 引用 • 751 回帖 • 4 关注
  • RabbitMQ

    RabbitMQ 是一个开源的 AMQP 实现,服务器端用 Erlang 语言编写,支持多种语言客户端,如:Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息,在易用性、扩展性、高可用性等方面表现不俗。

    49 引用 • 60 回帖 • 367 关注
  • 程序员

    程序员是从事程序开发、程序维护的专业人员。

    565 引用 • 3532 回帖
  • 招聘

    哪里都缺人,哪里都不缺人。

    190 引用 • 1057 回帖 • 1 关注
  • C++

    C++ 是在 C 语言的基础上开发的一种通用编程语言,应用广泛。C++ 支持多种编程范式,面向对象编程、泛型编程和过程化编程。

    107 引用 • 153 回帖 • 3 关注
  • 创业

    你比 99% 的人都优秀么?

    84 引用 • 1399 回帖 • 1 关注
  • frp

    frp 是一个可用于内网穿透的高性能的反向代理应用,支持 TCP、UDP、 HTTP 和 HTTPS 协议。

    20 引用 • 7 回帖 • 3 关注
  • QQ

    1999 年 2 月腾讯正式推出“腾讯 QQ”,在线用户由 1999 年的 2 人(马化腾和张志东)到现在已经发展到上亿用户了,在线人数超过一亿,是目前使用最广泛的聊天软件之一。

    45 引用 • 557 回帖 • 83 关注
  • 外包

    有空闲时间是接外包好呢还是学习好呢?

    26 引用 • 232 回帖 • 4 关注
  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具,它能把各种资源,例如 JS、CSS(less/sass)、图片等都作为模块来使用和处理。

    41 引用 • 130 回帖 • 259 关注
  • 工具

    子曰:“工欲善其事,必先利其器。”

    285 引用 • 728 回帖
  • 周末

    星期六到星期天晚,实行五天工作制后,指每周的最后两天。再过几年可能就是三天了。

    14 引用 • 297 回帖
  • etcd

    etcd 是一个分布式、高可用的 key-value 数据存储,专门用于在分布式系统中保存关键数据。

    5 引用 • 26 回帖 • 526 关注
  • CSDN

    CSDN (Chinese Software Developer Network) 创立于 1999 年,是中国的 IT 社区和服务平台,为中国的软件开发者和 IT 从业者提供知识传播、职业发展、软件开发等全生命周期服务,满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等刚性需求。

    14 引用 • 155 回帖
  • flomo

    flomo 是新一代 「卡片笔记」 ,专注在碎片化时代,促进你的记录,帮你积累更多知识资产。

    5 引用 • 106 回帖 • 1 关注
  • 微信

    腾讯公司 2011 年 1 月 21 日推出的一款手机通讯软件。用户可以通过摇一摇、搜索号码、扫描二维码等添加好友和关注公众平台,同时可以将自己看到的精彩内容分享到微信朋友圈。

    130 引用 • 793 回帖
  • ReactiveX

    ReactiveX 是一个专注于异步编程与控制可观察数据(或者事件)流的 API。它组合了观察者模式,迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 154 关注
  • JSON

    JSON (JavaScript Object Notation)是一种轻量级的数据交换格式。易于人类阅读和编写。同时也易于机器解析和生成。

    52 引用 • 190 回帖
  • WebClipper

    Web Clipper 是一款浏览器剪藏扩展,它可以帮助你把网页内容剪藏到本地。

    3 引用 • 9 回帖 • 3 关注
  • OAuth

    OAuth 协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是 oAuth 的授权不会使第三方触及到用户的帐号信息(如用户名与密码),即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权,因此 oAuth 是安全的。oAuth 是 Open Authorization 的简写。

    36 引用 • 103 回帖 • 1 关注
  • 锤子科技

    锤子科技(Smartisan)成立于 2012 年 5 月,是一家制造移动互联网终端设备的公司,公司的使命是用完美主义的工匠精神,打造用户体验一流的数码消费类产品(智能手机为主),改善人们的生活质量。

    4 引用 • 31 回帖 • 1 关注
  • Netty

    Netty 是一个基于 NIO 的客户端-服务器编程框架,使用 Netty 可以让你快速、简单地开发出一个可维护、高性能的网络应用,例如实现了某种协议的客户、服务端应用。

    49 引用 • 33 回帖 • 19 关注
  • SVN

    SVN 是 Subversion 的简称,是一个开放源代码的版本控制系统,相较于 RCS、CVS,它采用了分支管理系统,它的设计目标就是取代 CVS。

    29 引用 • 98 回帖 • 683 关注