--- title: eZ Platform でデザインテーマを作成する tags: eZPlatform:1.10.0,2.1.0-rc1 CMS author: bezeklik slide: false --- ## EzPlatformDesignEngine **eZ Platform 1.10.0** から [eZ Publish legacy のデザインフォールバックシステム](https://doc.ez.no/eZ-Publish/Technical-manual/5.x/Concepts-and-basics/Designs/Design-combinations) に似たデザインテーマが [EzPlatformDesignEngine](https://github.com/ezsystems/ezplatform-design-engine) バンドルによって作成可能になりました。[^design] テーマ機能により、サイトアクセスごとにデザインを簡単に切り替えることができるようになります。 ![](https://ez-systems-developer-documentation.readthedocs-hosted.com/en/master/releases/img/newdesigntable.png) [^design]: https://ez-systems-developer-documentation.readthedocs-hosted.com/en/master/releases/ez_platform_v1.10.0/#new-design-engine EzPlatformDesignEngine バンドルは eZ Platform 1.10.0 以降ではデフォルトで有効になっています。 まずは[最新版の eZ Platform をインストール](http://qiita.com/bezeklik/items/2fc554e39c7fc94497a9)しましょう。 ## 設定ファイル https://github.com/ezsystems/ezplatform-design-engine/tree/master/doc ```bash cd /var/www/ezplatform ``` ```bash cat << "_EOF_" >> app/config/ezplatform.yml imports: - { resource: views.yml } _EOF_ ``` ```yaml: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](https://github.com/ezsystems/ezplatform-demo/blob/master/app/config/ezplatform.yml#L3) を参考に [views.yml](https://github.com/ezsystems/ezplatform-demo/blob/master/app/config/views.yml) に分離しています。 ## テーマ ### テンプレート https://github.com/ezsystems/ezplatform-design-engine/blob/master/doc/templates.md Twig テンプレートは `app/Resources/views/themes/my_theme` または `src/AppBundle/Resources/views/themes/my_theme` に配置します。 ```bash mkdir -p app/Resources/views/themes/my_theme/full ``` ```jinja:app/Resources/views/themes/my_theme/pagelayout.html.twig {% if content is defined and title is not defined %} {% set title = ez_content_name( content ) %} {% endif %} {{ title|default( 'Home' ) }} my_theme pagelayout.html.twig {% block content %}{% endblock %} ``` ```jinja:app/Resources/views/themes/my_theme/full/article.html.twig {% extends noLayout == true ? viewbaseLayout : pagelayout %} {% block content %} my_theme/full/article.html.twig

{{ ez_field_value( content, 'title' ) }}

{{ ez_field_value( content, 'short_title' ) }}

{{ ez_field_value( content, 'body' ) }}
{% endblock %} ``` ### アセット https://github.com/ezsystems/ezplatform-design-engine/blob/master/doc/assets.md 画像や 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 ```