type
status
date
slug
summary
tags
category
icon
password

问题的提出

最近在折腾NotionNext的时候,发现了一个小问题:网站里的图片都能点击放大,有时候挺烦人的。还有个白色模糊遮罩——看起来挺酷?但我不需要啊。
notion image
 
这个功能本来是为了提升阅读体验的,让用户能看清图片细节。但有些场景下确实不太合适:
  • 有些页面设计就不希望图片被点击
  • 用户容易误触,影响浏览流畅度
  • 如果图片本身要承载其他功能(比如跳转链接),就冲突了
  • 有时候就是想要纯静态的展示效果
我好奇这个功能是怎么实现的,最初以为在Notion数据库里的配置中心会有一个开关——类似WIDDGET_PET那样的Ture/False这样。可惜,没有。
折腾了一番,发现NotionNext用了一个叫 @fisch0920/medium-zoom 的库,主要逻辑在 components/NotionPage.js 文件里。简单来说,就是通过JavaScript自动给页面上的图片元素绑定了点击放大的功能。
===

解决方案

在CodeBuddy里和Sonnet讨论了一下,有几种方法:

方法一:改配置文件

在 conf/post.config.js 里有个配置项:
但这个只能禁用Gallery视图的图片,文章里的图片还是会放大。治标不治本。

方法二:直接改源码

最直接的办法就是去 components/NotionPage.js 里把相关代码注释掉。
这样确实能彻底解决问题,但有个大问题:NotionNext一升级,你的修改就没了。每次都要重新改,太麻烦。

方法三:用配置中心搞定(CSS,推荐)

后来我想到,既然这个功能是通过CSS类名来控制的,那我直接用CSS把它禁用掉不就行了?
这个方法的好处是:
  • 不用动代码文件
  • NotionNext升级也不会影响
  • 想开启的时候删掉CSS就行
  • 配置灵活,想禁用哪些就禁用哪些
而且我记得NoitonNext数据库配置中心里有一个全局Css的字段,可以用来配置全局CSS。
第一步:在你的Notion配置中心数据库里,找到 GLOBAL_CSS 这个字段。(一般肯定有,如果没有就新建一个)
第二步:把下面这段CSS代码加进去:
如图所示
notion image
CSS完整代码附在文末。
我让Ai解释一下这几行CSS的作用:
  • .medium-zoom-image 这个是给图片本身用的,pointer-events: none 让图片不能被点击,cursor: default让鼠标悬停时不显示手型光标
  • .medium-zoom-overlay 是放大时的背景遮罩,直接隐藏掉
  • .medium-zoom-image--opened 是已经打开的放大图片,也隐藏掉
总之就是把所有跟图片放大相关的元素都给禁用或隐藏了。

实现后的效果

配置完成后,效果立竿见影。
之前的情况
  • 鼠标放到图片上会变成小手
  • 点击图片就“嗖”地放大,还有白色毛玻璃遮罩
  • 要按ESC或者点击空白处才能关闭
现在的情况
  • 鼠标放到图片上还是普通光标
  • 点击图片没有任何反应
  • 图片就是静静地待在那里
最重要的是,这个方法不会影响其他功能:
  • 图片该怎么显示还怎么显示
  • 懒加载什么的都正常
  • 页面布局也不会乱
  • 其他交互功能都没问题
而且兼容性很好,不管你用哪个主题,不管是电脑还是手机,都有效。NotionNext升级也不会影响这个配置。

总结

就这样,几行CSS代码就搞定了NotionNext图片点击放大的问题。
这个方法的好处很明显:
  • 操作简单,不用改代码
  • 升级安全,不会丢失配置
  • 随时可逆,想恢复就删掉CSS
  • 精准控制,只影响图片放大功能
如果你也有类似的需求,可以试试这个方法。
另外,这个思路其实可以扩展到很多地方。NotionNext的很多功能都可以通过GLOBAL_CSS来自定义,比如字体、颜色、布局等等。这比改源码要省心多了。
 

CSS完整代码

如下……
将它粘贴/补充在GLOBAL_CSS 的配置值里。当然,记得要勾选开启GLOBAL_CSS这个属性。
有什么问题欢迎交流~