Notion 主题 题头图(Cover)

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

用纯 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 操作
svchord 在 2021-03-25 17:28:20 更新了该帖
svchord 在 2021-03-23 10:31:56 更新了该帖

相关帖子

欢迎来到这里!

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

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

    辛苦了。

  • 其他回帖
  • svchord 1 赞同
    捐赠者 订阅者 作者

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

  • founder
    订阅者

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

  • crowds21

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

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

    1 回复

推荐标签 标签

  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 693 关注
  • RabbitMQ

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

    49 引用 • 60 回帖 • 457 关注
  • Hprose

    Hprose 是一款先进的轻量级、跨语言、跨平台、无侵入式、高性能动态远程对象调用引擎库。它不仅简单易用,而且功能强大。你无需专门学习,只需看上几眼,就能用它轻松构建分布式应用系统。

    9 引用 • 17 回帖 • 537 关注
  • 爬虫

    网络爬虫(Spider、Crawler),是一种按照一定的规则,自动地抓取万维网信息的程序。

    106 引用 • 275 回帖 • 2 关注
  • Mac

    Mac 是苹果公司自 1984 年起以“Macintosh”开始开发的个人消费型计算机,如:iMac、Mac mini、Macbook Air、Macbook Pro、Macbook、Mac Pro 等计算机。

    160 引用 • 590 回帖
  • Node.js

    Node.js 是一个基于 Chrome JavaScript 运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞 I/O 模型而得以轻量和高效。

    135 引用 • 267 回帖 • 394 关注
  • Spark

    Spark 是 UC Berkeley AMP lab 所开源的类 Hadoop MapReduce 的通用并行框架。Spark 拥有 Hadoop MapReduce 所具有的优点;但不同于 MapReduce 的是 Job 中间输出结果可以保存在内存中,从而不再需要读写 HDFS,因此 Spark 能更好地适用于数据挖掘与机器学习等需要迭代的 MapReduce 的算法。

    74 引用 • 46 回帖 • 551 关注
  • TGIF

    Thank God It's Friday! 感谢老天,总算到星期五啦!

    275 引用 • 4465 回帖 • 607 关注
  • Chrome

    Chrome 又称 Google 浏览器,是一个由谷歌公司开发的网页浏览器。该浏览器是基于其他开源软件所编写,包括 WebKit,目标是提升稳定性、速度和安全性,并创造出简单且有效率的使用者界面。

    56 引用 • 282 回帖
  • BND

    BND(Baidu Netdisk Downloader)是一款图形界面的百度网盘不限速下载器,支持 Windows、Linux 和 Mac,详细介绍请看这里

    107 引用 • 1281 回帖 • 6 关注
  • MySQL

    MySQL 是一个关系型数据库管理系统,由瑞典 MySQL AB 公司开发,目前属于 Oracle 公司。MySQL 是最流行的关系型数据库管理系统之一。

    648 引用 • 529 回帖 • 246 关注
  • Shell

    Shell 脚本与 Windows/Dos 下的批处理相似,也就是用各类命令预先放入到一个文件中,方便一次性执行的一个程序文件,主要是方便管理员进行设置或者管理用的。但是它比 Windows 下的批处理更强大,比用其他编程程序编辑的程序效率更高,因为它使用了 Linux/Unix 下的命令。

    118 引用 • 73 回帖 • 221 关注
  • PostgreSQL

    PostgreSQL 是一款功能强大的企业级数据库系统,在 BSD 开源许可证下发布。

    19 引用 • 21 回帖 • 14 关注
  • Unity

    Unity 是由 Unity Technologies 开发的一个让开发者可以轻松创建诸如 2D、3D 多平台的综合型游戏开发工具,是一个全面整合的专业游戏引擎。

    21 引用 • 7 回帖 • 338 关注
  • OpenShift

    红帽提供的 PaaS 云,支持多种编程语言,为开发人员提供了更为灵活的框架、存储选择。

    14 引用 • 20 回帖 • 587 关注
  • 互联网

    互联网(Internet),又称网际网络,或音译因特网、英特网。互联网始于 1969 年美国的阿帕网,是网络与网络之间所串连成的庞大网络,这些网络以一组通用的协议相连,形成逻辑上的单一巨大国际网络。

    96 引用 • 330 回帖
  • 禅道

    禅道是一款国产的开源项目管理软件,她的核心管理思想基于敏捷方法 scrum,内置了产品管理和项目管理,同时又根据国内研发现状补充了测试管理、计划管理、发布管理、文档管理、事务管理等功能,在一个软件中就可以将软件研发中的需求、任务、bug、用例、计划、发布等要素有序的跟踪管理起来,完整地覆盖了项目管理的核心流程。

    4 引用 • 15 回帖 • 376 关注
  • SpaceVim

    SpaceVim 是一个社区驱动的模块化 vim/neovim 配置集合,以模块的方式组织管理插件以
    及相关配置,为不同的语言开发量身定制了相关的开发模块,该模块提供代码自动补全,
    语法检查、格式化、调试、REPL 等特性。用户仅需载入相关语言的模块即可得到一个开箱
    即用的 Vim-IDE。

    4 引用 • 31 回帖 • 38 关注
  • WiFiDog

    WiFiDog 是一套开源的无线热点认证管理工具,主要功能包括:位置相关的内容递送;用户认证和授权;集中式网络监控。

    1 引用 • 7 回帖 • 512 关注
  • 分享

    有什么新发现就分享给大家吧!

    235 引用 • 1672 回帖
  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript、Vue、React 和 Angular。

    241 引用 • 1368 回帖 • 2 关注
  • SSL

    SSL(Secure Sockets Layer 安全套接层),及其继任者传输层安全(Transport Layer Security,TLS)是为网络通信提供安全及数据完整性的一种安全协议。TLS 与 SSL 在传输层对网络连接进行加密。

    65 引用 • 188 回帖 • 523 关注
  • VirtualBox

    VirtualBox 是一款开源虚拟机软件,最早由德国 Innotek 公司开发,由 Sun Microsystems 公司出品的软件,使用 Qt 编写,在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。

    10 引用 • 2 回帖 • 10 关注
  • 前端

    前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。

    247 引用 • 1347 回帖 • 1 关注
  • 链滴

    链滴是一个记录生活的地方。

    记录生活,连接点滴

    89 引用 • 3453 回帖
  • OAuth

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

    34 引用 • 103 回帖 • 15 关注
  • Lute

    Lute 是一款结构化的 Markdown 引擎,支持 Go 和 JavaScript。

    23 引用 • 187 回帖 • 35 关注