Contao Community Documentation - Benutzerbeiträge [de]

Installation in Unterverzeichnis

2013-10-26T17:23:38Z

Geraldo: Probleme unter 3.1.x

{{AppliesTo
|Version=ab Version 2.9
|Ext1=FolderURL}}

[[Category:Installation und Updates]]

=Ausgangssituation=
Contao soll auf einem Server in einem eigenen Unterverzeichnis installiert werden. Dies kann aus verschiedenen Gründen erforderlich sein, beispielsweise:
# um das Rootverzeichnis sauber und übersichtlich zu halten
# weil mehrere Sites aus einem Rootverzeichnis zu hosten sind
# weil parallel zu Contao auch andere Applikationen gespeichert werden sollen
# weil neben den dynamischen Seiten von Contao auch statische Seiten gehostet werden
# usw.

=Das Ziel=
Unter den unten beschriebenen Umgebungsbedingungen soll folgendes umgesetzt werden (alle Pfade sind nur Beispiele)
# Durch Aufruf von "http://www.meinedomain.de/" oder bei lokaler Installation "http://localhost/" soll die index.php in "www/cms/" aufgerufen werden
# Der Aufruf der Contao Seiten soll durch z.B. "http://www.meinedomain.de/index.html" oder "http://www.meinedomain.de/unterseiten/meine_unterseite.html" mit leicht lesbaren und suchmaschinenfreundlichen URLs erfolgen. Zu diesem Zweck ist auch FolderURL installiert.
# Die Navigation innerhalb der mit Contao realisierten Webiste soll ohne den Pfadteil .../cms/.. erfolgen. Also NICHT: "http://www.meinedomain.de/cms/unterseite/meine_unterseite.html"
# Wird eine statische Website im www-Rooverzeichnis z.B. "http://www.meinedomain.de/gibts_in_echt.html" aufgerufen, so soll diese auch angezeigt werden.
# Wird eine andere Seite oder Anwendung in einem außerhalb von Contao real existierenden Unterverzeichnis aufgerufen z.B. "http://www.meinedomain.de/onlinegame/" soll auf dieses geroutet werden.

=Die technischen Umgebungsbedingungen=
Diese Anleitung bezieht sich auf die folgenden beispielhaften Umgebungsbedingungen:
# Der Server (oder die lokale Installation) hat ein Wurzelverzeichnis, z.B. "www". Dieses wird nach Eingabe der domain "http://www.meinedomain.de/" oder bei lokaler Installation "http://localhost/" aufgerufen.
# Contao ist in ein Unterverzeichnis dieses "www" Wurzelverzeichnisses kopiert, z.B: "cms". Der Pfad zu Contao lautet nun www/cms/. In diesem liegen nun die Ordner contao, plugins, system, templates, tl_files, typolight sowie u.a. die Datei .htaccess.default und die index.php
# Die Erweiterung "FolderURL" ist in Contao installiert
# Im Wurzelverzeichnis "www" befinden sich weitere Unterordner und/oder html/php files, die andere Anwendungen bzw. statische Webseiten beinhalten, die bei Bedarf erreichbar sein müssen.
Die Domainnamen, Pfade und Seiten sind natürlich nur Beispiele und müssen an die jeweilige Installation angepasst werden!

=Die Umsetzung=
Grundsätzlich gibt es mehrere Lösungsvarianten. Die hier beschriebene Variante erfolgt unter Nutzung der Apache .htaccess Dateien. Diese können entweder offline mit einem beliebigen Editor erstellt/bearbeitet und dann per FTP auf den Server hochgeladen werden oder per FTP-fähigem Editor direkt online editiert werden (z.B. mit Notepad++ http://notepad-plus-plus.org/ - gibt es auch als portable Version unter http://portableapps.com/ bzw. http://portableapps.com/de )

==Schritt 1 - Installation im Unterverzeichnis==
Contao wurde in ein Unterverzeichnis des Wurzelverzeichnisses am Server kopiert.
Beispiel:
Wurzelverzeichnis Server lautet "www"
Installationsverzeichnis Contao lautet "cms". Der Pfad zu Contao lautet nun www/cms/.
(siehe Pkt 2. technische Umgebungsbedingungen)

==Schritt 2 - Anpassen der .htaccess im WURZELVERZEICHNIS==
Als erstes ist die .htaccess im Wurzelverzeichnis anzupassen:
<source lang="apache">
RewriteEngine On
RewriteBase /

# in der folgenden Zeile den Text "cms"entsprechend dem gewählten Unterverzeichnis für Contao ggf. ändern
RewriteCond %{REQUEST_URI} !^cms/.*

# alternativ zur letzten Zeile oberhalb geht auch:
# RewriteCond %{REQUEST_URI} !^(cms|verzeichnis1|verzeichnis2)/.*
# wenn einige Verzeichnisse real existieren und NICHT von contao behandelt werden sollen!
# mehrere Verzeichnisse sind einfach getrennt durch "|" nacheinander aufzulisten

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d [OR]
RewriteCond %{REQUEST_URI} ^/$

# in der folgenden Zeile ebenfalls den Text "cms" entsprechend dem gewählten Unterverzeichnis für Contao ändern
RewriteRule ^(.*) /cms/$1 [L]

# die folgende Zeile ist nur erforderlich, wenn ALLE Seitenaufrufe mit .html-Endung an Contao gehen sollen
# RewriteRule .*\.html$ index.php [L]
</source>

Erklärung:
Zuerst wird das Umschreiben von URLs aktiviert, wobei als Basis das aktuelle Verzeichnis festgesetzt wird (" RewriteEngine On "
und " RewriteBase / ").

Anschließend werden URLs die direkt auf das Unterverzeichnis "cms" verweisen vom Umschreiben ausgenommen (" RewriteCond %{REQUEST_URI} !^cms/.* "). Das ist auch für mehrere Verzeichnisse möglich, wenn man Inhalte außerhalb von Contao auf der Website hat.

Sofern die in der URL aufgerufenen Verzeichnisse oder Files tatsächlich existieren, findet ebenfalls kein Umschreiben statt (" RewriteCond %{REQUEST_FILENAME} !-f " und " RewriteCond %{REQUEST_FILENAME} !-d [OR] ").

Alle anderen Aufrufe werden um das Unterverzeichnis ergänzt (" RewriteRule ^(.*) /cms/$1 [L] ").

So wird aus http://www.meinedomain.de/index.html die URL http://www.meinedomain.de/cms/index.html - was weder Nutzer noch Suchmaschine zu sehen bekommen!

Zu beachten ist, dass sich im Wurzelverzeichnis keine index.php oder index.html Datei befinden darf. (Achtung auf Reste voheriger Installationen ;-)

==Schritt 3 - Anpassen der .htaccess im INSTALLATIONSVERZEICHNIS==
Im Installationsverzeichnis von Contao kann nun praktisch unverändert die mitgelieferte .htaccess.default verwendet werden (natürlich muss die auf .htaccess umbenannt werden. Also das ".default" raus aus dem Dateinamen!
Hier die Beispielversion:
<source lang="apache">
##
# Contao Open Source CMS
# Copyright (C) 2005-2011 Leo Feyer
#
# Formerly known as TYPOlight Open Source CMS.
#
# This program is free software: you can redistribute it and/or
# modify it under the terms of the GNU Lesser General Public
# License as published by the Free Software Foundation, either
# version 3 of the License, or (at your option) any later version.
#
# This program is distributed in the hope that it will be useful,
# but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
# Lesser General Public License for more details.
#
# You should have received a copy of the GNU Lesser General Public
# License along with this program. If not, please visit the Free
# Software Foundation website at <http://www.gnu.org/licenses/>.
#
# PHP version 5
# @copyright Leo Feyer 2005-2011
# @author Leo Feyer <http://www.contao.org>
# @license LGPL
##

##
# Disable ETags
# @see http://developer.yahoo.com/performance/rules.html#etags
##
FileETag None

##
# Prevent access to the Contao template files
##
<FilesMatch "\.(tpl|html5|xhtml)$">
Order allow,deny
Deny from all
</FilesMatch>

<IfModule mod_mime.c>

##
# Serve the correct content type for .htc files (CSS3 PIE)
# @see http://css3pie.com/documentation/known-issues/#content-type
##
AddType text/x-component .htc

</IfModule>

<IfModule mod_deflate.c>

##
# Use mod_deflate to compress JavaScript, CSS, XML, HTML and PHP files.
# @see http://developer.yahoo.com/performance/rules.html#gzip
##
<FilesMatch "\.(css|js|xml|html?|php)$">
SetOutputFilter DEFLATE
</FilesMatch>

</IfModule>

<IfModule mod_headers.c>

##
# Disable ETags
# @see http://developer.yahoo.com/performance/rules.html#etags
##
Header unset ETag

##
# Add a Vary Accept-Encoding header for the compressed resources. If you
# modify the file types above, make sure to change them here accordingly.
# @see http://developer.yahoo.com/performance/rules.html#gzip
##
<FilesMatch "\.(js|css|xml|gz)$">
Header append Vary Accept-Encoding
</FilesMatch>

</IfModule>

<IfModule mod_expires.c>

##
# Activate the module
##
ExpiresActive On

##
# Specify an expiration 30 days in the future for images, JavaScripts and
# CSS files. Edit or remove the lines to set up your own expiration logic.
# @see http://developer.yahoo.com/performance/rules.html#expires
##
ExpiresByType image/png A2592000
ExpiresByType image/gif A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType text/javascript A2592000
ExpiresByType application/x-javascript A2592000
ExpiresByType application/javascript A2592000
ExpiresByType text/css A2592000
ExpiresByType image/x-icon A2592000

</IfModule>

<IfModule mod_rewrite.c>

##
# Activate the module
##
RewriteEngine On

##
# Set the RewriteBase if your Contao installation is in a subdirectoy and
# the rewrite rules are not working properly. Usage examples:
#
# RewriteBase /contao-2.9.0
# RewriteBase /path/to/contao
#
# Uncomment the following line to set the RewriteBase.
##
RewriteBase /

##
# Contao usually does not pass absolute URLs via GET, therefore the
# following rules block all requests that try to pass a URL or the /etc/
# directory as parameter (malicious requests).
##
RewriteCond %{REQUEST_URI} (ftp|https?):|/etc/ [NC,OR]
RewriteCond %{QUERY_STRING} (ftp|https?):|/etc/ [NC]
RewriteRule .* - [F,L]

##
# Uncomment the following lines and replace "domain.com" with your domain
# name to redirect requests without "www" to the correct domain.
##
#RewriteCond %{HTTP_HOST} ^domain\.com [NC]
#RewriteRule (.*) http://www.domain.com/$1 [R=301,L]

##
# If you cannot use mod_deflate, uncomment the following lines to load a
# compressed .gz version of the bigger Contao JavaScript and CSS files.
##
#AddEncoding gzip .gz
#<FilesMatch "\.js\.gz$">
# AddType "text/javascript" .gz
#</FilesMatch>
#<FilesMatch "\.css\.gz$">
# AddType "text/css" .gz
#</FilesMatch>
#RewriteCond %{HTTP:Accept-encoding} gzip
#RewriteCond %{REQUEST_FILENAME} \.(js|css)$
#RewriteCond %{REQUEST_FILENAME}.gz -f
#RewriteRule ^(.*)$ $1.gz [QSA,L]

##
# Do not rewrite requests for static files or folders such as style sheets,
# images, movies or text documents.
##
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d

##
# By default, Contao adds ".html" to the generated URLs to simulate static
# HTML documents. If you change the URL suffix in the back end settings, make
# sure to change it here accordingly!
#
# RewriteRule .*\.html$ index.php [L] # URL suffix .html
# RewriteRule .* index.php [L] # No URL suffix
# RewriteRule .*\.txt$ index.php [L] # URL suffix .txt
#
# If you are using mod_cache, it is recommended to use the RewriteRule below,
# which adds the query string to the internal URL:
#
# RewriteRule (.*\.html)$ index.php/$1 [L]
#
# Note that not all environments support mod_rewrite and mod_cache.
##
# RewriteRule .*\.html$ index.php [L]
# Rewrite TYPOlight URLs

# mit den folgenden zwei Zeilen sollte es immer klappen, notwendig ist im Prinzip
# nur jeweils eine davon, siehe Erklärung weiter oben
RewriteRule .*$ index.php [L]
RewriteRule (.*\.html)$ index.php/$1 [L]

</IfModule>
</source>

Zu beachten ist:
- die RewriteBase der .htaccess im Installationsverzeichnis darf KEIN Unterverzeichnis beinhalten, sondern lautet: "RewriteBase /" . Die Umleitung auf den Unterordner "cms" wurde ja schon von der .htaccess im Wurzelverzeichnis übernommen!
- die RewriteRule am Ende der .htaccess ist auf zwei Regeln gestellt
# "RewriteRule .*$ index.php [L]" - dadurch werden auch Dateinamen gültig aufgerufen, wenn der User das abschließende .html vergisst oder den Dateinamen irrtümlich als Pfad eingibt,
# " RewriteRule (.*\.html)$ index.php/$1 [L]" - falls mod_cache verwendet wird, sonst kann es zu merkwürdigem Verhalten kommen.

(Anm.: eine Umschreibung, dass bei Eingabe der Endung .htm (statt .html) auch richtig umgeschrieben wird, wird noch gesucht)

==Schritt 4 - Anpassen im Contao Backend==
Im Contao Backend ist der Installationspfad unter Einstellungen > Globale Einstellungen > Relativer Pfad zum Contao-Verzeichnis LEER zu lassen (weil diese Aufgabe von der .htaccess im Wurzelverzeichnis übernommen wird).

Alternativ kann man das auch in der localconfig.php im Unterverzeichnis system von Contao manuell einstellen.
Pfad/Datei gemäß Beispiel also: www/cms/system/localconfig.php
Wobei die Zeile zur Einstellung des Websitepfades leer sein muss

<source lang="php">$GLOBALS['TL_CONFIG']['websitePath'] = '';</source>

Eine manuelle Änderung kann nach einem Update oder dem Verschieben der Installation erforderlich sein, wenn sich das Contao-BE nicht aufrufen lässt. Zudem stellt Contao bei Neuinstallation den Pfad automatisch auf das Unterverzeichnis ein, was in diesem Fall aber nicht erforderlich ist, sondern zu einem Fehler führt.

==Schritt 5 - Anpassen von Verzeichnissen außerhalb Contao==
Sollen Dokumente in Verzeichnissen außerhalb von Contao ohne Einschränkungen aufgerufen werden können, so muss man im jeweiligen Unterverzeichnis (unterhalb des Wurzelverzeichnisses) eine eigene .htaccess Datei anlegen. Diese muss nur die Zeile
<source lang="apache">
RewriteEngine Off
</source>
beinhalten. Dadurch kann auf alle *.htm, *.html und *.php-Seiten in diesem Unterverzeichnis zugegriffen werden. Alternativ kann diese .htaccess auch eigene Regeln beinhalten.

Sofern diese Verzeichnisse aber in der .htaccess im Wurzelverzeichnis wie beschrieben angegeben worden sind, ist dies nicht zwingend erforderlich.

=Ergebnis: Aufruf der Seiten=
==Aufruf Frontend-Seiten==
Folgendes sollte nun funktionieren (an Hand der Beispielvorgaben):

Anmerkungen
Die Datei "gibt_es.html" (bzw. *.htm oder *.php) bezeichnet eine physikalisch(?) existente Datei.<br />
Der Folder "ausserhalb_von_contao" bezeichnet einen physikalisch(?) existenten Ordner, der sich NICHT im Contao Installationsverzeichnis befindet und auch nicht durch Contao bzw. FolderURL erzeugt wird.<br />
Die Datei "sonst_eine_cmsseite" bezeichnet eine Seite, die durch Contao bereitgestellt wird.<br />
Der Folder "cmsunterordner" bezeichnet einen "virtuellen" Ordner, der durch Contao bzw. FolderURL erzeugt wird.

'''Aufrufe an Contao'''
*Aufruf per "http://www.meinedomain.de/index.html" => geht ok an contao
*Aufruf per "http://www.meinedomain.de/sonst_eine_cmsseite.html" => geht ok an contao
*Aufruf per "http://www.meinedomain.de/sonst_eine_cmsseite" => geht ok an contao wie "http://meinedomain.de/sonst_eine_seite.html
*Aufruf per "http://www.meinedomain.de/sonst_eine_cmsseite/" => geht ok an contao wie "http://meinedomain.de/sonst_eine_seite.html
*Aufruf per "http://www.meinedomain.de/cmsunterordner/sonst_eine_cmsseite.html" => geht ok an contao
*Contao verlinkt die Seiten beim Rendern richtig ohne das .../cms/.. (Installationsverzeichnis) dazwischen

'''Aufrufe außerhalb von Contao'''
*Aufruf von "http://www.meinedomain.de/gibt_es.htm" funktioniert, ruft die real bestehende *.htm Seite im Wurzelverzeichnis auf
*Aufruf von "http://www.meinedomain.de/gibt_es.html" funktioniert, ruft die real bestehende *.html Seite im Wurzelverzeichnis auf
*Aufruf von "http://www.meinedomain.de/ausserhalb_von_contao/gibt_es.php" funktioniert, ruft die real bestehende *.php Seite im Wurzelverzeichnis auf
*Aufruf von "http://www.meinedomain.de/ausserhalb_von_contao/" funktioniert und öffnet die default html od. php-Seite (index.html, index.htm, index.php) in diesem Unterordner (parallel zu Contao)
*Aufruf von "http://www.meinedomain.de/ausserhalb_von_contao/gibt_es.htm" oder "http://meinedomain.de/ausserhalb_von_contao/gibt_es.html" oder "http://meinedomain.de/ausserhalb_von_contao/gibt_es.php" funktionieren und öffnen die jeweiligen Seiten
* für von anderen Applikationen bereitgestellten Seiten in eigenen Unterverzeichnissen unter dem Wurzelverzeichnis und parallell zu Contao sind im jeweiligen Verzeichnis zumeist eigene .htaccess Dateien erforderlich

Sofern die aufgerufenen Seiten ausserhalb von Contao nicht bestehen, bzw. keine eigene Applikation dahintersteht
* erscheint die in Contao für nichtexistente Seiten eingestellte Fehlermeldung/-seite (404)
* ausgenommen die .htaccess im Ordner der aufgerufenen Seite bestimmt ein anderes Verhalten (z.B. mit RewriteEngine Off)

==Aufruf Backend-Seiten==
Das Contao Backend kann nun entweder über
http://www.meinedomain.de/contao/
oder über
http://www.meinedomain.de/cms/contao
erfolgen.

Cave:
Wenn man schon mal im Backend angemeldet war, dann kann es sein, das man immer einen Umleitungsfehler bekommt. Einmal die Cookies von dieser Domain löschen und das Problem ist beseitigt.

{{Achtung|Fnktioniert m.E. unter 3.1.(3) nicht (mehr?), sonder macht eher Probleme mit dem "rücksprung" im BE siehe auch https://github.com/contao/core/issues/6127 - geraldo}}

Facebook

2012-07-30T14:29:44Z

Geraldo: env::url besser env::path

[[Category:Admin HOWTOS]]
=Einleitung=
Diese Anleitung soll dazu dienen, Facebook Plugins (Kommentare, Share, Like, ...) in eine Contao Seite einzubauen. Die Beispiele basieren auf dem Nachrichtensystem von Contao (kann jedoch auch einfach auf ein anderes Modul geändert werden - e.g Events).

=Facebook Plugins via eigener Facebook App=
Zuerst muss auf Facebook eine sog. Facebook App erstellt werden - diese kann man, sofern man sich als "Entwickler" bestätigt hat (kann via SMS vorgenommen werden), mit seinem Facebook Benutzerprofil erstellen.
==Facebook==
===Facebook App===
Auf der [http://www.facebook.com/developers/createapp.php Facebook Entwicklerseite] folgt man den Anweisungen von Facebook (siehe Bilder).

[[Datei:Fb-app-erstellen-001.jpg|Facebook Anwendung erstellen - Generelle Info|frame|center]]

[[Datei:Fb-app-erstellen-002.jpg|Facebook Anwendung erstellen - Info|frame|center]]

[[Datei:Fb-app-erstellen-003.jpg|Facebook Anwendung erstellen - Webseite|frame|center]]

===Abschluss (seitens Facebook)===
Nun hat man seine Facebook App erstellt und einige Informationen bekommen, welche man in Contao "verbauen" muss - hier eine Übersicht mit allen benötigten Informationen.

<source lang="html4strict">
<meta property="fb:app_id" content="......"/> (Facebook App ID - siehe Bild 3, rote Zahl)
<meta property="fb:admins" content=""/> (deiner Benutzer ID vo Facebook - siehe Bild 2, zweite rote Beschriftung)
</source>

Das wäre es vorerst von der Facebook Seite. Nun muss man das Ganze in Contao einbauen.

==Contao CMS==
Damit die Facebook Plugins richtig eingebunden werden können, müssen Templates angepasst und das Seitenlayout erweitert werden.

===fe_page.tpl===
Beim Template sollte der Doctype angepasst werden (u.a wegen Internet Explorer). Dazu [[Templates_bearbeiten|erstellt]] man im Backend ein neues "fe_page.tpl" Template. Der Name ist frei wählbar, muss jedoch mit ''fe_'' beginnen - in diesem Beispiel wird das Template "fe_page_facebook.tpl" benannt.
<source lang="php">
<?php echo $this->doctype; ?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>">
</source>
muss geändert werden zu
<source lang="php">
<?php echo $this->doctype; ?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?> xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://developers.facebook.com/schema/">
</source>

Zusätzlich wurden noch folgende [http://developers.facebook.com/docs/opengraph/ Open Graph Tags] von Facebook in das Template eingetragen, welche dann mit den vorhanden Informationen ausgestattet werden (vor </head> Abschluss)

<source lang="html4strict">
<meta property="og:title" content="<?php echo $this->pageTitle; ?> - <?php echo $this->mainTitle; ?>"/>
<meta property="og:type" content="blog"/> (Art der Seite - blog, news, ...)
<meta property="og:site_name" content="..."/> (Seitenname)
<meta property="og:description" content="<?php echo $this->description; ?>"/>
</source>

===Seitenlayout===
Bevor man die anderen [[Templates_bearbeiten|Templates]] bearbeitet, sollte das Seitenlayout mit den Facebook Informationen ([[Facebook#Abschluss_.28seitens_Facebook.29|2.1.2 Abschluss (seitens Facebook]]) befüllt werden.

'''Zusätzliche <head>-Tags'''
<source lang="html4strict">
<meta property="fb:app_id" content="......"/>
<meta property="fb:admins" content=""/>
</source>

'''Eigener JavaScript-Code'''
<source lang="html4strict">

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
<![CDATA[//><!]]>
</script>

</source>

===absolute Pfade für die Bilder via Modul===
Wenn eine Seite auf Facebook "geteilt" wird, besteht die Möglichkeit ein Thumbnail auszuwählen. Facebook benötigt dazu (damit man ein Bild auswählen kann) absolute Pfade.
Dazu benötigt man das Modul "wna_facebook" ([http://contao.silvanogiacomello.ch/module/wna_facebook/wna_facebook.zip Download hier]) (ist <s>noch</s> nicht im ER!).
Sobald das Modul hochgeladen wurde, ist es aktiv und man kann, wenn man einen Link bei Facebook teilt, das Thumbnail auswählen.

====(alternatives) Modul respektvie Contao 2.10====
Sofern man die Seite auf Google PageSpeed anpasst, verwendet man bestimmt das Modul [http://www.contao.org/erweiterungsliste/view/GooPageSpeed.10000009.de.html GooPageSpeed]. Dort erhält der Ordner "tl_files" eine eigene Subdomain und somit automatisch einen absoluten Pfad.

In Contao 2.10 wird gar kein Modul mehr benötigt für absolute Pfade, da die Anpassung an Google PageSpeed (betreffend den 3 Subdomains) in den Core übernommen wurde ([http://www.contao-konferenz.de/tl_files/folien/keynote.pdf Keynote an der Contao Konferenz 2011 von Leo Feyer])

====Installation====
Sobald man die folgenden Anpassungen ([[Facebook#Anpassungen_in_der_Datei_MyFacebookHack.php|2.2.3.2 Anpassungen in der Datei MyFacebookHack.php]]) getätigt hat, lädt man den komletten Ordner "wna_facebook" in seine Contao Installation unter ''system/modules'' hoch.

====Anpassungen in der Datei MyFacebookHack.php====
Folgende Anpassungen müssen gemacht werden, damit das Modul funktioniert:

'''Falls man nicht das fe_page Template benutzt:'''
<source lang="html4strict">if ($strTemplate != 'fe_page')
</source>

'''Falls man den Ordner (tl_files) unbenannt hat:'''
<source lang="html4strict">$arrSearch = array ( '="tl_files/', );
</source>

'''den Pfad zum tl_files Ordner'''
<source lang="html4strict">$arrReplace = array
(
'="http://www.domain.tld/tl_files/',
);
</source>

====Überprüfung der Funktion====
Am einfachsten kann man die Thumbnail Funktion (resp. das Modul) überprüfen in dem man den [http://developers.facebook.com/tools/lint/ URL Linter] von Facebook verwendet. Eine URL eintragen und bei der Überprüfung sollte bei "Image" ein Bild angezeigt werden.

===Facebook Plugin via HTML Modul einbinden===
Die Facebook Plugins müssen nicht zwingend in die Templates eingebaut werden. Es können auch Module angelegt werden - so zum Beispiel ein HTML Modul. Wichtig dafür ist, das der jeweilige Tag von Facebook (<fb:comments> ; <fb:like> ; <fb:send> ; ...) im BE bei den "Einstellungen" unter "Erlaubte HTML-Tags" ("System" > "Einstellungen" > "Erlaubte HTML-Tags" ; Kategorie "Sicherheitseinstellungen") eingetragen wird, da sonst beim Speichern das HTML Modul leer bleibt, weil Contao es als nicht erlaubter HTML Tag betrachtet.

==Facebook Kommentar Plugin==
===Code===
<source lang="html4strict">
(...)
<?php endif; ?>

<fb:comments href="http://domain-zur-contao-installation.tld/<?php echo $this->link; ?>" num_posts="10" width="600"></fb:comments>

</div>
</source>

Sieht man sich das Kommentar Plugin etwas genauer an:

{| border="1" cellspacing="0" cellpadding="5"
! Code !! Beschreibung
|-
| <source lang="html4strict"><fb:comments href="http://domain-zur-contao-installation.tld/<?php echo $this->link; ?>" (...)</source> || Pfad respektive Internetadresse der Seite, welche als Link erscheint (auf dem eigenen Facebook Profil - Pinwand), wenn ein Kommentar geschrieben wurde (und die Option "Post to Facebook" aktivier ist beim Kommentarfeld).
|-
| <source lang="html4strict">
(...) num_posts="10" (...)
</source> || Wie viele Beiträge sollen als Standard angezeigt werden. Es wird am Ende eine "Box" angezeigt, um alle vorhandenen Kommentare anzuzeigen.
|-
| <source lang="html4strict">
(...) width="600"></fb:comments>
</source> || Die Breite des kompletten Plugins.
|}

===komplettes Nachrichrichtenleser Template mit Kommentar Plugin===
<source lang="html4strict">
<div class="layout_full block<?php echo $this->class; ?>">

<a href="http://domain-zur-contao-installation.tld/<?php echo $this->link; ?>" title=""><h1><?php echo $this->newsHeadline; ?></h1></a>
<?php if ($this->hasMetaFields): ?>

<p class="info"><?php echo $this->date; ?> <?php echo $this->author; ?> <?php echo $this->commentCount; ?></p>
<?php endif; ?>
<?php if ($this->hasSubHeadline): ?>

<h2><?php echo $this->subHeadline; ?></h2>
<?php endif; ?>

<div class="ce_text">
<?php if (!$this->addBefore): ?>

<?php echo $this->text; ?>
<?php endif; ?>
<?php if ($this->addImage): ?>

<div class="image_container<?php echo $this->floatClass; ?>"<?php if ($this->margin || $this->float): ?> style="<?php echo trim($this->margin . $this->float); ?>"<?php endif; ?>>
<?php if ($this->href): ?>
<a href="<?php echo $this->href; ?>"<?php echo $this->attributes; ?> title="<?php echo $this->alt; ?>">
<?php endif; ?>
<img src="<?php echo $this->src; ?>"<?php echo $this->imgSize; ?> alt="<?php echo $this->alt; ?>" />
<?php if ($this->href): ?>
</a>
<?php endif; ?>
<?php if ($this->caption): ?>
<div class="caption"><?php echo $this->caption; ?></div>
<?php endif; ?>
</div>
<?php endif; ?>
<?php if ($this->addBefore): ?>

<?php echo $this->text; ?>
<?php endif; ?>

</div>
<?php if ($this->enclosure): ?>

<div class="enclosure">
<?php foreach ($this->enclosure as $enclosure): ?>
<p><img src="<?php echo $enclosure['icon']; ?>" width="18" height="18" alt="<?php echo $enclosure['title']; ?>" class="mime_icon" /> <a href="<?php echo $enclosure['href']; ?>" title="<?php echo $enclosure['title']; ?>"><?php echo $enclosure['link']; ?> <span class="size">(<?php echo $enclosure['filesize']; ?>)</span></a></p>
<?php endforeach; ?>
</div>
<?php endif; ?>

<fb:comments href="http://domain-zur-contao-installation.tld/<?php echo $this->link; ?>" num_posts="10" width="600"></fb:comments>

</div>
</source>

====Anpassungen im Template für die Seite ====
Folgende Stellen muss man im Code auf seine Seite anpassen:

<source lang="html4strict">
<a href="http://domain-zur-contao-installation.tld/<?php echo $this->link; ?>" title=""><h1><?php echo $this->newsHeadline; ?></h1></a></source>

<source lang="html4strict">
<fb:comments href="http://domain-zur-contao-installation.tld/<?php echo $this->link; ?>" num_posts="10" width="600"></fb:comments>
</source>
(siehe [[Facebook#Code_2|2.4.1 Code]] für Erklärung der Optionen)

==Like resp. Send Plugin==
===Code===
<source lang="html4strict">
(...)
<h1><?php echo $this->newsHeadline; ?></h1>
<?php if ($this->hasMetaFields): ?>

<p class="info"><?php echo $this->date; ?> <?php echo $this->author; ?> <?php echo $this->commentCount; ?></p>
<?php endif; ?>
<?php if ($this->hasSubHeadline): ?>

<h2><?php echo $this->subHeadline; ?></h2>
<?php endif; ?>

<fb:like href="http://domain-zur-contao-installation.tld<?php echo $this->link; ?>" send="true" width="450" show_faces="false" font=""></fb:like>

<div class="ce_text">
<?php if (!$this->addBefore): ?>
(...)
</source>

Sieht man sich die Like resp. Send Funktion etwas genauer an:

{| border="1" cellspacing="0" cellpadding="5"
! Code !! Beschreibung
|-
| <source lang="html4strict"><fb:like href="http://domain-zur-contao-installation.tld/<?php echo $this->link; ?>" (...)</source> || Pfad respektive Internetadresse der Seite, welche "geliked" und/oder "gesendet" werden soll - direkte Adresse zum Beitrag
|-
| <source lang="html4strict">
(...) send="true" (...)
</source> || Soll neben "Like" auch die "Send" Funkton aktiviert sein
|-
| <source lang="html4strict">
(...) width="450"> (...)
</source> || Breite des ganzen Facebook Plugin in Pixel
|-
| <source lang="html4strict">
(...) show_faces="false" (...)
</source> || Ob bei einem "like" das Profilbild des jeweiligen "likers" angezeigt werden soll
|-
| <source lang="html4strict">
(...) font=""></fb:like>
</source> || Schriftart des Facebook Plugins. Folgende Schriftarten werden seitens Facebook unterstützt: arial, lucida grande, segoe ui, tahoma, trebuchet ms, verdana
|}

===komplettes Nachrichrichtenleser Template mit Like Plugin===
<source lang="html4strict">
<div class="layout_full block<?php echo $this->class; ?>">

<a href="http://domain-zur-contao-installation.tld/<?php echo $this->link; ?>" title=""><h1><?php echo $this->newsHeadline; ?></h1></a>
<?php if ($this->hasMetaFields): ?>

<p class="info"><?php echo $this->date; ?> <?php echo $this->author; ?> <?php echo $this->commentCount; ?></p>
<?php endif; ?>
<?php if ($this->hasSubHeadline): ?>

<h2><?php echo $this->subHeadline; ?></h2>
<?php endif; ?>

<fb:like href="http://domain-zur-contao-installation.tld/<?php echo $this->link; ?>" send="true" width="450" show_faces="false" font=""></fb:like>

<div class="ce_text">
<?php if (!$this->addBefore): ?>

<?php echo $this->text; ?>
<?php endif; ?>
<?php if ($this->addImage): ?>

<div class="image_container<?php echo $this->floatClass; ?>"<?php if ($this->margin || $this->float): ?> style="<?php echo trim($this->margin . $this->float); ?>"<?php endif; ?>>
<?php if ($this->href): ?>
<a href="<?php echo $this->href; ?>"<?php echo $this->attributes; ?> title="<?php echo $this->alt; ?>">
<?php endif; ?>
<img src="<?php echo $this->src; ?>"<?php echo $this->imgSize; ?> alt="<?php echo $this->alt; ?>" />
<?php if ($this->href): ?>
</a>
<?php endif; ?>
<?php if ($this->caption): ?>
<div class="caption"><?php echo $this->caption; ?></div>
<?php endif; ?>
</div>
<?php endif; ?>
<?php if ($this->addBefore): ?>

<?php echo $this->text; ?>
<?php endif; ?>

</div>
<?php if ($this->enclosure): ?>

<div class="enclosure">
<?php foreach ($this->enclosure as $enclosure): ?>
<p><img src="<?php echo $enclosure['icon']; ?>" width="18" height="18" alt="<?php echo $enclosure['title']; ?>" class="mime_icon" /> <a href="<?php echo $enclosure['href']; ?>" title="<?php echo $enclosure['title']; ?>"><?php echo $enclosure['link']; ?> <span class="size">(<?php echo $enclosure['filesize']; ?>)</span></a></p>
<?php endforeach; ?>
</div>
<?php endif; ?>

</div>
</source>

====Anpassungen im Template für seine Seite ====
Folgende Stellen muss man im Code auf seine Seite anpassen:

<source lang="html4strict">
<a href="http://domain-zur-contao-installation.tld/<?php echo $this->link; ?>" title=""><h1><?php echo $this->newsHeadline; ?></h1></a></source>

<source lang="html4strict">
<fb:like href="http://domain-zur-contao-installation.tld/<?php echo $this->link; ?>" send="true" width="450" show_faces="false" font=""></fb:like>
</source>
(siehe [[Facebook#Code|2.3.1 Code]] für Erklärung der Optionen)

==andere Facebook Plugins==
Auf das Einbinden der Plugins wird nicht weiter eingegangen - die obigen beiden Beispiele sollten reichen - daher wird ab hier (Punkte X.X) nur noch der Facebook Code gezeigt.
===Facebook Send Plugin===
====Code====
<source lang="html4strict">
<fb:send href="http://domain-zur-contao-installation.tld/<?php echo $this->link; ?>" font=""></fb:send>
</source>

Sieht man sich das Send Plugin etwas genauer an:

{| border="1" cellspacing="0" cellpadding="5"
! Code !! Beschreibung
|-
| <source lang="html4strict"><fb:send href="http://domain-zur-contao-installation.tld/<?php echo $this->link; ?>" (...)</source> || Pfad respektive Internetadresse der Seite, welche als Link erscheint (in der Nachricht)
|-
| <source lang="html4strict">
(...) font=""></fb:send>
</source> || Schriftart des Facebook Plugins. Folgende Schriftarten werden seitens Facebook unterstützt: arial, lucida grande, segoe ui, tahoma, trebuchet ms, verdana
|}
===weitere Plugins===
Das Einbinden sowie der Code der Facebook Plugins sind untereinander sehr identisch - daher wird darauf verzichtet, alle Facebook Plugins hier zu erwähnen. Es gibt noch weitere [https://developers.facebook.com/docs/plugins/ Facebook Plugins].

[https://developers.facebook.com/docs/reference/plugins/like/ Like Button], [https://developers.facebook.com/docs/reference/plugins/send/ Send Button], [https://developers.facebook.com/docs/reference/plugins/comments/ Comments], [https://developers.facebook.com/docs/reference/plugins/activity/ Activity Feed], [https://developers.facebook.com/docs/reference/plugins/recommendations/ Recommendations], [https://developers.facebook.com/docs/reference/plugins/like-box/ Like Box], [https://developers.facebook.com/docs/reference/plugins/facepile/ Faccepile], [https://developers.facebook.com/docs/reference/plugins/live-stream/ Live Stream]

Die Plugins [https://developers.facebook.com/docs/plugins/registration/ Registration] und [https://developers.facebook.com/docs/reference/plugins/login/ Login Button] werden in diesem Wiki Eintrag nicht erwähnt, da diese nicht "einfach so" eingebunden werden können.

=andere Facebook Plugins (ohne eigene Facebook App)=
==Facebook Like Button==
Wie man generell einen Likebutton integriert, findet man in den [http://developers.facebook.com/docs/reference/plugins/like/ Facebook Developer Docs]. Aber um diesen Button '''korrekt''' einzubinden benötigt man ein wenig mehr, sogenannte [http://developers.facebook.com/docs/opengraph/ Open Graph Tags], die im Headbereich eingebunden werden. Diese Angaben liefern Facebook die gewünschten Informationen. So kann man die Darstellung auf Facebook gut kontrollieren.

'''Folgende Werte sind quasi Pflichtangaben.'''
<source lang="html4strict">
<meta property="og:title" content=""/>
<meta property="og:type" content=""/>
<meta property="og:url" content=""/>
<meta property="og:site_name" content=""/>
<meta property="og:image" content=""/>
<meta property="fb:admins" content=""/> (Benutzer IDs von Admins der Fanpage) oder <meta property="fb:app_id" content=""/>
</source>

Es empfiehlt sich grundsätzlich immer auch noch description mitzugeben.
<source lang="html4strict">
<meta property="og:description" content=""/>
</source>

Alle Felder bis auf og:image können im Seitentemplate leicht via [[Insert-Tags]] befüllt werden. Aber gerade beim Imagetag ist es wichtig korrekt zu befüllen, da Facebook sonst irgendein Bild der Seite, meistens das Falsche, oder auch gar keins nimmt. Beide Fälle sind nicht sonderlich schön. Man muss also aus den globalen Variablen das Vorschaubild z.B. für News auslesen.

Folgender Code muss ganz oben in das Readertemplate (per Default news_full.tpl).

<source lang="php">
<?php $GLOBALS['TL_HEAD'][] = '<meta property="og:image" content="{{env::url}}/'.$this->singleSRC.'" />'; ?>
</source>
oder besser {{env::path}} falls Contao in einem Unterverzeichnis ist (Geraldo)

Damit wird das Bild, welches bei der News im Backend gewählt wurde, als Thumbnail für Facebook ausgegeben.

Das Ganze funktioniert übrigens auch bei allen anderen Readertemplates z.B. Catalog. In diesem Fall kann der Pfad zur Bildvariable anders sein. Dies kann man aber in der Ausgabe von $globals nachsehen.

Am Ende man mit dem [http://developers.facebook.com/tools/lint/ Linter] testen wie Facebook die Seite parsen würde.

Einen Diskussionsbeitrag im Forum findet man [http://www.contao-community.de/showthread.php?18218-Ausgaben-im-Headbereich-Meta-Tags-f%FCr-Facebook&p=130301 hier].

=bekannte Probleme=
==Fallback Sprache ==
Wenn man einen Link teilen möchte und es erscheint oft nur der Text und kein Bild dazu, kann es sein, das man beim Startpunkt seiner Seite im BE den Hacken "Sprachen-Fallback" (Kategorie "DNS-Einstellungen") nicht aktiviert hat.

Mootools Aufklappmenü MenuMatic

2012-04-18T11:39:26Z

Geraldo:

{{AppliesTo|TLVersion=2.8.x|Version=ab 2.9}}
[[Category: Admin_HOWTOS]]

=Mootools Aufklappmenü MenuMatic in Contao benutzen=

Da es immer viele Probleme mit Menüs gibt und sich viele Bewegende Menüs wünschen habe ich mal MenuMatic ( [http://greengeckodesign.com/menumatic http://greengeckodesign.com/menumatic] ) in Typolight eingebaut. Auf der Seite sind auch 2 Beispiele.
== DEPRECEATED ? ==
Der Entwickler hat sich vom Script verabschiedet,
http://greengeckodesign.com/future-menumatic
Dieses Mootools-Script ist also nur noch mit Vorsicht zu geniesen ( Siehe auch
https://www.contao-community.de/showthread.php?27830-Contao-2-11-und-Menumatic-vorr%FCbergehende-L%F6sung )
18.4.2012 Geraldo
==Voraussetzung:==
Mootools 1.2 (also TL ab 2.8)
Grundlegende Erfahrung mit TYPOlight und Seitenstruktur
gute CSS-Kentnisse um es genau anpassen zu können
für die Grundfunktion so wie es ist keine JavaScript-Kentnisse

==Dazu ist eigenltich nicht viel nötig.==
Von der Seite ( [http://greengeckodesign.com/menumatic http://greengeckodesign.com/menumatic] ) ganz unten die Dateien herunterladen.
Da sind 2 Beispiele drinn:
* horizontal
* vertical

==Vorgehen:==
'''1.''' Die benötigten CSS-Dateien importieren (entweder aus dem Ordner horizontal ode vertical, je nach Bedarf). Das CSS für den IE6 dann auch passend mit conditional Comment versehen.
Die JS-Datei hochladen (z.B. in den Ordner js). Diese Datei muss lesbar für alle sein.

'''2.''' Ein neues Navigation Template erstellen mit diesem Inhalt (nav_MenuMatic.tpl):
<source lang="php">
<ul <?php if ($this->level == 'level_1'): ?>id="nav"<?php endif; ?> class="vlist <?php echo $this->level; ?>">
<?php foreach ($this->items as $item): ?>
<?php if ($item['isActive']): ?>
<li class="active<?php if ($item['class']): ?> <?php echo $item['class']; ?><?php endif; ?>"><a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?php echo $item['target']; ?>><em><?php echo $item['link']; ?></em></a><?php echo $item['subitems']; ?></li>
<?php else: ?>
<li<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?>><a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?php echo $item['target']; ?>><?php echo $item['link']; ?></a><?php echo $item['subitems']; ?></li>
<?php endif; ?>
<?php endforeach; ?>
</ul>
</source>
'''Anpassungen (2 Stück):'''
* Das erste <nowiki><ul></nowiki> bekommt die ID 'nav' (darüber kann dann mit JavaScript das Menü angesprochen werden)
* Hier sind auch die aktiven Navi Punkte verlinkt und nicht mit einem span sondern mit em umschlossen. So werden die Beispiele nicht mehr davon beeinflusst und man kann es trotzdem gut mit CSS ansprechen.

'''3.''' Ein neues Navigationsmodul (genaueres kann hier nachgelesen werden zu dem Modul -> [http://de.contaowiki.org/ModulNavigation http://de.contaowiki.org/ModulNavigation]) :
* Startlevel 0
* Stoplevel 0
* Referenzseite (keine bzw. Startpunkt oder was man möchte)
* Navigationstemplate: (das von uns gerade erstellte) nav_MenuMatic.tpl

'''4.''' Neues Seitenlayout:
* Navigationsmodul von gerade da hin packen wo man es haben möchte
* Eigener JavaScript-Code:

<source lang="javascript">


<script src="js/MenuMatic_0.68.3.js" type="text/javascript" charset="utf-8"></script>


<script type="text/javascript" >
window.addEvent('domready', function() {
var myMenu = new MenuMatic();
});
</script>
</source>

(Damit initialisiert man das Menü und kann noch Parameter übergeben. Genaueres ist auf der oben verlinkten Seite zu finden)

Cave: für das vertikale Menü muss dieser JS-Code ergänzt werden an dieser Stelle:

<source lang="javascript">
var myMenu = new MenuMatic({ orientation:'vertical' });
</source>

'''CSS-Dateien auswählen:'''
* style.css (nur Beispiellayout, also nicht benutzen, wenn man ein eigenes hat!)
* MenuMatic.css (hier ist alles für die Navi, mit Suckerfish als Grundlage. Hier muss man dann selber die gewünschten Anpassungen vornehemn)
* MenuMatic-ie6.css (erklährt sich glaube ich von selber *g* - muss eventuell nach eigenen Bedürfnissen angepasst werden)

Soviel zu dem kleinen Tutorial.
Natürlich muss das ganze Individuell angepasst werden. Aber das Beispiel Layout dürfte so nun jeder zum laufen bekommen ;-)

Link zum Thread im Forum: [http://www.contao-community.de/showthread.php?8719-Mootools-Aufklappmen%FC-MenuMatic-in-TYPOlight-benutzen&p=60633#post60633 Forum-Diskusionsthread]

----

--[[Benutzer:MacKP|MacKP]] 13:34, 20. Jun. 2010 (UTC)

Mootools Aufklappmenü MenuMatic

2012-04-18T11:32:59Z

Geraldo:

{{AppliesTo|TLVersion=2.8.x|Version=ab 2.9}}
[[Category: Admin_HOWTOS]]

=Mootools Aufklappmenü MenuMatic in Contao benutzen=

Da es immer viele Probleme mit Menüs gibt und sich viele Bewegende Menüs wünschen habe ich mal MenuMatic ( [http://greengeckodesign.com/menumatic http://greengeckodesign.com/menumatic] ) in Typolight eingebaut. Auf der Seite sind auch 2 Beispiele.
== DEPRECEATED ? ==
Der Entwickler hat sich vom Script verabschiedet,
http://greengeckodesign.com/future-menumatic
Dieses Mootools-Script ist also nur noch mit Vorsicht zu geniesen ( Siehe auch
https://www.contao-community.de/showthread.php?27830-Contao-2-11-und-Menumatic-vorr%FCbergehende-L%F6sung )
==Voraussetzung:==
Mootools 1.2 (also TL ab 2.8)
Grundlegende Erfahrung mit TYPOlight und Seitenstruktur
gute CSS-Kentnisse um es genau anpassen zu können
für die Grundfunktion so wie es ist keine JavaScript-Kentnisse

==Dazu ist eigenltich nicht viel nötig.==
Von der Seite ( [http://greengeckodesign.com/menumatic http://greengeckodesign.com/menumatic] ) ganz unten die Dateien herunterladen.
Da sind 2 Beispiele drinn:
* horizontal
* vertical

==Vorgehen:==
'''1.''' Die benötigten CSS-Dateien importieren (entweder aus dem Ordner horizontal ode vertical, je nach Bedarf). Das CSS für den IE6 dann auch passend mit conditional Comment versehen.
Die JS-Datei hochladen (z.B. in den Ordner js). Diese Datei muss lesbar für alle sein.

'''2.''' Ein neues Navigation Template erstellen mit diesem Inhalt (nav_MenuMatic.tpl):
<source lang="php">
<ul <?php if ($this->level == 'level_1'): ?>id="nav"<?php endif; ?> class="vlist <?php echo $this->level; ?>">
<?php foreach ($this->items as $item): ?>
<?php if ($item['isActive']): ?>
<li class="active<?php if ($item['class']): ?> <?php echo $item['class']; ?><?php endif; ?>"><a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?php echo $item['target']; ?>><em><?php echo $item['link']; ?></em></a><?php echo $item['subitems']; ?></li>
<?php else: ?>
<li<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?>><a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?php echo $item['target']; ?>><?php echo $item['link']; ?></a><?php echo $item['subitems']; ?></li>
<?php endif; ?>
<?php endforeach; ?>
</ul>
</source>
'''Anpassungen (2 Stück):'''
* Das erste <nowiki><ul></nowiki> bekommt die ID 'nav' (darüber kann dann mit JavaScript das Menü angesprochen werden)
* Hier sind auch die aktiven Navi Punkte verlinkt und nicht mit einem span sondern mit em umschlossen. So werden die Beispiele nicht mehr davon beeinflusst und man kann es trotzdem gut mit CSS ansprechen.

'''3.''' Ein neues Navigationsmodul (genaueres kann hier nachgelesen werden zu dem Modul -> [http://de.contaowiki.org/ModulNavigation http://de.contaowiki.org/ModulNavigation]) :
* Startlevel 0
* Stoplevel 0
* Referenzseite (keine bzw. Startpunkt oder was man möchte)
* Navigationstemplate: (das von uns gerade erstellte) nav_MenuMatic.tpl

'''4.''' Neues Seitenlayout:
* Navigationsmodul von gerade da hin packen wo man es haben möchte
* Eigener JavaScript-Code:

<source lang="javascript">


<script src="js/MenuMatic_0.68.3.js" type="text/javascript" charset="utf-8"></script>


<script type="text/javascript" >
window.addEvent('domready', function() {
var myMenu = new MenuMatic();
});
</script>
</source>

(Damit initialisiert man das Menü und kann noch Parameter übergeben. Genaueres ist auf der oben verlinkten Seite zu finden)

Cave: für das vertikale Menü muss dieser JS-Code ergänzt werden an dieser Stelle:

<source lang="javascript">
var myMenu = new MenuMatic({ orientation:'vertical' });
</source>

'''CSS-Dateien auswählen:'''
* style.css (nur Beispiellayout, also nicht benutzen, wenn man ein eigenes hat!)
* MenuMatic.css (hier ist alles für die Navi, mit Suckerfish als Grundlage. Hier muss man dann selber die gewünschten Anpassungen vornehemn)
* MenuMatic-ie6.css (erklährt sich glaube ich von selber *g* - muss eventuell nach eigenen Bedürfnissen angepasst werden)

Soviel zu dem kleinen Tutorial.
Natürlich muss das ganze Individuell angepasst werden. Aber das Beispiel Layout dürfte so nun jeder zum laufen bekommen ;-)

Link zum Thread im Forum: [http://www.contao-community.de/showthread.php?8719-Mootools-Aufklappmen%FC-MenuMatic-in-TYPOlight-benutzen&p=60633#post60633 Forum-Diskusionsthread]

----

--[[Benutzer:MacKP|MacKP]] 13:34, 20. Jun. 2010 (UTC)