TL/DR: Answers to the Challenge and Bonus questions posed at the end of Step 1.
Alright, everyone let's get straight to business and answer the challenges of putting together your partials and linking them in your templates and then finding the right links to go intor your navbar. First, lets cover the challenge question and talk about the navigation between pages.
For our example we need to navigate between 4 pages: your index, about, services, and contact page. With the way our current routes read you would need the following href values in your navbar that you would put in:
Now, lets get them in the
header.ejs partial and see what we have right now for the rest of the pages. The partial I am using going forward is as follows:
Good Fellas Tech
Now to include this partial in the about, services, and contact templates you have to add in at the very top of each file the include statement of:
<% include ./partials/header.ejs %>. The
./ is imperative since it tells you where the partial is located inside the views directory. To add the footer files to all the pages you can use the same include statement with just a small tweak. To connect the footer simply put in
<% include ./partials/footer.ejs %> at the bottom of the file.
Now that you have connected your partial file, create the file with
touch views/partials/footer.ejsand then copy from the
<-- Scripts --> tag to your inclue statement to fill in the content for the footer partial:
BONUS ANSWER: Put a container around your content to make it have a nice margin and flow easily. Thankfully, MDBootstrap has a prefixed container calss we can use that makes this way simplier than you would think. All you need to do is directly under your include statement for your header partial of
<% include ./partials/header.ejs %> is add an opening div tag with the class container like this
. Its that easy. All your content will flow and look more professional. Step two should be ready friday so look out for that on how to connect MongoDB and RESTful routing as we expand our app.
<% include ./partials/footer.ejs %> just close the div tag
Hello! I'm the owner and lead developer here at The Good Fellas Agency. I've been working with code for the past 10 years and started this business over 5 years ago. I mostly write about how Web Design, Digital Marketing, and Search Engine Optimization help your business grow.