Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

EzPlatformDesignEngine

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

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

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

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

設定ファイル

https://github.com/ezsystems/ezplatform-design-engine/tree/master/doc

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 に分離しています。

テーマ

テンプレート

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 に配置します。

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 %}

アセット

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
bezeklik
サーバー管理、CMS構築のお仕事募集中。 CentOS / Apache / Nginx / PHP / MySQL / Docker / CMS (eZ Platform, eZ Publish, WordPress, Drupal) / Redmine
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした