プラグイン
Nucleus-テンプレート（/テンプレート/）
Gantry 5は、 Twigをテンプレートエンジンとして使用します。 デフォルトでは、フレームワークはプラグインに組み込まれ、独自のテーマを作成するときに依存する必要があります（ / plugin / engine / nucleus /にあります ）。
トピックの後半で作成される小枝テンプレートのほとんどは、ここに提示されているファイルのいずれかから継承する必要があります。 これにより、単一の構造を維持でき、小枝の原理を使用して、ここで説明するブロックを調整できます。 内部には、基本的な小枝テンプレートがすでにあります。 それらのいくつかを次に示します。
templates / page.html.twig-基本的なページレイアウト。 テーマで作成されたすべての小枝テンプレートは、単一の構造を維持するためにこのファイルから継承される必要があります。
テンプレートで説明されているブロック：
- 内容;
- page_offcanvas
- page_layout;
- page_top
- page_bottom;
- body_top;
- body_bottom;
- page_head
- page_footer。
これらのブロックは、トピック側での継承後にテンプレートで再定義できます。
ページ構造自体は次のようになります。
{# #} {%- block page -%} <!DOCTYPE {{ gantry.config.page.doctype|default('html')|raw }}> <html{{ gantry.page.htmlAttributes|raw }}> {{ page_head|raw }} {% block page_body -%} <body{{ gantry.page.bodyAttributes({'class': [offcanvas_position, gantry.page.preset, 'g-style-' ~ gantry.theme.preset]})|raw }}> {{ gantry.config.page.body.body_top|raw }} {{ body_top|raw }} {{ page_offcanvas|raw }} <div id="g-page-surround"> {% if page_offcanvas|trim %} <div class="g-offcanvas-hide g-offcanvas-toggle" data-offcanvas-toggle><i class="fa fa-fw fa-bars"></i></div> {% endif %} {{ page_top|raw }} {{ page_layout|raw }} {{ page_bottom|raw }} </div> {{ body_bottom|raw }} <script type="text/javascript" src="{{ url('gantry-assets://js/main.js') }}"></script> {{ page_footer|raw }} {{ gantry.config.page.body.body_bottom|raw }} </body> {%- endblock %} </html> {% endblock -%}
ガントリー5を勉強したときに小さな問題に遭遇したことは注目に値します。 ページがレンダリングされると、コードに多くの空の行が表示されます（見苦しくなります）。 解決策として、テーマテンプレートで{20 spaceless％} {％endspaceless％}小枝コンストラクトを使用することをお勧めします。 縮小されたコードが判明します。
templates / page_head.html.twig-サイトヘッダーテンプレート。 templates / page.html.twigファイルのpage_headブロックで呼び出されます。
テンプレートで説明されているブロック：
- head_meta;
- head_title;
- head_application;
- head_ie_stylesheets;
- head、head_custom。
同じテンプレートにアトムが設定されます。
<head> {% block head_meta %} <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> {% if gantry.config.page.head.meta -%} {% for attributes in gantry.config.page.head.meta -%} {%- for key, value in attributes %} <meta name="{{ key|e }}" property="{{ key|e }}" content="{{ value|e }}" /> {% endfor -%} {%- endfor -%} {%- endif -%} {% if gantry.config.page.assets.favicon %} <link rel="icon" type="image/x-icon" href="{{ url(gantry.config.page.assets.favicon) }}" /> {% endif %} {% if gantry.config.page.assets.touchicon %} <link rel="apple-touch-icon" sizes="180x180" href="{{ url(gantry.config.page.assets.touchicon) }}"> <link rel="icon" sizes="192x192" href="{{ url(gantry.config.page.assets.touchicon) }}"> {% endif %} {% endblock %} {%- block head_title -%} <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Title</title> {%- endblock %} {% block head_application -%} {{ gantry.styles('head')|join("\n")|raw }} {{ gantry.scripts('head')|join("\n")|raw }} {%- endblock %} {% block head_ie_stylesheets -%} <!--[if (gte IE 8)&(lte IE 9)]> <script type="text/javascript" src="{{ url('gantry-assets://js/html5shiv-printshiv.min.js') }}"></script> <link rel="stylesheet" href="{{ url('gantry-engine://css/nucleus-ie9.css') }}" type="text/css"/> <script type="text/javascript" src="{{ url('gantry-assets://js/matchmedia.polyfill.js') }}"></script> <![endif]--> {% endblock -%} {% block head %}{% endblock %} {% block head_custom %} {% if gantry.config.page.head.head_bottom %} {{ gantry.config.page.head.head_bottom|raw }} {% endif %} {% endblock %} </head>
templates / partials / particle.html.twig-パーティクル作成時の継承用ファイル。 テンプレートに記述されているブロック（最初はすべてのブロックが定義されているだけで、コードはありません）：
- スタイルシート;
- javascript;
- javascript_footer;
- 粒子。
templates / partials / particle.html.twigとtemplates / page_head.html.twigのスタイルとスクリプトを接続するために次の構成が使用されることに注意してください 。
{# #} {% assets in<b> 'head'</b> %}{% endassets %} {{ gantry.styles(<b>'head'</b>)|join("\n")|raw }} {# #} {{ gantry.scripts(<b>'head'</b>)|join("\n")|raw -}} {# #}
headは、スタイルが接続されるブロックの名前です。 詳細はこちら 。
残念ながら、このようなスクリプトの処理では、サードパーティのプラグインを使用してそれらを最小化する機能は完全に失われます。
Nucleus-スタイル（/ scss /）
テーマが正しく構築されている場合、Gantry 5はプラグインで説明されているスタイルファイル（ nucleus.scssおよびwordpress.scss ）を個別に接続します。 したがって、 テンプレートでそれらを再定義する必要はありません （したがって、スタイルシートに含める必要はありません ）。 ただし、スタイルはテンプレートに直接接続されているため、基本的なテンプレートを再定義するときは注意してください。
ニュークリアス-ビュー（/ビュー/）
主なタイプが収集されます。 これらは、トピックで独自のテンプレートを作成するための例として使用できます。 同時に、レンダリング中、プラグインは最初に/ views / themeディレクトリでテンプレートファイルを検索し、見つからない場合はプラグインで検索を続けます。
模様
テーマファイル
テーマテンプレートのindex.phpファイルの例を考えてみましょう。
<?php // twig use Timber\Timber; $gantry = Gantry\Framework\Gantry::instance(); $theme = $gantry['theme']; // $context twig- $context = Timber::get_context(); $context['page_head'] = $theme->render('partials/page_head.html.twig', $context); $context['posts'] = Timber::get_posts(); // $templates = ['index.html.twig']; // $templates if (is_front_page()) { array_unshift($templates, 'home.html.twig'); } Timber::render($templates, $context);
これは、ワードプレスが引き起こす可能性のあるすべてのファイルについて説明しています。 横から見ると、今では古典的なワードプレスのテーマファイルが元のコントローラーになり、そこでいくつかのアクションを実行してからテンプレートを表示できるように見えるかもしれません。
テーマの古典的な構成とはわずかな違いがあります。 footer.phpとheader.phpは、小枝ファイルで作成できるため、必ずしも作成する必要はありません（これらのファイルからテンプレートが出力される条件を作成できませんでした）。
種
関数Timber :: render（）; / views /ディレクトリから小枝ファイルをレンダリングします。 簡単なテンプレートの例を次に示します。
{# (<b>//engines/nucleus/views/partials/page.html.twig</b>) #} {% extends "partials/page.html.twig" %} {# #} {%- block content -%} {%- endblock -%}
ほとんどの場合、ページテンプレートを作成するときに、ベーステンプレートからテンプレートを継承するだけで十分ですが、必要に応じて、マークアップを使用して独自のファイルを作成できます。
トピックの説明
/ gantry /ディレクトリには、トピックを説明する技術ファイルが含まれています。
presets.yaml-配色を記述するファイル。 その中で、テーマのいくつかのカラープリセットを記述して、管理パネルでそれらをすばやく切り替えることができます。
preset1: # image: 'gantry-admin://images/preset1.png' # description: GANTRY5_PLATFORM_PRESET1 # colors: - '#439a86' - '#354d59' - '#8f4dae' # styles: base: background: '#ffffff' text-color: '#666666' accent: color-1: '#439a86' color-2: '#8f4dae'
theme.yaml-テーマを説明するファイル。
# details: name: Sau version: "1.0.0" icon: paper-plane date: February 7, 2017 author: name: AkinaySau email: akinaysau@gmail.com link: http://a-sau.ru copyright: (C) 2017 AkinaySau license: GPLv2 description: Sau Theme images: thumbnail: admin/images/preset1.png preview: admin/images/preset1.png # , ( textdomain) configuration: gantry: platform: wordpress engine: nucleus theme: base: gantry-theme://common file: gantry-theme://includes/theme.php class: \Gantry\Framework\Theme textdomain: a_sau # fonts: roboto: 400: 'gantry-theme://fonts/roboto_regular_macroman/Roboto-Regular-webfont' 500: 'gantry-theme://fonts/roboto_medium_macroman/Roboto-Medium-webfont' 700: 'gantry-theme://fonts/roboto_bold_macroman/Roboto-Bold-webfont' # css: compiler: \Gantry\Component\Stylesheet\ScssCompiler paths: - gantry-theme://scss - gantry-engine://scss files: - sau dependencies: gantry: 5.4.0 # , . . block-variations: Box Variations: box1: Box 1 box2: Box 2 box3: Box 3 box4: Box 4 Effects: shadow: Shadow 1 shadow2: Shadow 2 rounded: Rounded square: Square Utility: disabled: Disabled align-right: Align Right align-left: Align Left center: Center full-width: Full Width equal-height: Equal Height nomarginall: No Margin nopaddingall: No Padding
スタイルについて少し
基本的なトピックのデバイスを研究するとき、水素は「良い味の規則」に気づきました。 ディレクトリ/ scss /に以下を作成する必要があります。
●管理パネルを介して変更される変数の定義を含むファイルを配置する構成ディレクトリ。
●独自のスタイルを保存するためのディレクトリ。
●粒子の説明のカタログ。 各パーティクルのスタイルシートは、個別のファイルに配置する必要があります。
おわりに
Gantry 5をさらに深く掘り下げると、YAMLとTwigを使用して自分の小さなプラグインを作成してみました。 それがどうなったのかについて、次回お話しします。