#||
||
Seite noch beim Zusammenstellen! | {{toc numerate="1"}} ||
||#
Überarbeiten: siehe ((/Doc/English/ThemeGuide))
===Layout===
file:/layout_order_page.svg
%%(hl html)
<!DOCTYPE html>
<div class="wrapper">
<header>...</header>
<main>
<article>...</article>
<nav>...</nav>
<aside>...</aside>
</main>
<footer>...</footer>
</div>
%%
===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.
file:/layout_elements.svg
Einzeln erklärt und beschrieben:
Lesezeichen
Anmelden / Abmelden
Suchfeld
Pfad + Seite
Editieren
Revisionen
Besitzer
Berechtigungen
Einstellungen
Umbenennen
Löschen
Beobachten
Drucken
Kommentare
Dateien
=====breadcrumbs=====
%%(php)
<?php
$tpl->breadcrumbs = $this->get_page_path(false, ' > ', true, true);
%%
%%
<nav class="breadcrumb">
[ ' breadcrumbs ' ]
</nav>
%%
=====usertrail=====
%%(php)
<?php
$tpl->usertrail = $this->get_user_trail(true, ' > ', true, $size = 8);
%%
%%
<nav class="usertrail">
[ ' usertrail ' ]
</nav>
%%
=====page handler=====
%%(php)
<?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>
%%
====Sidebar====
=====toc=====
%%(php)
<?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>
=]
%%
=====categories=====
%%(php)
<?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>
=]
%%
=====tagcloud=====
%%(php)
<?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>
=]
%%
=====tree=====
%%(php)
<?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>
=]
%%
=====bookmarks=====
%%(php)
<?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>
=]
%%
===Dateien===
Kommentarleiste ausblenden
%%(php)
<?php
$this->db->hide_comments = 1;
?>
%%
Dateileiste ausblenden
%%(php)
<?php
$this->db->hide_files = 1;
?>
%%
----
Aktionen einbinden:
%%(php)
<? echo $this->format( '{{hits}}' );?>
%%
Ausblenden von Elementen für nicht angemeldete Nutzer:
%%(php)
<?
if ($this->get_user())
{
// auszublendender Teil / Elemente
}
?>
%%
===Bilder===
Bilder einbinden
%%(php)
<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
===HTML===
HTML Struktur
====Kontainer====
%%(hl html)
<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>
%%
===CSS===
CSS Struktur
====Datei '((../CSS/WackoCss wacko.css))' des Standard-Themes 'default'====
====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 ||
||#
====Vorlage====
%%(css)
/***********************************************************************
* 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 tdsize- { /* Zelle Größe */ }
table.upload tdsize- 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 */ }
%%
===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