All geek questions in one place

Create ready-to-use shared items using a twig

I am working on a project that has many common elements, for example. footer, header, navigation, etc. I have few layouts that I use in my presentations. So far, I'm loading common elements inside my view, but I need to provide all the assets (dependencies) needed for each common element inside the view into which I load it. I would like to skip this step and load an element that would be actually prepared for use immediately (so I would not need to remember all the dependent javascript and css files, as some of them may have several),

I was thinking about specifying all the assets needed for the common item inside the item view, so when I include the item I need, it will load the assets “automatically”, without any definitions of all of them inside my view. So my question is, can this be done or how to do it correctly?

Hope this will be explained even better using the code:

Structure:

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

Markup:

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

View:

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

General element navigation.twig:

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

I assume that, as a rule, you do not load all the assets in the views, as some common elements may have many of them, especially in a larger project. In addition, I am pleased to note that I really do not want to display styles for them inside the <body> , so creating <links> inside the view is not a way to go for me. This is intended to work as a common element from which you can control where your assets will be loaded and which assets will be loaded, without even knowing which assets are needed for each common element. Thank you in advance.

+5
source share
1 answer

From the documentation for use :

Horizontal reuse ... is mainly used by projects that require template blocks to be reused without using inheritance.

use includes an external file in the current file, with the ability to rename blocks to locally unique values. These locally unique values ​​can then be entered - using block - into the inheritance hierarchy.

Example. Start with the base “parent”:

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

Define the menu, “component”, which we will “reuse” later:

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

Now bring these two together. Note that we are extends -based, but then use -in the component and reusing its blocks with 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 %}

Productivity:

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

It's not really magic to “identify blocks with the same name and they all come together,” but it's pretty close. Your layout does not know about the menu, and the menu does not know about the layout, but they both agree to blocks with the names "assets" and "content". The view then sews them together into the correct form of inheritance.

+1
source

Source: https://habr.com/ru/post/1273578/

More articles:


All Articles