Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

@bezeklik

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

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
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
0
Help us understand the problem. What are the problem?