使用 twig 创建即用型共享元素

Question

我正在从事一个有很多共享元素的项目，例如页脚、页眉、导航等。我在视图中扩展的布局很少。现在，我正在我的视图中加载共享元素，但我需要在我正在加载它的视图中提供每个共享元素所需的所有资产（依赖项）。我希望能够跳过该步骤并加载实际准备立即使用的元素（这样我就不需要记住所有相关的 javascript 和 css 文件，因为其中一些可能有一些）。

我正在考虑在元素视图中指定共享元素所需的所有资产，因此当我包含我需要的元素时，它会加载资产 "automatically"，而无需我在我的视图中指定所有这些资产看法。所以我的问题是，是否有可能做到这一点，或者实现这一目标的正确方法是什么？

希望使用代码能更好地解释它：

结构：

views/
- /layout/
    -> layout.twig
- /homepage/
    -> index.twig
- /shared/
    -> navigation.twig

布局：

<!-- HTML headers, etc. -->
{% block assets %}
    <link rel="stylesheet" href="xxx" />
{% endblock %}

{% block content %}

{% endblock %}

查看：

{% extends "layout/layout.twig" %}
{% block assets %}
    {{ parent() }}
    <!-- some assets for view -->    
{% endblock %}
{% block content %}
    {% include "shared/navigation.twig" %}
    <!-- content -->
{% endblock %}

共享元素navigation.twig:

// It's not working, of course - just for better explanation of what I'm trying to approach
{% block assets %}
    {{ parent() }}
    <!-- assets needed for shared element -->
{% endblock %}
<!-- rest of shared element -->

我想，通常情况下，您不会在视图中加载所有资源，因为一些共享元素可能有很多资源，尤其是在较大的项目中。另外，我认为很高兴指出，我真的不想在 <body> 内为它们呈现样式，因此在视图内创建 <links> 对我来说不是一种方法。这意味着像共享元素一样工作，您可以从中控制资产的加载位置和加载的资产，甚至不知道每个共享元素需要什么资产。提前谢谢你。

Answer 1

来自documentation on use：

Horizontal reuse ... is mainly used by projects that need to make template blocks reusable without using inheritance.

use 将外部文件合并到当前文件中，并可选择将块重命名为本地唯一值。然后可以使用 block 将这些本地唯一值注入到继承层次结构中。

例子。从基数 "parent":

开始

<head>
  {% block assets %}
  <link rel='stylesheet' href='layout.css' />
  {% endblock %}
</head>
<body>
  <div id='layout' class='content'>
    {% block content %}
    {% endblock %}
  </div>
</body>

定义菜单，"component"我们稍后"reuse"：

{% block assets %}
  <link rel='stylesheet' href='menu.css' />
{% endblock %}
{% block content %}
  <div id='menu' class='content'></div>
{% endblock %}

现在，把这两个放在一起。请注意我们是如何 extends-ing 基础，然后 use-ing 组件并使用 block:

重用它的块

{% extends "layout.twig" %}

{% use "menu.twig" with assets as menu_assets, content as menu_content %}

{% block assets %}
  {{ parent() }}
  <link rel='stylesheet' href='view.css' />
  {{ block('menu_assets') }}
{% endblock %}

{% block content %}
  <div class='menu'>
    {{ block('menu_content') }}
  </div>
  <div id='view' class='content'></div>
{% endblock %}

产量：

<head>
  <link rel='stylesheet' href='layout.css' />
  <link rel='stylesheet' href='view.css' />
  <link rel='stylesheet' href='menu.css' />
</head>
<body>
  <div id='layout' class='content'>
    <div class='menu'>
      <div id='menu' class='content'>
      </div>
    </div>
    <div id='view' class='content'></div>
  </div>
</body>

虽然没有 "define blocks with the same name and they all get combined" 那么神奇，但也很接近了。您的布局不知道菜单，菜单也不知道布局：但它们都同意名为 "assets" 和 "content" 的块。然后视图将它们拼接成正确的继承形式。

使用 twig 创建即用型共享元素

Creating ready-to-use shared elements using twig

html

php

assets

templating

twig