我用AI贡献开源：修复 NotionNext 画廊 Bugtype
status
date
slug
summary
category
tags
create_time
May 14, 2025 02:32 PM
icon
password
my_create_time
关键词：开源贡献、NotionNext、AI 编程、Cursor、新手前端、Bug 修复
🧭 背景
这还得从我建站初期说起，作为一个几乎不会前端开发的用户，我在部署 NotionNext 博客站时，偶然发现了一个令人困扰的 Bug —— 友链中的画廊图片最左右边线显示有问题，影响了整体展示效果，如下图：
出于对开源项目的敬意，我希望能为它做点什么。虽然我不是程序员，但我有一个强大的“外援” —— AI。
🔧 过程
1. 锁定问题
我使用 Notion 在友链页面中插入多图画廊后，在 NotionNext 页面中查看，发现：
- 图片边线显示异常
- 到 NotionNext 作者博客的友链页面也发现了有此问题
- 在社区 issue 和讨论中，好像还没发现有人提到这个问题并修复。
2. 搭配 AI + Cursor 工具排查
我不会前端，但我会用 AI！我使用的是 Cursor，一个强大的 AI 辅助编程编辑器：
- 定位问题
我将项目源代码下载到本地，然后使用 Cursor 打开项目，接着我直接将问题截图发给 Cursor，并告知问题是什么样，需要最终的修复结果是什么。
- AI 解读代码
Cursor 自动分析了整个项目，发现问题是画廊在响应式布局中没有设置
padding 导致。- 逐步调试
Cursor 定位到问题后，直接就帮我在合适的文件中进行了修复：
styles/notion.css主要添加了以下代码：
- 本地测试：
之后 Cursor 又贴心的告知我如何本地运行项目：
yarn dev，修复后效果如下：
3. 提交 PR
验证没问题之后，我又在 Cursor 的帮助下，提交了一个 Pull Request：
在该 PR 中，我详细说明了问题和修改方案，作者很快就合并了我的代码！
🎁 收获
- 第一次开源贡献！ 即使没有前端经验，也能通过 AI 工具真正为社区做出贡献。
- 学到了基础前端知识，特别是 CSS 网格布局和响应式设计的关键点。
- 获得了成就感和信心，以后遇到 Bug，我不会再害怕，反而会想“能不能顺便也修了它？”
有关文章的任何疑问，欢迎您在底部评论区留言，一起交流~
若您认可我的内容，欢迎 请我喝杯咖啡~
- 作者:lusyoe
- 链接:https://blog.lusyoe.com/article/fix-notionnext-gallery-with-ai
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
