This page is used for storing and editing the handbook's navigation bar. Each handbook page should use JavaScript to load the contents of this sidebar into the current page's sidebar.
All JS and CSS is kept on this page.
Handbook Layout
One of the main ideas behind the new handbook design is to discourage deep navigation (pages with subpages with subpages, etc) by maintaining a flatter page hierarchy. Therefore, there should be no subpages beyond each of the handbook pages.
Each handbook page exists as a subpage of the main /handbook page (see the URL at the top). The main /handbook page itself only serves as a placeholder (so relative links function correctly), so some JavaScript code is set up to automatically redirect users from that page to the introduction page (i.e. the URL ending with /handbook/introduction).
The only way to edit or disable the redirect is to navigate via the SiteBuilder settings (e.g., on this page, click on Edit -> More -> navigate to the main handbook page settings -> edit centre content from there). You cannot access the edit button from the page itself as you will simply be redirected.
Editing the Handbook
Permissions
Permissions should be applied via the top level handbook page (use the SiteBuilder page settings to navigate to this, via Edit -> More, as the page itself will redirect you back to the 'Introduction' page) and cascaded to each subpage.
Critical: Ensure you check the view permissions for all pages are set up correctly for students before making the handbook live.
Existing Pages
You can simply use the SiteBuilder Components Editor to edit the existing handbook pages.
Important: Do not delete the empty left-hand column! This is used for the navigation sidebar.
Creating New Pages
The simplest way to start is by copying one of the existing pages (but check that page properties, especially the Page Contact, are correct before you do this), as this will also copy the required layout, CSS and JavaScript code.
- Each page header loads the styling (handbook.css) and code (handbook.js) from this page.
- Each page uses a preset block layout (from the Components Editor) with a 2/12 10/12 or 3/12 9/12 (default) split. The smaller block is left empty as the code will load the navigation bar into that space. Changing the smaller block size to anything other than 2/12 or 3/12 will prevent the navigation bar from loading.
- The larger block uses a custom editable HTML component with all contents contained within a div with the class 'handbook-page-content'. You should be able to edit this visually with the usual Components Editor tools.
- If you are comfortable editing HTML, you can do so, but don't delete the handbook-page-content class on the container div (this is used by the JavaScript and CSS).
- Once the page is created, you can edit the navigation sidebar here to link to it.
Table of Contents
Each page auto-generates a table of contents using any 'Header 2' (h2) headers and 'Header 3' (h3) headers. These will point to sections of the page, but will not be linked until you add anchors to the headers (see below):
Adding anchors via the Components Editor
- Click on the space just after the header in question
- Locate the 'Add new anchor' option from the Components Editor menu, and choose an appropriate name (usually a single word, or multiple words connected by hyphens)
Adding anchors via HTML
Simply add an empty anchor element with an ID to the header. For example:
<h2>Navigation<a id="navigation"></a></h2>
<h3>Sublists<a id="sublists"></a></h3>
Navigation
Each handbook page pulls its navigation sidebar from this page. All links should therefore be relative to this page (don't worry if you don't know what that means - just follow the format already in the sidebar links using double periods and a forward slash, e.g. ../introduction, ../sample-page, etc).
Example: if you create a new page with the URL 'badgers', you would then need to edit the navigation HTML on this page and add the following line:
<li><a href="../badgers">Badgers</a></li>
Likewise, if you delete a page, you will also need to remove the corresponding line from the navigation HTML.
Please ensure that the classes in the navigation bar's HTML code are not changed.
Sublists
If you wish to create a sublist of links in the navigation bar under a particular title, you can do so by creating a new list within a list item.
Example: if you have a set of pages for food such as 'Bananas', 'Bacon' and 'Aspic', you can group them together under a single list item:
<li>Food<ul>
<li><a href="../bananas">Bananas</a></li>
<li><a href="../bacon">Bacon</a></li>
<li><a href="../aspic">Aspic</a></li>
</ul></li>
Search Box
The navigation bar has a small embedded search box at the top, which searches through all subpages below the main handbook page (this has already been set up with a relative URL so you shouldn't need to edit it).
Printing
The handbook contains code to generate a date-stamped PDF printout. The button is located at the top of each handbook page.
All pages, barring the navigation (i.e. this page), are included in the printout.
Creating a New Handbook
As the handbook is designed to be self-contained, carries its code and CSS from this navigation page, and uses relative links, creating a new handbook (for example, if you want to create one for a new academic year) should simply be a case of copying the entire handbook to a new location, then editing it.