通过PHP在MAGENTO 2中添加CSS或JS,而不是布局XML

大家好,希望您一切都好,今天我们将讨论如何使用PHP代码而不是layout xml在Magento中添加CSS或JS。我们花了一些时间才弄清楚这一点,因此我们认为应该与我们的社区分享这一点。请参阅下面的分步指南,该指南向您展示了如何操作-:

步骤1 –在我们的案例中,在\ app \ code \ Scommerce \ Custom \ Block \ Head.php下的自定义模块中创建一个块类

namespace Scommerce\Custom\Block;
 
use Magento\Framework\View\Element\Template;
 
class Head extends Template
{
    /**
     * @var \Magento\Framework\View\Asset\Repository
     */
    protected $assetRepository;
 
    /**
     * Header constructor.
     * @param Template\Context $context
     * @param array $data
     */
    public function __construct(
        Template\Context $context,
        array $data = []
    )
    {
        parent::__construct($context, $data);
        $this->assetRepository = $context->getAssetRepository();
    }
 
    /**
     * @return string
     */
    public function getCustomCSS()
    {
        $asset_repository = $this->assetRepository;
        $asset  = $asset_repository->createAsset('Scommerce_Custom::css/custom.css');
        $url    = $asset->getUrl();
         
        return $url;
    }
}

步骤2 –为在步骤1 \ app \ code \ Scommerce \ Custom \ view \ frontend \ templates \ head.phtml中创建的类创建相应的phtml 这将添加自定义CSS,就像添加自定义JS或任何HTML一样在您网站的顶部标记

$url = $block->getCustomCSS();
if ($url):
    echo '<link rel="stylesheet" type="text/css" media="all" href="'.$block->getCustomCSS().'" />'
endif;

第3步 –创建布局xml文件,以在您网站的头部\ app \ code \ Scommerce \ Custom \ view \ frontend \ layout \ default.xml下调用上述phtml文件

<?xml version="1.0"?>
<page>
   <body>
        <referenceBlock name="head.additional">
            <block template="head.phtml" class="Scommerce\Custom\Block\Head" name="scommerce_custom_block_head" />
        </referenceBlock>
   </body>
</page>

步骤4 –最后,在以下路径\ app \ code \ Scommerce \ Custom \ view \ frontend \ web \ css \ custom.css下创建您的自定义CSS

header.page-header{display:none}

就是这样,希望本文能以某种方式对您有所帮助。请留下您的评论,让我们知道您的想法?谢谢。

相关文章

0 0 投票数
文章评分
订阅评论
提醒
0 评论
最旧
最新 最多投票
内联反馈
查看所有评论