我用AI贡献开源：修复 NotionNext 画廊 Bug

关键词：开源贡献、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

主要添加了以下代码：

1
2
3
4
/* 画廊左右边线不展示Bug */
.notion-gallery {
  padding: 0 16px;
}
  • 本地测试：
    之后 Cursor 又贴心的告知我如何本地运行项目：yarn dev，修复后效果如下：

3. 提交 PR

验证没问题之后，我又在 Cursor 的帮助下，提交了一个 Pull Request：

https://github.com/tangly1024/NotionNext/pull/3371

在该 PR 中，我详细说明了问题和修改方案，作者很快就合并了我的代码！

🎁 收获

  • 第一次开源贡献！ 即使没有前端经验，也能通过 AI 工具真正为社区做出贡献。
  • 学到了基础前端知识，特别是 CSS 网格布局和响应式设计的关键点。
  • 获得了成就感和信心，以后遇到 Bug，我不会再害怕，反而会想“能不能顺便也修了它？”