Magento 2: ¿cómo puedo agregar un archivo de plantilla personalizado en <head>?

9

En magento 1.x, puedo agregar los archivos css en la cabeza usando ayuda como el código a continuación.

<reference name="head">
    <action method="addCss"><stylesheet helper="module/helperclass/helperfunction"/></action>
</reference>

Pero no puede hacer esto en Magento 2.

Así que ahora, agregué este código <link rel="stylesheet" type="text/css" media="all" href="<?php echo $_helper->getCSSFile()?>">en el contenedor "after.body.start".

¿Alguien sabe cómo puedo agregar un archivo de plantilla personalizado <head>?

magento2 layout css

— Miguel
fuente

17

Si desea agregar un archivo CSS a la cabeza, puede usar este código:

<head>
   <css src="path_to/file.css" />
</head>

Pero si necesita agregar un bloque personalizado en la cabeza, puede usar este código:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="head.additional">
            <block class="Magento\Framework\View\Element\Template" name="block_name" template="path_to_file.phtml" />
        </referenceBlock>
    </body>
</page>

Espero que esto ayude

— Ihor Klymchuk
fuente

¿Puede sugerirme cómo hacer lo mismo en admin? He intentado todos los nombres de bloque de referencia pero sin suerte, aunque la salida aparece correctamente cuando uso el bloque de referencia de contenido

— Sunil Verma

cuando estoy usando mi bloque personalizado en lugar de Magento \ Framework \ View \ Element \ Template, se muestra el error "se debe crear un documento de objeto" ¿cómo eliminar este error y usar mi bloque personalizado?

— Sanjay Gohil

2

Busqué esta respuesta en toda la web, finalmente la obtuve a través de mucha experimentación.

Creo que esta es la forma más fácil:
vaya a la página ubicada en el panel de administración.
Encuentre su página y desplácese hacia abajo pasando la sección de contenido hasta la sección xml de actualización de diseño.
En ese cuadro puede agregar CSS y JS específicos de la página.

<head> <css src="js/ingredients.css> </head>

Esto agregará su secuencia de comandos a la parte superior de la sección principal.
(Hacer las cosas difíciles para tu JS)

<head><script src="requirejs/require.js"/><script src="js/ingredients.js"/></head>

Arriba notarás que agregué el requirejsarchivo primero. Esto se hace porque sin agregarlo antes de su archivo JS personalizado, no podrá acceder a las otras bibliotecas cargadas en requirejs.

— Daniel Barenboim
fuente