ChatGPT 淪爲了我的打工仔

大家好，我是老章

最近在折騰之前搞的R-bookdown網站、Jekyll博客，還有剛上了Astro做的週刊、Astro Starlight做的文檔站

• R2ML：https://r2ml.zhanglearning.com/
• 博客：https://blog.zhanglearning.com/
• 週刊：https://weekly.zhanglearning.com/
• HF語音課：https://hf-audio.zhanglearning.com/

還有正在建設的這個：

但是前端我是一竅不通，只能在現成的主題上修修改改，即便如此還是遇到了很多問題。好在有GPT這個打工仔幫忙，進度還行。

這裏就把GPT-4乾的活兒展示一下：

先乾點粗活

我的提問

我的文件夾下有很多.mdx文件，文中有若干段落：

<div class="flex justify-center">
    <img src="https://huggingface.co/datasets/huggingface-course/audio-course-images/resolve/main/speecht5.png" alt="SpeechT5 outputs a spectrogram and uses a vocoder to create the waveform">
</div>

我需要把文章div格式改爲

![]()

這種格式，比如

![](https://huggingface.co/datasets/huggingface-course/audio-course-images/resolve/main/speecht5.png)

GPT直接給了我代碼，毫無bug

import re
import glob

# 匹配HTML中的圖片標籤
img_tag_regex = re.compile(r'<div class="flex justify-center">\s*<img src="(.*?)" alt=".*?"\s*/?>\s*</div>')

# 用於替換的函數
def replace_with_markdown_img(match):
    img_url = match.group(1)
    return f"![]({img_url})"

# 遍歷所有的.mdx文件
for file_path in glob.glob('path_to_your_folder/*.mdx'):
    with open(file_path, 'r', encoding='utf-8') as file:
        content = file.read()
        
    # 替換所有匹配的圖片標籤
    new_content = img_tag_regex.sub(replace_with_markdown_img, content)
    
    with open(file_path, 'w', encoding='utf-8') as file:
        file.write(new_content)

print("Finished replacing all div image tags with markdown image syntax.")

還有別的粗活，比如

再來個cosplay

然後解決具體問題：調整頁面跳轉方式

我的提問：可以幫我調整一下astro頁面嗎，我想換個跳轉方式，不要用點擊詳情來跳轉到blog

GPT-4的回答

如果你想要換一種跳轉到博客的方式，而不是通過點擊一個“詳情”按鈕，你可以考慮將整個 `SummaryCard` 作爲一個可點擊的區域來實現跳轉。這通常通過將 `SummaryCard` 包裹在一個 `<a>` 標籤中來完成。

讓我們進行一些調整，使整個卡片都是可點擊的，並且在用戶點擊時將他們重定向到博客頁面。我們將移除 `Button` 組件，並將 `SummaryCard` 包裹在一個 `<a>` 標籤中。以下是更新後的代碼：

```astro
代碼太長了，此處略
```

在這個例子中：

- 我們移除了原有的 `Button` 組件。
- 我們添加了一個 `<a>` 標籤來包裹整個 `SummaryCard`，將 `href` 設置爲博客的 URL。
- 我們給 `<a>` 標籤添加了類 `block text-inherit no-underline`，這些類分別用於讓鏈接佔據整個卡片區域、繼承文本顏色、移除下劃線樣式，這樣可以保持卡片的視覺一致性。
- 爲了防止在點擊標籤鏈接時也觸發卡片鏈接，我們在標籤的 `<a>` 標籤上添加了 `onClick` 屬性並調用了 `e.stopPropagation()`，這樣點擊標籤時不會觸發卡片的跳轉。

請根據你的項目需求和樣式框架進行必要的調整。

還可以讓他繼續完善

再解決一個問題：修改頁面展現方式

GPT的回答毫無bug：

要讓標籤（tags）和“閱讀文章”（Read post）按鈕並排顯示，你需要將它們放在相同的容器中，並使用`flex`佈局來使它們水平排列。此外，還需要確保這個容器在不同屏幕尺寸下都能適應佈局。以下是調整後的代碼：

```astro
代碼太長了，此處略
```

更改後的代碼中，我創建了一個新的父級`div`元素，其類爲`flex flex-col sm:flex-row justify-between items-start sm:items-center my-4`，這樣在小屏幕上，標籤和按鈕會堆疊排列（`flex-col`），而在大屏幕上則會並排排列（`flex-row`）。我還調整了margin和padding，以便在不同屏幕大小上看起來都合適。

請確保你的CSS框架（如Tailwind CSS）已經包含了以上用到的類，否則你可能需要添加或修改相應的CSS樣式。

解決若干bug

代碼解釋工作和翻譯

還有大量代碼解釋工作和翻譯工作就不一一展示了

真的無法想象，沒有機必替幫忙，我要花費幾倍的時間才能搞定這些事情。

我太喜歡大模型時代了