Step 1 Challenge and Bonus Answers

Published: Mon Jul 22 2019
share on:

Challenge and Bonus Answer

Alright, everyone lets 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. Withe the way our current routes read you would need the following href values in your your navbar that you would put in:

  • Link to your index.ejs: href= "/"
  • Link to your about.ejs: href= "/about"
  • Link to your contact.ejs: href= "/contact"
  • Link to your services.ejs: href= "/services"

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:

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

, and then the line above your footer partial <% include ./partials/footer.ejs %> just close the div tag
. 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.

More from Challenges