背景
有一天同事发现公司网站的某个页面上有三个 H1 标签，懂行的都知道，有三个 H1 标签虽然不会对网站的访问产生影响，但是对于搜索引擎来讲，就比较麻烦了，因为一般搜索引擎都是靠 H1 标签、TDK 等来对网页的内容进行抓取，然后再进行质量优劣的判断。三个 H1 标签，搜索引擎就不知道到底应该抓哪个了。所以，同事提了一个需求，希望能修改一番，恰巧不巧，负责该网站的研发同学由于有更紧急的需求去做，这个不影响用户访问的需求暂时还排不上。于是，我就自告奋勇打算自己修改。
原始需求截图
代码查找
说干就干，我把该网站的代码从代码托管平台下载到了本地，然后用近期火爆的 AI 编辑器 Cursor 代码（至于为什么不用 VS Code，那是因为前期那 Cursor 做了几次测试，就索性用 Cursor）。由于之前从来没有看过这套代码的完整逻辑，于是采用了暴力的手段，直接用全局搜索查找 H1 标签内容所在的文件。结果找到了一堆，然后一个个看，一个个排除，最后发现了两个文件：
xxx.yml 文件
- title: text: "我是第一个 H1 标签的内容" style: "color: #FFFFFF;"......还有其他内容，在这儿省略......- title: text: "我是第二个 H1 标签的内容" style: "color: #FFFFFF;"......还有其他内容，在这儿省略......- title: text: "我是第三个 H1 标签的内容" style: "color: #FFFFFF;"......还有其他内容，在这儿省略......
复制代码
xxx.html.haml 文件
.home-carousel{style: "position: relative"} = partial "/includes/home/model_qr_code.html.haml" - data_with_i18n.home_carousel.each_with_index do |item, index| .hero{:class => index == 0 ? "active index-#{index}": "index-#{index}", :style => "background-image: url(#{item.background_image.desktop})"} .hero-content .hero-content-left - if item.feature %a{href: item.feature.href, style: "display: inline-block; cursor: #{item.feature.clickable ? 'pointer': 'default'}"} %span{class: item.feature.classes} = partial item.feature.icon || "/images/new-home/desktop/20231228-update/stars-icon.svg" %span{style: "margin: 0 4px"}= item.feature.text - if item.feature.clickable = partial "/images/icons/slp-caret-right.svg" .hero-content-left-title %h1{:style => "#{item.title.style}"}= item.title.text ......其他代码省略......
复制代码
所以猜测了一下，整个的逻辑应该是 xxx.html.haml 文件中的代码对 xxx.yml 文件中的内容进行循环，读取 xxx.yml 文件中的 title 当作 h1 标签，做出这个判断的原因是代码：
data_with_i18n.xxx.each_with_index do |item, index|
复制代码
虽然看不懂这是哪个编程语言的语法，但是看样子是个循环。第一步算是迈出去了，代码找到了。接下来就是要修改了。
修改代码
代码查找容易，修改难啊。看到前面的代码，就蒙蔽了，从来没见过这种类型的代码，因此秉持“看不懂的代码不能乱修改”，玩意给网站搞崩溃了怎么办，那就真的“跑路了”。突然想起来，随着 AIGC 的发展，各种 Copilots 满天飞，都说要替代程序员，能写也能改。然后看到我已经在 Cursor 中安装的一个 AI 助手——驭码CodeRider。
驭码 CodeRider 是极狐 GitLab 公司自研的 AIGC 产品，是一款 AI 编程与软件智能研发助手。在 AI 编程方面，可以进行代码补全、代码解释、代码生成、单元测试生成等，此外由于是极狐 GitLab 自家产品，充分发挥了“近水楼台先得月”的优势，和极狐 GitLab 进行了集成，用 AI 来处理 Issue、MR 和 CI/CD 等。
驭码 CodeRider 是一个插件，可以直接在主流 IDE，诸如 VS Code、JetBrains 全家桶中使用。当前该产品全面开启了免费试用，https://dl.gitlab.cn/ckpqvm5f。
我在 Cursor 的插件中心直接安装了。关于驭码 CodeRider 在 Cursor 中的使用，可以查看文章
如何在 Cursor 中使用驭码CodeRider？
安装完毕以后，就能看到使用界面了：
于是选中了上面那“一坨”代码，点击了驭码 CodeRider 的 Explain Code，于是驭码 CodeRider 就开始洋洋洒洒的对代码进行解释：
驭码CodeRider 代码解释截图
一看这么多英文，我就让驭码 CodeRider 用中文给我解释一下：
驭码CodeRider 中文解释
接下来我就进入了整体，我就问，上面的代码里面能看出是不是把 title 转换成了 h1 标签：
驭码CodeRider 代码解释片段
啥也不说了，AI 说的和我这个小白判断的是一样的。接下来就是关键时刻，我就问驭码 CodeRider，如果我只想让第一个 text 的内容转换成 h1 标签，其他的不要，代码该怎么写？
我的提示词是：
如果要把这段代码改成，只有循环中的第一个进行 h1 标签的转换，后面的不用转换，该如何处理？
驭码 CodeRider 的回复是：
要将这段代码修改为只有循环中的第一个 title 使用 <h1> 标签，而后续的 title 不使用 <h1> 标签，可以通过在循环中添加条件判断来实现。具体来说，可以在循环中检查当前的 index 是否为 0，如果是，则使用 <h1> 标签，否则使用其他标签（例如 <h2> 或 <span>）。
并且给出了修改后的代码：
.home-carousel{style: "position: relative"} = partial "/includes/home/model_qr_code.html.haml" - data_with_i18n.home_carousel.each_with_index do |item, index| .hero{:class => index == 0 ? "active index-#{index}": "index-#{index}", :style => "background-image: url(#{item.background_image.desktop})"} .hero-content .hero-content-left - if item.feature %a{href: item.feature.href, style: "display: inline-block; cursor: #{item.feature.clickable ? 'pointer': 'default'}"} %span{class: item.feature.classes} = partial item.feature.icon || "/images/new-home/desktop/20231228-update/stars-icon.svg" %span{style: "margin: 0 4px"}= item.feature.text - if item.feature.clickable = partial "/images/icons/slp-caret-right.svg" .hero-content-left-title - if index == 0 %h1{:style => "#{item.title.style}"}= item.title.text - else %span{:style => "#{item.title.style}"}= item.title.text .hero-content-left-desc .hero-content-left-desc-item{:style => "#{item.subtitle.style}"}= item.subtitle.text .hero-content-left-action ......太长删除了......
复制代码
让你们看一下 AI 回复的震撼场面：
驭码CodeRider 代码解释片段
核心代码其实就是下面的几行：
- if index == 0 %h1{:style => "#{item.title.style}"}= item.title.text- else %span{:style => "#{item.title.style}"}= item.title.text
复制代码
因为我懂了这个看不懂是哪种编程语言的语法，原来 if else 是这么写的。上面的代码，其实就是做了一个判断，循环时把第一个的 text 转换成 h1 标签，其他的都转换成 span。
跟同事确认了一下，转换成 span 就可以，因为网页上已经有 h2 h3 标签了，没必要再加了。于是就到了最后一步了。
提交代码
提交代码就太简单了，直接按照下面的流程就行：
# 先创建一个分支，不能在 main 上霍霍啊git ck -b h1-modify
# 修改代码后，将代码提交git add . && git commit -m "delete multiple h1 label" && git push orign h1-modify
复制代码
由于公司是以极狐 GitLab 作为源代码托管平台的，所以直接在界面上创建一个 MR，创建完毕自动运行 CI/CD，通过之后，找代码审核人员对代码审核，没有问题之后合并到了主分支，然后执行了部署操作。最后在 PROD 上做了检查，符合需求提出者的预期。至此，这个需求就圆满结束了。
结束语
如果对于某个产品的代码不熟悉的时候，贸然修改代码带来的后果可能还不如不修改，就让其“带 bug 运行”。但是在 AI 的帮助下，能快速读懂代码的逻辑，然后给出代码建议，这样对于了解产品、需求就更加容易了。
在驭码 CodeRider 的帮助下，我自己的研发信息又增强了一步，我决定要用驭码 CodeRider 去做下一个需求！
评论