我，一個小白，居然用 AI 工具修改了公司前端程式碼！

背景

有一天同事發現公司網站的某個頁面上有三個 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/5fcmj8b5 ，登入官網簡單申請即可使用。

我在 Cursor 的外掛中心直接安裝了。關於馭碼CodeRider 在 Cursor 中的使用，可以檢視文章在 Cursor 中使用馭碼CodeRider 進行 AI 程式設計。

安裝完畢以後，就能看到使用介面了：

於是選中了上面那“一坨”程式碼，點選了馭碼CodeRider 的 Explain Code，於是馭碼CodeRider 就開始洋洋灑灑的對程式碼進行解釋：

一看這麼多英文，我就讓馭碼CodeRider 用中文給我解釋一下：

接下來我就進入了整體，我就問，上面的程式碼裡面能看出是不是把 title 轉換成了 h1 標籤：

啥也不說了，AI 說的和我這個小白判斷的是一樣的。接下來就是關鍵時刻，我就問馭碼CodeRider，如果我只想讓第一個 text 的內容轉換成 h1 標籤，其他的不要，程式碼該怎麼寫？

我的提示詞是：

如果要把這段程式碼改成，只有迴圈中的第一個進行 h1 標籤的轉換，後面的不用轉換，該如何處理？

馭碼CodeRider 的回覆是：

要將這段程式碼修改為只有迴圈中的第一個 title 使用

標籤，而後續的 title 不使用

標籤，可以透過在迴圈中新增條件判斷來實現。具體來說，可以在迴圈中檢查當前的 index 是否為 0，如果是，則使用

標籤，否則使用其他標籤（例如

或 ）。

並且給出了修改後的程式碼：

.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 回覆的震撼場面：

核心程式碼其實就是下面的幾行：

- 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 去做下一個需求！