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

标签 php html twig assets templating

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

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

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

结构:

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

我想,通常情况下,您不会在 View 中加载所有 Assets ,因为一些共享元素可能有很多,尤其是在较大的项目中。另外,我认为很高兴指出,我真的不想在 <body> 中为它们呈现样式。 , 所以创造 <links>里面的景色对我来说不是一条路。这意味着像共享元素一样工作,您可以从中控制 Assets 的加载位置和加载的 Assets ,甚至不知道每个共享元素需要什么 Assets 。提前谢谢你。

最佳答案

来自documentation on use :

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

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

例子。从基础“ 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 %}

现在,将这两个放在一起。请注意我们如何扩展-ing 基础,然后使用-ing 组件并使用block 重用它的 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>

“定义具有相同名称的 block 并将它们全部合并”并不是很神奇,但它非常接近。您的布局不知道菜单,菜单也不知道布局:但它们都同意名为“ Assets ”和“内容”的 block 。然后 View 将它们拼接成正确的继承形式。

关于php - 使用 twig 创建即用型共享元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47435897/

相关文章:

symfony - 从 Twig 按需调用 Symfony 服务

java - 如何使用 selenium 单击复选框

html - 无论缩放多少,只有 Firefox 在中间显示 Logo 。 IE 和 Chrome 不读取顶部和底部边距。任何人都知道为什么?

php - 比较两个数组并创建一个真/假值的关联数组

javascript - 将 php key 转换为 javascript 以进行日志记录

javascript - PHP实现时滚动到顶部按钮不起作用

symfony - 如果当前路由属于特定的 Symfony2 包,则检查 Twig 模板

Symfony2 和表单主题/自定义(必需/帮助/错误)

表单上的 PHP 错误

php - 如何反序列化来自 Redis 的 PHP session ?