Layout entwerfen

Seite noch beim Zusammenstellen!

Überarbeiten: siehe /Doc/English/ThemeGuide

1. Layout

sketch of a page’s desired layout


<!DOCTYPE html>
<div class="wrapper">
  <header>...</header>
  <main>
     <article>...</article>
     <nav>...</nav>
     <aside>...</aside>
  </main>
  <footer>...</footer>
</div>

2. Elemente

Das erste Code-Beispiel ist aus der zugehörigen PHP-Datei, die die Variablen $tpl->variable definiert und das zweite aus der zugeordneten Template-Datei.
theme layout elements


Einzeln erklärt und beschrieben:


Lesezeichen
Anmelden / Abmelden
Suchfeld
Pfad + Seite
Editieren
Revisionen
Besitzer
Berechtigungen
Einstellungen
Umbenennen
Löschen
Beobachten
Drucken


Kommentare
Dateien

2.1.1. breadcrumbs


<?php

$tpl->breadcrumbs    = $this->get_page_path(false, ' > ', true, true);

	

<nav class="breadcrumb">
	[ ' breadcrumbs ' ]
</nav>

2.1.2. usertrail


<?php

$tpl->usertrail        = $this->get_user_trail(true, ' > ', true, $size = 8);

	

<nav class="usertrail">
	[ ' usertrail ' ]
</nav>

2.1.3. page handler


<?php

// defining tabs constructor
//    $image = 0 text only, 1 image only, 2 image and text
$echo_tab = function ($method, $hint, $title, $image, $tab_class = '', $access_key = '', $params = null) use (&$tpl)
{
    $tpl->class = $tab_class ?: ('m-' . $method);

    if ($this->method === $method)
    {
        $tpl->active = ' active';
        $tpl->enter('in_');
    }
    else
    {
        $tpl->enter('out_');
        $tpl->method    = ($method == 'show' ? $this->href() : $this->href($method));
        $tpl->hint        = $this->_t($hint);
        $tpl->params    = $params;

        if ($access_key !== '')
        {
            $tpl->key = $access_key;
        }
    }

    $image == 1 or $tpl->t_title    = $this->_t($title);
    $image == 0 or $tpl->t_im_title    = $this->_t($title);
    $tpl->leave();
};

$tpl->enter('tab_');

$echo_tab('show', 'ShowTip', 'ShowText', 1, '', 'v');

// [...] other handlers

// show more tab
$tpl->leave();
$tpl->enter('droptab_tab_');

// print tab
if ($readable)
{
    $echo_tab('print', 'PrintVersion', 'PrintText', 2, '', 'v', ' target="_blank" rel="noopener"');
}


// [...] other handlers

$tpl->leave();

	

<ul class="submenu">

	[= tab TabList =
		<li class="[ ' class ' ][ ' active ' ]">
			[= in _ =
				<span>[ '' t TabTitle | trim '' ]</span>
			=]
			[= out _ =
				<a href="[ ' method ' ]" title="[ ' hint ' ]"
					[ ' key | e attr | enclose ' accesskey="' '"' ' ][ ' params ' ]>[ '' t TabTitle | trim '' ]</a>
			=]
		</li>
	=]
	[= droptab _ =
		<li class="dropdown"><a href="#" id="handler-more">[ ' _t: PageHandlerMoreTip ' ]<span class="dropdown-arrow">▼</span></a>
			<ul class="dropdown_menu">
				['' tab TabList '']
				['' // last empty '']
				<li></li>
			</ul>
		</li>
	=]
</ul>

2.2. Sidebar

2.2.1. toc


<?php

// side bar toc list
if ($this->db->hide_toc == 0)
{
    // display the page toc list, numerated, without labels and markup
    $tpl->toc_action = $this->action('toc', ['numerate' => 0, 'nomark' => 0]);
}

	

[= toc =
	<div id="sidebar-toc-wrapper" class="toc-wrapper sidebar-box">
		<header id="sidebar-toc-header" class="toc-header sidebar-box-header">
			[ ' // _t: TOCTitle ' ]
		</header>
		<div id="sidebar-toc" class="sidebar-toc-list">
			[ ' action ' ]
		</div>
	</div>
=]

2.2.2. categories


<?php

// display the categories for this page
$tpl->categories_action    = $this->action('categories', ['list' => 1, 'nomark' => 1]);

	

[= categories =
	<div id="sidebar-categories-wrapper" class="categories-wrapper sidebar-box">
		<header id="sidebar-categories-header" class="page-categories-header sidebar-box-header">
			[ ' // _t: Categories ' ]
		</header>
		<nav id="sidebar-categories-list" class="sidebar-categories-list">
			[ ' action ' ]
		</nav>
	</div>
=]

2.2.3. tagcloud


<?php

// display the tag cloud this page
$tpl->tagcloud_action    = $this->action('tagcloud', ['nomark' => 1]);

	

[= tagcloud =
	<div id="sidebar-tagcloud-wrapper" class="tagcloud-wrapper sidebar-box">
		<header id="sidebar-categories-header" class="categories-header sidebar-box-header">
			[ ' // _t: Categories ' ]
		</header>
		<nav id="sidebar-categories-list" class="sidebar-categories-list">
			[ ' action ' ]
		</nav>
	</div>
=]

2.2.4. tree


<?php

// page tree
if ($this->db->hide_index == 0)
{
    // display all subpages for this page/cluster, 3 levels down
    $tpl->tree_action = $this->action('tree', ['page' => $this->tag, 'depth' => 3, 'nomark' => 1]);
}

	

[= tree =
	<div id="sidebar-tree-wrapper" class="tree-wrapper sidebar-box">
		<header id="sidebar-tree-header" class="tree-header sidebar-box-header">
			[ ' // _t: Cluster' ' ]
		</header>
		<nav id="sidebar-tree" class="sidebar-tree">
			[ ' action ' ]
		</nav>
	</div>
=]

2.2.5. bookmarks


<?php

// user bookmarks

$tpl->enter('smenu_menu_');

foreach ((array) $this->get_menu() as $menu_item)
{
    $tpl->commit = true;

    if ($this->page['page_id'] == $menu_item[0])
    {
        $tpl->active_item    = $menu_item[1];
    }
    else
    {
        $tpl->item_link        = $this->format($menu_item[2], 'post_wacko');
    }
}

$tpl->leave();

if ($logged_in)
{
    // determines what it should show: "add to menu" or "remove from menu" icon
    if (!in_array($this->page['page_id'], (array) $this->get_menu_links()))
    {
        $tpl->addmark_href        = $this->href('', '', ['addbookmark' => 1]);
    }
    else if (!$this->get_menu_default())
    {
        $tpl->removemark_href    = $this->href('', '', ['removebookmark' => 1]);
    }
}

	

[= smenu =
	<div id="sidebar-user-bookmarks-wrapper" class="user-bookmarks-wrapper sidebar-box">
		<header id="sidebar-user-bookmarks-header" class="user-bookmarks-header sidebar-box-header">
			<span>
			[ ' // _t: Bookmarks ' ]
			</span>
		</header>
		<nav id="sidebar-user-bookmarks-list" class="sidebar-user-bookmarks-list">
			<ol>
				[= menu =
					[ ' commit | void  // alternation hack ' ]
					[= item _ =
						<li>[ ' link ' ]</li>
					=]
					[= active _ =
						<li class="active"><span>[ ' item ']</span></li>
					=]
				=]

				[= addmark _ =
					<li>
						<a href="[ ' href ' ]">
							<img src="[ ' db: theme_url ' ]icon/spacer.png" alt="+" title="[ ' _t: AddBookmark ' ]" class="btn-addbookmark">
						</a>
					</li>
				=]
				[= removemark _ =
					<li>
						<a href="[ ' href ' ]">
							<img src="[ ' db: theme_url ' ]icon/spacer.png" alt="-" title="[ ' _t: RemoveBookmark ' ]" class="btn-removebookmark">
						</a>
					</li>
				=]
			</ol>
		</nav>
	</div>
=]

3. Dateien


Kommentarleiste ausblenden


<?php
  $this->db->hide_comments = 1;
?>

Dateileiste ausblenden


<?php
  $this->db->hide_files = 1;
?>


Aktionen einbinden:


<? echo $this->format( '{{hits}}' );?>

Ausblenden von Elementen für nicht angemeldete Nutzer:


<?
if ($this->get_user())
{ 
// auszublendender Teil / Elemente
}
?>

4. Bilder


Bilder einbinden


<input type="image" 
src="<?php echo $this->db->theme_url; ?>icon/bild.png" alt="alternativ Text" />

Bsp. mit Link hier ...


ggf. eigner Ordner /img und dann img/bild.png

5. HTML


HTML Struktur

5.1. Kontainer

<div id="mainwrapper">
  <header>
    <div id="header-main">
      <div id="header-site"></div>
      <div id="login-box"></div>
    </div>
    <nav class="menu-main">
      <div id="menu-user"></div>
      <div id="page-handler"></div>
    </nav>
    <nav class="breadcrumb"></nav>
  </header>
  <main>
    <article id="page"></article>
    <div id="header-files"></div>
    <div id="header-comments"></div>
  </main>
  <footer>
    <nav class="footer"></nav>
      <div class="page-meta"></div>
    <div id="credits"></div>
  </footer>
</div>

6. CSS


CSS Struktur

6.1. Datei 'wacko.css?' des Standard-Themes 'default'

6.2. Elemente


HTML Wiki Bemerkung
<strong> ** ** fett
<em>// // kursiv
<span class="underline">__ __ unterstrichen
<small>++ ++ klein
<code>## ## monospace
<del>-- -- durchgestrichen
<div style="text-align: center;">>> << zentriert
<span class="cite">!! !! Hinweis
<span class="cl-blue">!!(blue) !! Hinweis blau
<span class="cl-green">!!(green) !! Hinweis grün
<span class="cl-red">!!(red) !! Hinweis rot
<span class="mark">??rot ?? hervorgehoben
<textarea class="code">%% %% eingebetteter Quelltext
<h1>== == Haupt-Überschrift
<h2>=== == Grosse Überschrift
<h3>==== == Mittelgrosse Überschrift
<h4>===== == Kleinere Überschrift
<h5>====== == Kleine Überschrift
<h6>======= == Kleinste Überschrift
<blockquote><[ ]> Zitat
<dfn title="Def">Bez</dfn>(? Bez == Def ?) Bezeichnung, Definition
<hr noshade="noshade" size="1">---- Linie

6.3. Vorlage

/***********************************************************************
* Allgemein
***********************************************************************/
 
html * {}
body   {}
 
/* Links */
a:link    {}
a:visited {}
a:hover   {}
a:active  {}
a:focus   {}
 
/* Formular */
form     {}
textarea {}
 
/* Copyright am Ende */
.credits {}
.credits a {}
 
/* Gruppierungen (Feldgruppe) */
.fieldset {}
 
/* Seiten-Vorschau (Editieren) */
.preview {}
.preview legend {}
 
/* Seite */
.page {}
 
/* Seitenkopf */
.pageBefore {}
 
/* Seiten-Vorschau */
.pageedit {}
 
/* Header, Footer */
.header {}
.footer {}
 
/* Span: \'Suche:\', Input */
.searchbar {}
 
/* kein Textumbruch */
.nobr {}
 
/* Wiki-Name (header.php) */
.main
 
/***********************************************************************
* Wiki-Formatierungen
***********************************************************************/
 
/* fett, kursiv, unterstrichen, klein, monospace, durchestrichen */
strong {}
em     {}
.underline      {}
small  {}
code     {}
del      {}
 
/* Hinweis, blau, grün, rot, hervorgehoben, eingebetteter Code */
.cite     {}
.cl-blue  {}
.cl-green {}
.cl-red   {}
.mark     {}
.code {}
 
/* Messenger Code */
.micq1 {}
.micq2 {}
.micq3 {}
 
/* E-Mail */
.email1 {}
.email2 {}
 
/* Überschriften */
h1 {}
h2 {}
h3 {}
h4 {}
h5 {}
h6 {}
 
/* Definition */
dfn {}
 
/* Zitat */
blockquote {}
 
/* Inhaltsverzeichnis-Ebenen: Divs */
.toc1 {}
.toc2 {}
.toc3 {}
.toc4 {}
.toc5 {}
.toc6 {}
 
/***********************************************************************
* Dateien, Kommentare
***********************************************************************/
 
/* Überschriften: Div, Link */
 
.filesheader, .commentsheader {}
.filesheader a, .commentsheader a {}
 
/* Listen: */
 
.files, .comment { /* Div */ }
 
table.upload td { /* alle Zellen */ }
table.upload td.dt- { /* Zelle Datum */ }
table.upload td.dt- .dt2- { /* Span Datum */ }
table.upload td.remove- { /* Zelle Löschen */ }
table.upload td.remove- a.remove2- { /* Link Löschen */ }
table.upload tsize- { /* Zelle Größe */ }
table.upload tsize-size2- { /* Span Größe */ }
table.upload td.file- { /* Zelle Dateiname */ }
table.upload td.file- a { /* Link Dateiname */ }
table.upload td.desc- { /* Zelle Beschreibung */ }
 
.commentinfo { /* Div (Name, Zeit) */ }
.commentinfo a { /* Link Name */ }
 
/* Formulare: */
 
.filesform, .commentform { /* Div */ }
.filesform td, .commentform td { /* Alle Zellen */ }
.filesform input, .commentform input { /* Alle Inputs */ }
 
.commentform form textarea { /* Textarea Kommentare */ } 

7. Aufgaben

  • Codebeispiele für andere Startseite für angemeldete Benutzer / + individuelle Startseite nach Anmeldung
  • verstecken aller Interaktionselemente für nicht angemeldete Nutzer -> Wiki als Webseite / CMS