印象里听过这样一句话,Notion 让我们找回了当年 DIY QQ 空间的乐趣,已经寻不到说这句话的正主,但是仔细想想,还是挺有意思。

概要

本篇内容偏介绍类,无需理论基础,但是需要懂得如何修改文本,以达到自己想要的效果。

  • 自定义日历 Icon 与 Bing 壁纸;
  • 修改自定义日历 Icon 时间,让日期不变;
  • 修改自定义日历 Icon 日期颜色,突出显示。

看看效果?

如何在 Notion 中使用动态 Icon 与壁纸 ?-Linmi
如何在 Notion 中使用动态 Icon 与壁纸 ?-Linmi

Notion icon 嵌入

Notion 的 Icon 是支持嵌入 image 格式的内容,兼容格式有:PNG、JPG、GIF、SVG、BASE64 字符。

如果你想要你的 Notion icon 或者 Cover 动起了,那么可以试试内嵌一个 GIF 图片。比如弄一个春意黯然、散发花香的动图。

如何嵌入 Icon

找到 Page 上的 Add icon 按钮,点击后选择你想要的 icon 即可。注意 Notion Page 与 Notion Database 显示方式是不一样的,Notion Database 在左边显示,对比 Page 比较小。

如何在 Notion 中使用动态 Icon 与壁纸 ?-Linmi

动图演示

如何在 Notion 中使用动态 Icon 与壁纸 ?-Linmi

动态日历 Icon 的起因

起因是 @Jack 在 Notion 中文社区的 TG 群里发了一个链接:

https://shkspr.mobi/svg/calendar.svg

当你浏览器访问这个链接时,会显示本月、当日与本周,很是神奇。但是试着把这个链接嵌入到 Notion 后,显示的是原始的图片,并没有获取到当日的图。带着好奇心我试着看了一眼这个日历 icon 的源码。

如何在 Notion 中使用动态 Icon 与壁纸 ?-Linmi

原作者是在 SVG 图片里嵌入了 JavaScript 脚本, Notion 为了安全原因,比如避免 XSS,禁用了执行 JavaScript 脚本,所以显示的就是默认的文本。

我昨晚试着做出了第一个版本,但是只能获取到当天的 时间,如果想显示昨天,前天或者说是任意一天,做不到。

❤️这里要感谢一下 AFuture,在他的提醒下,可以通过自定义链接参数,来实现上述的效果。并且 AFuture 最后还实现了一个很不错的版本,也就是现在采用的版本。

嵌入自动获取时间的日历 Icon

嵌入每日变化的日期

https://linmi.cc/calendar/

复制上面的链接,Add icon,找到 Url,粘贴进去确定即可。

如何在 Notion 中使用动态 Icon 与壁纸 ?-Linmi

嵌入固定日期

https://linmi.cc/calendar/index.php?date=2020-03-09

date=2020-03-09 后面的日期就是可以修改的日期,比如生成五月十号的日历 Icon,那么就可以这么写:2020-05-10,放在?date=后面,就得到了

https://linmi.cc/calendar/index.php?date=2020-05-10
如何在 Notion 中使用动态 Icon 与壁纸 ?-Linmi

可改进的点

考虑到目前这个链接获取的是中国的时间,那么对于外国就不那么好用了,所以后期会添加一个时区选项,链接生成是根据时区来。

嵌入动态壁纸背景

固定的壁纸背景很单调, 不如尝试试试每天定时换一张,也能顺便换换自己的好心情。

Notion 中如何嵌入背景

Notion 嵌入背景与嵌入 Iocn 方式一样。我们找到 Add cover,点击后即可自定义背景。

嵌入动态壁纸

这里我就不做自己搭建,选用了第三方的服务,有兴趣折腾的同学,可以试着自己自定义:https://github.com/xCss/binghttp://bing.creepersan.com/document

http://www.neweb.top/bing.php
如何在 Notion 中使用动态 Icon 与壁纸 ?-Linmi

调整背景位置

如果觉得背景看起来不是很舒服,可以试着调整一下图片的位置。

如何在 Notion 中使用动态 Icon 与壁纸 ?-Linmi

总结

其实这类内嵌的壁纸,还有很大的想象空间,比如图片可以定时显示当天播放的番剧、汇率、天气、穿衣情况。

更有可能,试着嵌入其他软件的任务进来?

参考链接

例行

欢迎加入 Notion 中文社区社群:linmi.cc/n

感谢阅读,请评分鼓励一下我!

感谢评价,欢迎关注我的 Twitter 哦。