Have you ever wanted to build a website with a single page? Neither have I.
But it is a fun exercise just to see what we can do with MagicEdit. To get started, I just downloaded this template from Free CSS Templates. I modified it slightly by getting rid of some menus, adding a small image, and updating the CSS a bit. I also signed up a free account with Disqus for comments, and just copied and pasted the embed code in the page.
To view the final result of this HowTo, visit One Page Blog. You will only see the public version, but you'll get the idea.
To build the One Page Blog, we will be using three key MagicEdit features:
NOTE: This HowTo is for people who have at least a reasonable understanding of HTML.
To download a zip file of the site before we make any MagicEdit changes, scroll down to the bottom of the HowTo.
The first thing we want to do is identify the regions the content manager of the site can edit, and just wrap them in MagicEdit tags. Let's start with the main heading. We'll invoke the plain text editor, so make sure that the MagicEdit tags are inside the header tags:
<h1 class="title"> <magicedit me_name="Headline" me_plain>Headline</magicedit> </h1>
You'll notice that I'm using the "me_name" option here. This is because I'm planning on using the value of this MagicEdit region in a couple of other places. Of course, the "me_plain" option disables the Rich Text Editor.
Let's also make the body of the page and the image caption editable using the default settings for MagicEdit regions:
<div class="entryImage"> <img src="images/monet.jpg" width="300" alt="Blog Image" /> <magicedit><p>Image caption</p></magicedit> </div> <magicedit> <p>The body of your post goes here.</p> </magicedit>
Now the content manager can edit the header, body, and image caption of the page. But what about the image? Well, you can just add "magicedit" as an attribute to the image tag like this:
<img magicedit src="images/monet.jpg" width="300" alt="Blog Image" />
Now, just like text blocks, MagicEdit will expose an edit button immediately after the image.
You'll notice that I set a width on the image. That is because I want to constrain the image to be a maximum of 300 pixels wide (we don't want some huge image mangling the layout). This tells MagicEdit to resize the image to 300 pixels wide. If I had set both the width and height attributes, MagicEdit will force the image to fit that size by doing a smart zoom and crop to the center of the image. Look in the documentation section for all of the options available for image processing.
I'll also make the large image at the top of the page editable. If you don't set a width or height on the image, MagicEdit will use the original placeholder image as a template, and size all uploaded images the same as the placeholder.
At this point, we can test the editable regions to make sure everything is working well. We should be seeing five edit buttons, one for each image or region we've defined so far.
I could edit the text and images at this point, but let's just jump straight into the next steps.
The whole point of this thing is to be able to make new posts. So let's do it: we'll use MagicRepeat to take care of it. MagicRepeat will allow the content manager to create new posts by "repeating" a section of the page and any pages linked from that section. Since we're building a "One Page Blog," we just need to make a link from the index.html back to itself, then wrap that link in MagicRepeat tags.
In the left panel, there is an unordered list with one entry in it. We'll just wrap the <li> block with MagicRepeat tags. But before we do that, let's make sure the name of each post entry is synchronized with the name of the post. Remember we used the "me_name" option above, so let's just set the same name on the MagicEdit region inside the link. Now we have:
<h2>My Posts</h2> <ul> <magicrepeat> <li><a href="index.html"> <magicedit me_name="Headline" me_plain>Headline</magicedit> </a></li> </magicrepeat> </ul>
At this point, we are essentially done. Every MagicEdit element inside the repeat block, or inside the pages linked from the repeat block, will be unique to that instance of MagicRepeat. Now I can put on my content manager hat and start adding content. Here's what the repeat block looks like when I'm logged in:
Clicking the "New" button creates new list items, placing the newest first. And I can always remove items by clicking the "Delete" button and confirming the deletion.
After adding a couple of posts and some content, then logging out, here's what one of the pages could look like:
There are a couple of more features that can really make our one page site work better. First of all, we always want the title of the page to reflect the actual page itself. So, you can place a MagicEdit tag in the title of the page so that each post has a unique title. Just make sure you use the appropriate name:
<head> ... <title>One Page Blog - <magicedit me_name="Headline">Headline</magicedit></title> ... </head>
Now the title will include the headline of the page:
We can also make it easy to mange the "Favorite Sites" links on the left menu. In this case, we can use MagicRepeat to duplicate a simple list of links that point off of the site:
<h2>Favorite Sites</h2> <ul> <magicrepeat> <li> <magicedit> <a href="http://www.google.com">Google</a> </magicedit> </li> </magicrepeat> </ul>
One final note about MagicRepeat. By default, MagicEdit regions inside pages linked from a MagicRepeat block are different for each instance of a repeat. But there are times when you want the same value to be used across all repeated pages. For example, you might want to have a copyright notice that is always the same on all pages, but can be edited by the content manager via MagicEdit. To always use the same value for a MagicEdit region, simply set its "me_repeat" attribute to "no":
Copyright © <magicedit me_repeat="no">2007</magicedit> One Page Blog.
Now the content manager can easily update the copyright year from any page!
There you have it: a simple blog built from a single page of HTML using MagicEdit. You can download a zip file of the HowTo files below, which includes both the mundane and magic versions of the index.html file. And of course you can always visit and make comments on One Page Blog, the final result of this HowTo.
Stay tuned for more nifty tutorials on how to use MagicEdit to add dynamic capabilities to your website. Thanks for reading!