diff --git a/index.html b/index.html
index e96e7f0..e75dcaa 100755
--- a/index.html
+++ b/index.html
@@ -463,7 +463,16 @@ $(document).ready(function(){
 			<div class="cover page">
 				<div class="content" name="ArticleAnchorExample">
 					<h1>Page Templates</h1>
-					<a href="#home">home</a><br>
+
+					<p>
+					This page contains several examples of template fields,
+					the first one is the simplest, the magazine name 
+					(<span class="magazine-title-text">[MAGAZINE NAME]</span>),
+					then we'll have the index (see next) and in the bottom-right
+					corner is the page number...
+					</p>
+
+					<div class="article-index">[ARTICLE INDEX]</div>
 
 					<div class="page-number-text">[PAGE NUMBER]</div>
 				</div>
diff --git a/magazine.js b/magazine.js
index 472c7a0..a922f4e 100755
--- a/magazine.js
+++ b/magazine.js
@@ -1181,6 +1181,37 @@ var MagazineTemplates = {
 					|| 'PortableMag')
 	},
 
+	// index...
+	'.article-index': function(elem){
+		var list = $('<ul/>')
+		var mag = $('.magazine')
+		// get the articles...
+		$('.magazine .article .cover h1').each(function(i, e){
+			e = $(e)
+			var lnk = $('<a/>')
+							.attr('href', '#' + getPageNumber(e.parents('.page').first()))
+							// XXX is this the right way to go?
+							.text(e.text() || 'No title')
+
+			list.append(
+				$('<li/>')
+					.append(lnk))
+		})
+		var root = $('<ul/>')
+			.append($('<li/>')
+				.append($('<a/>')
+					.attr('href', '#' + getPageNumber($('.magazine > .cover').first()))
+					// XXX is this the right way to go?
+					.text(mag.attr('title') 
+						|| mag.attr('name')
+						|| 'Magazine')))
+		root.append(list)
+		elem
+			.html('')
+			// cover...
+			.append(root)
+	}, 
+
 	// setup page numbers...
 	'.page-number-text': function(elem){
 		elem.each(function(_, e){