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

## 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
<!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>
```
```jinja: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 %}
```

### アセット
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
```