/

如何在 Markdown 字串中更改圖片的 URL

如何在 Markdown 字串中更改圖片的 URL

最近，我試圖將我的基於 Hugo 的部落格移植到 Next.js（結果並不理想），而在這個過程中遇到了一個問題。

Hugo 允許我在圖片名稱中使用空格，這對於使用截圖並且預設檔名為 Screen Shot 2022-... 是很方便的。

但是 Next.js 的 Markdown 則不允許使用空格。因此，我撰寫了一個腳本來將所有的圖片檔名中的空格改為連字符（hyphen）。

1
2
3
4
5
"Screen Shot 2022-..." 

=> 

"Screen-Shot-2022-..."

然後，我將文章的 Markdown 內容替換為改好的名稱。

同時，由於 Hugo 允許將文章放在與 Markdown 檔案相同的資料夾中，而 Next.js 則不允許這樣做。

因此，我使用了 /public/images/<SLUG>/ 的資料夾形式，將每個文章的圖片設為公共可見。

以下是我實現這個功能的程式碼：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import matter from 'gray-matter'

...

let { data: frontmatter, content } = matter(fileName)

const regex = /\!\[(.*?)\]\((.*?)\)/gm
let matches

while ((matches = regex.exec(content)) !== null) {
 content = content.replace(
 '](' + matches[2],
 `](/images/${slug}/${matches[2].replace(/ /g, '-').replace(/\//g, '')}`
 )
}

tags: [“Hugo”, “Next.js”, “Markdown”, “image URLs”, “regex”, “gray-matter”]