Magento 2 - ฉันจะเพิ่มไฟล์แม่แบบที่กำหนดเองลงใน <head> ได้อย่างไร?

9

ใน magento 1.x ฉันสามารถเพิ่มไฟล์ css ลงในหัวโดยใช้ผู้ช่วยเหมือนโค้ดด้านล่าง

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

แต่ไม่สามารถทำได้ใน Magento 2

ดังนั้นตอนนี้ฉันเพิ่มรหัสนี้<link rel="stylesheet" type="text/css" media="all" href="<?php echo $_helper->getCSSFile()?>">ลงในคอนเทนเนอร์ "after.body.start"

ใครรู้ว่าฉันจะเพิ่มไฟล์แม่แบบที่กำหนดเองได้<head>อย่างไร

magento2 layout css

— ไมค์
แหล่งที่มา

17

หากคุณต้องการเพิ่มไฟล์ CSS เข้าไปในหัวคุณสามารถใช้รหัสนี้:

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

แต่ถ้าคุณต้องการเพิ่มบล็อกที่กำหนดเองลงในหัวคุณสามารถใช้รหัสนี้:

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

หวังว่านี่จะช่วยได้

— Ihor Klymchuk
แหล่งที่มา

คุณสามารถแนะนำวิธีการทำเช่นเดียวกันในผู้ดูแลระบบฉันได้ลองชื่อบล็อกอ้างอิงทั้งหมด แต่ไม่มีโชคแม้ว่าผลลัพธ์จะมาอย่างถูกต้องเมื่อฉันใช้การอ้างอิงเนื้อหาบล็อก

— Sunil Verma

เมื่อฉันใช้บล็อกที่กำหนดเองแทน Magento \ Framework \ View \ Element \ Template ข้อผิดพลาดในการแสดงผลคือ "วัตถุ domdocument ควรถูกสร้างขึ้น" วิธีการลบข้อผิดพลาดนี้และใช้บล็อกที่กำหนดเองของฉันได้อย่างไร

— Sanjay Gohil

2

ค้นหาคำตอบนี้จากทั่วทั้งเว็บจนได้รับการทดลองมากมาย

ฉันเชื่อว่านี่เป็นวิธีที่ง่ายที่สุด:
ไปที่หน้าที่อยู่ในแผงการดูแลระบบ
ค้นหาหน้าของคุณและเลื่อนผ่านส่วนเนื้อหาไปยังส่วนการปรับปรุงเค้าโครง xml
ในกล่องนั้นคุณสามารถเพิ่ม CSS และ JS เฉพาะหน้า

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

นี่จะเพิ่มสคริปต์ของคุณไปที่ด้านบนของส่วนหัว
(ทำสิ่งที่ยุ่งยากสำหรับ JS ของคุณ)

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

ด้านบนคุณจะสังเกตเห็นว่าฉันเพิ่มrequirejsไฟล์ก่อน สิ่งนี้เกิดขึ้นเนื่องจากไม่มีการเพิ่มก่อนไฟล์ JS ส่วนบุคคลของคุณคุณจะไม่สามารถเข้าถึงไลบรารีอื่น ๆ ที่โหลดลงใน requirejs ได้

— Daniel Barenboim
แหล่งที่มา