大家好,希望您一切都好,今天我们将讨论如何使用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}
就是这样,希望本文能以某种方式对您有所帮助。请留下您的评论,让我们知道您的想法?谢谢。