我試圖看看將我的基於Hugo的博客移植到Next.js是否是一個好的選擇(這並不是)。在這個過程中,我遇到了一個問題。
我需要更改每個圖片的路徑,因為Hugo允許一個帖子與Markdown文件位於同一個文件夾中,而Next.js則不允許這樣做。
但是,我不想打亂我的工作流程。能夠將圖片放在與Markdown文件相同的文件夾中對於編寫和維護都非常方便。
所以我的計劃是:在構建時,我會遍歷所有帖子,收集圖片,並在/public/images
中為每個帖子創建一個文件夾。
我只需要更改Markdown中的每個圖片路徑,這是最簡單的部分。
然後,我需要運行一個構建後的命令,創建一個postbuild.mjs
文件,其工作是遍歷我的content/posts
文件夾,並將每個圖片複製到public/images
中:
import fs from 'fs'
import path from 'path'
import fsExtra from 'fs-extra'
const source = './content/posts'
const destination = './public/images'
const posts = fs.readdirSync(source)
fsExtra.emptyDirSync(destination)
fs.mkdir(destination, () => {
posts.map((slug) => {
if (slug === '.DS_Store') return
fs.mkdir(`${destination}/${slug}`, () => {
fs.readdirSync(`${source}/${slug}`)
.filter((item) =>
['.png', '.jpg', '.jpeg', '.gif'].includes(path.extname(item))
)
.map((item) => {
fs.copyFile(
`${source}/${slug}/${item}`,
`${destination}/${slug}/${item.replace(/ /g, '-')}`,
() => {
console.log(`${destination}/${slug}/${item}`)
}
)
})
})
})
})
然後,在package.json
文件的scripts
中添加一個postbuild
項目:
{
...
"scripts": {
"build": "next build",
"postbuild": "node ./postbuild.mjs",
"dev": "next dev",
"start": "next start",
...
}
}
使用相同的技巧,您還可以創建一個在構建之前運行的prebuild
條目。
順便提一下,這不僅適用於Next.js,也是npm的一個功能。請參閱 https://docs.npmjs.com/cli/v6/using-npm/scripts#pre—post-scripts。