代码之家 › 专栏 › 技术社区 › Dawid ZbiÅski

使用细枝创建现成的共享元素

templating assets twig html php

Dawid ZbiÅski · 技术社区 · 7 年前

我正在做一个有很多共享元素的项目,例如页脚、页眉、导航等。我在视图中扩展的布局很少。目前,我正在视图中加载共享元素,但我需要提供加载到视图中的每个共享元素所需的所有资产(依赖项)。我希望能够跳过这一步,立即加载实际准备好使用的元素(因此我不需要记住所有依赖的javascript和css文件,因为其中一些可能有一些)。

我在考虑在元素的视图中指定共享元素所需的所有资产,因此当我包含所需的元素时,它将“自动”加载资产,而无需在视图中指定所有资产。所以我的问题是,是否有可能做到这一点,或者正确的方法是什么?

希望能用代码更好地解释:

结构:

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 %}

共享元素导航。细枝:

// 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> 对我来说,在里面看风景不是一条路。这意味着可以像共享元素一样工作,您可以从中控制资产加载的位置和加载的资产,甚至不知道每个共享元素需要哪些资产。提前谢谢你。

1 回复 | 直到 7 年前

bishop 7 年前

从 documentation on 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>

定义菜单,即我们稍后将“重用”的“组件”:

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

现在,把这两者结合起来。注意我们是怎样的 extends -但是 使用 -使用 块 :

{% 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>

这并不是“用相同的名称定义块,然后将它们合并”的神奇之处,但这非常接近。你们的布局不知道菜单,菜单也不知道布局:但他们都同意名为“资产”和“内容”的块。然后,视图将它们缝合到正确的继承形式中。