Palette のインストール

Palette は通常の Drupal モジュールと同じく、1行のコマンドでインストールできます:

composer require drupal/canvas_palette

4つのステップでインストール

1. Composer でコードを取得 — 他の Drupal モジュールとすべてのフロントエンドライブラリを一緒に取り込みます。
2. モジュールを有効化 — Drush または「拡張機能」ページで有効にします。
3. キャッシュを再構築 — Canvas がコンポーネントを生成できるようにします。
4. Canvas を開く — 「Palette」カテゴリの中にコンポーネントが見つかります。

ステップ1 — Composer で取得する

プロジェクトのルートで Palette を require します。Composer が Canvas、Webform、そしてインタラクティブなコンポーネントが使う JavaScript ライブラリ(Splide、tiny-slider、GLightbox、countUp.js、Coloris など)を自動的に取り込みます:

# モジュール本体とその必須依存である Drupal Canvas
composer require drupal/canvas drupal/canvas_palette

新しいサイトでは次のような結果になります — Palette が一度に一連のパッケージを取り込みます:

  - Installing drupal/webform (6.3.0)
  - Installing drupal/canvas (1.10.0)
  - Installing drupal/canvas_palette (1.0.2)
  - Installing levmyshkin/splide, tiny-slider, glightbox,
      count-up.js, coloris, accordion, sticky-js, vidbg …
Generating autoload files
No security vulnerability advisories found.

ステップ2 — モジュールを有効化する

最も速い方法は Drush です。canvas_palette を有効化すると、その依存(Canvas、Webform、Media、Media Library)も1つのコマンドで一緒に有効になります:

drush en canvas_palette -y

[success] Module canvas_palette has been installed.
[success] Module canvas has been installed.
[success] Module media_library has been installed.
[success] Module media has been installed.
[success] Module webform has been installed.

UI を使いたい場合は? 「拡張機能」(/admin/modules)を開き、フィルターに「Canvas」と入力して Palette と Drupal Canvas にチェックを入れ、インストールを押します。Drupal が必要な依存の有効化を提案してくれます。

ステップ3 — キャッシュを再構築する

Canvas はフォルダごとに1つのコンポーネント定義を生成し、そのスキーマを固定します。インストール後にキャッシュを再構築して、それらの定義を生成させます:

drush cr

ステップ4 — Canvas を開いてコンポーネントを見つける

エディタで任意の Canvas ページを開きます(ページで新規作成するか、既存の Canvas ページを編集します)。+ボタンをクリックしてライブラリを開きます。すべての Canvas Palette コンポーネントは1つの Palette カテゴリにまとめられています — Accordion から Video Gallery まで39個あります:

コンポーネントをキャンバスにドロップし、右側のサイドバーでそのプロパティを設定します。Canvas Palette は Canvas ページ自体にページ全体のオプションも登録します — 「テンプレートは Canvas Palette モジュールから検出されます」と記されたページテンプレートセレクタが表示されます: