既存のHTMLに変数を追加
Web制作をしていると静的なHTMLファイルにテンプレートの変数を含めたいことがある。
例えば以下のHTMLに…
<h1>Sato is 35 years old.</h1>
以下のように変数を入れてコマンドを実行してHTMLを生成したいケースです。
<h1>{{ user }} is {{ age }} years old.</h1>
このようなケースの場合、WebpackやViteなどをインストールしなくてもNunjucksをインストールすれば簡単に実装できる。
Nunjucksをインストール
まずHTMLファイルがあるディレクトリにnpm init -yでpackage.jsonを作成する。
次に以下のコマンドでNunjucksをインストールする。
npm i -D nunjucks
次にNode.js実行用のファイルを作成する。
以下は既存のHTMLを{{ user }}のような変数に置き換えたあとNunjucksで生成したHTMLをbuildフォルダ内に保存した例。
// sample.js
const fs = require('fs')
const nunjucks = require('nunjucks')
const buildPath = './build/'
fs.readdir('./', (err, files) => {
for (let file of files) {
if (/\.html$/.test(file)) {
const data = nunjucks.render(file, {
user: 'Sato',
age: 35,
})
if (!fs.existsSync(buildPath)) {
fs.mkdirSync(buildPath);
}
fs.writeFileSync(`${buildPath}${file}`, data, (err) => {
if (err) throw err
})
}
}
if (err) throw err
})
あとは「node sample.js」を実行すればbuildファイルにHTMLファイルが生成されます。
