RubyGems - we5-browsercms - Versions diffs - 3.0.5.1 → 3.1.0 - Mend

we5-browsercms 3.0.5.1 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1025) hide show

data/doc/guides/html/authentication.html ADDED Viewed

@@ -0,0 +1,201 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title></title>
+    <link rel="stylesheet" type="text/css" href="files/stylesheets/syntax.css" />
+    <script type="text/javascript" src="files/javascripts/code_highlighter.js"></script>
+    <script type="text/javascript" src="files/javascripts/highlighters.js"></script>
+    <style type="text/css">
+      body {
+        background: #FFFFFF url(images/bg.png) repeat-x scroll 0 0;
+        font-family: "Trebuchet MS", Helvetica, Verdana, Arial, sans-serif;
+        margin: 0;
+        padding: 0;
+      }
+      #page {
+        margin: 0 auto;
+        text-align: left;
+        width: 1000px;
+      }
+      #header {
+        height: 110px;
+      }
+      div.top_cap {
+        background: transparent url(images/top_cap.png) no-repeat scroll 0 0;
+        height: 10px;
+      }
+      #contentwrap {
+        background: transparent url(images/dot.png) repeat scroll 0 0;
+        float: left;
+        width: 1000px;
+      }
+      div.bottom_cap {
+        background: transparent url(images/bottom_cap.png) no-repeat scroll 0 0;
+        height: 9px;
+      }
+      div.top_cap_content {
+        background: transparent url(images/top_cap_content.png) no-repeat scroll 0 0;
+        height: 5px;
+      }
+      #content {
+        background-color: #FFFFFF;
+        margin: 0 5px;
+        padding: 0 10px;
+      }
+      div.title {
+        padding: 20px;
+      }
+      div.title h1 {
+        border-bottom: 3px solid #505358;
+        color: #FFFFFF;
+        font-size: 24pt;
+        font-weight: normal;
+        line-height: 1;
+        margin: 0 0 10px;
+        padding-bottom: 10px;
+      }
+      td.sidebar {
+        font-size: 8pt;
+        width: 165px;
+        padding: 5px;
+      }
+      td.sidebar ol {
+        margin-left: 20px;
+        padding: 0;
+        line-height: 1.5;
+      }
+      td.sidebar ol li {
+        margin: 0;
+        padding: 0;
+      }
+      td.sidebar ol li ul {
+        list-style-type: none;
+        padding-left: 10px;
+      }
+      td.guides {
+        font-size: 10pt;
+        width: 800px;
+        padding: 10px;
+      }
+      .code_container {
+        padding: 10px;
+        background: #eee;
+        border: 1px solid #ccc;
+        overflow: auto;
+        width: 760px;
+      }
+      pre, code {
+        overflow: auto;
+        white-space:pre;
+      }
+      .note {
+	-moz-background-clip:border;
+	-moz-background-inline-policy:continuous;
+	-moz-background-origin:padding;
+	background:#FFF9D8 url(../images/tab_note.gif) no-repeat scroll left top;
+	border:medium none;
+	margin:0.25em 0 1.5em;
+	padding:1em 1em 0.25em 48px;
+	}
+    </style>
+  </head>
+  <body>
+    <div id="page">
+      <div id="header">
+        <a href="index.html"><img style="border:0px" src="images/browsercms_logo.png" alt="BrowserCMS"/></a>
+      </div>
+      <div id="main">
+        <div class="top_cap"></div>
+        <div id="contentwrap">
+          <div class="title">
+            <h1></h1>
+          </div>
+          <div class="top_cap_content"></div>
+          <div id="content">
+            <table width="100%" cellpadding="0" cellspacing="0" border="0">
+              <tr>
+                <td class="sidebar" valign="top">
+                        <div id="subCol">
+        <h3 class="chapter"><img src="images/chapters_icon.gif" alt="" />Chapters</h3>
+        <ol class="chapters">
+</ol></div>
+                </td>
+                <td class="guides">
+                  <h2>Using <span class="caps">CMS</span> Authentication</h2>
+<p>When you create public controllers, you may want to take advantage of the <span class="caps">CMS</span> authentication system. Create an action that
+looks like this:</p>
+<div class="code_container"><code class="ruby">class MyNewController &lt; ApplicationController
+  # This adds methods to your controller to work with the authenticated user.
+  include Cms::Authentication::Controller
+  def do_something_interesting
+    # The current_user method looks up the user based on either a cookie, or session variable.
+    user = current_user
+    if user.guest?
+      redirect_to &quot;/system/access-denied&quot;
+    else
+      redirect_to &quot;/my_target/page&quot;
+    end
+  end
+end</code></div>
+<p>The current_user method is also available in Portlets (maybe), as well as in the view files for both portlets and templates.</p>
+<h3>Understanding Guest users
+Many visitors to a <span class="caps">CMS</span> site will not be logged in. These users are considered to be members of a special group, called &#8216;Guest&#8217;. This
+group allows staff to set permissions for denying entry to specific sections. When you call the following:</h3>
+<div class="code_container"><code class="ruby">user = current_user</code></div>
+<p>if there the user is not logged in, a
+dirty_workaround_for_notextile_2
+ object will be returned. This user has all the permissions of the guest group, which are
+usually limited to viewing public sections.</p>
+<h2>Working with the Content <span class="caps">API</span>
+One of the central features that the content <span class="caps">API</span> adds to models is versioning and publishing. Each content block can either be published or in draft. The data for a block is split between two tables, the primary table and it&#8217;s version table. The primary table
+stores the &#8216;live&#8217; version of a block, typically the last &#8216;Published&#8217; version of a block. The versions table stores all other versions, including future edits which are unpublished.</h2>
+<h3>Differences between ActiveRecord and Content <span class="caps">API</span>
+This can cause some confusion when using basic ActiveRecord operations, where you might not get what you expect. For example, suppose we create an Event Block</h3>
+<div class="code_container"><code class="ruby">class Event &lt; ActiveRecord::Base
+  acts_as_content_block
+end
+event = Event.create!(:name=&gt;&quot;Event #1&quot;, :save_and_publish=&gt;true)
+event.name = &quot;Event #2&quot;
+event.save!
+assert_equals &quot;Event #2&quot;, Event.find(event.id) # This is false, and will fail.</code></div>
+<p>In this case, &#8220;Event #2&#8221; is a draft, stored in the &#8216;events_versions&#8217; table. To create and publish the event, you can do this:</p>
+<div class="code_container"><code class="ruby">event = Event.create!(:name=&gt;&quot;Event #1&quot;, :save_and_publish=&gt;true)
+event.name = &quot;Event #2&quot;
+event.publish! # This will both publish and save the record.
+assert_equals &quot;Event #2&quot;, Event.find(event.id) # This is now true.</code></div>
+                </td>
+              </tr>
+            </table>
+          </div>
+        </div>
+        <br clear="all"/>
+        <div class="bottom_cap"></div>
+      </div>
+    </div>
+  </body>
+</html>

data/doc/guides/html/build_it_yourself.html CHANGED Viewed

@@ -105,7 +105,15 @@
         overflow: auto;
         white-space:pre;
       }
+      .note {
+	-moz-background-clip:border;
+	-moz-background-inline-policy:continuous;
+	-moz-background-origin:padding;
+	background:#FFF9D8 url(../images/tab_note.gif) no-repeat scroll left top;
+	border:medium none;
+	margin:0.25em 0 1.5em;
+	padding:1em 1em 0.25em 48px;
+	}
     </style>
   </head>
   <body>

data/doc/guides/html/building_modules.html CHANGED Viewed

@@ -105,7 +105,15 @@
         overflow: auto;
         white-space:pre;
       }
+      .note {
+	-moz-background-clip:border;
+	-moz-background-inline-policy:continuous;
+	-moz-background-origin:padding;
+	background:#FFF9D8 url(../images/tab_note.gif) no-repeat scroll left top;
+	border:medium none;
+	margin:0.25em 0 1.5em;
+	padding:1em 1em 0.25em 48px;
+	}
     </style>
   </head>
   <body>
@@ -131,54 +139,88 @@
                 </td>
                 <td class="guides">
-                  <h2>Using <span class="caps">CMS</span> Authentication</h2>
-<p>When you create public controllers, you may want to take advantage of the <span class="caps">CMS</span> authentication system. Create an action that
-looks like this:</p>
-<div class="code_container"><code class="ruby">class MyNewController &lt; ApplicationController
-  # This adds methods to your controller to work with the authenticated user.
-  include Cms::Authentication::Controller
-  def do_something_interesting
-    # The current_user method looks up the user based on either a cookie, or session variable.
-    user = current_user
-    if user.guest?
-      redirect_to &quot;/system/access-denied&quot;
-    else
-      redirect_to &quot;/my_target/page&quot;
-    end
-  end
+                  <h2>Creating your own modules</h2>
+<p>Creating your own modules is a useful way to expand the functionality of BrowserCMS via gems.</p>
+<h3>Getting Started</h3>
+<p>Run the following command to generate a basic BrowserCMS application that is ready to turn into a module.</p>
+<p><code>bcms bcms_[module name] -m module</code></p>
+<p>The module template used to create this application will create the following files:</p>
+<ul>
+	<li><code>.gitignore</code></li>
+</ul>
+<blockquote>
+<p>This file prevents files you almost certainly will not want to be added to git to be added to git.</p>
+</blockquote>
+<ul>
+	<li><code>public/bcms/[module name]/README</code></li>
+</ul>
+<blockquote>
+<p>Explains what this directory is for.  It can safely be deleted.</p>
+</blockquote>
+<ul>
+	<li><code>bcms_[module name].gemspec</code></li>
+</ul>
+<blockquote>
+<p>Creates a gemspec file in case you want to manage the gemspec by hand.</p>
+</blockquote>
+<ul>
+	<li><code>config/initializers/init_module.rb</code></li>
+</ul>
+<blockquote>
+<p>Requires the following file.</p>
+</blockquote>
+<ul>
+	<li><code>lib/bcms_[module name].rb</code></li>
+</ul>
+<blockquote>
+<p>Requires the following file.</p>
+</blockquote>
+<ul>
+	<li><code>lib/bcms_[module name]/routes.rb</code></li>
+</ul>
+<blockquote>
+<p>Has boilerplate code ready in case you have specific routes the application will need to have available.  For example, if your module has content blocks that will be managed by the <span class="caps">CMS</span> administrative interface, routes for the controllers handling this management will need to be added here.</p>
+</blockquote>
+<ul>
+	<li><code>rails/init.rb</code></li>
+</ul>
+<blockquote>
+<p>Adds the gem root to the rails paths, adds all migration files to the list of files that will be copied into any application using the module when <code>script/generate browser_cms</code> is run, and adds all files in <code>public/bcms/bcms_[module name]/</code> to the list of files that will be copied into any application using the module when <code>script/generate browser_cms</code> is run.</p>
+</blockquote>
+<ul>
+	<li><code>LICENSE.txt</code></li>
+</ul>
+<blockquote>
+<p><span class="caps">GNU</span> Lesser General Public License</p>
+</blockquote>
+<ul>
+	<li><code>COPYRIGHT.txt</code></li>
+</ul>
+<blockquote>
+<p>BrowserMedia&#8217;s copyright text.</p>
+</blockquote>
+<ul>
+	<li><code>GPL.txt</code></li>
+</ul>
+<blockquote>
+<p><span class="caps">GNU</span> General Public License</p>
+</blockquote>
+<p>Note: the module template was developed primarily for BrowserMedia in-house use.  Therefore the license, copywrite, and gemspec files all reflect our organization.  Please edit and/or remove these files to fit your needs.</p>
+<h3>Conventions When Building Your Module</h3>
+<p>Build your module as if you were building a rails application that does whatever you want.</p>
+<p>That said, there are some conventions that tend to make things easier.</p>
+<p>First, place any files that are used as configuration files for public assects (for example, the fckeditor) in the <code>public/bcms_config/[module_name]</code> directory and have the gem only copy them if they are not already there.  For example you can add code like the following to the <code>rails/init.rb</code> file.</p>
+<div class="code_container"><code class="ruby">unless File.exists?(&quot;#{RAILS_ROOT}/public/bcms_config/fckeditor/fckstyles.xml&quot;)
+  Cms.add_generator_paths gem_root, &quot;public/bcms_config/fckeditor/fckstyles.xml&quot;
 end</code></div>
-<p>The current_user method is also available in Portlets (maybe), as well as in the view files for both portlets and templates.</p>
-<h3>Understanding Guest users
-Many visitors to a <span class="caps">CMS</span> site will not be logged in. These users are considered to be members of a special group, called &#8216;Guest&#8217;. This
-group allows staff to set permissions for denying entry to specific sections. When you call the following:</h3>
-<div class="code_container"><code class="ruby">user = current_user</code></div>
-<p>if there the user is not logged in, a
-dirty_workaround_for_notextile_2
- object will be returned. This user has all the permissions of the guest group, which are
-usually limited to viewing public sections.</p>
-<h2>Working with the Content <span class="caps">API</span>
-One of the central features that the content <span class="caps">API</span> adds to models is versioning and publishing. Each content block can either be published or in draft. The data for a block is split between two tables, the primary table and it&#8217;s version table. The primary table
-stores the &#8216;live&#8217; version of a block, typically the last &#8216;Published&#8217; version of a block. The versions table stores all other versions, including future edits which are unpublished.</h2>
-<h3>Differences between ActiveRecord and Content <span class="caps">API</span>
-This can cause some confusion when using basic ActiveRecord operations, where you might not get what you expect. For example, suppose we create an Event Block</h3>
-<div class="code_container"><code class="ruby">class Event &lt; ActiveRecord::Base
-  acts_as_content_block
-end
-event = Event.create!(:name=&gt;&quot;Event #1&quot;, :save_and_publish=&gt;true)
-event.name = &quot;Event #2&quot;
-event.save!
-assert_equals &quot;Event #2&quot;, Event.find(event.id) # This is false, and will fail.</code></div>
-<p>In this case, &#8220;Event #2&#8221; is a draft, stored in the &#8216;events_versions&#8217; table. To create and publish the event, you can do this:</p>
-<div class="code_container"><code class="ruby">event = Event.create!(:name=&gt;&quot;Event #1&quot;, :save_and_publish=&gt;true)
-event.name = &quot;Event #2&quot;
-event.publish! # This will both publish and save the record.
-assert_equals &quot;Event #2&quot;, Event.find(event.id) # This is now true.</code></div>
+<p>This will make the required configuration file available to the fckeditor, but it won&#8217;t overwrite it (or even ask you if you want to overwrite it) every time you run <code>script/generate browser_cms</code> for your application.</p>
+<h3>Testing Your Gem</h3>
+<p>We strongly encourage the creation of unit, functional, and integration tests as part of your module.</p>
+<p>We also suggest that you test your gem against a BrowserCMS application.  To do this, first run</p>
+<p><code>bcms module_tester -m demo</code></p>
+<p>wherever (I use <code>/var/tmp</code>).  Edit the <code>config/environment.rb</code> file to include the line</p>
+<p><code>gem.config 'bcms_[module name]'</code></p>
+<p>then run the app locally and make sure your module works as expected.</p>
                 </td>
               </tr>
             </table>

data/doc/guides/html/building_templates.html ADDED Viewed

@@ -0,0 +1,506 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>BrowserCMS Designer Guide</title>
+    <link rel="stylesheet" type="text/css" href="files/stylesheets/syntax.css" />
+    <script type="text/javascript" src="files/javascripts/code_highlighter.js"></script>
+    <script type="text/javascript" src="files/javascripts/highlighters.js"></script>
+    <style type="text/css">
+      body {
+        background: #FFFFFF url(images/bg.png) repeat-x scroll 0 0;
+        font-family: "Trebuchet MS", Helvetica, Verdana, Arial, sans-serif;
+        margin: 0;
+        padding: 0;
+      }
+      #page {
+        margin: 0 auto;
+        text-align: left;
+        width: 1000px;
+      }
+      #header {
+        height: 110px;
+      }
+      div.top_cap {
+        background: transparent url(images/top_cap.png) no-repeat scroll 0 0;
+        height: 10px;
+      }
+      #contentwrap {
+        background: transparent url(images/dot.png) repeat scroll 0 0;
+        float: left;
+        width: 1000px;
+      }
+      div.bottom_cap {
+        background: transparent url(images/bottom_cap.png) no-repeat scroll 0 0;
+        height: 9px;
+      }
+      div.top_cap_content {
+        background: transparent url(images/top_cap_content.png) no-repeat scroll 0 0;
+        height: 5px;
+      }
+      #content {
+        background-color: #FFFFFF;
+        margin: 0 5px;
+        padding: 0 10px;
+      }
+      div.title {
+        padding: 20px;
+      }
+      div.title h1 {
+        border-bottom: 3px solid #505358;
+        color: #FFFFFF;
+        font-size: 24pt;
+        font-weight: normal;
+        line-height: 1;
+        margin: 0 0 10px;
+        padding-bottom: 10px;
+      }
+      td.sidebar {
+        font-size: 8pt;
+        width: 165px;
+        padding: 5px;
+      }
+      td.sidebar ol {
+        margin-left: 20px;
+        padding: 0;
+        line-height: 1.5;
+      }
+      td.sidebar ol li {
+        margin: 0;
+        padding: 0;
+      }
+      td.sidebar ol li ul {
+        list-style-type: none;
+        padding-left: 10px;
+      }
+      td.guides {
+        font-size: 10pt;
+        width: 800px;
+        padding: 10px;
+      }
+      .code_container {
+        padding: 10px;
+        background: #eee;
+        border: 1px solid #ccc;
+        overflow: auto;
+        width: 760px;
+      }
+      pre, code {
+        overflow: auto;
+        white-space:pre;
+      }
+      .note {
+	-moz-background-clip:border;
+	-moz-background-inline-policy:continuous;
+	-moz-background-origin:padding;
+	background:#FFF9D8 url(../images/tab_note.gif) no-repeat scroll left top;
+	border:medium none;
+	margin:0.25em 0 1.5em;
+	padding:1em 1em 0.25em 48px;
+	}
+    </style>
+  </head>
+  <body>
+    <div id="page">
+      <div id="header">
+        <a href="index.html"><img style="border:0px" src="images/browsercms_logo.png" alt="BrowserCMS"/></a>
+      </div>
+      <div id="main">
+        <div class="top_cap"></div>
+        <div id="contentwrap">
+          <div class="title">
+            <h1>BrowserCMS Designer Guide</h1>
+          </div>
+          <div class="top_cap_content"></div>
+          <div id="content">
+            <table width="100%" cellpadding="0" cellspacing="0" border="0">
+              <tr>
+                <td class="sidebar" valign="top">
+                        <div id="subCol">
+        <h3 class="chapter"><img src="images/chapters_icon.gif" alt="" />Chapters</h3>
+        <ol class="chapters">
+<li><a href="#introduction">Introduction</a><ul><li><a href="#typical-design-process">Typical Design Process</a></li><li><a href="#design-considerations">Design Considerations</a></li></ul></li><li><a href="#creating-a-page-template">Creating a Page Template</a><ul><li><a href="#files-or-content">Files or Content?</a></li><li><a href="#understanding-containers">Understanding Containers</a></li><li><a href="#adding-a-sidebar-container">Adding A Sidebar Container</a></li></ul></li><li><a href="#tags-quick-reference">Tags Quick Reference</a><ul><li><a href="#required-tags">Required Tags</a></li><li><a href="#container-tag"><tt>container</tt> Tag</a></li><li><a href="#cms-toolbar-tag"><tt>cms_toolbar</tt> Tag</a></li><li><a href="#html-head-tag"><span class="caps">HTML</span> Head Tag</a></li><li><a href="#page-title-tag"><tt>page_title</tt> Tag</a></li><li><a href="#current-page-tag"><tt>current_page</tt> Tag</a></li><li><a href="#render-portlet-tag"><tt>render_portlet</tt> Tag</a></li><li><a href="#render-connectable-tag"><tt>render_connectable</tt> Tag</a></li></ul></li><li><a href="#navigation">Navigation</a><ul><li><a href="#basic-rules-of-menus">Basic Rules of Menus</a></li><li><a href="#using-menus">Using Menus</a></li><li><a href="#how-deep-should-menus-be">How Deep Should Menus Be?</a></li><li><a href="#primary-navigation">Primary Navigation</a></li><li><a href="#sub-navigation">Sub Navigation</a></li><li><a href="#site-maps-and-flyout-menus">Site Maps and Flyout Menus</a></li><li><a href="#using-breadcrumbs">Using Breadcrumbs</a></li></ul></li><li><a href="#using-partials">Using Partials</a><ul></ul></li></ol></div>
+                </td>
+                <td class="guides">
+                  <h2>BrowserCMS Designer Guide</h2>
+<p>This guide covers how to set up templates for BrowserCMS. After reading this guide, you should understand how to:</p>
+<ul>
+	<li>How to create page templates</li>
+	<li>How to take advantage of dynamic menus</li>
+	<li>How to reuse common bits of html with page partials</li>
+	<li>How to use tags to add dynamic content to templates and partials</li>
+</ul>
+                  <h3 id="introduction">1 Introduction</h3>
+<p>One of the primary goals of implementing a content management system is to separate Design from Content. This allows designers to provide an attractive design that users can easily apply. A <span class="caps">CMS</span> can be thought of as a &#8216;Web Page&#8217; factory, where designers can create the template (i.e. the molds) that users without design knowledge can use to stamp out new pages.</p>
+<p>BrowserCMS supports this concept by the use of page templates. Each page within the site has a single page template that governs it&#8217;s layout. Templates are essentially html pages with the editable areas specified. A template can be anything from a basic two column subpage to homepage design with a half dozen separate editable areas. BrowserCMS supports an &#8216;in-context&#8217; page editor, that allows users to see which areas of the page are editable.</p>
+<h4 id="typical-design-process">1.1 Typical Design Process</h4>
+<p>When you are developing a site with BrowserCMS, there are a lot of ways to organize and design the site. One of the goals of the project is to support highly graphical designs that pass through multiple team members hands. As such, the template creation process is optimized to mimic the steps that would work for any web development project, without constraining the design to fit the tool.</p>
+<p>Here is an example of a web design process to create templates for BrowserCMS.</p>
+<ol>
+	<li>A designer creates a Photoshop (<span class="caps">PSD</span> or <span class="caps">JPG</span>) which represents the desire final look of a page.</li>
+	<li>A developer converts the <span class="caps">PSD</span> into a static <span class="caps">HTML</span> file which implements that design.</li>
+	<li>The developer can take this html file, add it to the <span class="caps">CMS</span> as a page template just by renaming it from .htm to .html.erb</li>
+	<li>The developer can add a few helper methods to the template replacing the &#8216;static&#8217; text to make it editable through the <span class="caps">CMS</span> interface.</li>
+</ol>
+<p>There are few additional considerations we will get into, but this basic process allows developers to work in a medium they are well trained in (<span class="caps">HTML</span> production) with minimal training on BrowserCMS itself. For the purposes of this document, assume there are three separate and distinct roles around creating a <span class="caps">CMS</span> site.</p>
+<ol>
+	<li>Designer &#8211; A person in charge of defining the overall look and feel of the pages within a site. Produces a <span class="caps">PSD</span>.</li>
+	<li>Developer &#8211; A person in charge of converting the ideal look (<span class="caps">PSD</span>) into an <span class="caps">HTML</span> page and ultimately a <span class="caps">CMS</span> template.</li>
+	<li>Programmer &#8211; A person in charge of coding content types (blocks) and dynamic behavior (portlets).</li>
+</ol>
+<h4 id="design-considerations">1.2 Design Considerations</h4>
+<p>There are some considerations that designers/developers should take into account if they want to get the maximum benefit from working w/ BrowserCMS. Here&#8217;s a quick list:</p>
+<p>1. BrowserCMS can render menus (one or more levels deep) automatically from the site architecture. Developers should understand how menu code is generated when styling them, which happens in a <a href="http://www.csszengarden.com"><span class="caps">CSS</span> Zen Garden</a> style.
+2. The Site Map is how pages and sections are organized. Developers should understand how this will affect auto-generated menus.
+3. In addition to static content, the look of some areas of pages will be rendered dynamically by portlets and blocks. Developers may need to work with programmers to determine whether view code will be dynamically generated via portlets or statically placed by users.</p>
+<h3 id="creating-a-page-template">2 Creating a Page Template</h3>
+<p>There are two ways to create a template, as a file within the project (much like how Rails layouts work) or as content in the database. Let&#8217;s start with creating a file based template. Assuming we are starting from a new <em>blank</em> BrowserCMS project, lets create a template that will represent our subpages. Run the following from the command line:</p>
+<div class="code_container"><code class="html">$ script/generate template subpage</code></div>
+<p>This generates a file called <tt>app/views/layouts/templates/subpage.html.erb</tt>. For experience Rails developers, you will note that within the traditional <tt>layouts</tt> directory we have create a subdirectory called <tt>templates</tt>. All files placed within this directory are available as page templates with the UI. Open up this template file and it should look like this:</p>
+<div class="code_container"><code class="html">&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;
+  &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
+&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;en&quot; lang=&quot;en&quot;&gt;
+  &lt;head&gt;
+    &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html;charset=utf-8&quot; /&gt;
+    &lt;title&gt;&lt;%= page_title %&gt;&lt;/title&gt;
+    &lt;%= yield :html_head %&gt;
+  &lt;/head&gt;
+  &lt;body style=&quot;margin: 0; padding: 0; text-align: center;&quot;&gt;
+    &lt;%= cms_toolbar %&gt;
+    &lt;div id=&quot;wrapper&quot; style=&quot;width: 700px; margin: 0 auto; text-align: left; padding: 30px&quot;&gt;
+      Breadcrumbs: &lt;%= render_breadcrumbs %&gt;
+      Main Menu: &lt;%= render_menu %&gt;
+      &lt;h1&gt;&lt;%= page_title %&gt;&lt;/h1&gt;
+      &lt;%= container :main %&gt;
+    &lt;/div&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</code></div>
+<p>This is a bare bones <span class="caps">XHTML</span> template with one editable area (i.e. One Column). It has no <span class="caps">CSS</span> stylesheets or javascript. It&#8217;s about the simplest possible template we can have to create a renderable page in BrowserCMS.</p>
+<h4 id="files-or-content">2.1 Files or Content?</h4>
+<p>Since templates can stored as either files or database content (or a combination of both), site designers will need to decide which path they want to use. Ultimately, the decision is based on the question of <strong>who should be able to modify templates</strong>? On projects where site users have some <span class="caps">HTML</span> knowledge and want to be to update templates via the <span class="caps">CMS</span> UI, database templates may be appropriate. On other projects, where design is intended to more tightly controlled, file templates might be appropriate.</p>
+<p>It&#8217;s also possible to start out using file templates for speed of development, and then migrate the content of the templates into the database before launch.</p>
+<h4 id="understanding-containers">2.2 Understanding Containers</h4>
+<p>There are a bits of ruby code (helpers) that our basic template has, but let&#8217;s focus on the <tt>container</tt> helper. Open up the <span class="caps">CMS</span> UI and go to <tt>/cms/sitemap</tt> and Add a New Page. Name it &#8216;About Us&#8217;, and select &#8216;Subpage&#8217; from the &#8216;Template&#8217; dropdown to use this new template. Click Save. You should see a mostly white page. Click the &#8216;Turn On&#8217; button in the upper right to enable the editor, and you should see a single grey box. This box is the <tt>container</tt> we defined in our template. Users can insert new or existing content into pages, and the containers determine where they go. Add some Text content to the page in this container.</p>
+<div class='note'><p>Container are placeholders for content. When you have two pages that use the same template, they do not share the content. Putting some Text into the <tt>:main</tt> container of Page A doesn&#8217;t mean it will also appear on Page B just because that page also has a <tt>:main</tt> container.</p></div>
+<h4 id="adding-a-sidebar-container">2.3 Adding A Sidebar Container</h4>
+<p>Let&#8217;s alter our template to add a second column (i.e. Sidebar). Modify the <tt>subpage.html</tt> to look like the following:</p>
+<div class="code_container"><code class="html">&lt;head&gt;
+  &lt;title&gt;&lt;%= page_title %&gt; | Our Fancy Site&lt;/title&gt;
+  &lt;style&gt;
+      body, html { margin: 0; padding: 0; text-align: center; }
+      #wrapper { width: 700px; margin: 0 auto; text-align: left; padding: 30px }
+      #main { float: left; width: 500px; }
+      #sidebar { float: right; padding: 0 30px 0 0; width: 150px;}
+  &lt;/style&gt;
+  &lt;%= yield :html_head %&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&lt;%= cms_toolbar %&gt;
+&lt;div id=&quot;wrapper&quot;&gt;
+  &lt;div id=&quot;header&quot;&gt;
+    Breadcrumbs: &lt;%= render_breadcrumbs %&gt;
+    Main Menu: &lt;%= render_menu %&gt;
+    &lt;h1&gt;&lt;%= page_title %&gt;&lt;/h1&gt;
+  &lt;/div&gt;
+  &lt;div id=&quot;main&quot;&gt;&lt;%= container :main %&gt;&lt;/div&gt;
+  &lt;div id=&quot;sidebar&quot;&gt;&lt;%= container :sidebar %&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;/body&gt;</code></div>
+<p>We have added several <tt>div</tt> elements to the template to clearly define a header, main and sidebar areas of our page. We have also cleaned up the <span class="caps">CSS</span> placed in the <tt>head</tt> element of the page. This <span class="caps">CSS</span> could also be moved to an external stylesheet as well. Now refresh the page and you should see an additional column on the right with a new <tt>:sidebar</tt> container being rendered. The content placed in the <tt>:main</tt> container will still there, though moved around based on the <span class="caps">CSS</span> rules of the template.</p>
+<p>Having seen the sample templates, it should be possible to construct <span class="caps">HTML</span> templates using typical <span class="caps">HTML</span> and <span class="caps">CSS</span>, place containers in them where content should appear and get a reasonable looking set of templates.</p>
+<h3 id="tags-quick-reference">3 Tags Quick Reference</h3>
+<p>This section covers a reference for all the tags (aka Helper Methods) that can be used in Page Templates to render various elements. Here is a quick list of the available tags, their purpose and whether they are required or not.</p>
+<p>._ Name |<em>. Purpose | Required? |
+| <tt>container</tt> | A named area that allows users to add/edit content | Yes |
+| <tt>cms</em>toolbar</tt></notextile> | Renders the <span class="caps">CMS</span> toolbar controller required for editing and navigation. Should be very first element in <tt>body</tt> | Yes |
+| <tt>yield :html_head | This allows the CMS to insert javascript and other information into the page. Should be last element in </tt>head+ | Yes |
+| <tt>page_title</tt> | Inserts the &#8216;Name&#8217; of the page (or &#8216;Title&#8217; if it exists) | No |
+| <tt>current_page</tt> | Returns a reference to the <tt>Page</tt> object that is currently being rendered | No |
+| <tt>render_breadcrumbs</tt> | Generates breadcrumbs based on the current page and its location in the sitemap | No |
+| <tt>render_menu</tt> | Generates a menu based on the current page and its location in the sitemap | No |
+| <tt>render_portlet</tt> | Renders a specific portlet by name | No |
+| <tt>render_connectable</tt> | Renders a specific content block | No |</p>
+<p>In addition, since Page Templates are Rails layouts, you can make use of any of the Asset Tags&quot;:http://guides.rubyonrails.org/layouts_and_rendering.html#structuring-layouts like <tt>stylesheet_link_tag</tt> or <tt>image_tag</tt>.</p>
+<h4 id="required-tags">3.1 Required Tags</h4>
+<p>While most of the tags are optional, there are several tags which must be included or page template just won&#8217;t work correctly. Here&#8217;s the minimum necessary tags required.</p>
+<p>1. <tt>yield :html_head</tt> &#8211; Leaving this out will cause problems with in page editing.
+2. <tt>cms_toolbar</tt> &#8211; Leaving this out will provide editing and navigation to other <span class="caps">CMS</span> pages.
+3. <tt>container</tt> &#8211; Having at least one (typically called <tt>:main</tt>) is required to allow content to be added to pages.</p>
+<h4 id="container-tag">3.2 <tt>container</tt> Tag</h4>
+<p>This tag is used to allow areas of the page to be editted and render through the <span class="caps">CMS</span>. It takes a single argument which is the name of the container. Template developers can name containers whatever they like, but its recommened that the names should generally reflect the area or purpose of a particular container.</p>
+<div class="code_container"><code class="html">&lt;div&gt;&lt;%= container :main %&gt;&lt;/div&gt;
+	&lt;div&gt;&lt;%= container :footer %&gt;&lt;/div&gt;</code></div>
+<p>Container names are just labels. So if you defined 5 containers on a template (header, footer, left, main, right), you could swap between any two templates which defined all those containers.</p>
+<div class='note'><p>Be aware that if you add content to a page in a container (like <tt>:sidebar</tt>) then change a pages template to one which does not have that container, the content will be &#8216;orphaned&#8217;. To remove that content, you would need to swap back to the previous template, remove the content, then change back to the new template again.</p></div>
+<h4 id="cms-toolbar-tag">3.3 <tt>cms_toolbar</tt> Tag</h4>
+<p>This tag is how the toolbar is inserted into templates. It should be the first element in the <tt>body</tt> element of a page. In most cases, you can just use it as follows:</p>
+<div class="code_container"><code class="html">&lt;body&gt;
+	&lt;%= cms_toolbar %&gt;
+	&lt;h2&gt;About Us&lt;/h2&gt;
+	&lt;!-- Text goes here --&gt;
+&lt;/body&gt;</code></div>
+<p>The toolbar is written out as an iframe which makes its less likely that styles/javascript will clash with the page being editted.</p>
+<h4 id="html-head-tag">3.4 <span class="caps">HTML</span> Head Tag</h4>
+<p>This tag is technically a standard <tt>yield</tt> call, with a particularly named <tt>:html_head</tt>. This tag must be included in all <span class="caps">CMS</span> templates to allow it to insert the necessary javascript and style elements. It should probably be the last element in <tt>head</tt> element of a page.</p>
+<div class="code_container"><code class="html">&lt;head&gt;
+  &lt;title&gt;&lt;%= page_title %&gt;&lt;/title&gt;
+  &lt;%= yield :html_head %&gt;
+&lt;/head&gt;</code></div>
+<h4 id="page-title-tag">3.5 <tt>page_title</tt> Tag</h4>
+<p>This tag will output the <tt>name</tt> attribute of the current page. If the <tt>title</tt> attribute is specified, it will output that instead. This allows users to have one label for a page appear in the navigation (navigation and the sitemap always use <tt>name</tt>) and another in the header or title bar on a page.</p>
+<p>Example:</p>
+<div class="code_container"><code class="html">&lt;title&gt;My Site | &lt;%= page_title %&gt;&lt;/title&gt;</code></div>
+<p>This is using the page_title tag to title element of a page.</p>
+<div class="code_container"><code class="html">&lt;h1&gt;&lt;%= page_title %&gt;&lt;/h1&gt;</code></div>
+<p>Another common usage of <tt>page_title</tt> is for the H1 or H2 on a page.</p>
+<h4 id="current-page-tag">3.6 <tt>current_page</tt> Tag</h4>
+<p>This doesn&#8217;t render anything, but returns a reference to the current <tt>Page</tt> object that is being rendered. It can be used to access other attributes of the page, like the name of the section or the <tt>description</tt> of the Page. Here are some common examples:</p>
+<div class="code_container"><code class="html">&lt;%= current_page.name %&gt;</code></div>
+<p>This outputs the <tt>name</tt> attribute of the page, similar to how <tt>page_title</tt> works. You might do this if you had specified a <tt>title</tt> attribute for pages which was different than the <tt>name</tt>, but wanted to compare names.</p>
+<div class="code_container"><code class="html">&lt;%= current_page.section.name %&gt;</code></div>
+<p>This outputs the <tt>name</tt> of the current page&#8217;s section.</p>
+<div class="code_container"><code class="html">&lt;% if current_page.top_level_section.name == 'About Us' %&gt;
+&lt;%= image_tag &quot;/fancy/about_us_section_image.png&quot; %&gt;
+&lt;% end %&gt;</code></div>
+<p>This renders a specific image if the page is within the top level &#8216;About Us&#8217; section. The <tt>top_level_section</tt> method finds the very top level section for a give page, regardless of how far down it is in the sitemap. Useful for making comparisons based on the first level of navigation.</p>
+<div class='note'><p>Any page or section attribute is reachable in the way. You will need to look at the <span class="caps">API</span> documentation for <tt>Page</tt> and <tt>Section</tt> to see all the available attributes.</p></div>
+<h4 id="render-portlet-tag">3.7 <tt>render_portlet</tt> Tag</h4>
+<p>This tag will render a portlet from a template. Normally portlets are placed individually on each page by users. This tag is useful for common elements that might appear on multiple pages throughout the site. An example of this might be a Login Portlet which should appear as part of the header on all pages. Here&#8217;s an example:</p>
+<div class="code_container"><code class="html">&lt;%= render_portlet &quot;Nav Login Form&quot; %&gt;</code></div>
+<p>The only argument to <tt>render_portlet</tt> is a name. This name will match the name specified in the UI when you add a portlet. You will need to create the portlet and name in appropriately for this tag to work. The portlet will render itself based on its template.</p>
+<h4 id="render-connectable-tag">3.8 <tt>render_connectable</tt> Tag</h4>
+<p>This tag can render a specific block in a page. It takes one argument, the block itself. This could be used to automatically include, say a footer, into a page as part of the template. For instance:</p>
+<div class="code_container"><code class="html">&lt;% footer = HtmlBlock.find(12) %&gt;
+	&lt;%= render_connectable(footer) %&gt;</code></div>
+<p>Here we use Active Record to query for a specific HtmlBlock (i.e. Text) with the id of 12. Then we pass it to <tt>render_connectable</tt> to display itself.</p>
+<h3 id="navigation">4 Navigation</h3>
+<p>Most websites typically features some form of navigation via menus and/or breadcrumbs. Some navigation is highly graphical and changes infrequently. Other&#8217;s might use drop downs (via Javascript), while still users have site maps that drill down to the deepest pages. BrowserCMS is designed to support many different navigation choices, including everything from hand coded horizontal navigation to dynamic left side menus.</p>
+<p>One of the features that BrowserCMS provides is an menu and breadcrumb generation tags. These tags can automatically generate menus/breadcrumbs based on the current page. For breadcrumbs, they render linkable items for the page and its parents. For menus, it can show a page, all it&#8217;s siblings as well as highlight the currently selected sections. The primary advantage of this is for rendering menus which can frequently change, like section navigation. As pages are added and published in the sitemap, they will automatically appear in the menus.</p>
+<h4 id="basic-rules-of-menus">4.1 Basic Rules of Menus</h4>
+<p>Understanding dynamic menus can be tricky things, so you will likely need to experiment with them, but here are some basic rules to remember.</p>
+<ol>
+	<li>Menus will automatically generate names and URLs based on the <tt>name</tt> and <tt>path</tt> attributes of pages in the sitemap.</li>
+	<li>Hidden pages/section are not shown. If you mark a page or section as &#8216;hidden&#8217; via the sitemap, it will never be shown in the menu.</li>
+	<li>Unpublished pages are not shown. If you change a page name or url, it won&#8217;t appear until the page is published.</li>
+	<li>Moving pages and sections around in the sitemap will reorder them in the menus automatically.</li>
+</ol>
+<p>Here&#8217;s an example of a site map representing part of the <a href="http://en.wikipedia.org/wiki/National_Football_Conference">National Football League&#8217;s</a> conference system. While not all readesr may be familiar with &#8216;American&#8217; football, it does provide a nice example of a tree structure that has multiple levels (Conferences &gt; Divisions &gt; Teams). We will use this sitemap in the following examples to highlight how to build menus.</p>
+<p><img src="images/nfl_sitemap.png" alt="" /></p>
+<h4 id="using-menus">4.2 Using Menus</h4>
+<p>To render a menu, you can make use of the <tt>render_menu</tt> tag. It will generate <span class="caps">HTML</span> markup that can be styled via <span class="caps">CSS</span> to render either horizontal or vertical navigation.</p>
+<div class="code_container"><code class="ruby">&lt;%= render_menu %&gt;</code></div>
+<p>This would render a menu starting with all the top level sections, creating unordered lists as far down as the current page. If I navigate to the <em>Dallas</em> page (+/nfc/east/dallas), the following <span class="caps">HTML</span> would be rendered:</p>
+<div class="code_container"><code class="html">&lt;div id=&quot;menu&quot; class=&quot;menu&quot;&gt;
+  &lt;ul&gt;
+    &lt;li id=&quot;section_3&quot; class=&quot;depth-1 first open&quot;&gt;
+      &lt;a href=&quot;/nfc/east/dallas&quot;&gt;NFC&lt;/a&gt;
+      &lt;ul&gt;
+        &lt;li id=&quot;section_5&quot; class=&quot;depth-2 first open&quot;&gt;
+          &lt;a href=&quot;/nfc/east/dallas&quot;&gt;East&lt;/a&gt;
+          &lt;ul&gt;
+            &lt;li id=&quot;page_5&quot; class=&quot;depth-3 first on&quot;&gt;
+              &lt;a href=&quot;/nfc/east/dallas&quot;&gt;Dallas&lt;/a&gt;
+            &lt;/li&gt;
+            &lt;li id=&quot;page_6&quot; class=&quot;depth-3 last&quot;&gt;
+              &lt;a href=&quot;/nfc/east/new-york&quot;&gt;New York&lt;/a&gt;
+            &lt;/li&gt;
+          &lt;/ul&gt;
+        &lt;/li&gt;
+        &lt;li id=&quot;section_6&quot; class=&quot;depth-2&quot;&gt;
+          &lt;a href=&quot;/nfc/north/chicago&quot;&gt;North&lt;/a&gt;
+        &lt;/li&gt;
+        &lt;li id=&quot;section_7&quot; class=&quot;depth-2&quot;&gt;
+          &lt;a href=&quot;/nfc/west&quot;&gt;West&lt;/a&gt;
+        &lt;/li&gt;
+        &lt;li id=&quot;section_11&quot; class=&quot;depth-2 last&quot;&gt;
+          &lt;a href=&quot;/nfc/south/tampa-bay&quot;&gt;South&lt;/a&gt;
+        &lt;/li&gt;
+      &lt;/ul&gt;
+    &lt;/li&gt;
+    &lt;li id=&quot;section_4&quot; class=&quot;depth-1 last&quot;&gt;
+      &lt;a href=&quot;/afc/east&quot;&gt;AFC&lt;/a&gt;
+    &lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;</code></div>
+<p>Things to note:</p>
+<ul>
+	<li>The top level containing element for the menu is marked as <tt>id</tt> and <tt>class</tt> = <tt>menu</tt>. (<tt>class</tt> can be changed via parameters.)</li>
+	<li>We are currently on the &#8216;Dallas&#8217; page. So the dallas <tt>li</tt> is marked with an <tt>on</tt> class.</li>
+	<li>The &#8216;<span class="caps">NFC</span>&#8217; and &#8216;East&#8217; sections are open (because they are ancestors of the &#8216;Dallas&#8217; page). They are marked with an <tt>open</tt> class.</li>
+	<li>All siblings to &#8216;open&#8217; sections are shown (i.e. we see &#8216;<span class="caps">AFC</span>&#8217; and &#8216;North&#8217;, but nothing under them). The first and last element of each list is marked with <tt>first</tt> and <tt>last</tt>.</li>
+	<li>The depth of each element has a style. For instance, the &#8216;Dallas&#8217; page is at <tt>depth-3</tt>.</li>
+</ul>
+<h4 id="how-deep-should-menus-be">4.3 How Deep Should Menus Be?</h4>
+<p>Since we have not given any options to <tt>render_menu</tt>, it will render all levels down to the current page. In a deeply nested site, you could end up with 4 to 5 levels. In general practice, its often best to limit menus to 2-3 levels. You can do this by specifying how deep and when we want to start menus. For instance, the following menu code would behave identically to the previous one.</p>
+<div class="code_container"><code class="html">&lt;%= render_menu :from_top=&gt;0, :depth=&gt;3 %&gt;</code></div>
+<p>This menu will show all items below level 0 (<tt>from_top=>0</tt>) and showing a total 3 levels of navigation (+depth=&gt;3). Our &#8216;top level&#8217; sections/pages (like <em><span class="caps">AFC</span></em>, <em><span class="caps">NFC</span></em> and _Home__) are all at depth=&gt;1, so they are shown. The <em>East</em> page is second level and the <em>Dallas</em> page is the 3 level, so we see all three levels of navigation.</p>
+<p>In general, the <tt>:depth</tt> option is used to &#8216;cut off&#8217; navigation after a certain point (since a vertical leftside nav can only render so many levels), while <tt>:from_top</tt> is used to determine how high to start. Here&#8217;s some further examples:</p>
+<h4 id="primary-navigation">4.4 Primary Navigation</h4>
+<p>Want to show only the first level of navigation? Try this:</p>
+<div class="code_container"><code class="html">&lt;%= render_menu :from_top=&gt;0, :depth=&gt;1 %&gt;</code></div>
+<p>This will render only a single level of our top level navigation, regardless of how deep our site goes. Here&#8217;s the output when we are on the <em>Dallas</em> page.</p>
+<div class="code_container"><code class="html">&lt;div id=&quot;menu&quot; class=&quot;menu&quot;&gt;
+  &lt;ul&gt;
+    &lt;li id=&quot;page_1&quot; class=&quot;depth-1 first&quot;&gt;
+      &lt;a href=&quot;/&quot;&gt;Home&lt;/a&gt;
+    &lt;/li&gt;
+    &lt;li id=&quot;section_3&quot; class=&quot;depth-1&quot;&gt;
+      &lt;a href=&quot;/nfc/east/dallas&quot;&gt;NFC&lt;/a&gt;
+    &lt;/li&gt;
+    &lt;li id=&quot;section_4&quot; class=&quot;depth-1 last&quot;&gt;
+      &lt;a href=&quot;#&quot;&gt;AFC&lt;/a&gt;
+    &lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;
+&lt;h1&gt;Dallas&lt;/h1&gt;</code></div>
+<h4 id="sub-navigation">4.5 Sub Navigation</h4>
+<p>Suppose we wanted to have two menus on a site, a horizontal &#8216;primary&#8217; navigation and a vertical &#8216;sub&#8217; navigation. In this case, we want to show our <span class="caps">NFL</span> conferences as the primary navigation, and when you drill down the Division would be shown as the left side navigation. Here&#8217;s how the left nav can be generated.</p>
+<div class="code_container"><code class="html">&lt;%= render_menu :from_top=&gt;1, :depth=&gt;2, :class=&gt;&quot;leftmenu&quot; %&gt;</code></div>
+<p>Here is the output when we are on the <em>Dallas</em> page.</p>
+<div class="code_container"><code class="html">&lt;div id=&quot;menu&quot; class=&quot;leftmenu&quot;&gt;
+  &lt;ul&gt;
+    &lt;li id=&quot;section_5&quot; class=&quot;depth-1 first open&quot;&gt;
+      &lt;a href=&quot;/nfc/east/dallas&quot;&gt;East&lt;/a&gt;
+      &lt;ul&gt;
+        &lt;li id=&quot;page_5&quot; class=&quot;depth-2 first on&quot;&gt;
+          &lt;a href=&quot;/nfc/east/dallas&quot;&gt;Dallas&lt;/a&gt;
+        &lt;/li&gt;
+        &lt;li id=&quot;page_6&quot; class=&quot;depth-2 last&quot;&gt;
+          &lt;a href=&quot;/nfc/east/new-york&quot;&gt;New York&lt;/a&gt;
+        &lt;/li&gt;
+      &lt;/ul&gt;
+    &lt;/li&gt;
+    &lt;li id=&quot;section_6&quot; class=&quot;depth-1&quot;&gt;
+      &lt;a href=&quot;/nfc/north/chicago&quot;&gt;North&lt;/a&gt;
+    &lt;/li&gt;
+    &lt;li id=&quot;section_7&quot; class=&quot;depth-1&quot;&gt;
+      &lt;a href=&quot;/nfc/west/atlanta&quot;&gt;West&lt;/a&gt;
+    &lt;/li&gt;
+    &lt;li id=&quot;section_11&quot; class=&quot;depth-1 last&quot;&gt;
+      &lt;a href=&quot;/nfc/south/tampa-bay&quot;&gt;South&lt;/a&gt;
+    &lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;</code></div>
+<h4 id="site-maps-and-flyout-menus">4.6 Site Maps and Flyout Menus</h4>
+<p>You can also handle sitemaps and flyout menus by specifying some additional attributes. Normally, menus will not show the entire tree, but you can make them by doing the following:</p>
+<div class="code_container"><code class="html">&lt;%= render_menu :show_all_siblings=&gt;true %&gt;</code></div>
+<p>This will render every visible node in the tree, regardless of which page we are currently on. It follows the same <tt>:from_top</tt> and <tt>:depth</tt> rules as other menus.</p>
+<h4 id="using-breadcrumbs">4.7 Using Breadcrumbs</h4>
+<p>Breadcrumbs work very similar fashion to menus, except that they only render a single list which includes the current page and all ancestors.</p>
+<div class="code_container"><code class="html">&lt;%= render_breadcrumbs %&gt;</code></div>
+<p>If we are on the <em>Dallas</em> page, this will render the following <span class="caps">HTML</span>:</p>
+<div class="code_container"><code class="html">&lt;ul class=&quot;breadcrumbs&quot;&gt;
+  &lt;li class=&quot;first&quot;&gt;&lt;a href=&quot;/&quot;&gt;My Site&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href=&quot;/nfc/east/dallas&quot;&gt;NFC&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href=&quot;/nfc/east/dallas&quot;&gt;East&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;Dallas&lt;/li&gt;
+&lt;/ul&gt;</code></div>
+<p>If we moved to the <em>Detroit</em> page, it would render this:</p>
+<div class="code_container"><code class="html">&lt;ul class=&quot;breadcrumbs&quot;&gt;
+  &lt;li class=&quot;first&quot;&gt;&lt;a href=&quot;/&quot;&gt;My Site&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href=&quot;/nfc/east/dallas&quot;&gt;NFC&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href=&quot;/nfc/north/chicago&quot;&gt;North&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;Detroit&lt;/li&gt;
+&lt;/ul&gt;</code></div>
+<p>You can also specify some options to it:</p>
+<div class="code_container"><code class="html">&lt;%= render_breadcrumbs :from_top=&gt;1 %&gt;</code></div>
+<p>This would exclude the top level section (i.e. the name of the site <em>My Site</em>). This would render the following if I was on the <em>Dallas</em> page:</p>
+<div class="code_container"><code class="html">&lt;ul class=&quot;breadcrumbs&quot;&gt;
+  &lt;li class=&quot;first&quot;&gt;&lt;a href=&quot;/nfc/east/dallas&quot;&gt;NFC&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href=&quot;/nfc/east/dallas&quot;&gt;East&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;Dallas&lt;/li&gt;
+&lt;/ul&gt;</code></div>
+<h3 id="using-partials">5 Using Partials</h3>
+<p>A site which has multiple templates will likely have duplicate <span class="caps">HTML</span>. Areas of the page like Headers and Footers can easily be exactly the same between two templates. In order to avoid duplication, it is possible to use partials to extract and reuse view code. Like templates, partials can either be content in the repository or files, depending on how developers want to organize their project. See the Rails <a href="http://guides.rubyonrails.org/layouts_and_rendering.html#using-partials">Layouts and Views Guide</a> for more information on how partials work.</p>
+<p>Let&#8217;s extract our common header code from our <tt>subpage</tt> template. Here&#8217;s how the file looked earlier:</p>
+<div class="code_container"><code class="html">&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;
+  &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
+&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;en&quot; lang=&quot;en&quot;&gt;
+  &lt;head&gt;
+&lt;head&gt;
+  &lt;title&gt;&lt;%= page_title %&gt; | Our Fancy Site&lt;/title&gt;
+  &lt;style&gt;
+      body, html { margin: 0; padding: 0; text-align: center; }
+      #wrapper { width: 700px; margin: 0 auto; text-align: left; padding: 30px }
+      #main { float: left; width: 500px; }
+      #sidebar { float: right; padding: 0 30px 0 0; width: 150px;}
+  &lt;/style&gt;
+  &lt;%= yield :html_head %&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&lt;%= cms_toolbar %&gt;
+&lt;div id=&quot;wrapper&quot;&gt;
+  &lt;div id=&quot;header&quot;&gt;
+    Breadcrumbs: &lt;%= render_breadcrumbs %&gt;
+    Main Menu: &lt;%= render_menu %&gt;
+    &lt;h1&gt;&lt;%= page_title %&gt;&lt;/h1&gt;
+  &lt;/div&gt;
+  &lt;div id=&quot;main&quot;&gt;&lt;%= container :main %&gt;&lt;/div&gt;
+  &lt;div id=&quot;sidebar&quot;&gt;&lt;%= container :sidebar %&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;</code></div>
+<p>Create a new file called <tt>app/views/partials/_header.html.erb</tt>. By placing partials in this directory, they will match where the content repository based templates are written out to. This will allow templates to include partials regardless of where its data is stored. Copy/Paste code from <tt>subpage.html.erb</tt> so that <tt>_header.html.erb</tt> looks like this:</p>
+<div class="code_container"><code class="html">&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;
+  &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
+&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;en&quot; lang=&quot;en&quot;&gt;
+&lt;head&gt;
+  &lt;title&gt;&lt;%= page_title %&gt; | Our Fancy Site&lt;/title&gt;
+  &lt;style&gt;
+      body, html { margin: 0; padding: 0; text-align: center; }
+      #wrapper { width: 700px; margin: 0 auto; text-align: left; padding: 30px }
+      #main { float: left; width: 500px; }
+      #sidebar { float: right; padding: 0 30px 0 0; width: 150px;}
+  &lt;/style&gt;
+  &lt;%= yield :html_head %&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&lt;%= cms_toolbar %&gt;</code></div>
+<p>Then update <tt>subpage</tt> to look like this:</p>
+<div class="code_container"><code class="html">&lt;%= render :partial=&gt;&quot;partials/header&quot; %&gt;
+&lt;div id=&quot;wrapper&quot;&gt;
+  &lt;div id=&quot;header&quot;&gt;
+    Breadcrumbs: &lt;%= render_breadcrumbs %&gt;
+    Main Menu: &lt;%= render_menu %&gt;
+    &lt;h1&gt;&lt;%= page_title %&gt;&lt;/h1&gt;
+  &lt;/div&gt;
+  &lt;div id=&quot;main&quot;&gt;&lt;%= container :main %&gt;&lt;/div&gt;
+  &lt;div id=&quot;sidebar&quot;&gt;&lt;%= container :sidebar %&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;</code></div>
+<p>Now when you refresh a page using the Subpage template, it should look exactly the same.</p>
+                </td>
+              </tr>
+            </table>
+          </div>
+        </div>
+        <br clear="all"/>
+        <div class="bottom_cap"></div>
+      </div>
+    </div>
+  </body>
+</html>