独学者Fossa

日本語で検索しても、あまり記事が見つからないですね。

LiquidJSは、Shopifyで使われているテンプレートエンジンLiquidと互換性があるJavaScriptのテンプレートエンジンという認識で、あっているのかな？

ずっとNunjucks + Gulpを、使っていました。

ただ、Gulpは更新されていないので、最近、Gulpを使わない方法に書き直して、HTMLファイルを生成していました。

まだLiquidJSを使い始めたばかりで、ほとんど理解できていない状態です。

若干、違うところがありました。

	Nunjucks	LiquidJS
Layouts	extends	layout
拡張子	njk	liquid(変更可)

Nunjucksで作成したファイルの中のextendsをlayoutに変更してみると、そのまま使えました。

ドキュメントに書いてあるのを、少し変更して動いたものが、下記です。

使用環境

Name	Version
node	v16.3.0
npm	7.17.0
liquidjs	9.25.0

ファイル構造

.
├── app.js
├── node_modules
├── package.json
└── src
    ├── layouts
    │   └── master.njk
    └── pages
        └── index.njk

app.js

var { Liquid } = require('liquidjs');
const path = require('path');

const engine = new Liquid({
  root: path.resolve(__dirname, 'src/'),
  extname: '.njk'
});

engine
  .renderFile('pages/index')
  .then(console.log);

package.json

{
    "private": true,
    "scripts": {
        "build": "node app.js"
    },
    "dependencies": {
        "liquidjs": "^9.25.0"
    }
}

layouts/master.njk

<!DOCTYPE html>
<html lang="ja">

<head>
  <title>{% block title %}{% endblock %}</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reseter.css" />

  {% block css %}{% endblock -%}
</head>

<body>
  <div id="app">
    {% block contents %}{% endblock %}
  </div>
  <!-- #app -->

  {% block js %}{% endblock -%}
</body>

</html>

pages/index.njk

{% layout 'layouts/master.njk' %}

{% block title %}Home{% endblock %}

{% block contents -%}
<aside></aside>
<main></main>
{%- endblock %}

実行

node app.js

出力結果

<!DOCTYPE html>
<html lang="ja">

<head>
  <title>Home</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reseter.css" />

</head>

<body>
  <div id="app">
    <aside></aside>
    <main></main>
  </div>
  <!-- #app -->

</body>

</html>