Hello from the other side! Have you ever tried to capture style and script in per content basis and render it in to your main layout? Now, I’d like to share to you how I did it in Laminas MVC (formerly known as Zend Framework 3).
Goals:
- To reduce the size of the main style and script in our application.
- To decoupled/isolate some CSS and Javascript usage to a specific page only.
In this tutorial I will utilize the Laminas View and its helper called Placeholder. I assume that you have the basic knowledge in PHP and Laminas MVC.
The Placeholder view helper allows you to capture arbitrary content for later rendering. Each invocation of the Placeholder helper expects a placeholder name; the helper then returns a placeholder container object that you can either manipulate or echo, in our case we echoed it into our layout.phtml.
Now lets get started, first I will show you how to capture style and script from the content. Please refer to the code and the explanation below.
module/Application/view/application/index/index.phtml
/* We will now start capturing the style from our index.phtml
content by using a placeholder name style.
The captureStart() function marks the beginning
of the content that we want to capture. */
<?php $this->placeholder('style')->captureStart(); ?><style type="text/css">
.content {
text-align: center;
margin-top: 0em;
margin-bottom: 1.5em;
}
</style>
/* The captureEnd() function marks the end
of the content that we want to capture. */
<?php $this->placeholder('style')->captureEnd(); ?>
/* We will now start capturing the script from our index.phtml
content by using a placeholder name script.
The captureStart() function marks the beginning
of the content that we want to capture. */
<?php $this->placeholder('script')->captureStart(); ?><script type="text/javascript" src="<?php echo $this->basePath('asset/lib/particles.min.js'); ?>"></script>
<script type="text/javascript">
$(window).on('load', function () {
let $homeSection = $('#home-section');
$homeSection.on('click', '.alert-btn', function () {
alert('It Works!');
});
});
</script>/* The captureEnd() function marks the end
of the content that we want to capture. */
<?php $this->placeholder('script')->captureEnd(); ?>Next is, I will show you how to render our captured style and script. To do that we need to add a few lines of codes to render it properly into our layout.phtml. Please refer to the code and the explanation below.
module/Application/view/layout/layout.phtml
<?php echo $this->doctype(); ?>
<html lang="en">
<head>
...
<!-- This will render the style that we captured from the content -->
<!-- Dynamic Style -->
<?php echo $this->placeholder('style'); ?>
...
</head>
<body>
...
<!-- This will render the script that we captured from the content -->
<!-- Dynamic Script -->
<?php echo $this->placeholder('script'); ?>
...
</body>
</html> That’s all, we have now easily captured our content style and script and then render it properly into our layout.
You are more than welcome to send me any feedback. Thanks and have a great day!
The fact that I don’t believe that I’m better than anyone else gives me an inevitable sense of superiority.
