gulp - 包含一个 Twig 模板作为要传递到另一个模板的对象？

Question

我正在使用 gulp-twig:https://github.com/zimmen/gulp-twig

我的容器组件有一个 Twig 文件:

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

      {{ item }}

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

我还有一个片段文件:

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

我在 page.twig 中演示了这些。我需要将代码片段呈现为容器内的 {{ 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 的情况下使用snippet.twig 作为项目渲染container.twig？

这是我的 gulp 任务:

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

如果不修改 container.html.twig，我不知道怎么可能，因为您正在尝试渲染 {{ item }} ，它是 HTML，没有 raw过滤器，强制标记{{ item }}的内容作为 HTML 安全的。

如果您是 container.html.twig 的所有者文件来源(不确定你的意思

container.twig and snippet.twig are being pulled into another application

)，也许你可以换 {{ item }}至 {{ item|raw }} .那么你只需要确定 items参数传递给 container.html.twig包含由 renderView 生成的 HTML的 snippet.html.twig .那就小心点container.html.twig未在其他地方使用 HTML 不安全 items .

如果你真的没有动手，你也可以尝试用 a Twig environment that has autoescape disabled 来渲染你的模板。 .

希望这有帮助!

编辑:既然你必须使用 gulp-twig 来做到这一点，那么像这样的事情呢:

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');