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

Daw*_*ski 5 html php assets templating twig

我正在开发一个有很多共享元素的项目,例如页脚,标题,导航等.我在我的视图中扩展了几个布局.现在,我正在我的视图中加载共享元素,但是我需要提供我正在加载它的视图中的每个共享元素所需的所有资源(依赖项).我希望能够跳过这一步并加载实际准备使用的元素(所以我不需要记住所有依赖的javascript和css文件,因为它们中的一些可能有一些) .

我正在考虑在元素视图中指定共享元素所需的所有资源,所以当我包含我需要的元素时,它会"自动"加载资源,而不是在我的视图中指定所有这些资源.所以我的问题是,是否有可能做到这一点或者什么是正确的方法来实现这一目标?

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

结构体:

views/
- /layout/
    -> layout.twig
- /homepage/
    -> index.twig
- /shared/
    -> navigation.twig
Run Code Online (Sandbox Code Playgroud)

布局:

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

{% block content %}

{% endblock %}
Run Code Online (Sandbox Code Playgroud)

视图:

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

共享元素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 -->
Run Code Online (Sandbox Code Playgroud)

我想,通常情况下,您不会在视图中加载所有资源,因为某些共享元素可能包含很多资源,尤其是在较大的项目中.另外,我觉得很高兴指出,我真的不想在里面渲染它们的样式<body>,因此<links>在视图内部创建并不是一种方法.这意味着可以像共享元素一样工作,您可以从中控制资源的加载位置以及加载哪些资产,甚至不知道每个共享元素需要哪些资产.先感谢您.

bis*_*hop 1

文档中use

水平复用...主要用于需要使模板块可复用而不使用继承的项目。

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

例子。从基础“父级”开始:

<head>
  {% block assets %}
  <link rel='stylesheet' href='layout.css' />
  {% endblock %}
</head>
<body>
  <div id='layout' class='content'>
    {% block content %}
    {% endblock %}
  </div>
</body>
Run Code Online (Sandbox Code Playgroud)

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

{% block assets %}
  <link rel='stylesheet' href='menu.css' />
{% endblock %}
{% block content %}
  <div id='menu' class='content'></div>
{% endblock %}
Run Code Online (Sandbox Code Playgroud)

现在,把这两个人放在一起。请注意我们如何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 %}
Run Code Online (Sandbox Code Playgroud)

产量:

<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>
Run Code Online (Sandbox Code Playgroud)

这并不完全是“定义具有相同名称的块并将它们全部组合起来”的魔力,但它非常接近。您的布局不了解菜单,菜单也不了解布局:但它们都同意名为“资产”和“内容”的块。然后,视图将它们拼接成正确的继承形式。