Website import case study
This tutorial will start with a single HTML page, and show you how you can convert and prepare it for MojoMotor.
Original site
The original site can be downloaded for your review. The final results are also available.
The template used in this case study is courtesy of Tony Geer.
While the original site to import was only a single page, we can see from the menu that 5 pages are ultimately planned; 3 within the "main" site menu (Home, About and Services) and 2 outside the menu, at the top of the page (Privacy Policy and Contact).
As a plan of attack, we'll begin by altering the single included page, and then using that as the basis upon which to build all 4 other pages.
Here's how the plain HTML/CSS site can be prepared for import into MojoMotor.
Site and Page naming
{mojo:site:site_name} can be used as a short-hand to reference the site, and {mojo:page:page_title} can be used for the page title. In this case we made these adjustments:
<h1><a href="#">Honeycomb Industries</a></h1>
into
<h1><a href="#">{mojo:site:site_name}</a></h1>
Each page also uses a heading two to identify itself. We change
<h2>Welcome to our Website</h2>
into
<h2>{mojo:page:page_title}</h2>
Site Navigation
Navigation is most commonly handled via {mojo:site:page_list}.
<nav id="nav_main">
<ul>
<li><a href="#" class="current">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
</ul>
</nav>
becomes
<nav id="nav_main" role="navigation">
{mojo:site:page_list}
</nav>
NOTE: In MojoMotor the "current" class is called "mojo_active", so we need to adjust our CSS styling for the "current page" accordingly.
Recall that there are 2 pages outside of the main navigation at the top of the page. We will need these to link to their respective pages outside of the site menu. Adjust them as follows.
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Contact Us</a></li>
becomes
<li><a href='{mojo:site:link page="privacy"}'>Privacy Policy</a></li>
<li><a href='{mojo:site:link page="contact"}'>Contact Us</a></li>
Editable Regions
We want our users to be able to use MojoMotor to edit the content inside of <div id="primary">. Since content inside this area will be different on each page, we opt for a Page Region. Inside the primary div we add:
<div id="primary_content" class="mojo_page_region">
Similarly for <div id="secondary">. We add <div id="secondary_content" class="mojo_global_region">.
Login
The {mojo:site:login} mojotag will take care of setting up the correct link to a modal login, or if the javascript cannot be loaded for any reason, taking the user to a standalone login page.
<a href="#">Log in to MojoMotor</a>
becomes
{mojo:site:login}
Adding the other site pages
In order to add the other site pages, we simply need html files to represent them. We can add about.html and services.html by copying index.html. Since we want them in the main menu created above, we don't need to change anything about them. For the contact and privacy pages, we want them created, but do not want them listed in the site menu, so we'll name them _contact.html and _privacy.html. The "_" preceding the filename will prevent it from being listed in the site menu, but MojoMotor will still create those pages.
The completed site is now ready to be imported into MojoMotor during installation.