2017-03-07 9 views
0

私は10月を見てきましたが、私はデフォルトのレイアウトを構築し、必要に応じて部分的に条件付きでレイアウトすることができました。私はむしろレイアウトを入れ子にしたい。テンプレートをOctoberCMSにネストすることはできますか?

I.E. rootレイアウトは他のレイアウトに依存しませんが、navレイアウトはrootレイアウトを参照します。

これは可能ですか?

EDIT: 私はExpressionEngineのの交換で探しています。 EEではhtml>head+bodyタグを使用してrootのレイアウトを使用できます。次に、navレイアウトをナビゲーションに追加することができますが、rootレイアウトをITSレイアウトとして参照します。したがって、navによって参照されるrootで終わるか、または[page]によって直接参照される可能性があります(navが必要でない/必要な場合)。ネストされたレイアウトでは、layoutまたはpageに部分的なものを含めて条件付きで保持することができます。私の意見では、きれいなマークアップです。また、rootnavの両方にコンテンツの配置を示す{% page %}タグがあります。

だから、理想的には...

ルートレイアウト

<html> 
<head>[common tags]</head> 
<body> 
    {% page %} 
</body> 
</html> 

ナビレイアウト

layout="root" 
== 
<nav>[markup]</nav> 
{% page %} 

だからページでは、私はそこrootを参照ナビゲーションが表示されません。しかし、ページがnav{% page %}の場合、navに注入され、nav + {% page %}の内容がrootに渡されます。

うまくいけば、追加情報が役立ちます。

+2

私はあなたが「ネスティングレイアウト」で何を探しているのか分からないのですが、もっと深く説明したり、例を提供したりできますか? – LukeTowers

+0

@LukeTowers質問の更新を参照してください。 – Jared

答えて

1

ネストされたレイアウトは現在のところサポートされていませんが、placeholderspartialsでこれを実現できます。

ここに私が現在ナビゲーションに使用しているものの例があります。

レイアウト/ WITH-nav.htm:

description = "Layout with nav" 

[staticMenu nav] 
code = "header-nav" 
== 
{# Setup the navigation menus #} 
{% put headerNav %} 
    {% set hNavOptions = { 
     'submenus': true 
    } %} 
    {% partial "tmpl/nav-header" menu=nav options=hNavOptions %} 
{% endput %} 

{% partial "tmpl/header" %} 

    <!-- Content --> 
    <div id="layout-content"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-sm-12"> 
        {% page %} 
       </div> 
      </div> 
     </div> 
    </div> 

{% partial "tmpl/footer" %} 

レイアウト/無しnav.htm:

description = "Layout without nav" 
== 
{% partial "tmpl/header" %} 

    <!-- Content --> 
    <div id="layout-content"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-sm-12"> 
        {% page %} 
       </div> 
      </div> 
     </div> 
    </div> 

{% partial "tmpl/footer" %} 

パーシャル/ TMPL/header.htm:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="UTF-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <title>{% placeholder page_title default %}{{ this.page.title }}{% endplaceholder %} | {{ app_name }}</title> 

     {% partial "meta/icons" %} 
     {% partial "meta/seo" %} 

     {% partial "meta/styles" %} 
    </head> 
    <body class="page-{{ this.page.url | slugify }} layout-{{ this.layout.id }}"> 
     <!-- Header --> 
     <header id="home" class="header-area"> 
      {% placeholder headerNav default %} 
       <!-- headerNav not defined in page layout. --> 
      {% endplaceholder %} 
     </header> 
関連する問題