MediaWiki扩展：标签式菜单
天下维客，你可以修改的网络知识库
本文取自元维基，欢迎共同翻译、整理与大家共享，促进中文wiki发展^_^
目录 |
更新
这个扩展已经修改成可以再任何 skin/template下运行，不用修改CSS,因为现在CSS已经集成到了这个扩展文件中了
Introduction
Whilst building our internal Wiki it became apparent to those new to the idea that navigation could be improved upon. A member of my team loved the way that http://www.apple.com top menu navigation system worked i.e. you have a main menu with sub menu items underneath. I was asked as to whether this could be replicated in MediaWiki and so set about the task. The fruits of my labour are detailed below. The credit for the CSS code goes to http://labs.silverorange.com/archives/2004/may/updatedsimple
扩展代码
Copy the following code into a file called MenuTabs.php and save this in the extensions directory:
<?php
# To activate the extension, include it from your LocalSettings.php
# with: include("extensions/MenuTabs.php");
$wgExtensionFunctions[] = "wfMenuTabs";
$wgExtensionCredits['other'][] = array(
'name' => 'MenuTabs',
'author' => 'Robert Castley',
'description' => 'allows for the creation of a menu navigation bar on each page if desired ');
function menuTabsCSS() {
global $wgOut;
$css = <<<eof
<style type="text/css">
#main { border-top: 1px solid #666; clear: both; width: 100%; }
#contents { background: #9aa4b3; border-top: 2em solid #e6f0ff; }
#header { position: relative; width: 100%; height: 2em; width: 45em; }
#header ul#primary { margin: 0; padding: 0; position: absolute; bottom: -1px; left: 20px; width: 45em; }
#header ul#primary li { display: inline; list-style: none; }
#header ul#primary a,#header ul#primary span,#header ul#primary a.current, #header ul#primary strong {
width: auto; display: block; float: left; padding: 4px 0px; padding-left: 4px;
padding-right: 4px; margin-top: 1px; margin-right: 2px; text-align: center; font-family: Arial;
font-size: 85%; text-decoration: none; color: #333; }
#header ul#primary span,#header ul#primary a.current,#header ul#primary a.current:hover, #header ul#primary strong {
border: 1px solid #666; border-bottom: none; background: #e6f0ff;
padding-bottom: 6px; padding-left: 4px; padding-right: 4px; margin-top: 0; }
#header ul#primary a { background: #bbc8da; border: 1px solid #AAA; border-bottom: none; }
#header ul#primary a:hover { margin-top: 0; border-color: #666; background: #FFF7CD; padding-bottom: 5px; }
#header ul#secondary { position: absolute; margin: 0; padding: 0; bottom: -1.4em; left: 1px; width: 50em; }
#header ul#secondary li a,#header ul#secondary li span ,#header ul#secondary li strong {
width: auto; display: block; float: left; padding: 0 5px;
margin: 0; text-align: center; border: none; border-left: 1px dotted #AAA;
background: none; }
#header ul#secondary li a { color: #06C; text-decoration: underline; }
#header ul#secondary li a:hover { color: #333; background: transparent; padding: 0 5px; border: none;
border-left: 1px dotted #AAA; }
#header ul#secondary li a:active { color: #333; font-weight: normal; background: transparent; }
#header ul#secondary li:first-child a, #header ul#secondary li:first-child span { border: none; }
</style>
eof;
$wgOut->addHTML($css);
}
function wfMenuTabs() {
global $wgParser;
menuTabsCSS();
$wgParser->setHook( "maintab", "renderMainTab" );
$wgParser->setHook( "subtab", "renderSubTab" );
}
function renderMainTab( $input ) {
global $wgOut;
global $wgTitle;
global $wgRequest;
global $wgUser;
global $wgParser;
$parserOptions = ParserOptions::newFromUser( $wgUser );
$parser = & new Parser();
$item = '';
$title = $wgRequest->getVal( 'title' );
$title = preg_replace("/_/", " ", $title);
$fields = explode("||",$input);
$prepend = "<div id=\"header\">\n";
$prepend .= "<ul id=\"primary\">\n";
foreach ($fields as $field) {
if ($title == $field) {
$item .= "<li><span>$field</span></li>\n";
} else {
$item .= "<li>$field</li>\n";
}
}
$output = & $parser->parse($item, $wgTitle, $parserOptions);
$linkoutput = $output->getText();
return $prepend . $linkoutput;
}
function renderSubTab( $input ) {
global $wgOut;
global $wgTitle;
global $wgRequest;
global $wgUser;
global $wgParser;
$parserOptions = ParserOptions::newFromUser( $wgUser );
$parser = & new Parser();
$item2 = '';
$fields2 = explode("||", $input);
$prepend = "<ul id=\"secondary\">\n";
foreach ($fields2 as $field2) {
if ($field2!= '') {
$item2 .= "<li>$field2</li>\n";
}
}
$output = & $parser->parse($item2, $wgTitle, $parserOptions);
$linkoutput = $output->getText();
$append = "</ul>\n";
$append .= "</ul>\n";
$append .= "</div>\n";
$append .= "<div id=\"main\">\n";
$append .= "<div id=\"contents\"></div>\n";
$append .= "</div>\n";
return $prepend . $linkoutput . $append;
}
?>
The add the include statement to your LocalSettings.php:
include("extensions/MenuTabs.php");
用法
To generate your tabs you use the tags <maintab>...</maintab> and <subtab>...</subtab>. BOTH MUST BE USED TOGETHER EVEN IF SUBTABS DO NOT EXIST e.g.
Main Tabs with Sub Tabs
<maintab>[[Main Page|Home]]||[[Professional Services]]||[[Sales]]||[[Software]]||[[Support]]||[[Corporate]]</maintab> <subtab>[[PS Best Practices]]||[[Documentation]]||[[Training]]||[[Group Services]]||[[Webinars]]||[[Cool Tools]]</subtab>
Main Tabs with empty Sub Tabs
<maintab>[[Main Page|Home]]||[[Professional Services]]||[[Sales]]||[[Software]]||[[Support]]||[[Corporate]]</maintab> <subtab></subtab>
例子
You should then end up with something looking similar to the following screenshot:
<a href="/index.php?title=Special:Upload&wpDestFile=MenuTabs2.png" class="new" title="Image:MenuTabs2.png">Image:MenuTabs2.png</a>
<a href="/index.php?title=Special:Upload&wpDestFile=MenuTabs3.png" class="new" title="Image:MenuTabs3.png">Image:MenuTabs3.png</a>
Usage in a production Wiki
The way I have implemented this into our Wiki is to add MenuTab code into a template and then include that template on each Wiki page. Therefore, every single page in the Wiki has it's own nice CSS tabbed navigation to take you to key areas within the Wiki.
原文参见： MenuTabs
