別のテンプレートに渡すオブジェクトとしてtwigテンプレートを含めますか？一息-小枝を使って

Question

イム：https://github.com/zimmen/gulp-twig

私は私のコンテナコンポーネントの小枝のファイルがあります。

{# snippet.twig #} 
<div class="snippet"> 
    <h2>{{ title }}</h2> 
</div> 

イムページでこれらをデモ：

{# container.twig #} 
<div class="container"> 
    {% for item in items %} 
    <div class="container__item"> 

     {{ item }} 

    </div> 
    {% endfor %} 
</div> 

を私はまた、スニペットファイルを持っています。小枝。スニペットをコンテナ内の{{item}}としてレンダリングする必要があります。したがって、page.twigを見ると、これは出力でなければなりません：

<div class="container"> 
    <div class="container__item"> 

     <div class="snippet"> 
     <h2>title</h2> 
     </div> 

    </div> 
    <div class="container__item"> 

    <div class="snippet"> 
     <h2>title</h2> 
    </div> 

    </div> 
    <div class="container__item"> 

    <div class="snippet"> 
     <h2>title</h2> 
    </div> 

    </div> 
</div> 

ここでは難しいところです。 container.twigとsnippet.twigは別のアプリケーションに取り込まれています。したがって、container.twig内の{{item}}は{{itemRenderer（item）}}のように変更できません。

しかし、page.twigはどこにも使用されていないので、私はそれを編集することができます。 page.twigに、container.twigやsnippet.twigを変更せずに、itemとしてsnippet.twigを使ってcontainer.twigをレンダリングする方法がありますか？

これは私の一気の作業です：

var gulp = require('gulp'), 
    config = require('../config'), 
    utilities  = require('../build-utilities'), 
    src  = config.path.src, 
    dest  = config.path.dest, 
    opts  = config.pluginOptions, 
    env  = utils.getEnv(), 
    plugins = require('gulp-load-plugins')(opts.load); 

var compile = function() { 
    var notProdOrTest = env.deploy && !env.prod && !env.test, 
    deployPath = env.deployPath, 
    sources = (env.deploy) ? ((env.styleguide) ? src.twig.styleguide: src.twig.testing): src.twig.all; 
    return gulp.src(sources, {base: 'src/'}) 
    .pipe(plugins.twig({ 
     data: { 
     component: utils.getDirectories('src/component/'), 
     deploy : env.deploy, 
     test  : env.test, 
     prod  : env.prod 
     } 
    })) 
    .pipe(plugins.htmlmin(opts.htmlmin)) 
    .pipe(plugins.tap(function(file){ 
     file.path = file.path.replace('testing/', ''); 
    })) 
    .pipe((notProdOrTest) ? plugins.replace(/src="\//g, 'src="/' + deployPath.root + '/'): plugins.gutil.noop()) 
    .pipe((notProdOrTest) ? plugins.replace(/href="\//g, 'href="/' + deployPath.root + '/'): plugins.gutil.noop()) 
    .pipe((notProdOrTest) ? plugins.replace(/srcset="\//g, 'srcset="/' + deployPath.root + '/'): plugins.gutil.noop()) 
    .pipe((notProdOrTest) ? plugins.replace(/url\('\//g, 'url(\'/' + deployPath.root + '/'): plugins.gutil.noop()) 
    .pipe(gulp.dest((env.deploy) ? deployPath.markup: dest.markup)); 
}, 
    watch = function() { 
    gulp.watch(src.twig.watch, ['twig:compile']); 
    }; 

module.exports = { 
    compile: compile, 
    watch : watch 
}; 

Answer 1

私はのコンテンツをマークするために必須である rawフィルタ、なし、 container.html.twigを変更せずに、それは可能かもしれないどのように表示されません {{ item }}をHTMLセーフとして使用します。

あなたは多分、container.html.twigファイル起源の所有者（あなたが別の アプリケーション

に引き込まれている

container.twigとsnippet.twigによって何を意味するのかわからない）している場合{{ item }}を{{ item|raw }}に変更することができます。次にitemsパラメータにcontainer.html.twigが渡され、renderViewのsnippet.html.twigで生成されたHTMLが含まれていることを確認する必要があります。その後、ちょうどcontainer.html.twigがHTML以外の場所で使われていないitemsを使用することに注意してください。

本当に手をつけていない場合は、テンプレートをa Twig environment that has autoescape disabledでレンダリングすることもできます。

希望すると便利です。

EDIT：あなたは、この使用して一口-小枝を行う必要があるため、このようなものについて何：

var titles = ['First snippet', 'second snippet']; 
var i, items; 
for (i = 0; i < titles.length; i++) { 
    gulp.src('/path/to/snippet.html.twig') 
     .pipe(plugins.twig({ 
      data: { 
       title: titles[i] 
      } 
     })) 
     .pipe(plugins.intercept(function(file){ 
       items[i] = file.contents.toString(); 
       return file; 
     })); 
} 

gulp.src('/path/to/container.html.twig') 
    .pipe(plugins.twig({ 
      data: { 
       items: items 
      } 
     })) 
    .dest('/path/to/dest.html'); 

Answer 2

これはwith macrosを行うことができる：

テンプレートで

{# macros.html.twig #} 
{% macro thisItem(item) %} 
    <div class="this-snippet"> 
     <h2>{{ item.title }}</h2> 
    </div> 
{% endmacro %} 

{% macro thatItem(item) %} 
    <div class="other-snippet"> 
     <h2>{{ item.title }}</h2> 
    </div> 
{% endmacro %} 

{% macro container(itemRenderer, items) %} 
    <div class="container"> 
     {% for item in items %} 
      <div class="container__item"> 
       {{ itemRenderer(item) }} 
      </div> 
     {% endfor %} 
    </div> 
{% endmacro %} 

そして：

{# template.html.twig #} 
{% from "macros.html.twig" import thisItem as itemRenderer, container %} 

{% container(itemRenderer, items) %} 

そして別のテンプレートで：

{# template2.html.twig #} 
{% from "macros.html.twig" import thatItem as itemRenderer, container %} 

{% container(itemRenderer, items) %} 

通常のインクルードでも同じことができますが、どちらも同じ可能性を提供しますが、マクロソリューションはよりクリーンです。あなたがHTMLであることを意図する{{ item }}を、レンダリングしようとしているので、

{# snippet.html.twig #} 
<div class="this-snippet"> 
    <h2>{{ item.title }}</h2> 
</div> 

{# container.html.twig #} 
<div class="container"> 
    {% for item in items %} 
     <div class="container__item"> 
      {% include snippetTmpl with { 'item': item } only %} 
     </div> 
    {% endfor %} 
</div> 

{# page.html.twig #} 
{% include "container.html.twig" with { 'snippetTmpl': 'snippet.html.twig', 'items': items } only %}