type
status
date
slug
summary
tags
category
icon
password
问题的提出
最近在折腾NotionNext的时候,发现了一个小问题:网站里的图片都能点击放大,有时候挺烦人的。还有个白色模糊遮罩——看起来挺酷?但我不需要啊。

这个功能本来是为了提升阅读体验的,让用户能看清图片细节。但有些场景下确实不太合适:
- 有些页面设计就不希望图片被点击
- 用户容易误触,影响浏览流畅度
- 如果图片本身要承载其他功能(比如跳转链接),就冲突了
- 有时候就是想要纯静态的展示效果
我好奇这个功能是怎么实现的,最初以为在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代码加进去:
如图所示

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
这个属性。有什么问题欢迎交流~