Creating a ModX website part 3: Organising and improving the template
published on
Now that we have improved the HEAD section and moved it into it's own chunk where it can be easily re-used we are going to break down the rest of the template into other chunks.
We will do this so that we can re-use them on other pages in the future if necessary. We will also finish off this part by cleaning up the code in the home page that isn't needed.
Start by creating some new chunks
Locate the following code in the BaseTemplate HTML and cut it out, create a chunk and add the code you cut out into the chunk. Don't forget to add the chunk tag to the template so that it gets included still.
<!-- Navigation-->
<nav class="navbar navbar-expand-lg bg-secondary text-uppercase fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand" href="#page-top">Start Bootstrap</a>
<button class="navbar-toggler text-uppercase font-weight-bold bg-primary text-white rounded" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="#portfolio">Portfolio</a></li>
<li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="#about">About</a></li>
<li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
Now do the same for the masthead, portfolio, about, contact, footer, copyright and modal sections.
If you have been following along you will now have a template that looks something that the one below. Your chunk names may be different than the ones that I have chosen.
[[$HEADsection]]
<body id="page-top">
[[$navbar]]
[[$masthead]]
[[$about]]
[[$portfolio]]
[[$contact]]
[[$footer]]
[[$copyright]]
[[$modals]]
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="assets/js/scripts.js"></script>
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
<!-- * * SB Forms JS * *-->
<!-- * * Activate your form at https://startbootstrap.com/solution/contact-forms * *-->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
<script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
</body>
</html>
If you view your site now it will look exactly the same as it did before. However, you now have a template which is much simpler to read and seperate chunks for each part of the page.
This means that they, in turn, are also easier to read but also if you alter them you only need to do it once and your changes will be reflected throughout your site.
Clean up your home page
Next we need to clean up the home page in the backend.
If you click on the Resources tab and then select the Home page you will see a lot of HTML in the Content section. This is not used in our template so it can all be deleted.