gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 16:38:55 24 4
gpt4 key购买 nike

我正在做一个有很多共享元素的项目,例如页脚、页眉、导航等。我在 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com