Navigation Sidebar (for Dev. version)

With the addition of templates and the updated parser adding a sidebar no longer requires modification of any main dokuwiki scripts - only the local configuration file (local.php) and the template you are using.

I have been using your techniques for making a sidebar - thanks. I suggest however not to include code in local.php - I think it should only contain configuration overwrites. Rather, additional code (that logically belongs to a specific template) can be put in a file in the template directory and included in the main.php template file. — Jan Decaluwe (who was unable to register - a mail problem was reported).


Point taken, it was a hang over from the first implementation (before templates). I don't think the code actually belongs in the template file either. I have asked Andi via feature request if the sidebar function can make it into the current development version. I will also, post a feature request for a plug-in folder and configuration variable. Then the template file, main.php can include the sidebar function from a known place $conf['plugin_dir']."/sidebar.php". In the mean-time I will separate out the function into its own file and modify main.php to include it.

Notes

The html_navigate() function does all the work. It will display a navigation sidebar contained by
<div id='wiki_navigate'></div>.

  • the location of the sidebar is controlled by its stylesheet entry.
  • content will be from the standard wiki page indicated by the config value $conf['navigate'] or the wiki index information if that page doesn't exist.
  • styles for the display of sidebar are normal wiki styles. These can be overriden by adding additional special styles and prefixing them with #wiki_navigate. Some examples are shown in the css code below. Given the reduced space available, it makes sense to reduce the font sizes, reduce some of the margins and turn off TOC.
  • as the navigate page could well be an orphan, consider adding a self referencing link somewhere for easy modification.

CHANGE: conf/local.php

If you are not using the default Dokuwiki template, you must specify the name of the folder containing your template in the local.php file.

$conf['template']    = 'your template';   //override the default dokuwiki template, if required.

CHANGE: your template

General Instructions

  • Add @require_once(tplfn_sidebar.php); inside the <?php tags at the top of the main.php template file.
  • Add <? html_navigate(); ?> at the appropriate place in your template file to generate a navigation page.
  • Add styles for the display of the navigation page to the style sheet(s) used by your template. The navigation page is a standard wiki page. You should prefix any style rules specific to the navigation sidebar with the id or class of the container used to hold the sidebar in your template.

Implementation Methods

  1. modify main.php in the default template
  2. edit a copy of the default template
  3. using the html_navigate function within your own dokuwiki template

Method 1: Modify tpl/default/main.php

  • add the following line between the closing comment and the ?> at the top of the file (between lines 15 & 16)
 */
@require_once('tplfn_sidebar.php');   // line to add
?>
  • add the following line immediately prior to <div class="page"> (approx. line#88)
  <div id="wiki_navigate"><? html_navigate();?></div>
  • add your desired layout style to tpl/default/layout.css, for more information refer styles - layout below.
  • add any desired presentation styles to tpl/default/design.css, for more information refer styles - design below.

Method 2: Edit a copy of the default template

  • make a copy of /tpl/default folder, the name you give this folder is the name of your template (e.g. sidebar)
  • make the two changes described above to the file tpl/your template/main.php
  • change the template name setting in conf/local.php to the name of your template (e.g. $conf['template'] = 'sidebar';)
  • add your desired layout style to tpl/default/layout.css, for more information refer styles - layout below.
  • add any desired styles to tpl/your template/design.css, for more information refer styles below.

Method 3: Using html_navigate function within your own template

  • add the following line at or near the top of your main.php template file
@require_once('tplfn_sidebar.php');
  • add the following line at the appropriate place within your template
<div id="mynavigationtemplate"><? html_navigate(); ?></div>
  • prefix any styles you require to only affect the navigation sidebar with the id of your container div (e.g. #mynavigationtemplate). For more information refer styles below.

ADD: tplfn_sidebar.php

Place the following code in a file called tplfn_sidebar.php within the folder containing your template. There must be no blank lines before the opening <?php or after the closing ?>.

<?php 
/*
 * Provide navigation sidebar functionality to Dokuwiki Templates
 *
 * This is not currently part of the official Dokuwiki release
 *
 * @link   http://wiki.jalakai.co.uk/dokuwiki/doku.php?id=tutorials:dev:navigation_sidebar
 * @author Christopher Smith <chris@knowledge.tv>
 */
 
$conf['navigate']    = 'navigate';        //name of navigation page
 
// recursive function to establish best navigate file to be used
function getNavigateFN($ns, $file) {
 
	// check for wiki page = $ns:$file (or $file where no namespace)
	$nsFile = ($ns) ? "$ns:$file" : $file;
	if (file_exists(wikiFN($nsFile))) return $nsFile;
 
// remove deepest namespace level and call function recursively
 
	// no namespace left, exit with no file found	
	if (!$ns) return '';
 
	$i = strrpos($ns, ":");
	$ns = ($i) ? substr($ns, 0, $i) : false;	
	return getNavigateFN($ns, $file);
}
 
function html_navigate() {
	global $ID;
	global $REV;
	global $conf;
 
	// save globals
	$saveID = $ID;
	$saveREV = $REV;
 
	// discover file to be displayed in navigation sidebar	
	$fileNavigate = '';
 
	if (isset($conf['navigate'])) {
		$fileNavigate = getNavigateFN(getNS($ID), $conf['navigate']);
	}
 
	// determine what to display
	if ($fileNavigate) {
		$ID = $fileNavigate;
		$REV = '';
		print p_wiki_xhtml($ID,$REV,false);
	}
	else {
		html_index('.');
	}
 
	// close navigate <div>	and restore globals
	$ID = $saveID;
	$REV = $saveREV;
}
 
?>

ADD: Styles

Layout

The style to control where on the screen your navigation page will be displayed. If you have followed either methods 1 or 2 above then you can choose from one of the examples shown

sidebar displayed between top and bottom button bars

note: width of sidebar and width of div.page should add to nearly (but less than) 100%. A fixed pixel width sidebar would require extra markup to work flawlessly in IE.

#wiki_navigate {float:left; width:20%; margin:0; padding:2px; border-width: 0;}
#wiki_navigate {background-color: #ffffff; border-width:1px 2px 2px 1px; border-style:solid; border-color:#999999}
 
/* fix to contain effects of clears within div.page (so sidebar isn't cleared) */
div.page {float:left; width: 76%; margin:0; margin-left:2%;}

sidebar occupies its own colum on the left of the screen

note: the width assigned to the sidebar is the same as the new margin-left value for .dokuwiki.

/* make some space in the main dokuwiki <div> */
.dokuwiki {margin-left:180px; border-left: 1px solid black;}
#wiki_navigate {position:absolute; top:0; left:0; width:180px;}

Design

The navigation sidebar is really just an ordinary dokuwiki page. If you make no style rules concerning it, it will display in the same fashion as your normal pages do. The following are the style changes I use, primarily reduced font-sizes and reduced margin indentations.

#wiki_navigate {font-size:10px;}
#wiki_navigate a {color: green;}
#wiki_navigate a.wikilink2 {color:#999999;}
#wiki_navigate a.wikilink2:hover {text-decoration:none; cursor:default;}
#wiki_navigate h1 {font-size:140%; margin-left: 2px; padding-left: 2px; font-weight:bold; padding-bottom:0; background-color:#99cc99;}
#wiki_navigate h2 {font-size:120%; margin-left: 4px; font-weight:bold; padding-bottom:0;}
#wiki_navigate h3 {font-size:120%; margin-left: 8px; font-weight:normal; padding-bottom:0;}
#wiki_navigate h4 {font-size:100%; margin-left: 12px; font-weight:bold; padding-bottom:0;}
#wiki_navigate h5 {font-size:100%; margin-left: 16px; font-weight:normal; padding-bottom:0;}
#wiki_navigate .toc {display:none;}
 
tutorials/dev/navigation_sidebar.txt · Last modified: 2010/05/31 16:21 (external edit)
 
Recent changes RSS feed Creative Commons License Donate Powered by PHP Valid XHTML 1.0 Valid CSS Driven by DokuWiki