ドキュメント
v2 アーキテクチャ概要
AK2Engine v2 のコア層・レシピ層分離アーキテクチャについて
v2 で変わったこと
v2 ではエンジンをコア層とレシピ層に分離しました。
コア層(エンジン本体) はビルドパイプラインとセクション描画の仕組みだけを提供します。具体的なデザイン(テンプレート・CSS・エフェクト)はプロジェクト側で自由に作成・改変できます。
レシピ層(プロジェクト側) はセクションテンプレートとエフェクトで構成されます。AI が自由に .njk + .css を書いて新しいセクションデザインを追加できます。エンジンの更新は不要です。
プロジェクト構成
my-site/
src/
_sections/ セクションテンプレート(.njk + .css)
_effects/ エフェクト(.js)
_includes/
layouts/
base.njk
_data/
index.md
about/
index.md
blog/
package.json
フロントマターの書き方
---
layout: layouts/base.njk
# ページ全体のエフェクト(任意)
effects:
- BgEffectSnow
# セクション構成
sections:
- template: hero-basic
subtitle: "WELCOME"
title: "サイトタイトル"
lead: "リード文"
effects:
- name: BgEffectFirefly
count: 30
- template: content
- template: card-grid-basic
heading: "FEATURES"
subheading: "特徴"
items:
- title: "カード1"
desc: "説明文"
href: "/feature1/"
---
template: はプロジェクトの _sections/ からテンプレートを読み込みます。テンプレート内では section.* でフロントマターの値にアクセスします。
template: content は特別で、Markdown 本文を挿入します。
コア層の責務
| 機能 | 内容 |
|---|---|
| セクション描画 | template 名から _sections/{name}.njk を呼ぶ |
| エフェクト初期化 | effects から _effects/{name}.js をロード |
| ビルド | CSS/JS バンドル(エンジン + プロジェクト側) |
| ブログ基盤 | コレクション、フィルター、ページネーション |
| 検索 | Pagefind |