Jump to content

KDE.org/Capacity HOWTO

From KDE Community Wiki
< KDE.org
Revision as of 22:33, 19 December 2010 by Neverendingo (talk | contribs)

Introduction

Capacity is a versatile framework which helps you to construct your page by focusing on the content. Your pages will be simple PHP-files which include predefined header and footer. This header/footer layout the page, you only provide the real content and menu structure.


Example PHP-file

Any normal page just contains:

<?php 

 $page_title = "Page Title";
 include "header.inc";

?>; 

 Content of the web page

<?php include "footer.inc"; ?>

The magic site.inc

For each subsite, a site.inc in the toplevel directory of this page, which would be equal to the later documentroot on the server in many cases, may be created. This include is used by the header.inc, it should contain some information about your site, like its name and the email address of the webmaster, this will be used by header/footer to setup the page correct.

An example site.inc would be:

<?php 

 // promote which subdomain we are
 // we are www.kde.org in this case!
 $site = "www";

 // use new style ;) yeah
 $templatepath = "newlayout/";

 // promote title to use
 $site_title = i18n_var("K Desktop Environment");

 // links in the top bar, right
 $menuright = array ('family/'=>'Sitemap',
   'contact/'=>'Contact Us');

?>

Even in the site.inc you can already use the i18n-functions, which is important to have the names right on translated pages!

Global Variables setup by header.inc

The header.inc does some setup of global vars, even before it includes the site.inc, these are:

$site_root $document_root $url_root $current_relativeurl

  • $site_root contains the relative path to the toplevel of the current site, like:

$site_root = "../.."

  • $document_root contains the absolute pathname which is the documentroot of this site, even correct if the site isn't in it's own vhost. Example:

$document_root = "/home/www/sites/www"

  • $url_root contains the absolute base url to the toplevel of your site, if your site would, for example, have a it's toplevel in http://127.0.0.1:8080/sites/www, like it is for staging, this would contain:

$url_root = /sites/www

$current_relativeurl = whatiskde/manifest.php

BE AWARE: In former version of the framework it was common to set the $site_root manually before including the header.inc, this won't work now, as the header.inc will overwrite the $site_root. This should cause no danger, as header.inc should find out the right one, but in the long term, all manual definitions should be removed, the global variables header.inc exports should be used to replace the usage of the old $site_root.

The framework is clever, it will never add trailing slashs to the $site_root, $document_root and $url_root, therefor they can and must always be used like: $some_url = "$site_root/mycoolpage.php"

Configuration Variables

You can set some variables to alter the behaviour of the framework, either global in your site.inc or in front of your header.inc inclusion in each .php-files.

Useful variables are:

  • The Name for your whole subdomain/site, best set once in site.inc

$site_title = "KDE Foo Site Title";

  • The title of the individual page.

$page_title = "Page Title";

  • Don't show edit function on the page. The default is $showedit = true;. This setting should normally not be used. site.inc is the preferred place.

$showedit = false;

Online Editing

Capacity features online editing and previewing of changes.

You can make and preview changes of existing pages online by clicking on the [edit] link at the bottom of each page. Try it on this page. Then you can download you changes and commit them yourself via SVN, or you can click the link to email a unified diff to the web team.

Menu Definitions

You can choose among two menu parsers: PlasmaMenu and KDE menu.

PlasmaMenu is a newer implementation, which is designed to work with a jQuery powered interface and provide a plasma like look and feel. PlasmaMenu has additional features like smooth transition effects, CSS fallback where JavaScript is unavailable, automated generation of breadcrumbs and maintenance from a single configuration file.

Plasma Menu

The Plasma Menu

PlasmaMenu is controlled by plasmaMenu.inc file located at the root of the site (e.g. http://www.kde.org/plasmaMenu.inc). Only one instance of this file is required and it is included in media/includes/header.inc.

PlasmaMenu supports child menus till one level, i.e. you can add one sub-menu to a parent menu entry.

An illustration:

Category1 Category2 Category3

===========================
----------

| Entry1 | -------- | Entry2 > | | Sub1 | | Entry3 | | Sub2 | 

----------   --------

To design the structure as displayed above, your plasmaMenu.inc should look like this:

<?php global $plasmaMenu;

$plasmaMenu->addMenu("Category1", "/link/to/category1/"); 

   $plasmaMenu->addMenuEntry("Entry1", "/link/to/entry1/");
   $plasmaMenu->addMenuEntry("Entry2", "/link/to/entry2/");
       $plasmaMenu->addSubMenuEntry("Sub1", "/link/to/sub1/");
       $plasmaMenu->addSubMenuEntry("Sub2", "/link/to/sub2/");
   $plasmaMenu->addMenuEntry("Entry3", "/link/to/entry3/");

$plasmaMenu->addMenu("Category2", "/link/to/category2/"); 

  /* Category 2 entries */

$plasmaMenu->addMenu("Category3", "/link/to/category3/"); 

  /* Category 3 entries */

?>

As PlasmaMenu is of click-to-open nature, the category name does not point to the destination page. Instead, the menu parser adds an extra entry having the name as the menu category (see screenshot) that points to your desired location.

The addMenuEntry() and addSubMenuEntry() functions accept 3 arguments:

$plasmaMenu->addMenuEntry("Entry Name", "/link/to/entry", "icon.png");

Here, icon.png is a 16*16 icon located inside the media/images/plasmaMenu folder. Please note that it is recommended to use an icon of width and height not more than 16 pixels to avoid an improper menu layout.

KDE Menu

The KDE Menu

The navigation menu is defined by a number of menu.inc files. They are included by a function in media/includes/classes/class_menu.inc, which is called from media/includes/header.inc. The general menu structure is defined in the menu.inc file of the root directory of each KDE subsite (e.g. http://www.kde.org/menu.inc or http://www.kde.org/areas/kde-ev/menu.inc).

It should look like this: <?php 

 $this->setName ("KDE Foo Site Title");
 $section =& $this->appendSection("Inform");
 $section->appendLink("Home","");
 $section->appendLink("KDE Home","http://www.kde.org/",false);
 
 $section =& $this->appendSection("A Second Menu Section");
 $section->appendDir("A Subdirectory","subdirectory");
 $section->appendLink("A Single Page","singlepage.php");

?>

Also you could show a little 16x16 Icon for each menu item.You should give the Icon url as the last argument to the appendDir or appendLink:

<?php 

 $section->appendDir("A Subdirectory","subdirectory", true, false, "icon.png");

in the Above code, first argument is the title of the menu, second argument is the url, third argument defines that if this menu item is relative, forth argument should be True if it links to a directory and last argument is the Icon

To show an Icon with appendDir, just add icon url as the third argument, like this: 

 $section->appendDir("A Subdirectory","subdirectory", "icon.png");

Each mentioned subdirectory will then also be searched for a menu.inc file to define a submenu (e.g. http://www.kde.org/whatiskde/menu.inc).

The format is similar: <?php 

 $this->appendDir("A Subsubdirectory","subsubdirectory");
 $this->appendLink("A Page in the Subdirectory","singlepage.php");

?>

The content of subsubdirectories is currently not added to the menu, but this may change in future. If a subdirectory has just the index.php file or a submenu for the subdirectory is not desired, then an empty menu.inc can be added. If the menu.inc is missing, then the subdirectory is be treated like having an empty menu.inc file.

Headlines

The main headline of a page is defined via $page_title. If a page has several sections with a headline each, <h2> is used for them (<h3> for subsections):

<a name="section1" />Section Headline

Subsection Headline

Headlines must never be used to increase the size of a text. Use <b> to make it stick out. The first letters of every word of a headline or link should be capitalized, apart from small words like "a", "to", etc.

To allow better navigation through the site, each <h2> heading should be linked from a quicklinks section on top of the page:

Retrieved from "https://community.kde.org/index.php?title=KDE.org/Capacity_HOWTO&oldid=7821"