eZ Platform でデザインテーマを作成する

9587 ワード
CMS eZPlatform CMS テキストリンク

EzPlatformDesignEngine

eZ Platform 1.10.0 から eZ Publish legacy のデザインフォールバックシステム に似たデザインテーマが EzPlatformDesignEngine バンドルによって作成可能になりました。1

テーマ機能により、サイトアクセスごとにデザインを簡単に切り替えることができるようになります。

EzPlatformDesignEngine バンドルは eZ Platform 1.10.0 以降ではデフォルトで有効になっています。

まずは最新版の eZ Platform をインストールしましょう。

設定ファイル

cd /var/www/ezplatform

cat << "_EOF_" >> app/config/ezplatform.yml
imports:
    - { resource: views.yml }
_EOF_
app/config/views.yml
ezdesign:
    design_list:
        my_design: [my_theme]

ezpublish:
    system:
        site_group:
            design: my_design
            pagelayout: "@ezdesign/pagelayout.html.twig"
            content_view:
                full:
                    article:
                        template: "@ezdesign/full/article.html.twig"
                        match:
                            Identifier\ContentType: [article]

設定ファイルでデザイン名とテーマ名を指定します。

サイトアクセスグループまたはサイトアクセスにデザイン名を設定し、テンプレートファイルの紐づけを指定します。

ezplatform.yml に直接記載してもいいのですが、テンプレートファイルの指定が煩雑になるので、ここでは eZ Platform Demo を参考に views.yml に分離しています。

テーマ

テンプレート

Twig テンプレートは app/Resources/views/themes/my_theme または src/AppBundle/Resources/views/themes/my_theme に配置します。

mkdir -p app/Resources/views/themes/my_theme/full
app/Resources/views/themes/my_theme/pagelayout.html.twig
<!doctype html>
<html lang="{{ app.request.locale|replace({'_': '-'}) }}">
<head>
<meta charset="utf-8">
{% if content is defined and title is not defined %}
{% set title = ez_content_name( content ) %}
{% endif %}
<title>{{ title|default( 'Home' ) }}</title>
</head>
<body>
my_theme pagelayout.html.twig
{% block content %}{% endblock %}
</body>
</html>
app/Resources/views/themes/my_theme/full/article.html.twig
{% extends noLayout == true ? viewbaseLayout : pagelayout %}
{% block content %}
my_theme/full/article.html.twig
<h1>{{ ez_field_value( content, 'title' ) }}</h1>
<h2>{{ ez_field_value( content, 'short_title' ) }}</h2>
<div>
{{ ez_field_value( content, 'body' ) }}
</div>
{% endblock %}

アセット

画像や CSS、JavaScript などの静的ファイルはアセットとして
web/assets/themes/my_theme または app/Resources/public/themes/my_theme に配置します。

例えば asset('js/example.js', 'ezdesign') を指定すると web/bundles/app/themes/my_theme/js/example.js が呼び出されます。

注意点

バンドルの場合、public ディレクトリを web ディレクトリに公開するために以下のコマンドを実行する必要があります。

eZ Platform 2.x
bin/console assets:install
eZ Platform 1.x
app/console assets:install

  1. https://ez-systems-developer-documentation.readthedocs-hosted.com/en/master/releases/ez_platform_v1.10.0/#new-design-engine ↩