Wikizone - Benutzerbeiträge [de]

Matamo - Website Analytics

2021-07-14T09:40:41Z

109.192.169.230: /* Matamo - Berichte */

https://matomo.org/docs/videos/
https://matomo.org/web-analytics-training/
https://matomo.org/docs/log-analytics-tool-how-to/
== Installation ==
* Installer bei all-inkl
* Archiver einrichten
* Allgemeine Einstellungen
* Datenschutz

== Websites einrichten ==
* Webseite einrichen
* JavaScript hinzufügen - hier ein Beispiel mit deaktivierten Cookies
<pre>


<script type="text/javascript">
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['disableCookies']);
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="https://matamo.webmynet.de/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '2']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>

</pre>

== Datenschutz ==
Einstieg:
https://matomo.org/faq/new-to-piwik/how-do-i-use-matomo-analytics-without-consent-or-cookie-banner/
https://github.com/matomo-org/matomo/issues/12600 - GDPR Compliance Project
Es gibt verschiedene Maßnahmen wie man Matamo rechtskonform gestalten kann. Grob lassen sich 3 Stufen festhalten.
* Tracking mit Cookies oder anderen Wiedererkennungsmaßnahmen die eine Besucher ID über längere Zeiträume erlauben
* Tracking nur für die Session. Die Besucher ID wird jeden Tag verworfen.
* Kein Tracking
Die Auswertungsmöglichkeiten sind dementsprechend unterschiedlich.
=== Welche Cookies verwendet Matamo wofür? ===
https://matomo.org/faq/general/faq_146/
==== Cookie Consent einbauen ====
https://developer.matomo.org/guides/tracking-consent
Matamo bietet einige Funktionen in JS mit denen man Consents steuern kann.
==== Cookies für Tracking ausschalten ====
https://matomo.org/faq/new-to-piwik/how-can-i-still-track-a-visitor-without-cookies-even-if-they-decline-the-cookie-consent/
Im JS Code hinzufügen:
<pre>
// Call disableCookies before calling trackPageView
_paq.push(['disableCookies']);
_paq.push(['trackPageView']);
</pre>
Cookies die zum identifizieren von Personen genutzt werden sind dann deaktiviert:

_pk_id : contains a visitor id used to identify unique visitors
_pk_ref : to identify from where they came from

Trotzdem können OptIn oder OptOut Cookies unter bestimmten Umständen gesetzt werden:
* der Opt Out Cookie wenn man die Opt Out Methode gewählt hat (nicht Datenschutzkonform). In dem Fall wird der cookie piwik_ignore über die Matomo server Domain gesetzt (a temporary short-lived cookie called MATOMO_SESSID will also be created).
* der Opt In Cookie wenn man nach Consent fragt (mtm_consent will be created).

Allerdings nutzt Matamo das sogenannte '''Fingerprinting''' zum identifizieren eines Nutzers. Man kann davon ausgehen, das dies zukünftig den Cookies geleich gestellt sein wird.

It is based on several metadata, such as the operating system, browser, browser plugins, IP address, browser language; just to name a few to identify a unique visitor. As this feature is less accurate than the one using cookies, the number of visitors and visits will be affected.
https://matomo.org/faq/general/faq_156/ (Beeinträchtigung des Suchergebenisses mit Fingerprinting)

==== Tracking komplett ausschalten ====
https://matomo.org/blog/2018/04/how-to-not-process-any-personal-data-with-matomo-and-what-it-means-for-you/#user-id
Dürfte die einzige Methode sein, mit der man sicher auch zukünftig ohne Banner auskommt. Evtl. kann man noch mit der Methode die Besucher IDs täglich zu wechseln durchkommen. Das würde ausreichen, um z.B. Wegeführungen in der Seite zu optimieren.

Matamo sagt in
https://matomo.org/faq/new-to-piwik/how-do-i-use-matomo-analytics-without-consent-or-cookie-banner/
wenn man Cookies abschaltet und nur Fingerprinting nutzt
No cookie consent is needed because:
* the data is not used for any other purpose than analytics (compared to GA which uses it for other purposes and therefore always requires consent)
* visitors aren’t tracked across websites (compared to GA which does track visitors across many websites)
* fingerprints change daily for every visitor meaning no visitor can be followed across days within the same website, and no user profiles can be generated when cookies are disabled

==== Do not Track berücksichtigen ====
Ist die Default Einstellungen

== Analytics via Log Import ==
Todo - evtl. Performante Lösung, die auch Nachts laufen kann.
[[Matamo - Analytics mit Logfiles]]

== Wartung - alte Reports löschen ==

== Performance ==
https://forum.matomo.org/t/datenbankfahigkeiten/13822

== Custom Tracking ==
Den JS Tracker kann man modifizieren.
https://developer.matomo.org/guides/enrich-js-tracker

== Matamo - Berichte ==
In Einstellungen > Persönlich lassen sich Berichte automatisch erstellen, die dann z.B. per E-Mail versendet werden.

Die Berichte kann man auch Downloaden, dann kann man oben auch einen eigenen Zeitraum festlegen, auf den sich der Bericht bezieht.

=== Berichte nachträglich erstellen ===
Ist es möglich PDF-Berichte nachträglich für vergangene Monate oder gar für einen selbst definierten Zeitraum zu erstellen?
Hintergrund ist, dass zu einer Webseite vergessen wurde, die E-Mailberichte zu aktivieren und die PDF-Berichte nun angefordert wurden.

Ja. In der Übersicht der eingestellten E-Mail-Berichte befindet sich ja ein Link zum Download.
In diesem Link ist auch das Datum enthalten. Dies kann (manuell) je nach Bedarf geändert werden. Dann sollte auch der entsprechende Bericht generiert werden.

== Spezielles Tracking ==
=== Videoplayer ===
Das Video läuft unter HTML5 mit dem video tag. Ich habe folgendes rein geschrieben:

onPlay="_paq.push([‘trackEvent’, ‘video’, ‘Play’, ‘name’])"

Matamo - Website Analytics

2021-07-13T17:00:34Z

109.192.169.230: /* Matamo - Berichte */

https://matomo.org/docs/videos/
https://matomo.org/web-analytics-training/
https://matomo.org/docs/log-analytics-tool-how-to/
== Installation ==
* Installer bei all-inkl
* Archiver einrichten
* Allgemeine Einstellungen
* Datenschutz

== Websites einrichten ==
* Webseite einrichen
* JavaScript hinzufügen - hier ein Beispiel mit deaktivierten Cookies
<pre>


<script type="text/javascript">
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['disableCookies']);
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="https://matamo.webmynet.de/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '2']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>

</pre>

== Datenschutz ==
Einstieg:
https://matomo.org/faq/new-to-piwik/how-do-i-use-matomo-analytics-without-consent-or-cookie-banner/
https://github.com/matomo-org/matomo/issues/12600 - GDPR Compliance Project
Es gibt verschiedene Maßnahmen wie man Matamo rechtskonform gestalten kann. Grob lassen sich 3 Stufen festhalten.
* Tracking mit Cookies oder anderen Wiedererkennungsmaßnahmen die eine Besucher ID über längere Zeiträume erlauben
* Tracking nur für die Session. Die Besucher ID wird jeden Tag verworfen.
* Kein Tracking
Die Auswertungsmöglichkeiten sind dementsprechend unterschiedlich.
=== Welche Cookies verwendet Matamo wofür? ===
https://matomo.org/faq/general/faq_146/
==== Cookie Consent einbauen ====
https://developer.matomo.org/guides/tracking-consent
Matamo bietet einige Funktionen in JS mit denen man Consents steuern kann.
==== Cookies für Tracking ausschalten ====
https://matomo.org/faq/new-to-piwik/how-can-i-still-track-a-visitor-without-cookies-even-if-they-decline-the-cookie-consent/
Im JS Code hinzufügen:
<pre>
// Call disableCookies before calling trackPageView
_paq.push(['disableCookies']);
_paq.push(['trackPageView']);
</pre>
Cookies die zum identifizieren von Personen genutzt werden sind dann deaktiviert:

_pk_id : contains a visitor id used to identify unique visitors
_pk_ref : to identify from where they came from

Trotzdem können OptIn oder OptOut Cookies unter bestimmten Umständen gesetzt werden:
* der Opt Out Cookie wenn man die Opt Out Methode gewählt hat (nicht Datenschutzkonform). In dem Fall wird der cookie piwik_ignore über die Matomo server Domain gesetzt (a temporary short-lived cookie called MATOMO_SESSID will also be created).
* der Opt In Cookie wenn man nach Consent fragt (mtm_consent will be created).

Allerdings nutzt Matamo das sogenannte '''Fingerprinting''' zum identifizieren eines Nutzers. Man kann davon ausgehen, das dies zukünftig den Cookies geleich gestellt sein wird.

It is based on several metadata, such as the operating system, browser, browser plugins, IP address, browser language; just to name a few to identify a unique visitor. As this feature is less accurate than the one using cookies, the number of visitors and visits will be affected.
https://matomo.org/faq/general/faq_156/ (Beeinträchtigung des Suchergebenisses mit Fingerprinting)

==== Tracking komplett ausschalten ====
https://matomo.org/blog/2018/04/how-to-not-process-any-personal-data-with-matomo-and-what-it-means-for-you/#user-id
Dürfte die einzige Methode sein, mit der man sicher auch zukünftig ohne Banner auskommt. Evtl. kann man noch mit der Methode die Besucher IDs täglich zu wechseln durchkommen. Das würde ausreichen, um z.B. Wegeführungen in der Seite zu optimieren.

Matamo sagt in
https://matomo.org/faq/new-to-piwik/how-do-i-use-matomo-analytics-without-consent-or-cookie-banner/
wenn man Cookies abschaltet und nur Fingerprinting nutzt
No cookie consent is needed because:
* the data is not used for any other purpose than analytics (compared to GA which uses it for other purposes and therefore always requires consent)
* visitors aren’t tracked across websites (compared to GA which does track visitors across many websites)
* fingerprints change daily for every visitor meaning no visitor can be followed across days within the same website, and no user profiles can be generated when cookies are disabled

==== Do not Track berücksichtigen ====
Ist die Default Einstellungen

== Analytics via Log Import ==
Todo - evtl. Performante Lösung, die auch Nachts laufen kann.
[[Matamo - Analytics mit Logfiles]]

== Wartung - alte Reports löschen ==

== Performance ==
https://forum.matomo.org/t/datenbankfahigkeiten/13822

== Custom Tracking ==
Den JS Tracker kann man modifizieren.
https://developer.matomo.org/guides/enrich-js-tracker

== Matamo - Berichte ==

=== Berichte nachträglich erstellen ===
Ist es möglich PDF-Berichte nachträglich für vergangene Monate oder gar für einen selbst definierten Zeitraum zu erstellen?
Hintergrund ist, dass zu einer Webseite vergessen wurde, die E-Mailberichte zu aktivieren und die PDF-Berichte nun angefordert wurden.

Ja. In der Übersicht der eingestellten E-Mail-Berichte befindet sich ja ein Link zum Download.
In diesem Link ist auch das Datum enthalten. Dies kann (manuell) je nach Bedarf geändert werden. Dann sollte auch der entsprechende Bericht generiert werden.

Matamo - Analytics mit Logfiles

2021-07-13T15:21:33Z

109.192.169.230:

https://www.kuketz-blog.de/matomo-einwilligungsfreies-tracking-mit-der-logfile-analyse/
https://matomo.org/docs/log-analytics-tool-how-to/
https://matomo.org/faq/log-analytics-tool/

== Quickstart ==
* Website in Matamo hinzufügen
* Logfiles für den Import erreichbar ablegen
* Python Import vornehmen

Beispiel Import in lokal laufendes Matomo
python ~/www/02-Tools/matomo-latest/matomo/misc/log-analytics/import_logs.py --url=http://localhost/matamo --idsite=2 --recorders=4 --enable-http-errors --enable-http-redirects --enable-static --enable-bots access.log
Pflichtparameter sind --url und der Filename der Rest ist optional

Angepasst werden im Beispiel natürlich der Pfad zum lokalen matomo (--url) die ID der Site in die Importiert werden soll (--idsite) und der Logfilename (ganz am Ende).

Matamo - Analytics mit Logfiles

2021-07-13T14:42:20Z

109.192.169.230: Die Seite wurde neu angelegt: „ https://www.kuketz-blog.de/matomo-einwilligungsfreies-tracking-mit-der-logfile-analyse/ https://matomo.org/docs/log-analytics-tool-how-to/ https://matomo.or…“

https://www.kuketz-blog.de/matomo-einwilligungsfreies-tracking-mit-der-logfile-analyse/
https://matomo.org/docs/log-analytics-tool-how-to/
https://matomo.org/faq/log-analytics-tool/

2021-05-25T08:20:34Z

109.192.169.230: /* Wissen */

== Links ==

https://support.apple.com/de-de/guide/terminal/apdc6c1077b-5d5d-4d35-9c19-60f2397b2369/mac
https://www.macwelt.de/ratgeber/OS-X-Autostart-im-Griff-behalten-9775629.html

* Benutzer und Gruppen > Anmeldeobjekte
* Prozesse werden seit Tiger mit dem Launchdeamon verwaltet. Deamons von Drittanbieter bleiben manchmal nach der Deinstallation übrig.
launchctl

== Tools ==

KnockKnock

== Wissen ==

Seit Sommer 2019 stuft Apple Kernel Extensions generell als abgekündigt ("deprecated") ein. Zukünftige macOS-Versionen werden die Erweiterungen nicht mehr laden, ob dies bereits mit macOS 10.16 ab Herbst 2020 der Fall ist, wurde bislang noch nicht bekanntgegeben.

Die neuen "System Extensions" sollen schrittweise klassische Kernel-Erweiterungen ablösen. Sie können nicht mehr so tief in das System eingreifen: Statt im Kernelspace laufen die System Extensions im Userspace. Das gehöre zu den Maßnahmen rund um die Modernisierung der Plattform, wie Apple im Developer-Support-Bereich erklärt, zudem solle es Sicherheit und Zuverlässigkeit des Systems erhöhen.

Es ist übrigens nicht nötig, einen Agent oder Daemon zu löschen, man kann ihn über die Funktion „Unload“ deaktivieren. Er wird dann nicht mehr von launchd geladen.

== Glossar – Die wichtigsten Begriffe ==
launchd
Das Framework launchd ist bei OS X das zentrale Framework für das Starten, Beenden und Verwalten von Prozessen und Skripts.

launchctl
Für die Administration von launchd ist das Tool launchctl zuständig. Man kann damit beispielsweise sämtliche geladenen Prozesse auflisten oder analysieren.

Dämonen und Agents
So genannte „Daemons“ beziehungsweise Dämonen sind systemweit agierende Dienste, die keine Nutzerinteraktion erfordern – sie haben keine eigene Bedienoberfläche. Oft erkennt man sie am Suffix „d“ wie den Time-Machine-Prozess „backupd“. „Agents“ dagegen ist immer auf einen Nutzer bezogen.

Jobs
Das Verhalten von Daemons und Agents wird über eine XLM-Datei beziehungsweise Property List verwaltet, die man auch als „Job“ bezeichnet.

Dienste
Unter Windows sind Systemdienste das Äquivalent zu den Daemons. Im Web und Fachmedien werden aber auch die Mac-Daemons oft als Systemdienste bezeichnet. Das führt leicht zu Verwirrung, da man beim Mac unter „Dienste“ nur die auch „Services“ genannten Programmfunktionen versteht, die man per Tastaturbefehle oder Dienstemenü aufruft.

Anmeldeobjekt
Soll beim Systemstart automatisch ein Programm starten, ist ein Launchagent unnötig. Über die Systemeinstellung Benutzer kann man ein Programm oder auch Skript als Anmeldeobjekte eintragen.

== Daemon kontrollieren - launchctl ==
Skriptverwaltung mit launchd in Terminal auf dem Mac
Während macOS den Prozess launchd verwendet, um Daemons und Agents zu verwalten, kannst du damit deine Shell-Skripts ausführen. Du interagierst nicht direkt mit launchd, sondern verwendest stattdessen den Befehl launchctl zum Laden oder Entladen von launchd-Daemons und -Agents.

Wenn das System gestartet wird, ist launchd der erste Prozess, den der Kernel zum Einrichten des Computers ausführt. Soll das Shell-Skript als Daemon ausgeführt werden, muss es von launchd gestartet werden. Andere Mechanismen zum Starten von Daemons und Agents können nach Ermessen von Apple entfernt werden.

Die Konfigurationsdateien in den folgenden Ordnern vermitteln dir einen Eindruck von den verschiedenen Daemons und Agents, die von launchd verwaltet werden:

Ordner

Verwendung

/System/Library/LaunchDaemons

Von Apple bereitgestellte System-Daemons

/System/Library/LaunchAgents

Von Apple bereitgestellte Agents, die für alle Benutzer auf Benutzerbasis gelten

/Library/LaunchDaemons

System-Daemons anderer Anbieter

/Library/LaunchAgents

Agents anderer Anbieter, die für alle Benutzer auf Benutzerbasis gelten

~/Library/LaunchAgents

Agents anderer Anbieter, die nur für den angemeldeten Benutzer gelten

Mac - Autostart

2021-05-25T07:59:56Z

109.192.169.230:

Mac - Autostart

2021-05-25T07:51:26Z

109.192.169.230: Die Seite wurde neu angelegt: „Links https://support.apple.com/de-de/guide/terminal/apdc6c1077b-5d5d-4d35-9c19-60f2397b2369/mac https://www.macwelt.de/ratgeber/OS-X-Autostart-im-Griff-beh…“

Links

https://support.apple.com/de-de/guide/terminal/apdc6c1077b-5d5d-4d35-9c19-60f2397b2369/mac
https://www.macwelt.de/ratgeber/OS-X-Autostart-im-Griff-behalten-9775629.html

* Benutzer und Gruppen > Anmeldeobjekte
* Prozesse werden seit Tiger mit dem Launchdeamon verwaltet. Deamons von Drittanbieter bleiben manchmal nach der Deinstallation übrig.
launchctl

Mac - Tipps und Tricks

2021-05-25T07:48:15Z

109.192.169.230: /* Autostart von Programmen auf dem Mac */

== Shell Skripte ==
http://stackoverflow.com/questions/26235324/how-to-create-a-batch-file-in-mac
<syntaxhighlight lang="winbatch">
#!/bin/bash
FILENAME=`date +"/Volumes/path/to/network/share/Backup/%Y-%m-%d.tgz"`
cd /directory/to/backup || exit 1
tar -cvz "$FILENAME" .
</syntaxhighlight>
You can save that on your Desktop as backup and then go in Terminal and type:
<syntaxhighlight lang="winbatch">
chmod +x ~/Desktop/backup
</syntaxhighlight>

== Mac Wartung ==
=== Recovery Mode ===
=== PRAM löschen ===
== Benutzerordner verschieben ==
=== Variante 1 - Versteckte Option Speicherort ===
Hinweis: Sinnvoll ist ein '''Adminkonto auf dem Startvolume zu belassen''', mit dem man im Notfall arbeiten kann, falls es mal Probleme gibt.
# '''Privatorder''' des Benutzers auf ein anderes Volume '''kopieren''' (dabei darf aber die Funktion "Eigentümer auf diesem Volume ignorieren" nicht aktiviert sein; siehe Info-Fenster für diese Festplatte unter "Freigaben & Zugriffsrechte").
# '''Systemeinstellung > "Benutzer" Kontextmenü''' des betreffenden Benutzers '''"Erweiterte Optionen"'''
# '''"Benutzerordner" > "Auswählen"'''
# Alten Ordner löschen und '''Neustart'''

Nachteil: Manche aus Linux portierte Apps (z.B. Filezilla) arbeiten nicht mit dem Library Ordner und finden u.U. manche User-Einstellungen nicht, bzw. wollen suchen im Standardpfad. Dafür ist die Symlink Methode besser.

=== Variante 2 - Symlink ===
Hinweis: Vielleicht ist es hier Sinnvoll nur die Dokumente zu verschieben. Auf diese Weise bleiben die Library Daten im schnellen Zugriff auf der SSD?

http://www.macnotes.de/2011/08/31/mac-os-x-benutzerordner-auf-anderes-volume-verschieben/

==== Vorbereitung ====
* Temporären Admin User anlegen (s.o.)
* Festplatten sollten finalen Namen haben
* Mit temporärem Admin anmelden
==== Benutzerordner verschieben ====
* Benutzerordner verschieben über Terminal
sudo ditto -rsrcFork /Users/Benutzer /Volumes/Daten/Benutzer
sudo gibt root Rechte, ditto sorgt dafür, daß Metadaten verschoben werden können.

* Original umbenennen / verstecken
sudo mv /Users/Benutzer /Users/Benutzer.backup

* Symlink erzeugen
sudo ln -s /Volumes/Daten/Benutzer /Users/Benutzer

* Prüfen ob alles stimmt
<pre>
rechnername:~ testadmin$ ls -l /Users
total 10
drwxrwxrwt 5 root wheel 170 23 Aug 17:54 Shared
lrwxr-xr-x 1 root admin 21 23 Aug 16:10 testadmin
lrwxr-xr-x 1 root admin 21 23 Aug 16:10 Benutzer.backup
lrwxr-xr-x 1 root admin 21 23 Aug 16:10 Benutzer -> /Volumes/Daten/Benutzer
rechnername:~ testadmin$
</pre>
* Temporären Account wieder löschen

==== Einzelne Ordner verschieben ====
Dafür sind die Schritte mit ditto, mv und ln für alle Ordner zu wiederholen, die weg sollen. Zu beachten ist, dass die Ordner für “Musik”, “Filme”, “Bilder” usw. auf englisch sind – wer nachschauen möchte, wie sie im Original heißen, gibt im Terminal ein:

ls -l /Users/Benutzer/

== Tools ==
=== Screenshots erstellen ===

Command-Shift-3 -> Desktop Foto
Command-Shift-4 -> Bereich auswählen und fotografieren
Command-Shift-4 danach Space -> App Window fotografieren
+ Control -> speichert das Foto in einem beliebigen Ordner

Außerdem ist die App '''Bildschirmfoto''' (Grab) mit an Bord

=== Dictionary ===
Cursor über Text und Command + Control + D

== Sonderzeichen ==
In den meisten Menüs kann man sie über Bearbeiten -> Sonderzeichen aufrufen. Shortcut ctrl+cmd + Leertaste.

Viele sind über Alt+Key zu erreichen z.B. die Tilde über Alt+N

== Nützliche Shortcuts ==
Grundsätzlich viel was auf Windows mit STRG + Taste geht, geht auf dem Mac mit Apfel (CMD) + Taste

Command + Shift + V to paste text without formatting.
Command + Entfernen -> Löschen statt Papierkorb
Command + Option + Control + 8 -> Invertierte Farben

== Prozesse und System ==
=== Energy Management ===
[[Mac - Hibernation statt Standby]]
=== Schnell mal Speicher frei machen wenn der Rechner langsam wird===

Terminal eingeben:
purge
=== Schnell zwischen Audiodevices umschalten ===
Option + Klick auf Lautsprechersymbol

=== Lautstärke und Helligkeit ===
FineTuning
Shift + Alt + Lautstärke/Helligkeit
Kein Restart Sound
Beim Restart Mute Knopf drücken
Kein Geräusch beim Lautstärke verändern
+ Shift

== Finder Tricks ==
=== Library Ordner anzeigen ===
Gehe zu > Alt Taste

oder im Finder
cmd - j

oder dauerhaft anzeigen mit Terminal
chflags nohidden ~/Library/
verstecke ihn wieder mit
chflags hidden ~/Library/

==== Firefox und Thunderbird Benutzerprofile wieder herstellen ====
https://support.mozilla.org/de/kb/benutzerprofile-mit-ihren-persoenlichen-daten#w_wie-finde-ich-mein-profil

https://support.mozilla.org/de/kb/Benutzerprofile-Thunderbird#w_wo-wird-mein-profil-gespeichert

Firefox Profil im Mac liegt in:
Library > Application Support > Firefox > Profiles

Thunderbird:
Library > Thunderbird > Profiles

Tipp den versteckten Ordner Library kann man sehen wenn man im Finder auf Gehe zu geht und dann die alt Taste drückt.

Man kann Profile einfach verschieben. Das Profil sollte nachher den gleichen Namen haben wir vorher, damit Firefox es übernimmt. Im Zweifel Ordner umbenennen.

== Programme ==
=== Mac Mail ===
[[Mac Mail - E-Mail Programm]]
=== Shortcuts ===
http://www.hcs.harvard.edu/~jrus/Site/System%20Bindings.html

=== Einstellungen und Konfiguration von Programmen auf dem Mac ===
Es gibt eine Reihe von Orten in denen Programme ihre Einstellungen hinterlegen, bzw beziehen.
# Systemeinstellungen (Systemeinstellungen > Keyboard) Standardkeybindings sind z.B. hier hinterlegt: ''/System/‍Library/‍Frameworks/‍AppKit.framework/‍Resources/‍StandardKeyBinding.dict''). Man kann sie auch überschreiben im obigen Fall legt man dann eine Datei hier an: ''~/Library/‍KeyBindings/‍DefaultKeyBinding.dict''.
# Programmordner (z.B.: ''/path/‍to/‍TextMate.app/‍Contents/‍Resources/‍'')
# User Ordner (z.b.: ''~/Library/‍Application Support/‍TextMate'' )
In vielen Fällen kann man Einstellungen aus dem Programmordner kopieren und im User Ordner die Datei abändern. Die Einstellungen dort haben dann Vorrang.

==== Beispiel Shortcuts von Textmate ====
Default ist in
/path/‍to/‍TextMate.app/‍Contents/‍Resources/‍KeyBindings.dict
Und kann man hierhin kopieren und ändern:
~/Library/‍Application Support/‍TextMate/KeyBindings.dict

== Autostart von Programmen auf dem Mac ==
# Checken ob das Programm selbst eine ''Option zum Einstellen'' hat
# ''Einstellungen > Benutzer und Gruppen > MeinBenutzer > Anmeldeobjekte ''Alles was hier drin ist wird automatisch gestartet. Ausblenden bedeutet, dass das Programm zwar gestartet, aber nicht im Vordergrund angezeigt wird.
# ''/Library/LaunchDaemons'' oder ''LaunchAgents''
[[Mac - Autostart]]
=== Firefox ===
==== Firefox Lesezeichen wieder herstellen ====
Todo

== Bedienung verbessern ==
=== Mauszeiger beschleunigen ===
Selbst mit der schnellsten Einstellung in den Einstellungen ist die Maus noch recht langsam. Im Terminal kann man die Beschleunigung (wahrscheinlich auf Kosten der Genauigkeit) verstärken.

'''Befehl zum Anzeigen der aktuellen Maus-Geschwindigkeit:'''

defaults read -g com.apple.mouse.scaling
Selbst mit maximaler Beschleunigung der Zeigerbewegung zeigte OS X 10.6 bei einer Apple Magic Mouse nur einen Wert von “3” an. Um die Mouse zu beschleunigen, kann man diesen Wert aber auch selber eingeben.

'''Befehl zum Setzen der Maus-Geschwindigkeit:'''

defaults write -g com.apple.mouse.scaling 10
Der Wert am Ende ist die gewünschte Maus-Geschwindigkeit, hier “10”. Wir empfehlen dazu verschiedene Werte nacheinander zu testen – am Ende war der Wert “20” für uns eine gute Wahl – das ist aber von Maus-Benutzer zu Maus-Benutzer unterschiedlich.

Achtung: Die Änderung wird meistens erst nach dem Mac-Neustart wirklich deutlich bemerkbar!

Gefunden bei http://www.computerhilfen.de

ProcessWire - Hanna Code (Module)

2021-05-21T08:14:50Z

109.192.169.230:

TextformatterHannaCode

Easily insert any complex HTML, Javascript or PHP output in your ProcessWire content by creating your own Hanna code tags.
https://github.com/ryancramerdesign/ProcessHannaCode#using-hanna-code-from-the-api

== Hanna Code Snippets ==
=== Image from RepeaterMatrix or Repeater ===
<syntaxhighlight lang="php">
<?php
// include a image from the parent page
if (!function_exists('getImagePage')) {

function getImagePage($myPage, $level=1){
// if in repeater or repeaterMatrix find the first parent ProcessWire\Page Page
$maxLevel=5;
if( get_class($myPage) == 'ProcessWire\RepeaterMatrixPage' || get_class($myPage) == 'ProcessWire\RepeaterPage') {
$level +=1;
if($level > $maxLevel) return false;
$forPage = $myPage->getForPage();
//var_dump( $myPage->getForPage());
//echo("<p>next Level: ".get_class($forPage)."</p>");
return $myPage = getImagePage($forPage);

}else if( get_class($myPage) == 'ProcessWire\Page'){

return $myPage;
}
}
}
$out = '';
$imagePage = getImagePage($page);
$images = $imagePage->images;
$imgTag = '';

if($images){
if(isset($file)){
isset($width) ? $image = $images->get($file)->width($width) : $image = $images->get($file);
$imgTag .= "<img src='$image->url'";
if(isset($width)) $imgTag .= " width='$width'";
if(isset($class)) $imgTag .= " class='$class'";
if(isset($style)) $imgTag .= " style='$style'";
$imgTag .= '>';
$out = $imgTag;
}else{
$out .= "<p>Gib einen Bildnamen an z.B.</p>";
foreach($images as $image){
$out .= '<p>[[image file="'.$image->name.'"]]</p>';
}
}
}else{
$out .= '<p>Keine Bilder auf der Seite gefunden</p>';

}
echo $out;
</syntaxhighlight>
=== Templates ===
<?php
echo(urls()->templates);

=== Video ===
Von chargercube - todo security / video field statt dateifeld
<syntaxhighlight lang="php">
<?php

// include a image from the parent page
if (!function_exists('getImagePage')) {

function getImagePage($myPage, $level=1){
// if in repeater or repeaterMatrix find the first parent ProcessWire\Page Page
$maxLevel=5;
if( get_class($myPage) == 'ProcessWire\RepeaterMatrixPage' || get_class($myPage) == 'ProcessWire\RepeaterPage') {
$level +=1;
if($level > $maxLevel) return false;
$forPage = $myPage->getForPage();
//var_dump( $myPage->getForPage());
//echo("<p>next Level: ".get_class($forPage)."</p>");
return $myPage = getImagePage($forPage);

}else if( get_class($myPage) == 'ProcessWire\Page'){

return $myPage;
}
}
}
$out = '';
$imagePage = getImagePage($page);
//var_dump($imagePage->name);
$files = $imagePage->files;
$videoTag = '';
$videoValid = false;
$styles = '';

if($files){
if(isset($file)){
$file = $files->get($file); // we need the file object not the file name
if(isset($width)) $styles = 'width: '.$width.'; max-width: 100%; height: auto;';
else $styles = 'width: 100%; height: auto;';
if($file){
$videoValid = true;
$videoTag .= '
<video style="'.$styles.'" preload="preload" playsinline="" controls="" uk-video="autoplay: false" aria-hidden="false">
<source src="'.$file->url.'" type="video/mp4">
Ihr Browser unterstützt kein Video Tag
</video>
';
$out = $videoTag;
}
}
if(!$videoValid){
$out .= "<p>Gib einen Dateinamen an. Dateien auf dieser Seite:.</p>";
foreach($files as $file){
$out .= '<p>[[video file="'.$file->name.'"]]</p>';
}
}
}else{
$out .= '<p>Keine Dateie auf der Seite gefunden</p>';
}

echo $out;

</syntaxhighlight>

=== Heading ===
Genbänkle

Attributes
tag=h2
heading
<pre>
<?php
echo($heading);
?>
</pre>

=== Next Events ===
Genbänkle
<syntaxhighlight lang="php">
<?php
$today = strtotime(date('Y-m-d'));
$eventPage = $pages->get('/termine/');
$mySelector = "template=event,limit=2,sort=event_date,event_date>=$today";
$events = $pages->find($mySelector);
$eventListMarkup = '';

foreach($events as $event){
$eventListMarkup .= '<div class="date uk-text-muted">'.$event->event_date.'</div>';
$eventListMarkup .= '<p><a href="'.$event->url().'">'.$event->title.'</a></p>';
}

echo $eventListMarkup;
</syntaxhighlight>

=== Childnavigation ===
<syntaxhighlight lang="php">
<?php namespace ProcessWire;
$out = '';
($attr['parent']) ? $parent = $pages->get($attr['parent']) : $parent = $page;
$children = $parent->children();
$out .= '<ul class="childnav">';
foreach ($children as $child){
$out .= '<li class="nav-item"><a class="nav-link" href="'.$child->url.'">'. $child->title . '</a></li>';
}
$out .= '</ul>';
echo $out;
</syntaxhighlight>

GSAP - MotionPathPlugin

2021-05-17T06:16:13Z

109.192.169.230: Die Seite wurde neu angelegt: „Zum Animieren von Objekten entlang eines Pfades. == Helper == === Ankerpunkte auf Progress Werte umrechnen === Benötigt man wenn man bestimmte Punkte anfahre…“

Zum Animieren von Objekten entlang eines Pfades.

== Helper ==
=== Ankerpunkte auf Progress Werte umrechnen ===
Benötigt man wenn man bestimmte Punkte anfahren möchte.
https://greensock.com/docs/v3/HelperFunctions#anchorsToProgress

GSAP - Snippets

2021-05-17T06:14:19Z

109.192.169.230: /* Plugins */

== Links ==
[[GSAP]]
https://greensock.com/cheatsheet/
https://greensock.com/get-started
https://codepen.io/GreenSock/
https://css-tricks.com/writing-smarter-animation-code/ *****
https://greensock.com/forums/topic/17401-multiple-timelinemax-oncomplete-function-help/
Cool Stuff
https://greensock.com/forums/topic/18128-svg-stroke-dasharray-quick-tip/
Read On
https://greensock.com/forums/topic/22793-how-to-work-with-new-labels-object-in-gsap-3/

== Einfache Animationen ==

gsap.to(".logo", {duration: 2, x: 300}); // Dies nennt sich eine Timeline. 300px nach rechts bewegen in 2s mit Standardwerten (ease out...)
gsap.to(".logo", {duration: 2, x: 300, backgroundColor: "#c2c4c8"}); // CSS Eigenschaften die normal ein - haben, werden als Camelcase geschrieben.
// Eigenschaften mit Zeichen in Anführungsstrichen. Fast alles lässt sich Animieren.
gsap.to(".logo", {duration: 2, x: 300, backgroundColor: "#c2c4c8", borderRadius: "50%", border: "4px solid white"});

=== Ease In Out ===

https://greensock.com/docs/v3/Eases
gsap.to(".logo", {duration: 1, x:300, ease: "power2.inOut"});

Ease Möglichkeiten

//OLD ==> NEW
Elastic.easeOut ==> "elastic.out" //or just "elastic" because ".out" is the default flavor
Elastic.easeIn ==> "elastic.in"
Elastic.easeInOut ==> "elastic.inOut"
Elastic.easeOut.config(1, 0.5) ==> "elastic.out(1, 0.5)" //or just "elastic(1, 0.5)"

//and the other configurable eases are much easier!:
SteppedEase.config(5) ==> "steps(5)"
SlowMo.ease.config(0.5, 0.8) ==> "slow(0.5, 0.8)"
RoughEase.ease.config({points:40}) ==> "rough(40)"
ExpoScaleEase.config(0.5, 3) ==> "expoScale(0.5, 3)"

== Staggering ==
<syntaxhighlight lang="javascript">
gsap.to(".class", {
x:"+=100",
duration:1,
stagger: 0.5 //simple stagger of 0.5 seconds
});

//or get advanced:
gsap.to(".class", {
x:"+=100",
duration:1,
stagger: {
amount:2,
from:"center",
grid:"auto",
onComplete: myFunction //define callbacks inside the stagger to make them apply to each sub-tween
}
});
</syntaxhighlight>

== Relative position prefix ==
Relative “>” and “<” position prefix
This feature helps with positioning animations in a timeline. It puts a tween relative to the previous tween’s start or end time and removes the need to add labels through your code.

gsap.method('selector',{}, "<" ) //Inserts a tween at the start of the previous tween

gsap.method('selector',{}, ">" ) //Inserts a tween at the end of the previous

== Keyframes ==

Anstatt mehrerer Tweens kann man auch mehrere TweenProperties als keyframes kombinieren und hat weniger Tipparbeit.
<syntaxhighlight lang="javascript">
gsap.to(".class", {keyframes: [ //<-- an array of keyframes!
{x:100, duration:1},
{y:200, duration:1, delay:0.5}, //create a 0.5 second gap
{rotation:360, duration:2, delay:-0.25} //overlap by 0.25 seconds
]});
</syntaxhighlight>

== Timelines ==
=== Reset Timeline ===
If you want to set the values to the original position set in the animation you can move the the playhead's position before you kill it:

tl.pause(0).kill(true);
ScrollTrigger.getById("trigger1").kill(true); // you have to do a extra kill for ScrollTrigger if used

If you want to remove all inline styles you can use clearProps:

tl.kill(true);
ScrollTrigger.getById("trigger1").kill(true);
gsap.set("#element", {clearProps: true});

=== Globale Timeline kontrollieren (timeScale)===
<pre>
gsap.globalTimeline.timeScale(0.1); //slow everything down
gsap.globalTimeline.pause(); //stop everything, though you might want to use gsap.exportRoot() instead so that you can exclude delayedCalls()
</pre>

== Rotation ==
=== Richtung der Rotation ===
rotation:"270_short" //animates in the shortest direction!
rotation:"270_cw" //animates clockwise
rotation:"270_ccw" //animates counter-clockwise

== Scroll To ==
<syntaxhighlight lang="javascript">
document.querySelector("button").addEventListener("click", function() {
gsap.to(window, { duration: 0.75, scrollTo: ".target" });
});
</syntaxhighlight>

== GSAP Scroll Trigger ==
Update: Die beste Möglichkeit ist mit dem neuen ScrollTrigger Plugin.
[[GSAP - ScrollTrigger]]
https://www.youtube.com/watch?v=X7IBa7vZjmo Intro mit Beispielen
https://greensock.com/scrolltrigger Main Page
https://greensock.com/docs/v3/Plugins/ScrollTrigger Documentation
https://greensock.com/st-mistakes/ Häufige Fehler (auch mit each Schleifen)

Obsolet: https://codepen.io/osublake/pen/a633d0c9e6e2b951496d7f1eb4fd8fb6 (ohne ScrollMagic)

== Good Practice and Time Savers ==
=== Timeline schneller abspielen ===
tl.timeScale(3).repeat(2);
=== Bestimmten Teil abspielen ===
tl.play("myLabel");
wobei die Labels so definiert werden:
.addLabel("out3");
oder
.to("#myElement",{duration:1, rotation:90}, "in3");

=== Schleifen ===
Geeignet für gleiche Animation auf mehreren Elementen hintereinander. Dabei übergeben wir in einer Schleife ein DOM Element und erstellen in einer anonymen Funktion den Tween.
<syntaxhighlight lang="javascript">
$(".fade-in").each(function(){
var tween = gsap.from($(this), {duration: 0.5, scale: 0.7, y: '+=30', ease: Linear.easeNone });
// possible with ScrollMagic
var scene = new ScrollMagic.Scene({
triggerElement: this,
})
.setTween(tween);
});
</syntaxhighlight>

=== Default Werte ===
<syntaxhighlight lang="javascript">
gsap.timeline({defaults:{ease:"power2.out", duration:5}})
.to(".selector1", {x:200})
.to(".selector2", {y:500})
</syntaxhighlight>
=== Nesting Timelines ===

=== Functions to create timelines ===

== Responsive Animations & Media Queries==
https://greensock.com/forums/topic/18719-how-to-manage-gsap-animation-in-mobile-device/
https://greensock.com/forums/topic/18280-truly-responsive-animations/
https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia()

== Plugins ==
=== MotionPathPlugin ===
[[GSAP - MotionPathPlugin]]
=== SVGMorph ===
gsap.to("#circle", {duration: 1, morphSVG:"#hippo"});

== ScrollTrigger ==
[[GSAP - ScrollTrigger]]

https://codepen.io/noeldelgado/pen/BaogqYy
<syntaxhighlight lang="javascript">
// Array erstellen um Animation auf viele Elemente anzuwenden
var panels = gsap.utils.toArray(".panel");
let container = document.querySelector('.scroll-container')

tl = gsap.timeline();
tl.to(panels, { //each panel
xPercent: -100 * (panels.length -1), // move complete width i.e. -500%
scrollTrigger: {
trigger: ".scroll-container",
pin: true,
markers: true,
end: () => "+=" + document.querySelector(".scroll-container").offsetWidth,
}
});

// ODER

panels.forEach((panel, i) => {
gsap.to(panel, {
//...
}
})
</syntaxhighlight>

== Helpers ==
=== gsap loader ===
<syntaxhighlight lang="javascript">
gsap.registerPlugin(ScrollTrigger);

const images = gsap.utils.toArray('img');
const loader = document.querySelector('.loader--text');
const updateProgress = (instance) =>
loader.textContent = `${Math.round(instance.progressedCount * 100 / images.length)}%`;

const showDemo = () => {
document.body.style.overflow = 'auto';
document.scrollingElement.scrollTo(0, 0);
gsap.to(document.querySelector('.loader'), { autoAlpha: 0 });
// do some cool stuff
gsap.utils.toArray('section').forEach((section, index) => {
const w = section.querySelector('.wrapper');
const [x, xEnd] = (index % 2) ? ['100%', (w.scrollWidth - section.offsetWidth) * -1] : [w.scrollWidth * -1, 0];
gsap.fromTo(w, { x }, {
x: xEnd,
scrollTrigger: {
trigger: section,
scrub: 0.5
}
});
});
}
// check how much is loaded
imagesLoaded(images).on('progress', updateProgress).on('always', showDemo);
</syntaxhighlight>

ProcessWire - Navigation Snippets

2021-05-12T10:03:55Z

109.192.169.230: /* Flexible Funktion zum erzeugen von Tree oder Listen Navigationen */

== TODO Seite aufräumen ==
== Siehe auch ==
[[Processwire Module: MarkupSimpleNavigation]] automatisch Navigation aus Seitenbaum erstellen
[[Aligator (ProcessWire)]] - automatische Navigation, gut wenn manipuliert werden muss.
[[Menu Builder (ProcessWire)]] - Menüs im Backend erstellen (Wordpress like)

== Navigation in Pagewire - Einführung ==
=== Navigationstypen allgemein ===
Es gibt verschiedene '''Typen von Navigationen'''. In Processwire hat man ein '''Pages Objekt''', indem auch Zugriff auf Kind- und Elternseiten möglich sind. Es bildet also immer die Sitestruktur ab. Daher übergibt man an die unten aufgeführten Funktionen entweder die Homepage oder die aktuelle Seite.

Unter dem Aspekt auf welcher Seite man sich befindet kann man unterscheiden zwischen:
* '''absolute Navigation''' normalerweise ausgehend von der Rootseite. diese ist dann auf allen Seiten gleich.
** z.B. alle Seiten des ersten Levels stehen in der Hauptnavigation egal auf welcher Seite ich im Moment bin
** z.B. verschachtelte Liste mit 2 oder mehr Leveln für Dropdown Navigationen wie Superfish, Megamenüs (mit zusätzlichen Infos...) oder Bootstrap Navigationen.
** Sitemap
* '''Navigation relativ zur Seite''' Diese kann sich von Seite zu Seite unterscheiden.
** Alle '''Seiten der aktuellen Ebene''' (oft kombiniert mit Breadcrumb / Hier-bin-ich) )
** Hauptebene '''und''' aktueller Level
** Alle Ebenen '''bis zur aktuellen Seite + deren Unterseiten''' falls vorhanden.
In letzten Fall könnte man auch Varianten bauen in denen eine Verschachtelte Liste erzeugt wird aber nur bestimmte Teile absolut Positioniert angezeigt werden und andere versteckt werden. Manchmal möchte man bestimmte Level aber auch an anderer Position zeigen (z.B. Sidebar)
In der Praxis hat man in der Regel
* Mindestens eine Hauptnavigation mit allen Seiten der 1. Ebene oder eine Hauptnavigation mit mehreren Ebenen für Dropdown Navigationen, mobile Navigation oder auch Sitemapartige Navigationen für den Footer (oft mit kleinen Beschreibungen).
* Eine Metanavigation mit Service Seiten wie Kontakt, Impressum etc. oft ist diese im Footer.

=== Unterschiede zwischen Verstecken, Veröffentlichen, Sperren ===
In Processwire sind diese Begriffe mit Userrechten verknüpft. Eine unveröffentlichte Seite kann also durchaus im Frontend aufgerufen werden (es sei denn man regelt das anders.) Vielmehr geht es darum das man User Rollen so gestalten kann, dass man z.B. einem User nur erlaubt unveröffentlichte Seiten zu editieren.

Denoch gibt es auch ein paar weitere Unterschiede.

Gesperrt -> Man kann die Seite nicht zum Editieren aufrufen. Über die Url kann Sie aufgerufen werden.

Unpublished -> Die Seite kann sobald sie gespeichert ist auch aufgerufen werden, WENN der User berechtigt ist. Nicht für Guest User (der normale Viewer)

TODO checken ob die Tabelle so für nicht angemeldete User stimmt.
{| class="wikitable"
|-
! !! Im Menü ($pages->find) !! Über URL erreichbar($pages->get) !! Ausgabe im Frontend !!
|-
| Unpublished / Unveröffentlicht || Nein || Nur User mit passenden Rechten. Gäste -> leere Seite ||
|-
| Hidden / Versteckt || Nein || Ja || Ja - leere Seite (keine Feldausgabe)
|-
| Locked / Gesperrt || Ja || Ja || Ja
|-
| Trash || Nein || Nein ||
|}
==== Seiten auf unveröffentlicht stellen ====
https://processwire.com/talk/topic/29-how-to-unpublish-a-page-without-deleting-it/

Was soll man tun wenn man eine Seite tatsächlich nicht mehr anzeigen will, sie aber noch nicht wegwerfen will?
Ryan schlägt folgendes vor:
* Mülleimer
* Remove Guest Role in Template
*

== Basics ==
=== Basic Navigation ===
<syntaxhighlight lang="php">
<?php
// get the homepage object
$homePage = $pages->get("/");
// get PageArray of homepage object and child page objects
$navItems = $homePage->and($homePage->children);
?>
Now you have a PageArray with the required items, you can iterate over them one at a time, and print the title of the page and the link to the page itself and wrap the whole thing in your list tag.

<ul class="nav">

<?php
// get the homepage object
$homePage = $pages->get("/");
// get PageArray of homepage object and child page objects
$navItems = $homePage->and($homePage->children);
// or if you don't want the home link
// $navItems = $homePage->children;
// iterate over the $navItems PageArray
foreach ($navItems as $navItem):
?>

<li class="nav-item">
<a class="nav-link" href="<?php echo $navItem->url; ?>"><?php echo $navItem->title; ?></a>
</li>

<?php endforeach; ?>

</ul>
</syntaxhighlight>

==== Basic mit active Class ====
<syntaxhighlight lang="php">
<ul class="nav">

<?php
// get the homepage object
$homePage = $pages->get("/");
// get PageArray of homepage object and child page objects
$navItems = $homePage->and($homePage->children);
// or if you don't want the home link
// $navItems = $homePage->children;
// iterate over the $navItems PageArray
foreach ($navItems as $navItem):

// if the id of the page currently being
// iterated equals the id of the current page
$activeClass = ($navItem->id == $page->id) ? " active" : "";
?>

<li class="nav-item">
<a class="nav-link<?php echo $activeClass; ?>" href="<?php echo $navItem->url; ?>"><?php echo $navItem->title; ?></a>
</li>

<?php endforeach; ?>

</ul>
</syntaxhighlight>

==== Child Menu ====
<syntaxhighlight lang="php">

<ul class="sub-menu">

<?php
// get children of the parent of the current page
$childPages = $page->parent->children;

// iterate over the $navItems PageArray
foreach ($childPages as $childPage):

// if the id of the page currently being
// iterated equals the id of the current page
$activeClass = ($navItem->id == $page->id) ? " active" : "";
?>

<li class="nav-item">
<a class="nav-link<?php echo $activeClass; ?>" href="<?php echo $childPage->url; ?>"><?php echo $childPage->title; ?></a>
</li>

<?php endforeach; ?>

</ul>
</syntaxhighlight>

=== Page Level ===
In which level in page tree we are?
$level = count($page->parents);

=== Link to Subpage und Platzhalter (Spacer) ===
Kann man gut für Superfish Menüs etc. benutzen. Bildet das Verhalten von Shortcuts und Spacern aus TYPO3 nach.

Anpassung der renderNavTree() Funktion von Ryan Cramer. Options Field Installieren und als globales Feld "navigation_type" mit den Optionen
<pre>
1=normal|Normal
2=doNotLink|Do not link
3=linkToFirstChild|Link to first childpage
</pre>
konfigurieren. Dann Funktion etwa so anpassen:
<pre>
...
// cycle through all the items
foreach($items as $item) {

// markup for the list item...
// if current item is the same as the page being viewed, add a "current" class to it
$out .= $item->id == wire('page')->id ? "<li class='current'>" : "<li>";

// markup for the link
$navigation_type = $item->navigation_type->id;
switch ( $navigation_type ) {
case 2: // do not link
$out .= "<span class='spacer'>$item->title</span>";
break;
case 3: // link to subpage
if( $item->hasChildren() ){
$out .= '<a href="'.$item->child->url.'">'.$item->title.'</a>';
}else{
$out .= "<span class='spacer'>$item->title</span>";
}
break;
default:
$out .= "<a href='$item->url'>$item->title</a>";
break;
}
...
</pre>

=== Redirect (301) ===
==== Redirect zu erster Unterseite ====
https://processwire.com/talk/topic/15-how-do-i-create-a-page-that-redirects-to-its-first-child/

Field ''redirects_to_first_child'' erstellen und im Template einfügen.
<syntaxhighlight lang="php">
<?php
if($page->numChildren && $page->redirects_to_first_child)
$session->redirect($page->child()->url);
?>
</syntaxhighlight>
Erzeugt 301 Weiterleitung

Anderer Ansatz wäre evtl. den Link bei der Menügenerierung direkt zu generieren. finde ich persönlich besser siehe ''Link to subpage und Platzhalter'' Beispiel. Allerdings sollte man dann vielleicht die Seite trotzdem per 301 Weiterleiten, falls die URL mal direkt aufgerufen wird oder bei Google gelistet ist.

==== Redirect zu anderer Seite in der Navigation ====
https://processwire.com/talk/topic/762-howto-menu-item-that-links-to-another-page/

1. Create a new field and call it 'redirect_url' or something like that, and use the 'URL' fieldtype.

2. Add that field to your template where you'd want to use it, or create a new template just for the purpose, like a template named 'redirect'.

3. Edit the page that you want to be a symlink and populate the 'redirect_url' field with the URL you want it to redirect to.

4. In your nav-generation code that links to the pages, do something like this:

<syntaxhighlight lang="php">
<?php
$url = $subpage->get("redirect_url|url"); // use redirect_url if there, otherwise use url
echo "<a href='$url'>{$subpage->title}</a>";
</syntaxhighlight>
5. You might also want to add this to your template that has the 'redirect_url' field: just in case there's anything linking to it directly. That way it'll send people to the right place either way:

<?php
if($page->redirect_url) $session->redirect($page->redirect_url);

=== Breadcrumb ===
<pre>

<div class='breadcrumbs'><?php
// breadcrumbs are the current page's parents
foreach($page->parents() as $item) {
echo "<span><a href='$item->url'>$item->title</a></span> ";
}
// optionally output the current page as the last item
echo "<span>$page->title</span> ";
?></div>
</pre>

=== One Level Navigation Bar ===
[[ProcessWire - One Level Navigation]]
=== Nächste Seite / Next Page Navigation ===
Beispiel 1
<syntaxhighlight lang="php">
if($page->next->id){
$next = '
<div class="next">
<i>Next:</i> 
<a class="ajax-link" name="'.$page->next->title.'" href="'. $page->next->url .'">
'. $page->next->title .'<span class="fa fa-arrow-right"><span>
</a>
</div>';
}
</syntaxhighlight>

Beispiel 2 (mit zurück zur Elternseite)
<syntaxhighlight lang="php">
$next = '';
if($page->next->id){
$next = '
<a href="'.$page->next->url.'">
<i class="fa fa-angle-right"></i>
</a>
';
}

$prev = '';
if($page->prev->id){
$prev = '
<a href="'.$page->prev->url.'" class="w-inline-block paginaton-but">
<i class="fa fa-angle-left"></i>
</a>';
}

$pagination = '
<div class="container pagination">
<div class="row">

<div class="col col-md-4">
<div class="align-center">
'.$prev.'
</div>
</div>

<div class="col col-md-4">
<div class="align-center">
<a href="'.$page->parent->url.'">
<i class="fa fa-th"></i>
</a>
</div>
</div>

<div class="col col-md-4">
<div class="align-right center">
'.$next.'
</div>
</div>
</div>

</div>
';

echo $pagination;
</syntaxhighlight>

=== Zurück zur Elternseite ===
<syntaxhighlight lang="php">
<div class="back"><a href="'.$page->parent()->url.'">zurück</a></div>
</syntaxhighlight>

=== Kindseiten mit $page->children ===
<?=$page->children?>
Output
5723,4958,5937

Beispiel
<syntaxhighlight lang="php">
<ul>
<?php
foreach($page->children as $child)
echo "<li><a href='{$child->url}'>{$child->title}</a></li>";
?> 
</ul>
</syntaxhighlight>
Ergebnis:
<pre>
<ul> 
<li><a href='/about/contact/'>Contact Us</a></li>
<li><a href='/about/press/'>Press Releases</a></li>
<li><a href='/about/staff/'>Our Staff</a></li> 
</ul>
</pre>
=== Children Tree ===
<syntaxhighlight lang="php">
function listChildrenTree($children, $current, $w) {

echo "<ul>";

foreach($children as $page) {

$class = '';
if($page === $current || $current->parents->slice(1)->has($page) ) {
$class = "class='on' style='font-weight:bold'";
}

$rootid = $w->pages->get("/")->id;

echo "<li><a href='{$page->url}' $class>";
if($page->id == $rootid) echo "<img src='" . $w->config->urls->templates . "styles/images/home.png' width='24' height='28' alt='' />";
echo "{$page->title}</a> ";

if($page->numChildren && $page->id != $rootid) listChildrenTree($page->children, $current, $w);

echo "</li>";
}
echo "</ul>";
}

$children = $pages->get("/")->children();
$children->prepend($pages->get("/"));

listChildrenTree($children, $page, $wire);
</syntaxhighlight>

== Bootstrap Navigation ==
<syntaxhighlight lang="php">
<?php namespace ProcessWire;
// Markup to use wicht navigation_type field (normal=1, no-link=2,subpage=3)
?>

<?php

// bundle up the first level pages and prepend the root home page
$homepage = $pages->get(1);
$pa = $homepage->children;
$pa = $pa->prepend($homepage);

// Set the ball rolling...
$myMenu = renderChildrenOf($pa);
$wrapper = '
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Menü</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
|
</div>
</div>
</div>';
$myMenu = wrap($myMenu,$wrapper);
echo $myMenu;

/*
Navigation for ProcessWire using the Bootstrap 2.2.2 markup
This menu was written by Soma based on work by NetCarver and a bit thrown in by Joss
Bootstrap 3 update by Damienov, with multi level dropdown support fix
*/
function renderChildrenOf($pa, $output = '', $level = 0)
{
$output = '';
$level++;

foreach ($pa as $child) {
$atoggle = '';
$class = '';

if ($child->numChildren && count($child->parents) == 1) {
$class .= 'dropdown';
$atoggle .= ' class="dropdown-toggle" data-toggle="dropdown"';
} else if ($child->numChildren && count($child->parents) > 1 ) {
$class .= 'dropdown-submenu';
$atoggle .= ' class="dropdown-toggle"';
} else if ($child->numChildren && $child->id != 1) {
$class .= 'dropdown-menu';
}

// Makes the current page and it's top level parent add an active class
$class .= ($child === wire("page") || $child === wire("page")->rootParent) ? " active" : '';
$class = strlen($class) ? " class='" . trim($class) . "'" : '';

if ($child->numChildren && count($child->parents) == 1) {
// Add Caret if have children
$output .= "<li$class><a href='$child->url'$atoggle>$child->title <b class='caret'></b></a>";
} else if ($child->numChildren && count($child->parents) > 1) {
$output .= "<li$class><a tabindex='-1' href='$child->url'$atoggle>$child->title</a>";
} else {
$output .= "<li$class><a href='$child->url'$atoggle>$child->title</a>";
}

// If this child is itself a parent and not the root page, then render it's children in their own menu too...
if ($child->numChildren && $child->id != 1) {
$output .= renderChildrenOf($child->children, $output, $level);
}
$output .= '</li>';
}
$outerclass = ($level == 1) ? "nav navbar-nav" : 'dropdown-menu';
return "<ul class='$outerclass'>$output</ul>";
}

?>
</syntaxhighlight>

== Modul: MarkupSimpleNavigation==
[[Processwire Modul - MarkupSimpleNavigation]]

== Weitere Menübeispiele ==
=== Flexible Funktion zum erzeugen von Tree oder Listen Navigationen ===
* ul-Liste oder nur li
* Rendertiefe einstellbar
* Page Objekt von dem Kinder gerendert werden oder PageArray
* Filter (Selector) für Kindobjekte.
* Root voranstellen oder auch nicht (z.B. für Homepage)

<syntaxhighlight lang="php">
/**
* Rendert eine Navi. Kindseiten wenn eine Page übergeben wird.
* Alle Seiten inkl. Kinder wenn ein PageArray übergeben wird.
*
*/
function nav($items,$options = array()){
static $depth = 0;
$defaults = array(
'ul' => true, // wrap in <ul> or not
'class' => '', // class for ul
'depth' => 1, // render depth
'selector' => '', // filters child elements
'prependRoot' => false // if you provide a Page (i.e. home), prepend as menu item
);
$options = array_merge($defaults, $options);
$page = $items->wire('page'); // current page
$class = $depth ? "nav-sub" : rtrim("nav $options[class]");
$attr = rtrim("class='$class'");
$out = $options['ul'] ? "<ul $attr>" : "";
// if given a Page use children as the items and use Page as the header
// if given a page array use each Page as the items
if($items instanceof Page) {
//$header = $items;
if($options['prependRoot']) $out .= "<li class='root'> <a href='$items->url'>$items->title</a></li>";
$items = $items->children($options['selector']);
}
if(!$items->count) return '';

foreach($items as $n => $item) {
$isParent = $options['depth'] && $item->hasChildren && $depth < $options['depth'];
$classes = array();

// determine additional classes
if($item->id == $page->id) $classes[] = 'active';
if($isParent) $classes[] = 'parent';

// open the list item
$out .= count($classes) ? "<li class='" . implode(' ', $classes) . "'>" : "<li>";
$out .= "<a href='$item->url'>$item->title</a>";
// see if we are working with a nested list and go recursive if so
if($isParent) {
$depth++;
$children = $item->children($options['selector']);
$out .= nav($children, array(
'depth' => $options['depth'],
'selector' => $options['selector']
));
$depth--;
}

// close the list item
$out .= "</li>";
}
if($options['ul']) $out .= "</ul>";
return $out;
}
</syntaxhighlight>

=== Standard Tree Navigation ===
Für viele Zwecke ausreichend und leicht anpassbar, die klassische verschachtelte Liste.

=== Menüauswahl Hauptmenü / Metamenü / Footer-Navigation ===
Beispiel 1
Backend Feld menus anlegen Options:

1=Main Menu
2=Meta Menu

topnav.inc
<syntaxhighlight lang="php">
$pa = $homepage->and($homepage->children("menus.id=1"));//only if main menu is checked
$options = array('level' => '1', 'ulClass' => 'sf-menu', 'liClass' => '');
echo "<div>".renderNavTreeType($pa, $maxDepth = 1, $fieldNames = '', $options)."</div>";
</syntaxhighlight>

'''Beispiel 2 (älter)'''

Checkbox anlegen (footer_nav), und dann das Seitenarray etwa so modifizieren.
<pre>
$footer_nav = $pages->find("parent=1, footer_checkbox=1");
$main_nav = $pages->find("parent=1, footer_checkbox!=1");
</pre>

=== Zweispaltige Navigation aus Kindseiten ===
Verbesserungsvorschlag: Anstatt if lieber zwei for Schleifen -> bessere Performance
<syntaxhighlight lang="php">
// Childrens
$n = count($page->children);
$m = ceil($n/2);
$c = 0;

// NAVIGATION & SLIDER Items
$listItem = '';
$navList = '';
$col1 = '<ul class="nav-list col1">';
$col2 = '<ul class="nav-list col2">';
foreach ($page->children as $item) {
if($item->id == $page->rootParent->id) {
$listItem = '<li class="current">';
} else {
$listItem = '<li>';
}
$listItem .= '<a class="ajax-link" href="'.$item->url.'">'.$item->title.'</a></li>';
($c < $m) ? $col1 .= $listItem : $col2 .= $listItem;
$c++;
}
$col1 .= '</ul>';
$col1 .= '</ul>';
$navList = $col1.$col2;
</syntaxhighlight>

Mehrspaltige Navigationen lassen sich auch mit der slice Funktion erstellen:

<syntaxhighlight lang="php">
$categories = $pages->get('/about/sites/categories/')->children();
foreach($categories->slices(3) as $items) {
echo "<div class='uk-width-1-3'><ul>";
echo $items->each("<li><a href='{url}'>{title}</a>");
echo "</ul></div>";
}
</syntaxhighlight>

=== Pushy Menu ===
<syntaxhighlight lang="php">
/**
* Given a group of pages, render a <ul> navigation tree
*
* This is here to demonstrate an example of a more intermediate level
* shared function and usage is completely optional. This is very similar to
* the renderNav() function above except that it can output more than one
* level of navigation (recursively) and can include other fields in the output.
* Assumes there is a field navigation_type to decide how a list item is
* rendered
*
* @param array|PageArray $items
* @param int $maxDepth How many levels of navigation below current should it go?
* @param string $fieldNames Any extra field names to display (separate multiple fields with a space)
* @param array $options extra options for classes configuration etc.
* @return string
*
*/
function renderPushyMenu($items, $maxDepth = 0, $fieldNames = '', $options = array('level' => 0, 'ulClass' => '', 'liClass' => '', 'aClass' => '') ) {

// if we were given a single Page rather than a group of them, we'll pretend they
// gave us a group of them (a group/array of 1)
if($items instanceof Page) $items = array($items);
$out = '';
$c = 0;
$liClasses = array();
$ulClasses = array();
$level = 0;
$liClass = '';
$ulClass = '';

if(!empty($options['level'])) $level = $options['level'];
if(!empty($options['ulClass'])) {
$ulClasses[] = $options['ulClass'];
$ulClass = $options['ulClass'];
}

if(!empty($options['liClass'])) {
$liClasses[] = $options['liClass'];
$liClass = $options['liClass'];
}

// cycle through all the items
foreach($items as $item) {
//$level = count($page->parents);
// LI ITEM
$classes = $liClasses;
//if($item->id == wire('page')->id) $classes[] = 'cur';
if($item->hasChildren) {
// BUTTON instead of Link
$out .= '<li class="pushy-submenu"><button>'.$item->title.'</button>';
}else{
$classes[] = 'level-'.$level;
$out .= '<li class="'.implode($classes,' ').'">';
unset($classes);

// A ITEM
$navigation_type = $item->navigation_type->id;
$classes = $liClasses;
switch ( $navigation_type ) {
case 2: // do not link
$out .= '<span class="spacer">'.$item->title.'</span>';
break;
case 3: // link to subpage
if( $item->hasChildren() ){
$out .= '<a href="'.$item->child->url.'" class="ajax-link">'.$item->title.'</a>';
}else{
$out .= "<span class='spacer'>$item->title</span>";
}
break;
default:
$out .= '<a href="'.$item->url.'" class="ajax-link">'.$item->title.'</a>';
break;
}
unset($classes);
}
// if there are extra field names specified, render markup for each one in a <div>
// having a class name the same as the field name
if($fieldNames) foreach(explode(' ', $fieldNames) as $fieldName) {
$value = $item->get($fieldName);
if($value) $out .= " <div class='$fieldName'>$value</div>";
}

// if the item has children and we're allowed to output tree navigation (maxDepth)
// then call this same function again for the item's children
if($item->hasChildren() && $maxDepth) {
//if($class == 'nav') $class = 'nav nav-tree';
$nextLevelOptions = array('level' => $level+1, 'ulClass' => '', 'liClass' => $liClass);
$out .= renderNavTreeType($item->children, $maxDepth-1, $fieldNames, $nextLevelOptions);
}

// close the list item
$out .= "</li>\n";
}

// if output was generated above, wrap it in a <ul>

if($out) $out = "\n".'<ul class="'.implode($ulClasses,' ').'">'."\n".$out.'</ul>'."\n";

// return the markup we generated above
return $out;
}

</syntaxhighlight>

== Do not link / link to subpage ==
=== MarkupSimpleNavigation XTemplate + Redirect Beispiel ===

https://github.com/s...default-options

'''Menü Platzhalter'''
<syntaxhighlight lang="php">
"xtemplate" => "folder|placeholder", // specify one or more templates
"xitem_tpl" => "<span>{title}</span>", // default markup for page with this template
"xitem_current_tpl" => "<span>{title}</span>"
echo $nav->render(array(
'max_levels'=>2,
'selector'=>"limit=10",
'xtemplates' => 'placeholder|folder'
));
</syntaxhighlight>

'''Redirect Template'''

You could also have a template "redirect" with only a title and a page field (single page) to select any page you want to go.

Then in the code you should be able to write
<syntaxhighlight lang="php">
array('item_tpl' => '<a href="{redirect_page|url}">{title}</a>')
</syntaxhighlight>
So it would take the url of the referenced page in the page field if found, or if not it takes the url of the page itself. Assuming the page field is named "redirect_page".

=== In der Navi ===
Zusätzliches Feld (Options) im Backend mit Namen navigation_type

Beispiel
<syntaxhighlight lang="php">
/**
* Given a group of pages, render a <ul> navigation tree
* If there is a field navigation_type the vals have following meaning
* 1 = Normal
* 2 = Do not link
* 3 = Link to subpage
*
* @param array|PageArray $items
* @param int $maxDepth How many levels of navigation below current should it go?
* @param string $fieldNames Any extra field names to display (separate multiple fields with a space)
* @param string $class CSS class name for containing <ul>
* @return string
*
*/
function renderNavTreeType($items, $maxDepth = 0, $fieldNames = '', $options = array('level' => 0, 'ulClass' => 'nav', 'liClass' => '', 'aClass' => '') ) {

// if we were given a single Page rather than a group of them, we'll pretend they
// gave us a group of them (a group/array of 1)
if($items instanceof Page) $items = array($items);

// $out is where we store the markup we are creating in this function
$out = '';
$c = 0;
$liClasses = array();
$ulClasses = array();
$level = 0;
$liClass = '';
$ulClass = '';

if(!empty($options['level'])) $level = $options['level'];
if(!empty($options['ulClass'])) {
$ulClasses[] = $options['ulClass'];
$ulClass = $options['ulClass'];
}

if(!empty($options['liClass'])) {
$liClasses[] = $options['liClass'];
$liClass = $options['liClass'];
}

// cycle through all the items
foreach($items as $item) {
//$level = count($page->parents);
// LI ITEM
$classes = $liClasses;
if($item->id == wire('page')->id) $classes[] = 'cur';
if($item->hasChildren) $classes[] = 'has_children';
$classes[] = 'level-'.$level;
$out .= '<li class="'.implode($classes,' ').'">';
unset($classes);

// markup for the link
$navigation_type = $item->navigation_type->id;
$classes = $liClasses;
switch ( $navigation_type ) {
case 2: // do not link
$out .= '<span class="spacer">'.$item->title.'</span>';
break;
case 3: // link to subpage
if( $item->hasChildren() ){
$out .= '<a href="'.$item->child->url.'" class="ajax-link">'.$item->title.'</a>';
}else{
$out .= "<span class='spacer'>$item->title</span>";
}
break;
default:
$out .= '<a href="'.$item->url.'" class="ajax-link">'.$item->title.'</a>';
break;
}
unset($classes);
// if there are extra field names specified, render markup for each one in a <div>
// having a class name the same as the field name
if($fieldNames) foreach(explode(' ', $fieldNames) as $fieldName) {
$value = $item->get($fieldName);
if($value) $out .= " <div class='$fieldName'>$value</div>";
}

// if the item has children and we're allowed to output tree navigation (maxDepth)
// then call this same function again for the item's children
if($item->hasChildren() && $maxDepth) {
//if($class == 'nav') $class = 'nav nav-tree';
$nextLevelOptions = array('level' => $level+1, 'ulClass' => '', 'liClass' => $liClass);
$out .= renderNavTreeType($item->children, $maxDepth-1, $fieldNames, $nextLevelOptions);
}

// close the list item
$out .= "</li>\n";
}

// if output was generated above, wrap it in a <ul>

if($out) $out = "\n".'<ul class="'.implode($ulClasses,' ').'">'."\n".$out.'</ul>'."\n";

// return the markup we generated above
return $out;
}
</syntaxhighlight>

=== Redirect über das Template ===
Sinnvoll wenn die URL direkt aufgerufen wird:

$session->redirect($page->redirect_page->url);
or how about "redirect-to-firstchild".

$session->redirect($page->children->first()->url);

== Beispiele für Funktionen (z.B. in _func.php)==
'''Beispiele für Funktionen die Navigationen erzeugen. '''
=== One Level ===
==== Original ProcessWire Demo Beispiel ====

=== Nested List ausgehend von einer Seite (meistens Homepage) ===
<syntaxhighlight lang="php">
<?php namespace ProcessWire;

/**
* Given a group of pages, render a ONE LEVEL NAVBAR
*
* @param array|PageArray $items
* @return string
*
*/
function renderNavMain($pa,$pageId){
if($pa instanceof Page) $pa = array($pa);
$out = '<nav class="menu menu--ferdinand"><ul class="nav navbar-nav menu__list">';
foreach($pa as $item) {
if($item->id == $pageId) {
$out .= "<li class=\"menu__item menu__item--current cur\">";
} else {
$out .= "<li class=\"menu__item\">";
}
// if template isotope-parent add first isotope-child name as hash
if($item->template->name == 'isotope-parent'){
$out .= '<a class="menu__link" href="'.$item->url.'#'.$item->child->name.'">'.$item->title.'</a></li>';
}else $out .= '<a class="menu__link" href="'.$item->url.'">'.$item->title.'</a></li>';
}
$out .= "</ul></nav>";
return $out;
}

/**
* Given a group of pages render a standard ISOTOP MARKUP
*
* @param array|PageArray $items
* @return string
*
*/
function renderNavIsotope($pa){
if($pa instanceof Page) $pa = array($pa);
$out = '<ul class="submenu">';
foreach($pa as $item){
$out .= '<li><a href="#'.$item->name.'" class="isotope-link">'.$item->title.'</a></li>';
}
$out .= "</ul>";
return $out;
}

/**
* Given a group of pages, render a simple <ul> navigation
*
* This is here to demonstrate an example of a simple shared function.
* Usage is completely optional.
*
* @param PageArray $items
* @return string
*
*/
function renderNav(PageArray $items) {

// $out is where we store the markup we are creating in this function
$out = '';

// cycle through all the items
foreach($items as $item) {

// render markup for each navigation item as an <li>
if($item->id == wire('page')->id) {
// if current item is the same as the page being viewed, add a "current" class to it
$out .= "<li class='current'>";
} else {
// otherwise just a regular list item
$out .= "<li>";
}

// markup for the link
$out .= "<a href='$item->url'>$item->title</a> ";

// if the item has summary text, include that too
if($item->summary) $out .= "<div class='summary'>$item->summary</div>";

// close the list item
$out .= "</li>";
}

// if output was generated above, wrap it in a <ul>
if($out) $out = "<ul class='nav'>$out</ul>\n";

// return the markup we generated above
return $out;
}

/**
* Given a group of pages, render a <ul> navigation tree
*
* This is here to demonstrate an example of a more intermediate level
* shared function and usage is completely optional. This is very similar to
* the renderNav() function above except that it can output more than one
* level of navigation (recursively) and can include other fields in the output.
*
* @param array|PageArray $items
* @param int $maxDepth How many levels of navigation below current should it go?
* @param string $fieldNames Any extra field names to display (separate multiple fields with a space)
* @param string $class CSS class name for containing <ul>
* @return string
*
*/
function renderNavTree($items, $maxDepth = 0, $fieldNames = '', $class = 'nav') {

// if we were given a single Page rather than a group of them, we'll pretend they
// gave us a group of them (a group/array of 1)
if($items instanceof Page) $items = array($items);

// $out is where we store the markup we are creating in this function
$out = '';

// cycle through all the items
foreach($items as $item) {

// markup for the list item...
// if current item is the same as the page being viewed, add a "current" class to it
$out .= $item->id == wire('page')->id ? "<li class='current'>" : "<li>";

// markup for the link
$out .= "<a href='$item->url'>$item->title</a>";

// if there are extra field names specified, render markup for each one in a <div>
// having a class name the same as the field name
if($fieldNames) foreach(explode(' ', $fieldNames) as $fieldName) {
$value = $item->get($fieldName);
if($value) $out .= " <div class='$fieldName'>$value</div>";
}

// if the item has children and we're allowed to output tree navigation (maxDepth)
// then call this same function again for the item's children
if($item->hasChildren() && $maxDepth) {
if($class == 'nav') $class = 'nav nav-tree';
$out .= renderNavTree($item->children, $maxDepth-1, $fieldNames, $class);
}

// close the list item
$out .= "</li>";
}

// if output was generated above, wrap it in a <ul>
if($out) $out = "<ul class='$class'>$out</ul>\n";

// return the markup we generated above
return $out;
}

</syntaxhighlight>

== Komplette Beispiele ==
[[ProcessWire - Navigation Beispiele]]

ProcessWire - Navigation Snippets

2021-05-12T09:50:00Z

109.192.169.230: /* Weitere Menübeispiele */

== TODO Seite aufräumen ==
== Siehe auch ==
[[Processwire Module: MarkupSimpleNavigation]] automatisch Navigation aus Seitenbaum erstellen
[[Aligator (ProcessWire)]] - automatische Navigation, gut wenn manipuliert werden muss.
[[Menu Builder (ProcessWire)]] - Menüs im Backend erstellen (Wordpress like)

== Navigation in Pagewire - Einführung ==
=== Navigationstypen allgemein ===
Es gibt verschiedene '''Typen von Navigationen'''. In Processwire hat man ein '''Pages Objekt''', indem auch Zugriff auf Kind- und Elternseiten möglich sind. Es bildet also immer die Sitestruktur ab. Daher übergibt man an die unten aufgeführten Funktionen entweder die Homepage oder die aktuelle Seite.

Unter dem Aspekt auf welcher Seite man sich befindet kann man unterscheiden zwischen:
* '''absolute Navigation''' normalerweise ausgehend von der Rootseite. diese ist dann auf allen Seiten gleich.
** z.B. alle Seiten des ersten Levels stehen in der Hauptnavigation egal auf welcher Seite ich im Moment bin
** z.B. verschachtelte Liste mit 2 oder mehr Leveln für Dropdown Navigationen wie Superfish, Megamenüs (mit zusätzlichen Infos...) oder Bootstrap Navigationen.
** Sitemap
* '''Navigation relativ zur Seite''' Diese kann sich von Seite zu Seite unterscheiden.
** Alle '''Seiten der aktuellen Ebene''' (oft kombiniert mit Breadcrumb / Hier-bin-ich) )
** Hauptebene '''und''' aktueller Level
** Alle Ebenen '''bis zur aktuellen Seite + deren Unterseiten''' falls vorhanden.
In letzten Fall könnte man auch Varianten bauen in denen eine Verschachtelte Liste erzeugt wird aber nur bestimmte Teile absolut Positioniert angezeigt werden und andere versteckt werden. Manchmal möchte man bestimmte Level aber auch an anderer Position zeigen (z.B. Sidebar)
In der Praxis hat man in der Regel
* Mindestens eine Hauptnavigation mit allen Seiten der 1. Ebene oder eine Hauptnavigation mit mehreren Ebenen für Dropdown Navigationen, mobile Navigation oder auch Sitemapartige Navigationen für den Footer (oft mit kleinen Beschreibungen).
* Eine Metanavigation mit Service Seiten wie Kontakt, Impressum etc. oft ist diese im Footer.

=== Unterschiede zwischen Verstecken, Veröffentlichen, Sperren ===
In Processwire sind diese Begriffe mit Userrechten verknüpft. Eine unveröffentlichte Seite kann also durchaus im Frontend aufgerufen werden (es sei denn man regelt das anders.) Vielmehr geht es darum das man User Rollen so gestalten kann, dass man z.B. einem User nur erlaubt unveröffentlichte Seiten zu editieren.

Denoch gibt es auch ein paar weitere Unterschiede.

Gesperrt -> Man kann die Seite nicht zum Editieren aufrufen. Über die Url kann Sie aufgerufen werden.

Unpublished -> Die Seite kann sobald sie gespeichert ist auch aufgerufen werden, WENN der User berechtigt ist. Nicht für Guest User (der normale Viewer)

TODO checken ob die Tabelle so für nicht angemeldete User stimmt.
{| class="wikitable"
|-
! !! Im Menü ($pages->find) !! Über URL erreichbar($pages->get) !! Ausgabe im Frontend !!
|-
| Unpublished / Unveröffentlicht || Nein || Nur User mit passenden Rechten. Gäste -> leere Seite ||
|-
| Hidden / Versteckt || Nein || Ja || Ja - leere Seite (keine Feldausgabe)
|-
| Locked / Gesperrt || Ja || Ja || Ja
|-
| Trash || Nein || Nein ||
|}
==== Seiten auf unveröffentlicht stellen ====
https://processwire.com/talk/topic/29-how-to-unpublish-a-page-without-deleting-it/

Was soll man tun wenn man eine Seite tatsächlich nicht mehr anzeigen will, sie aber noch nicht wegwerfen will?
Ryan schlägt folgendes vor:
* Mülleimer
* Remove Guest Role in Template
*

== Basics ==
=== Basic Navigation ===
<syntaxhighlight lang="php">
<?php
// get the homepage object
$homePage = $pages->get("/");
// get PageArray of homepage object and child page objects
$navItems = $homePage->and($homePage->children);
?>
Now you have a PageArray with the required items, you can iterate over them one at a time, and print the title of the page and the link to the page itself and wrap the whole thing in your list tag.

<ul class="nav">

<?php
// get the homepage object
$homePage = $pages->get("/");
// get PageArray of homepage object and child page objects
$navItems = $homePage->and($homePage->children);
// or if you don't want the home link
// $navItems = $homePage->children;
// iterate over the $navItems PageArray
foreach ($navItems as $navItem):
?>

<li class="nav-item">
<a class="nav-link" href="<?php echo $navItem->url; ?>"><?php echo $navItem->title; ?></a>
</li>

<?php endforeach; ?>

</ul>
</syntaxhighlight>

==== Basic mit active Class ====
<syntaxhighlight lang="php">
<ul class="nav">

<?php
// get the homepage object
$homePage = $pages->get("/");
// get PageArray of homepage object and child page objects
$navItems = $homePage->and($homePage->children);
// or if you don't want the home link
// $navItems = $homePage->children;
// iterate over the $navItems PageArray
foreach ($navItems as $navItem):

// if the id of the page currently being
// iterated equals the id of the current page
$activeClass = ($navItem->id == $page->id) ? " active" : "";
?>

<li class="nav-item">
<a class="nav-link<?php echo $activeClass; ?>" href="<?php echo $navItem->url; ?>"><?php echo $navItem->title; ?></a>
</li>

<?php endforeach; ?>

</ul>
</syntaxhighlight>

==== Child Menu ====
<syntaxhighlight lang="php">

<ul class="sub-menu">

<?php
// get children of the parent of the current page
$childPages = $page->parent->children;

// iterate over the $navItems PageArray
foreach ($childPages as $childPage):

// if the id of the page currently being
// iterated equals the id of the current page
$activeClass = ($navItem->id == $page->id) ? " active" : "";
?>

<li class="nav-item">
<a class="nav-link<?php echo $activeClass; ?>" href="<?php echo $childPage->url; ?>"><?php echo $childPage->title; ?></a>
</li>

<?php endforeach; ?>

</ul>
</syntaxhighlight>

=== Page Level ===
In which level in page tree we are?
$level = count($page->parents);

=== Link to Subpage und Platzhalter (Spacer) ===
Kann man gut für Superfish Menüs etc. benutzen. Bildet das Verhalten von Shortcuts und Spacern aus TYPO3 nach.

Anpassung der renderNavTree() Funktion von Ryan Cramer. Options Field Installieren und als globales Feld "navigation_type" mit den Optionen
<pre>
1=normal|Normal
2=doNotLink|Do not link
3=linkToFirstChild|Link to first childpage
</pre>
konfigurieren. Dann Funktion etwa so anpassen:
<pre>
...
// cycle through all the items
foreach($items as $item) {

// markup for the list item...
// if current item is the same as the page being viewed, add a "current" class to it
$out .= $item->id == wire('page')->id ? "<li class='current'>" : "<li>";

// markup for the link
$navigation_type = $item->navigation_type->id;
switch ( $navigation_type ) {
case 2: // do not link
$out .= "<span class='spacer'>$item->title</span>";
break;
case 3: // link to subpage
if( $item->hasChildren() ){
$out .= '<a href="'.$item->child->url.'">'.$item->title.'</a>';
}else{
$out .= "<span class='spacer'>$item->title</span>";
}
break;
default:
$out .= "<a href='$item->url'>$item->title</a>";
break;
}
...
</pre>

=== Redirect (301) ===
==== Redirect zu erster Unterseite ====
https://processwire.com/talk/topic/15-how-do-i-create-a-page-that-redirects-to-its-first-child/

Field ''redirects_to_first_child'' erstellen und im Template einfügen.
<syntaxhighlight lang="php">
<?php
if($page->numChildren && $page->redirects_to_first_child)
$session->redirect($page->child()->url);
?>
</syntaxhighlight>
Erzeugt 301 Weiterleitung

Anderer Ansatz wäre evtl. den Link bei der Menügenerierung direkt zu generieren. finde ich persönlich besser siehe ''Link to subpage und Platzhalter'' Beispiel. Allerdings sollte man dann vielleicht die Seite trotzdem per 301 Weiterleiten, falls die URL mal direkt aufgerufen wird oder bei Google gelistet ist.

==== Redirect zu anderer Seite in der Navigation ====
https://processwire.com/talk/topic/762-howto-menu-item-that-links-to-another-page/

1. Create a new field and call it 'redirect_url' or something like that, and use the 'URL' fieldtype.

2. Add that field to your template where you'd want to use it, or create a new template just for the purpose, like a template named 'redirect'.

3. Edit the page that you want to be a symlink and populate the 'redirect_url' field with the URL you want it to redirect to.

4. In your nav-generation code that links to the pages, do something like this:

<syntaxhighlight lang="php">
<?php
$url = $subpage->get("redirect_url|url"); // use redirect_url if there, otherwise use url
echo "<a href='$url'>{$subpage->title}</a>";
</syntaxhighlight>
5. You might also want to add this to your template that has the 'redirect_url' field: just in case there's anything linking to it directly. That way it'll send people to the right place either way:

<?php
if($page->redirect_url) $session->redirect($page->redirect_url);

=== Breadcrumb ===
<pre>

<div class='breadcrumbs'><?php
// breadcrumbs are the current page's parents
foreach($page->parents() as $item) {
echo "<span><a href='$item->url'>$item->title</a></span> ";
}
// optionally output the current page as the last item
echo "<span>$page->title</span> ";
?></div>
</pre>

=== One Level Navigation Bar ===
[[ProcessWire - One Level Navigation]]
=== Nächste Seite / Next Page Navigation ===
Beispiel 1
<syntaxhighlight lang="php">
if($page->next->id){
$next = '
<div class="next">
<i>Next:</i> 
<a class="ajax-link" name="'.$page->next->title.'" href="'. $page->next->url .'">
'. $page->next->title .'<span class="fa fa-arrow-right"><span>
</a>
</div>';
}
</syntaxhighlight>

Beispiel 2 (mit zurück zur Elternseite)
<syntaxhighlight lang="php">
$next = '';
if($page->next->id){
$next = '
<a href="'.$page->next->url.'">
<i class="fa fa-angle-right"></i>
</a>
';
}

$prev = '';
if($page->prev->id){
$prev = '
<a href="'.$page->prev->url.'" class="w-inline-block paginaton-but">
<i class="fa fa-angle-left"></i>
</a>';
}

$pagination = '
<div class="container pagination">
<div class="row">

<div class="col col-md-4">
<div class="align-center">
'.$prev.'
</div>
</div>

<div class="col col-md-4">
<div class="align-center">
<a href="'.$page->parent->url.'">
<i class="fa fa-th"></i>
</a>
</div>
</div>

<div class="col col-md-4">
<div class="align-right center">
'.$next.'
</div>
</div>
</div>

</div>
';

echo $pagination;
</syntaxhighlight>

=== Zurück zur Elternseite ===
<syntaxhighlight lang="php">
<div class="back"><a href="'.$page->parent()->url.'">zurück</a></div>
</syntaxhighlight>

=== Kindseiten mit $page->children ===
<?=$page->children?>
Output
5723,4958,5937

Beispiel
<syntaxhighlight lang="php">
<ul>
<?php
foreach($page->children as $child)
echo "<li><a href='{$child->url}'>{$child->title}</a></li>";
?> 
</ul>
</syntaxhighlight>
Ergebnis:
<pre>
<ul> 
<li><a href='/about/contact/'>Contact Us</a></li>
<li><a href='/about/press/'>Press Releases</a></li>
<li><a href='/about/staff/'>Our Staff</a></li> 
</ul>
</pre>
=== Children Tree ===
<syntaxhighlight lang="php">
function listChildrenTree($children, $current, $w) {

echo "<ul>";

foreach($children as $page) {

$class = '';
if($page === $current || $current->parents->slice(1)->has($page) ) {
$class = "class='on' style='font-weight:bold'";
}

$rootid = $w->pages->get("/")->id;

echo "<li><a href='{$page->url}' $class>";
if($page->id == $rootid) echo "<img src='" . $w->config->urls->templates . "styles/images/home.png' width='24' height='28' alt='' />";
echo "{$page->title}</a> ";

if($page->numChildren && $page->id != $rootid) listChildrenTree($page->children, $current, $w);

echo "</li>";
}
echo "</ul>";
}

$children = $pages->get("/")->children();
$children->prepend($pages->get("/"));

listChildrenTree($children, $page, $wire);
</syntaxhighlight>

== Bootstrap Navigation ==
<syntaxhighlight lang="php">
<?php namespace ProcessWire;
// Markup to use wicht navigation_type field (normal=1, no-link=2,subpage=3)
?>

<?php

// bundle up the first level pages and prepend the root home page
$homepage = $pages->get(1);
$pa = $homepage->children;
$pa = $pa->prepend($homepage);

// Set the ball rolling...
$myMenu = renderChildrenOf($pa);
$wrapper = '
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Menü</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
|
</div>
</div>
</div>';
$myMenu = wrap($myMenu,$wrapper);
echo $myMenu;

/*
Navigation for ProcessWire using the Bootstrap 2.2.2 markup
This menu was written by Soma based on work by NetCarver and a bit thrown in by Joss
Bootstrap 3 update by Damienov, with multi level dropdown support fix
*/
function renderChildrenOf($pa, $output = '', $level = 0)
{
$output = '';
$level++;

foreach ($pa as $child) {
$atoggle = '';
$class = '';

if ($child->numChildren && count($child->parents) == 1) {
$class .= 'dropdown';
$atoggle .= ' class="dropdown-toggle" data-toggle="dropdown"';
} else if ($child->numChildren && count($child->parents) > 1 ) {
$class .= 'dropdown-submenu';
$atoggle .= ' class="dropdown-toggle"';
} else if ($child->numChildren && $child->id != 1) {
$class .= 'dropdown-menu';
}

// Makes the current page and it's top level parent add an active class
$class .= ($child === wire("page") || $child === wire("page")->rootParent) ? " active" : '';
$class = strlen($class) ? " class='" . trim($class) . "'" : '';

if ($child->numChildren && count($child->parents) == 1) {
// Add Caret if have children
$output .= "<li$class><a href='$child->url'$atoggle>$child->title <b class='caret'></b></a>";
} else if ($child->numChildren && count($child->parents) > 1) {
$output .= "<li$class><a tabindex='-1' href='$child->url'$atoggle>$child->title</a>";
} else {
$output .= "<li$class><a href='$child->url'$atoggle>$child->title</a>";
}

// If this child is itself a parent and not the root page, then render it's children in their own menu too...
if ($child->numChildren && $child->id != 1) {
$output .= renderChildrenOf($child->children, $output, $level);
}
$output .= '</li>';
}
$outerclass = ($level == 1) ? "nav navbar-nav" : 'dropdown-menu';
return "<ul class='$outerclass'>$output</ul>";
}

?>
</syntaxhighlight>

== Modul: MarkupSimpleNavigation==
[[Processwire Modul - MarkupSimpleNavigation]]

== Weitere Menübeispiele ==
=== Flexible Funktion zum erzeugen von Tree oder Listen Navigationen ===
* ul-Liste oder nur li
* Rendertiefe einstellbar
* Page Objekt von dem Kinder gerendert werden oder PageArray
* Filter (Selector) für Kindobjekte.
* Root voranstellen oder auch nicht (z.B. für Homepage)

<syntaxhighlight lang="php">
/**
* Rendert eine Navi. Kindseiten wenn eine Page übergeben wird.
* Alle Seiten inkl. Kinder wenn ein PageArray übergeben wird.
*
*/
function nav($items,$options = array()){
static $depth = 0;
$defaults = array(
'ul' => true, // wrap in <ul> or not
'class' => '', // class for ul
'depth' => 1, // render depth
'selector' => '', // filters child elements
'prependRoot' => false // if you provide a Page (i.e. home), prepend as menu item
);
$options = array_merge($defaults, $options);
$page = $items->wire('page'); // current page
$class = $depth ? "nav-sub" : rtrim("nav $options[class]");
$attr = rtrim("class='$class'");
$out = $options['ul'] ? "<ul $attr>" : "";
// if given a Page use children as the items and use Page as the header
// if given a page array use each Page as the items
if($items instanceof Page) {
//$header = $items;
$items = $items->children($options['selector']);
}
if(!$items->count) return '';
// CYCLE
foreach($items as $n => $item) {
$isParent = $options['depth'] && $item->hasChildren && $depth < $options['depth'];
$classes = array();

// determine additional classes
if($item->id == $page->id) $classes[] = 'active';
if($isParent) $classes[] = 'parent';

// open the list item
$out .= count($classes) ? "<li class='" . implode(' ', $classes) . "'>" : "<li>";
$out .= "<a href='$item->url'>$item->title</a>";
// see if we are working with a nested list and go recursive if so
if($isParent) {
$depth++;
$out .= nav($item->children, array(
'depth' => $options['depth'],
'selector' => $options['selector']
));
$depth--;
}

// close the list item
$out .= "</li>";
}
if($options['ul']) $out .= "</ul>";
return $out;
}
</syntaxhighlight>

=== Standard Tree Navigation ===
Für viele Zwecke ausreichend und leicht anpassbar, die klassische verschachtelte Liste.

=== Menüauswahl Hauptmenü / Metamenü / Footer-Navigation ===
Beispiel 1
Backend Feld menus anlegen Options:

1=Main Menu
2=Meta Menu

topnav.inc
<syntaxhighlight lang="php">
$pa = $homepage->and($homepage->children("menus.id=1"));//only if main menu is checked
$options = array('level' => '1', 'ulClass' => 'sf-menu', 'liClass' => '');
echo "<div>".renderNavTreeType($pa, $maxDepth = 1, $fieldNames = '', $options)."</div>";
</syntaxhighlight>

'''Beispiel 2 (älter)'''

Checkbox anlegen (footer_nav), und dann das Seitenarray etwa so modifizieren.
<pre>
$footer_nav = $pages->find("parent=1, footer_checkbox=1");
$main_nav = $pages->find("parent=1, footer_checkbox!=1");
</pre>

=== Zweispaltige Navigation aus Kindseiten ===
Verbesserungsvorschlag: Anstatt if lieber zwei for Schleifen -> bessere Performance
<syntaxhighlight lang="php">
// Childrens
$n = count($page->children);
$m = ceil($n/2);
$c = 0;

// NAVIGATION & SLIDER Items
$listItem = '';
$navList = '';
$col1 = '<ul class="nav-list col1">';
$col2 = '<ul class="nav-list col2">';
foreach ($page->children as $item) {
if($item->id == $page->rootParent->id) {
$listItem = '<li class="current">';
} else {
$listItem = '<li>';
}
$listItem .= '<a class="ajax-link" href="'.$item->url.'">'.$item->title.'</a></li>';
($c < $m) ? $col1 .= $listItem : $col2 .= $listItem;
$c++;
}
$col1 .= '</ul>';
$col1 .= '</ul>';
$navList = $col1.$col2;
</syntaxhighlight>

Mehrspaltige Navigationen lassen sich auch mit der slice Funktion erstellen:

<syntaxhighlight lang="php">
$categories = $pages->get('/about/sites/categories/')->children();
foreach($categories->slices(3) as $items) {
echo "<div class='uk-width-1-3'><ul>";
echo $items->each("<li><a href='{url}'>{title}</a>");
echo "</ul></div>";
}
</syntaxhighlight>

=== Pushy Menu ===
<syntaxhighlight lang="php">
/**
* Given a group of pages, render a <ul> navigation tree
*
* This is here to demonstrate an example of a more intermediate level
* shared function and usage is completely optional. This is very similar to
* the renderNav() function above except that it can output more than one
* level of navigation (recursively) and can include other fields in the output.
* Assumes there is a field navigation_type to decide how a list item is
* rendered
*
* @param array|PageArray $items
* @param int $maxDepth How many levels of navigation below current should it go?
* @param string $fieldNames Any extra field names to display (separate multiple fields with a space)
* @param array $options extra options for classes configuration etc.
* @return string
*
*/
function renderPushyMenu($items, $maxDepth = 0, $fieldNames = '', $options = array('level' => 0, 'ulClass' => '', 'liClass' => '', 'aClass' => '') ) {

// if we were given a single Page rather than a group of them, we'll pretend they
// gave us a group of them (a group/array of 1)
if($items instanceof Page) $items = array($items);
$out = '';
$c = 0;
$liClasses = array();
$ulClasses = array();
$level = 0;
$liClass = '';
$ulClass = '';

if(!empty($options['level'])) $level = $options['level'];
if(!empty($options['ulClass'])) {
$ulClasses[] = $options['ulClass'];
$ulClass = $options['ulClass'];
}

if(!empty($options['liClass'])) {
$liClasses[] = $options['liClass'];
$liClass = $options['liClass'];
}

// cycle through all the items
foreach($items as $item) {
//$level = count($page->parents);
// LI ITEM
$classes = $liClasses;
//if($item->id == wire('page')->id) $classes[] = 'cur';
if($item->hasChildren) {
// BUTTON instead of Link
$out .= '<li class="pushy-submenu"><button>'.$item->title.'</button>';
}else{
$classes[] = 'level-'.$level;
$out .= '<li class="'.implode($classes,' ').'">';
unset($classes);

// A ITEM
$navigation_type = $item->navigation_type->id;
$classes = $liClasses;
switch ( $navigation_type ) {
case 2: // do not link
$out .= '<span class="spacer">'.$item->title.'</span>';
break;
case 3: // link to subpage
if( $item->hasChildren() ){
$out .= '<a href="'.$item->child->url.'" class="ajax-link">'.$item->title.'</a>';
}else{
$out .= "<span class='spacer'>$item->title</span>";
}
break;
default:
$out .= '<a href="'.$item->url.'" class="ajax-link">'.$item->title.'</a>';
break;
}
unset($classes);
}
// if there are extra field names specified, render markup for each one in a <div>
// having a class name the same as the field name
if($fieldNames) foreach(explode(' ', $fieldNames) as $fieldName) {
$value = $item->get($fieldName);
if($value) $out .= " <div class='$fieldName'>$value</div>";
}

// if the item has children and we're allowed to output tree navigation (maxDepth)
// then call this same function again for the item's children
if($item->hasChildren() && $maxDepth) {
//if($class == 'nav') $class = 'nav nav-tree';
$nextLevelOptions = array('level' => $level+1, 'ulClass' => '', 'liClass' => $liClass);
$out .= renderNavTreeType($item->children, $maxDepth-1, $fieldNames, $nextLevelOptions);
}

// close the list item
$out .= "</li>\n";
}

// if output was generated above, wrap it in a <ul>

if($out) $out = "\n".'<ul class="'.implode($ulClasses,' ').'">'."\n".$out.'</ul>'."\n";

// return the markup we generated above
return $out;
}

</syntaxhighlight>

== Do not link / link to subpage ==
=== MarkupSimpleNavigation XTemplate + Redirect Beispiel ===

https://github.com/s...default-options

'''Menü Platzhalter'''
<syntaxhighlight lang="php">
"xtemplate" => "folder|placeholder", // specify one or more templates
"xitem_tpl" => "<span>{title}</span>", // default markup for page with this template
"xitem_current_tpl" => "<span>{title}</span>"
echo $nav->render(array(
'max_levels'=>2,
'selector'=>"limit=10",
'xtemplates' => 'placeholder|folder'
));
</syntaxhighlight>

'''Redirect Template'''

You could also have a template "redirect" with only a title and a page field (single page) to select any page you want to go.

Then in the code you should be able to write
<syntaxhighlight lang="php">
array('item_tpl' => '<a href="{redirect_page|url}">{title}</a>')
</syntaxhighlight>
So it would take the url of the referenced page in the page field if found, or if not it takes the url of the page itself. Assuming the page field is named "redirect_page".

=== In der Navi ===
Zusätzliches Feld (Options) im Backend mit Namen navigation_type

Beispiel
<syntaxhighlight lang="php">
/**
* Given a group of pages, render a <ul> navigation tree
* If there is a field navigation_type the vals have following meaning
* 1 = Normal
* 2 = Do not link
* 3 = Link to subpage
*
* @param array|PageArray $items
* @param int $maxDepth How many levels of navigation below current should it go?
* @param string $fieldNames Any extra field names to display (separate multiple fields with a space)
* @param string $class CSS class name for containing <ul>
* @return string
*
*/
function renderNavTreeType($items, $maxDepth = 0, $fieldNames = '', $options = array('level' => 0, 'ulClass' => 'nav', 'liClass' => '', 'aClass' => '') ) {

// if we were given a single Page rather than a group of them, we'll pretend they
// gave us a group of them (a group/array of 1)
if($items instanceof Page) $items = array($items);

// $out is where we store the markup we are creating in this function
$out = '';
$c = 0;
$liClasses = array();
$ulClasses = array();
$level = 0;
$liClass = '';
$ulClass = '';

if(!empty($options['level'])) $level = $options['level'];
if(!empty($options['ulClass'])) {
$ulClasses[] = $options['ulClass'];
$ulClass = $options['ulClass'];
}

if(!empty($options['liClass'])) {
$liClasses[] = $options['liClass'];
$liClass = $options['liClass'];
}

// cycle through all the items
foreach($items as $item) {
//$level = count($page->parents);
// LI ITEM
$classes = $liClasses;
if($item->id == wire('page')->id) $classes[] = 'cur';
if($item->hasChildren) $classes[] = 'has_children';
$classes[] = 'level-'.$level;
$out .= '<li class="'.implode($classes,' ').'">';
unset($classes);

// markup for the link
$navigation_type = $item->navigation_type->id;
$classes = $liClasses;
switch ( $navigation_type ) {
case 2: // do not link
$out .= '<span class="spacer">'.$item->title.'</span>';
break;
case 3: // link to subpage
if( $item->hasChildren() ){
$out .= '<a href="'.$item->child->url.'" class="ajax-link">'.$item->title.'</a>';
}else{
$out .= "<span class='spacer'>$item->title</span>";
}
break;
default:
$out .= '<a href="'.$item->url.'" class="ajax-link">'.$item->title.'</a>';
break;
}
unset($classes);
// if there are extra field names specified, render markup for each one in a <div>
// having a class name the same as the field name
if($fieldNames) foreach(explode(' ', $fieldNames) as $fieldName) {
$value = $item->get($fieldName);
if($value) $out .= " <div class='$fieldName'>$value</div>";
}

// if the item has children and we're allowed to output tree navigation (maxDepth)
// then call this same function again for the item's children
if($item->hasChildren() && $maxDepth) {
//if($class == 'nav') $class = 'nav nav-tree';
$nextLevelOptions = array('level' => $level+1, 'ulClass' => '', 'liClass' => $liClass);
$out .= renderNavTreeType($item->children, $maxDepth-1, $fieldNames, $nextLevelOptions);
}

// close the list item
$out .= "</li>\n";
}

// if output was generated above, wrap it in a <ul>

if($out) $out = "\n".'<ul class="'.implode($ulClasses,' ').'">'."\n".$out.'</ul>'."\n";

// return the markup we generated above
return $out;
}
</syntaxhighlight>

=== Redirect über das Template ===
Sinnvoll wenn die URL direkt aufgerufen wird:

$session->redirect($page->redirect_page->url);
or how about "redirect-to-firstchild".

$session->redirect($page->children->first()->url);

== Beispiele für Funktionen (z.B. in _func.php)==
'''Beispiele für Funktionen die Navigationen erzeugen. '''
=== One Level ===
==== Original ProcessWire Demo Beispiel ====

=== Nested List ausgehend von einer Seite (meistens Homepage) ===
<syntaxhighlight lang="php">
<?php namespace ProcessWire;

/**
* Given a group of pages, render a ONE LEVEL NAVBAR
*
* @param array|PageArray $items
* @return string
*
*/
function renderNavMain($pa,$pageId){
if($pa instanceof Page) $pa = array($pa);
$out = '<nav class="menu menu--ferdinand"><ul class="nav navbar-nav menu__list">';
foreach($pa as $item) {
if($item->id == $pageId) {
$out .= "<li class=\"menu__item menu__item--current cur\">";
} else {
$out .= "<li class=\"menu__item\">";
}
// if template isotope-parent add first isotope-child name as hash
if($item->template->name == 'isotope-parent'){
$out .= '<a class="menu__link" href="'.$item->url.'#'.$item->child->name.'">'.$item->title.'</a></li>';
}else $out .= '<a class="menu__link" href="'.$item->url.'">'.$item->title.'</a></li>';
}
$out .= "</ul></nav>";
return $out;
}

/**
* Given a group of pages render a standard ISOTOP MARKUP
*
* @param array|PageArray $items
* @return string
*
*/
function renderNavIsotope($pa){
if($pa instanceof Page) $pa = array($pa);
$out = '<ul class="submenu">';
foreach($pa as $item){
$out .= '<li><a href="#'.$item->name.'" class="isotope-link">'.$item->title.'</a></li>';
}
$out .= "</ul>";
return $out;
}

/**
* Given a group of pages, render a simple <ul> navigation
*
* This is here to demonstrate an example of a simple shared function.
* Usage is completely optional.
*
* @param PageArray $items
* @return string
*
*/
function renderNav(PageArray $items) {

// $out is where we store the markup we are creating in this function
$out = '';

// cycle through all the items
foreach($items as $item) {

// render markup for each navigation item as an <li>
if($item->id == wire('page')->id) {
// if current item is the same as the page being viewed, add a "current" class to it
$out .= "<li class='current'>";
} else {
// otherwise just a regular list item
$out .= "<li>";
}

// markup for the link
$out .= "<a href='$item->url'>$item->title</a> ";

// if the item has summary text, include that too
if($item->summary) $out .= "<div class='summary'>$item->summary</div>";

// close the list item
$out .= "</li>";
}

// if output was generated above, wrap it in a <ul>
if($out) $out = "<ul class='nav'>$out</ul>\n";

// return the markup we generated above
return $out;
}

/**
* Given a group of pages, render a <ul> navigation tree
*
* This is here to demonstrate an example of a more intermediate level
* shared function and usage is completely optional. This is very similar to
* the renderNav() function above except that it can output more than one
* level of navigation (recursively) and can include other fields in the output.
*
* @param array|PageArray $items
* @param int $maxDepth How many levels of navigation below current should it go?
* @param string $fieldNames Any extra field names to display (separate multiple fields with a space)
* @param string $class CSS class name for containing <ul>
* @return string
*
*/
function renderNavTree($items, $maxDepth = 0, $fieldNames = '', $class = 'nav') {

// if we were given a single Page rather than a group of them, we'll pretend they
// gave us a group of them (a group/array of 1)
if($items instanceof Page) $items = array($items);

// $out is where we store the markup we are creating in this function
$out = '';

// cycle through all the items
foreach($items as $item) {

// markup for the list item...
// if current item is the same as the page being viewed, add a "current" class to it
$out .= $item->id == wire('page')->id ? "<li class='current'>" : "<li>";

// markup for the link
$out .= "<a href='$item->url'>$item->title</a>";

// if there are extra field names specified, render markup for each one in a <div>
// having a class name the same as the field name
if($fieldNames) foreach(explode(' ', $fieldNames) as $fieldName) {
$value = $item->get($fieldName);
if($value) $out .= " <div class='$fieldName'>$value</div>";
}

// if the item has children and we're allowed to output tree navigation (maxDepth)
// then call this same function again for the item's children
if($item->hasChildren() && $maxDepth) {
if($class == 'nav') $class = 'nav nav-tree';
$out .= renderNavTree($item->children, $maxDepth-1, $fieldNames, $class);
}

// close the list item
$out .= "</li>";
}

// if output was generated above, wrap it in a <ul>
if($out) $out = "<ul class='$class'>$out</ul>\n";

// return the markup we generated above
return $out;
}

</syntaxhighlight>

== Komplette Beispiele ==
[[ProcessWire - Navigation Beispiele]]

ProcessWire - Navigation Snippets

2021-05-12T07:38:20Z

109.192.169.230: /* Basic Navigation */

== TODO Seite aufräumen ==
== Siehe auch ==
[[Processwire Module: MarkupSimpleNavigation]] automatisch Navigation aus Seitenbaum erstellen
[[Aligator (ProcessWire)]] - automatische Navigation, gut wenn manipuliert werden muss.
[[Menu Builder (ProcessWire)]] - Menüs im Backend erstellen (Wordpress like)

== Navigation in Pagewire - Einführung ==
=== Navigationstypen allgemein ===
Es gibt verschiedene '''Typen von Navigationen'''. In Processwire hat man ein '''Pages Objekt''', indem auch Zugriff auf Kind- und Elternseiten möglich sind. Es bildet also immer die Sitestruktur ab. Daher übergibt man an die unten aufgeführten Funktionen entweder die Homepage oder die aktuelle Seite.

Unter dem Aspekt auf welcher Seite man sich befindet kann man unterscheiden zwischen:
* '''absolute Navigation''' normalerweise ausgehend von der Rootseite. diese ist dann auf allen Seiten gleich.
** z.B. alle Seiten des ersten Levels stehen in der Hauptnavigation egal auf welcher Seite ich im Moment bin
** z.B. verschachtelte Liste mit 2 oder mehr Leveln für Dropdown Navigationen wie Superfish, Megamenüs (mit zusätzlichen Infos...) oder Bootstrap Navigationen.
** Sitemap
* '''Navigation relativ zur Seite''' Diese kann sich von Seite zu Seite unterscheiden.
** Alle '''Seiten der aktuellen Ebene''' (oft kombiniert mit Breadcrumb / Hier-bin-ich) )
** Hauptebene '''und''' aktueller Level
** Alle Ebenen '''bis zur aktuellen Seite + deren Unterseiten''' falls vorhanden.
In letzten Fall könnte man auch Varianten bauen in denen eine Verschachtelte Liste erzeugt wird aber nur bestimmte Teile absolut Positioniert angezeigt werden und andere versteckt werden. Manchmal möchte man bestimmte Level aber auch an anderer Position zeigen (z.B. Sidebar)
In der Praxis hat man in der Regel
* Mindestens eine Hauptnavigation mit allen Seiten der 1. Ebene oder eine Hauptnavigation mit mehreren Ebenen für Dropdown Navigationen, mobile Navigation oder auch Sitemapartige Navigationen für den Footer (oft mit kleinen Beschreibungen).
* Eine Metanavigation mit Service Seiten wie Kontakt, Impressum etc. oft ist diese im Footer.

=== Unterschiede zwischen Verstecken, Veröffentlichen, Sperren ===
In Processwire sind diese Begriffe mit Userrechten verknüpft. Eine unveröffentlichte Seite kann also durchaus im Frontend aufgerufen werden (es sei denn man regelt das anders.) Vielmehr geht es darum das man User Rollen so gestalten kann, dass man z.B. einem User nur erlaubt unveröffentlichte Seiten zu editieren.

Denoch gibt es auch ein paar weitere Unterschiede.

Gesperrt -> Man kann die Seite nicht zum Editieren aufrufen. Über die Url kann Sie aufgerufen werden.

Unpublished -> Die Seite kann sobald sie gespeichert ist auch aufgerufen werden, WENN der User berechtigt ist. Nicht für Guest User (der normale Viewer)

TODO checken ob die Tabelle so für nicht angemeldete User stimmt.
{| class="wikitable"
|-
! !! Im Menü ($pages->find) !! Über URL erreichbar($pages->get) !! Ausgabe im Frontend !!
|-
| Unpublished / Unveröffentlicht || Nein || Nur User mit passenden Rechten. Gäste -> leere Seite ||
|-
| Hidden / Versteckt || Nein || Ja || Ja - leere Seite (keine Feldausgabe)
|-
| Locked / Gesperrt || Ja || Ja || Ja
|-
| Trash || Nein || Nein ||
|}
==== Seiten auf unveröffentlicht stellen ====
https://processwire.com/talk/topic/29-how-to-unpublish-a-page-without-deleting-it/

Was soll man tun wenn man eine Seite tatsächlich nicht mehr anzeigen will, sie aber noch nicht wegwerfen will?
Ryan schlägt folgendes vor:
* Mülleimer
* Remove Guest Role in Template
*

== Basics ==
=== Basic Navigation ===
<syntaxhighlight lang="php">
<?php
// get the homepage object
$homePage = $pages->get("/");
// get PageArray of homepage object and child page objects
$navItems = $homePage->and($homePage->children);
?>
Now you have a PageArray with the required items, you can iterate over them one at a time, and print the title of the page and the link to the page itself and wrap the whole thing in your list tag.

<ul class="nav">

<?php
// get the homepage object
$homePage = $pages->get("/");
// get PageArray of homepage object and child page objects
$navItems = $homePage->and($homePage->children);
// or if you don't want the home link
// $navItems = $homePage->children;
// iterate over the $navItems PageArray
foreach ($navItems as $navItem):
?>

<li class="nav-item">
<a class="nav-link" href="<?php echo $navItem->url; ?>"><?php echo $navItem->title; ?></a>
</li>

<?php endforeach; ?>

</ul>
</syntaxhighlight>

==== Basic mit active Class ====
<syntaxhighlight lang="php">
<ul class="nav">

<?php
// get the homepage object
$homePage = $pages->get("/");
// get PageArray of homepage object and child page objects
$navItems = $homePage->and($homePage->children);
// or if you don't want the home link
// $navItems = $homePage->children;
// iterate over the $navItems PageArray
foreach ($navItems as $navItem):

// if the id of the page currently being
// iterated equals the id of the current page
$activeClass = ($navItem->id == $page->id) ? " active" : "";
?>

<li class="nav-item">
<a class="nav-link<?php echo $activeClass; ?>" href="<?php echo $navItem->url; ?>"><?php echo $navItem->title; ?></a>
</li>

<?php endforeach; ?>

</ul>
</syntaxhighlight>

==== Child Menu ====
<syntaxhighlight lang="php">

<ul class="sub-menu">

<?php
// get children of the parent of the current page
$childPages = $page->parent->children;

// iterate over the $navItems PageArray
foreach ($childPages as $childPage):

// if the id of the page currently being
// iterated equals the id of the current page
$activeClass = ($navItem->id == $page->id) ? " active" : "";
?>

<li class="nav-item">
<a class="nav-link<?php echo $activeClass; ?>" href="<?php echo $childPage->url; ?>"><?php echo $childPage->title; ?></a>
</li>

<?php endforeach; ?>

</ul>
</syntaxhighlight>

=== Page Level ===
In which level in page tree we are?
$level = count($page->parents);

=== Link to Subpage und Platzhalter (Spacer) ===
Kann man gut für Superfish Menüs etc. benutzen. Bildet das Verhalten von Shortcuts und Spacern aus TYPO3 nach.

Anpassung der renderNavTree() Funktion von Ryan Cramer. Options Field Installieren und als globales Feld "navigation_type" mit den Optionen
<pre>
1=normal|Normal
2=doNotLink|Do not link
3=linkToFirstChild|Link to first childpage
</pre>
konfigurieren. Dann Funktion etwa so anpassen:
<pre>
...
// cycle through all the items
foreach($items as $item) {

// markup for the list item...
// if current item is the same as the page being viewed, add a "current" class to it
$out .= $item->id == wire('page')->id ? "<li class='current'>" : "<li>";

// markup for the link
$navigation_type = $item->navigation_type->id;
switch ( $navigation_type ) {
case 2: // do not link
$out .= "<span class='spacer'>$item->title</span>";
break;
case 3: // link to subpage
if( $item->hasChildren() ){
$out .= '<a href="'.$item->child->url.'">'.$item->title.'</a>';
}else{
$out .= "<span class='spacer'>$item->title</span>";
}
break;
default:
$out .= "<a href='$item->url'>$item->title</a>";
break;
}
...
</pre>

=== Redirect (301) ===
==== Redirect zu erster Unterseite ====
https://processwire.com/talk/topic/15-how-do-i-create-a-page-that-redirects-to-its-first-child/

Field ''redirects_to_first_child'' erstellen und im Template einfügen.
<syntaxhighlight lang="php">
<?php
if($page->numChildren && $page->redirects_to_first_child)
$session->redirect($page->child()->url);
?>
</syntaxhighlight>
Erzeugt 301 Weiterleitung

Anderer Ansatz wäre evtl. den Link bei der Menügenerierung direkt zu generieren. finde ich persönlich besser siehe ''Link to subpage und Platzhalter'' Beispiel. Allerdings sollte man dann vielleicht die Seite trotzdem per 301 Weiterleiten, falls die URL mal direkt aufgerufen wird oder bei Google gelistet ist.

==== Redirect zu anderer Seite in der Navigation ====
https://processwire.com/talk/topic/762-howto-menu-item-that-links-to-another-page/

1. Create a new field and call it 'redirect_url' or something like that, and use the 'URL' fieldtype.

2. Add that field to your template where you'd want to use it, or create a new template just for the purpose, like a template named 'redirect'.

3. Edit the page that you want to be a symlink and populate the 'redirect_url' field with the URL you want it to redirect to.

4. In your nav-generation code that links to the pages, do something like this:

<syntaxhighlight lang="php">
<?php
$url = $subpage->get("redirect_url|url"); // use redirect_url if there, otherwise use url
echo "<a href='$url'>{$subpage->title}</a>";
</syntaxhighlight>
5. You might also want to add this to your template that has the 'redirect_url' field: just in case there's anything linking to it directly. That way it'll send people to the right place either way:

<?php
if($page->redirect_url) $session->redirect($page->redirect_url);

=== Breadcrumb ===
<pre>

<div class='breadcrumbs'><?php
// breadcrumbs are the current page's parents
foreach($page->parents() as $item) {
echo "<span><a href='$item->url'>$item->title</a></span> ";
}
// optionally output the current page as the last item
echo "<span>$page->title</span> ";
?></div>
</pre>

=== One Level Navigation Bar ===
[[ProcessWire - One Level Navigation]]
=== Nächste Seite / Next Page Navigation ===
Beispiel 1
<syntaxhighlight lang="php">
if($page->next->id){
$next = '
<div class="next">
<i>Next:</i> 
<a class="ajax-link" name="'.$page->next->title.'" href="'. $page->next->url .'">
'. $page->next->title .'<span class="fa fa-arrow-right"><span>
</a>
</div>';
}
</syntaxhighlight>

Beispiel 2 (mit zurück zur Elternseite)
<syntaxhighlight lang="php">
$next = '';
if($page->next->id){
$next = '
<a href="'.$page->next->url.'">
<i class="fa fa-angle-right"></i>
</a>
';
}

$prev = '';
if($page->prev->id){
$prev = '
<a href="'.$page->prev->url.'" class="w-inline-block paginaton-but">
<i class="fa fa-angle-left"></i>
</a>';
}

$pagination = '
<div class="container pagination">
<div class="row">

<div class="col col-md-4">
<div class="align-center">
'.$prev.'
</div>
</div>

<div class="col col-md-4">
<div class="align-center">
<a href="'.$page->parent->url.'">
<i class="fa fa-th"></i>
</a>
</div>
</div>

<div class="col col-md-4">
<div class="align-right center">
'.$next.'
</div>
</div>
</div>

</div>
';

echo $pagination;
</syntaxhighlight>

=== Zurück zur Elternseite ===
<syntaxhighlight lang="php">
<div class="back"><a href="'.$page->parent()->url.'">zurück</a></div>
</syntaxhighlight>

=== Kindseiten mit $page->children ===
<?=$page->children?>
Output
5723,4958,5937

Beispiel
<syntaxhighlight lang="php">
<ul>
<?php
foreach($page->children as $child)
echo "<li><a href='{$child->url}'>{$child->title}</a></li>";
?> 
</ul>
</syntaxhighlight>
Ergebnis:
<pre>
<ul> 
<li><a href='/about/contact/'>Contact Us</a></li>
<li><a href='/about/press/'>Press Releases</a></li>
<li><a href='/about/staff/'>Our Staff</a></li> 
</ul>
</pre>
=== Children Tree ===
<syntaxhighlight lang="php">
function listChildrenTree($children, $current, $w) {

echo "<ul>";

foreach($children as $page) {

$class = '';
if($page === $current || $current->parents->slice(1)->has($page) ) {
$class = "class='on' style='font-weight:bold'";
}

$rootid = $w->pages->get("/")->id;

echo "<li><a href='{$page->url}' $class>";
if($page->id == $rootid) echo "<img src='" . $w->config->urls->templates . "styles/images/home.png' width='24' height='28' alt='' />";
echo "{$page->title}</a> ";

if($page->numChildren && $page->id != $rootid) listChildrenTree($page->children, $current, $w);

echo "</li>";
}
echo "</ul>";
}

$children = $pages->get("/")->children();
$children->prepend($pages->get("/"));

listChildrenTree($children, $page, $wire);
</syntaxhighlight>

== Bootstrap Navigation ==
<syntaxhighlight lang="php">
<?php namespace ProcessWire;
// Markup to use wicht navigation_type field (normal=1, no-link=2,subpage=3)
?>

<?php

// bundle up the first level pages and prepend the root home page
$homepage = $pages->get(1);
$pa = $homepage->children;
$pa = $pa->prepend($homepage);

// Set the ball rolling...
$myMenu = renderChildrenOf($pa);
$wrapper = '
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Menü</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
|
</div>
</div>
</div>';
$myMenu = wrap($myMenu,$wrapper);
echo $myMenu;

/*
Navigation for ProcessWire using the Bootstrap 2.2.2 markup
This menu was written by Soma based on work by NetCarver and a bit thrown in by Joss
Bootstrap 3 update by Damienov, with multi level dropdown support fix
*/
function renderChildrenOf($pa, $output = '', $level = 0)
{
$output = '';
$level++;

foreach ($pa as $child) {
$atoggle = '';
$class = '';

if ($child->numChildren && count($child->parents) == 1) {
$class .= 'dropdown';
$atoggle .= ' class="dropdown-toggle" data-toggle="dropdown"';
} else if ($child->numChildren && count($child->parents) > 1 ) {
$class .= 'dropdown-submenu';
$atoggle .= ' class="dropdown-toggle"';
} else if ($child->numChildren && $child->id != 1) {
$class .= 'dropdown-menu';
}

// Makes the current page and it's top level parent add an active class
$class .= ($child === wire("page") || $child === wire("page")->rootParent) ? " active" : '';
$class = strlen($class) ? " class='" . trim($class) . "'" : '';

if ($child->numChildren && count($child->parents) == 1) {
// Add Caret if have children
$output .= "<li$class><a href='$child->url'$atoggle>$child->title <b class='caret'></b></a>";
} else if ($child->numChildren && count($child->parents) > 1) {
$output .= "<li$class><a tabindex='-1' href='$child->url'$atoggle>$child->title</a>";
} else {
$output .= "<li$class><a href='$child->url'$atoggle>$child->title</a>";
}

// If this child is itself a parent and not the root page, then render it's children in their own menu too...
if ($child->numChildren && $child->id != 1) {
$output .= renderChildrenOf($child->children, $output, $level);
}
$output .= '</li>';
}
$outerclass = ($level == 1) ? "nav navbar-nav" : 'dropdown-menu';
return "<ul class='$outerclass'>$output</ul>";
}

?>
</syntaxhighlight>

== Modul: MarkupSimpleNavigation==
[[Processwire Modul - MarkupSimpleNavigation]]

== Weitere Menübeispiele ==
=== Standard Tree Navigation ===
Für viele Zwecke ausreichend und leicht anpassbar, die klassische verschachtelte Liste.

=== Menüauswahl Hauptmenü / Metamenü / Footer-Navigation ===
Beispiel 1
Backend Feld menus anlegen Options:

1=Main Menu
2=Meta Menu

topnav.inc
<syntaxhighlight lang="php">
$pa = $homepage->and($homepage->children("menus.id=1"));//only if main menu is checked
$options = array('level' => '1', 'ulClass' => 'sf-menu', 'liClass' => '');
echo "<div>".renderNavTreeType($pa, $maxDepth = 1, $fieldNames = '', $options)."</div>";
</syntaxhighlight>

'''Beispiel 2 (älter)'''

Checkbox anlegen (footer_nav), und dann das Seitenarray etwa so modifizieren.
<pre>
$footer_nav = $pages->find("parent=1, footer_checkbox=1");
$main_nav = $pages->find("parent=1, footer_checkbox!=1");
</pre>

=== Zweispaltige Navigation aus Kindseiten ===
Verbesserungsvorschlag: Anstatt if lieber zwei for Schleifen -> bessere Performance
<syntaxhighlight lang="php">
// Childrens
$n = count($page->children);
$m = ceil($n/2);
$c = 0;

// NAVIGATION & SLIDER Items
$listItem = '';
$navList = '';
$col1 = '<ul class="nav-list col1">';
$col2 = '<ul class="nav-list col2">';
foreach ($page->children as $item) {
if($item->id == $page->rootParent->id) {
$listItem = '<li class="current">';
} else {
$listItem = '<li>';
}
$listItem .= '<a class="ajax-link" href="'.$item->url.'">'.$item->title.'</a></li>';
($c < $m) ? $col1 .= $listItem : $col2 .= $listItem;
$c++;
}
$col1 .= '</ul>';
$col1 .= '</ul>';
$navList = $col1.$col2;
</syntaxhighlight>

Mehrspaltige Navigationen lassen sich auch mit der slice Funktion erstellen:

<syntaxhighlight lang="php">
$categories = $pages->get('/about/sites/categories/')->children();
foreach($categories->slices(3) as $items) {
echo "<div class='uk-width-1-3'><ul>";
echo $items->each("<li><a href='{url}'>{title}</a>");
echo "</ul></div>";
}
</syntaxhighlight>

=== Pushy Menu ===
<syntaxhighlight lang="php">
/**
* Given a group of pages, render a <ul> navigation tree
*
* This is here to demonstrate an example of a more intermediate level
* shared function and usage is completely optional. This is very similar to
* the renderNav() function above except that it can output more than one
* level of navigation (recursively) and can include other fields in the output.
* Assumes there is a field navigation_type to decide how a list item is
* rendered
*
* @param array|PageArray $items
* @param int $maxDepth How many levels of navigation below current should it go?
* @param string $fieldNames Any extra field names to display (separate multiple fields with a space)
* @param array $options extra options for classes configuration etc.
* @return string
*
*/
function renderPushyMenu($items, $maxDepth = 0, $fieldNames = '', $options = array('level' => 0, 'ulClass' => '', 'liClass' => '', 'aClass' => '') ) {

// if we were given a single Page rather than a group of them, we'll pretend they
// gave us a group of them (a group/array of 1)
if($items instanceof Page) $items = array($items);
$out = '';
$c = 0;
$liClasses = array();
$ulClasses = array();
$level = 0;
$liClass = '';
$ulClass = '';

if(!empty($options['level'])) $level = $options['level'];
if(!empty($options['ulClass'])) {
$ulClasses[] = $options['ulClass'];
$ulClass = $options['ulClass'];
}

if(!empty($options['liClass'])) {
$liClasses[] = $options['liClass'];
$liClass = $options['liClass'];
}

// cycle through all the items
foreach($items as $item) {
//$level = count($page->parents);
// LI ITEM
$classes = $liClasses;
//if($item->id == wire('page')->id) $classes[] = 'cur';
if($item->hasChildren) {
// BUTTON instead of Link
$out .= '<li class="pushy-submenu"><button>'.$item->title.'</button>';
}else{
$classes[] = 'level-'.$level;
$out .= '<li class="'.implode($classes,' ').'">';
unset($classes);

// A ITEM
$navigation_type = $item->navigation_type->id;
$classes = $liClasses;
switch ( $navigation_type ) {
case 2: // do not link
$out .= '<span class="spacer">'.$item->title.'</span>';
break;
case 3: // link to subpage
if( $item->hasChildren() ){
$out .= '<a href="'.$item->child->url.'" class="ajax-link">'.$item->title.'</a>';
}else{
$out .= "<span class='spacer'>$item->title</span>";
}
break;
default:
$out .= '<a href="'.$item->url.'" class="ajax-link">'.$item->title.'</a>';
break;
}
unset($classes);
}
// if there are extra field names specified, render markup for each one in a <div>
// having a class name the same as the field name
if($fieldNames) foreach(explode(' ', $fieldNames) as $fieldName) {
$value = $item->get($fieldName);
if($value) $out .= " <div class='$fieldName'>$value</div>";
}

// if the item has children and we're allowed to output tree navigation (maxDepth)
// then call this same function again for the item's children
if($item->hasChildren() && $maxDepth) {
//if($class == 'nav') $class = 'nav nav-tree';
$nextLevelOptions = array('level' => $level+1, 'ulClass' => '', 'liClass' => $liClass);
$out .= renderNavTreeType($item->children, $maxDepth-1, $fieldNames, $nextLevelOptions);
}

// close the list item
$out .= "</li>\n";
}

// if output was generated above, wrap it in a <ul>

if($out) $out = "\n".'<ul class="'.implode($ulClasses,' ').'">'."\n".$out.'</ul>'."\n";

// return the markup we generated above
return $out;
}

</syntaxhighlight>

== Do not link / link to subpage ==
=== MarkupSimpleNavigation XTemplate + Redirect Beispiel ===

https://github.com/s...default-options

'''Menü Platzhalter'''
<syntaxhighlight lang="php">
"xtemplate" => "folder|placeholder", // specify one or more templates
"xitem_tpl" => "<span>{title}</span>", // default markup for page with this template
"xitem_current_tpl" => "<span>{title}</span>"
echo $nav->render(array(
'max_levels'=>2,
'selector'=>"limit=10",
'xtemplates' => 'placeholder|folder'
));
</syntaxhighlight>

'''Redirect Template'''

You could also have a template "redirect" with only a title and a page field (single page) to select any page you want to go.

Then in the code you should be able to write
<syntaxhighlight lang="php">
array('item_tpl' => '<a href="{redirect_page|url}">{title}</a>')
</syntaxhighlight>
So it would take the url of the referenced page in the page field if found, or if not it takes the url of the page itself. Assuming the page field is named "redirect_page".

=== In der Navi ===
Zusätzliches Feld (Options) im Backend mit Namen navigation_type

Beispiel
<syntaxhighlight lang="php">
/**
* Given a group of pages, render a <ul> navigation tree
* If there is a field navigation_type the vals have following meaning
* 1 = Normal
* 2 = Do not link
* 3 = Link to subpage
*
* @param array|PageArray $items
* @param int $maxDepth How many levels of navigation below current should it go?
* @param string $fieldNames Any extra field names to display (separate multiple fields with a space)
* @param string $class CSS class name for containing <ul>
* @return string
*
*/
function renderNavTreeType($items, $maxDepth = 0, $fieldNames = '', $options = array('level' => 0, 'ulClass' => 'nav', 'liClass' => '', 'aClass' => '') ) {

// if we were given a single Page rather than a group of them, we'll pretend they
// gave us a group of them (a group/array of 1)
if($items instanceof Page) $items = array($items);

// $out is where we store the markup we are creating in this function
$out = '';
$c = 0;
$liClasses = array();
$ulClasses = array();
$level = 0;
$liClass = '';
$ulClass = '';

if(!empty($options['level'])) $level = $options['level'];
if(!empty($options['ulClass'])) {
$ulClasses[] = $options['ulClass'];
$ulClass = $options['ulClass'];
}

if(!empty($options['liClass'])) {
$liClasses[] = $options['liClass'];
$liClass = $options['liClass'];
}

// cycle through all the items
foreach($items as $item) {
//$level = count($page->parents);
// LI ITEM
$classes = $liClasses;
if($item->id == wire('page')->id) $classes[] = 'cur';
if($item->hasChildren) $classes[] = 'has_children';
$classes[] = 'level-'.$level;
$out .= '<li class="'.implode($classes,' ').'">';
unset($classes);

// markup for the link
$navigation_type = $item->navigation_type->id;
$classes = $liClasses;
switch ( $navigation_type ) {
case 2: // do not link
$out .= '<span class="spacer">'.$item->title.'</span>';
break;
case 3: // link to subpage
if( $item->hasChildren() ){
$out .= '<a href="'.$item->child->url.'" class="ajax-link">'.$item->title.'</a>';
}else{
$out .= "<span class='spacer'>$item->title</span>";
}
break;
default:
$out .= '<a href="'.$item->url.'" class="ajax-link">'.$item->title.'</a>';
break;
}
unset($classes);
// if there are extra field names specified, render markup for each one in a <div>
// having a class name the same as the field name
if($fieldNames) foreach(explode(' ', $fieldNames) as $fieldName) {
$value = $item->get($fieldName);
if($value) $out .= " <div class='$fieldName'>$value</div>";
}

// if the item has children and we're allowed to output tree navigation (maxDepth)
// then call this same function again for the item's children
if($item->hasChildren() && $maxDepth) {
//if($class == 'nav') $class = 'nav nav-tree';
$nextLevelOptions = array('level' => $level+1, 'ulClass' => '', 'liClass' => $liClass);
$out .= renderNavTreeType($item->children, $maxDepth-1, $fieldNames, $nextLevelOptions);
}

// close the list item
$out .= "</li>\n";
}

// if output was generated above, wrap it in a <ul>

if($out) $out = "\n".'<ul class="'.implode($ulClasses,' ').'">'."\n".$out.'</ul>'."\n";

// return the markup we generated above
return $out;
}
</syntaxhighlight>

=== Redirect über das Template ===
Sinnvoll wenn die URL direkt aufgerufen wird:

$session->redirect($page->redirect_page->url);
or how about "redirect-to-firstchild".

$session->redirect($page->children->first()->url);

== Beispiele für Funktionen (z.B. in _func.php)==
'''Beispiele für Funktionen die Navigationen erzeugen. '''
=== One Level ===
==== Original ProcessWire Demo Beispiel ====

=== Nested List ausgehend von einer Seite (meistens Homepage) ===
<syntaxhighlight lang="php">
<?php namespace ProcessWire;

/**
* Given a group of pages, render a ONE LEVEL NAVBAR
*
* @param array|PageArray $items
* @return string
*
*/
function renderNavMain($pa,$pageId){
if($pa instanceof Page) $pa = array($pa);
$out = '<nav class="menu menu--ferdinand"><ul class="nav navbar-nav menu__list">';
foreach($pa as $item) {
if($item->id == $pageId) {
$out .= "<li class=\"menu__item menu__item--current cur\">";
} else {
$out .= "<li class=\"menu__item\">";
}
// if template isotope-parent add first isotope-child name as hash
if($item->template->name == 'isotope-parent'){
$out .= '<a class="menu__link" href="'.$item->url.'#'.$item->child->name.'">'.$item->title.'</a></li>';
}else $out .= '<a class="menu__link" href="'.$item->url.'">'.$item->title.'</a></li>';
}
$out .= "</ul></nav>";
return $out;
}

/**
* Given a group of pages render a standard ISOTOP MARKUP
*
* @param array|PageArray $items
* @return string
*
*/
function renderNavIsotope($pa){
if($pa instanceof Page) $pa = array($pa);
$out = '<ul class="submenu">';
foreach($pa as $item){
$out .= '<li><a href="#'.$item->name.'" class="isotope-link">'.$item->title.'</a></li>';
}
$out .= "</ul>";
return $out;
}

/**
* Given a group of pages, render a simple <ul> navigation
*
* This is here to demonstrate an example of a simple shared function.
* Usage is completely optional.
*
* @param PageArray $items
* @return string
*
*/
function renderNav(PageArray $items) {

// $out is where we store the markup we are creating in this function
$out = '';

// cycle through all the items
foreach($items as $item) {

// render markup for each navigation item as an <li>
if($item->id == wire('page')->id) {
// if current item is the same as the page being viewed, add a "current" class to it
$out .= "<li class='current'>";
} else {
// otherwise just a regular list item
$out .= "<li>";
}

// markup for the link
$out .= "<a href='$item->url'>$item->title</a> ";

// if the item has summary text, include that too
if($item->summary) $out .= "<div class='summary'>$item->summary</div>";

// close the list item
$out .= "</li>";
}

// if output was generated above, wrap it in a <ul>
if($out) $out = "<ul class='nav'>$out</ul>\n";

// return the markup we generated above
return $out;
}

/**
* Given a group of pages, render a <ul> navigation tree
*
* This is here to demonstrate an example of a more intermediate level
* shared function and usage is completely optional. This is very similar to
* the renderNav() function above except that it can output more than one
* level of navigation (recursively) and can include other fields in the output.
*
* @param array|PageArray $items
* @param int $maxDepth How many levels of navigation below current should it go?
* @param string $fieldNames Any extra field names to display (separate multiple fields with a space)
* @param string $class CSS class name for containing <ul>
* @return string
*
*/
function renderNavTree($items, $maxDepth = 0, $fieldNames = '', $class = 'nav') {

// if we were given a single Page rather than a group of them, we'll pretend they
// gave us a group of them (a group/array of 1)
if($items instanceof Page) $items = array($items);

// $out is where we store the markup we are creating in this function
$out = '';

// cycle through all the items
foreach($items as $item) {

// markup for the list item...
// if current item is the same as the page being viewed, add a "current" class to it
$out .= $item->id == wire('page')->id ? "<li class='current'>" : "<li>";

// markup for the link
$out .= "<a href='$item->url'>$item->title</a>";

// if there are extra field names specified, render markup for each one in a <div>
// having a class name the same as the field name
if($fieldNames) foreach(explode(' ', $fieldNames) as $fieldName) {
$value = $item->get($fieldName);
if($value) $out .= " <div class='$fieldName'>$value</div>";
}

// if the item has children and we're allowed to output tree navigation (maxDepth)
// then call this same function again for the item's children
if($item->hasChildren() && $maxDepth) {
if($class == 'nav') $class = 'nav nav-tree';
$out .= renderNavTree($item->children, $maxDepth-1, $fieldNames, $class);
}

// close the list item
$out .= "</li>";
}

// if output was generated above, wrap it in a <ul>
if($out) $out = "<ul class='$class'>$out</ul>\n";

// return the markup we generated above
return $out;
}

</syntaxhighlight>

== Komplette Beispiele ==
[[ProcessWire - Navigation Beispiele]]

ProcessWire - Navigation Snippets

2021-05-12T07:37:07Z

109.192.169.230: /* Child Menu */

== TODO Seite aufräumen ==
== Siehe auch ==
[[Processwire Module: MarkupSimpleNavigation]] automatisch Navigation aus Seitenbaum erstellen
[[Aligator (ProcessWire)]] - automatische Navigation, gut wenn manipuliert werden muss.
[[Menu Builder (ProcessWire)]] - Menüs im Backend erstellen (Wordpress like)

== Navigation in Pagewire - Einführung ==
=== Navigationstypen allgemein ===
Es gibt verschiedene '''Typen von Navigationen'''. In Processwire hat man ein '''Pages Objekt''', indem auch Zugriff auf Kind- und Elternseiten möglich sind. Es bildet also immer die Sitestruktur ab. Daher übergibt man an die unten aufgeführten Funktionen entweder die Homepage oder die aktuelle Seite.

Unter dem Aspekt auf welcher Seite man sich befindet kann man unterscheiden zwischen:
* '''absolute Navigation''' normalerweise ausgehend von der Rootseite. diese ist dann auf allen Seiten gleich.
** z.B. alle Seiten des ersten Levels stehen in der Hauptnavigation egal auf welcher Seite ich im Moment bin
** z.B. verschachtelte Liste mit 2 oder mehr Leveln für Dropdown Navigationen wie Superfish, Megamenüs (mit zusätzlichen Infos...) oder Bootstrap Navigationen.
** Sitemap
* '''Navigation relativ zur Seite''' Diese kann sich von Seite zu Seite unterscheiden.
** Alle '''Seiten der aktuellen Ebene''' (oft kombiniert mit Breadcrumb / Hier-bin-ich) )
** Hauptebene '''und''' aktueller Level
** Alle Ebenen '''bis zur aktuellen Seite + deren Unterseiten''' falls vorhanden.
In letzten Fall könnte man auch Varianten bauen in denen eine Verschachtelte Liste erzeugt wird aber nur bestimmte Teile absolut Positioniert angezeigt werden und andere versteckt werden. Manchmal möchte man bestimmte Level aber auch an anderer Position zeigen (z.B. Sidebar)
In der Praxis hat man in der Regel
* Mindestens eine Hauptnavigation mit allen Seiten der 1. Ebene oder eine Hauptnavigation mit mehreren Ebenen für Dropdown Navigationen, mobile Navigation oder auch Sitemapartige Navigationen für den Footer (oft mit kleinen Beschreibungen).
* Eine Metanavigation mit Service Seiten wie Kontakt, Impressum etc. oft ist diese im Footer.

=== Unterschiede zwischen Verstecken, Veröffentlichen, Sperren ===
In Processwire sind diese Begriffe mit Userrechten verknüpft. Eine unveröffentlichte Seite kann also durchaus im Frontend aufgerufen werden (es sei denn man regelt das anders.) Vielmehr geht es darum das man User Rollen so gestalten kann, dass man z.B. einem User nur erlaubt unveröffentlichte Seiten zu editieren.

Denoch gibt es auch ein paar weitere Unterschiede.

Gesperrt -> Man kann die Seite nicht zum Editieren aufrufen. Über die Url kann Sie aufgerufen werden.

Unpublished -> Die Seite kann sobald sie gespeichert ist auch aufgerufen werden, WENN der User berechtigt ist. Nicht für Guest User (der normale Viewer)

TODO checken ob die Tabelle so für nicht angemeldete User stimmt.
{| class="wikitable"
|-
! !! Im Menü ($pages->find) !! Über URL erreichbar($pages->get) !! Ausgabe im Frontend !!
|-
| Unpublished / Unveröffentlicht || Nein || Nur User mit passenden Rechten. Gäste -> leere Seite ||
|-
| Hidden / Versteckt || Nein || Ja || Ja - leere Seite (keine Feldausgabe)
|-
| Locked / Gesperrt || Ja || Ja || Ja
|-
| Trash || Nein || Nein ||
|}
==== Seiten auf unveröffentlicht stellen ====
https://processwire.com/talk/topic/29-how-to-unpublish-a-page-without-deleting-it/

Was soll man tun wenn man eine Seite tatsächlich nicht mehr anzeigen will, sie aber noch nicht wegwerfen will?
Ryan schlägt folgendes vor:
* Mülleimer
* Remove Guest Role in Template
*

== Basics ==
=== Basic Navigation ===
<pre>
<?php
// get the homepage object
$homePage = $pages->get("/");
// get PageArray of homepage object and child page objects
$navItems = $homePage->and($homePage->children);
?>
Now you have a PageArray with the required items, you can iterate over them one at a time, and print the title of the page and the link to the page itself and wrap the whole thing in your list tag.

<ul class="nav">

<?php
// get the homepage object
$homePage = $pages->get("/");
// get PageArray of homepage object and child page objects
$navItems = $homePage->and($homePage->children);
// or if you don't want the home link
// $navItems = $homePage->children;
// iterate over the $navItems PageArray
foreach ($navItems as $navItem):
?>

<li class="nav-item">
<a class="nav-link" href="<?php echo $navItem->url; ?>"><?php echo $navItem->title; ?></a>
</li>

<?php endforeach; ?>

</ul>
</pre>
==== Basic mit active Class ====
<pre>
<ul class="nav">

<?php
// get the homepage object
$homePage = $pages->get("/");
// get PageArray of homepage object and child page objects
$navItems = $homePage->and($homePage->children);
// or if you don't want the home link
// $navItems = $homePage->children;
// iterate over the $navItems PageArray
foreach ($navItems as $navItem):

// if the id of the page currently being
// iterated equals the id of the current page
$activeClass = ($navItem->id == $page->id) ? " active" : "";
?>

<li class="nav-item">
<a class="nav-link<?php echo $activeClass; ?>" href="<?php echo $navItem->url; ?>"><?php echo $navItem->title; ?></a>
</li>

<?php endforeach; ?>

</ul>
</pre>
==== Child Menu ====
<syntaxhighlight lang="php">

<ul class="sub-menu">

<?php
// get children of the parent of the current page
$childPages = $page->parent->children;

// iterate over the $navItems PageArray
foreach ($childPages as $childPage):

// if the id of the page currently being
// iterated equals the id of the current page
$activeClass = ($navItem->id == $page->id) ? " active" : "";
?>

<li class="nav-item">
<a class="nav-link<?php echo $activeClass; ?>" href="<?php echo $childPage->url; ?>"><?php echo $childPage->title; ?></a>
</li>

<?php endforeach; ?>

</ul>
</syntaxhighlight>

=== Page Level ===
In which level in page tree we are?
$level = count($page->parents);

=== Link to Subpage und Platzhalter (Spacer) ===
Kann man gut für Superfish Menüs etc. benutzen. Bildet das Verhalten von Shortcuts und Spacern aus TYPO3 nach.

Anpassung der renderNavTree() Funktion von Ryan Cramer. Options Field Installieren und als globales Feld "navigation_type" mit den Optionen
<pre>
1=normal|Normal
2=doNotLink|Do not link
3=linkToFirstChild|Link to first childpage
</pre>
konfigurieren. Dann Funktion etwa so anpassen:
<pre>
...
// cycle through all the items
foreach($items as $item) {

// markup for the list item...
// if current item is the same as the page being viewed, add a "current" class to it
$out .= $item->id == wire('page')->id ? "<li class='current'>" : "<li>";

// markup for the link
$navigation_type = $item->navigation_type->id;
switch ( $navigation_type ) {
case 2: // do not link
$out .= "<span class='spacer'>$item->title</span>";
break;
case 3: // link to subpage
if( $item->hasChildren() ){
$out .= '<a href="'.$item->child->url.'">'.$item->title.'</a>';
}else{
$out .= "<span class='spacer'>$item->title</span>";
}
break;
default:
$out .= "<a href='$item->url'>$item->title</a>";
break;
}
...
</pre>

=== Redirect (301) ===
==== Redirect zu erster Unterseite ====
https://processwire.com/talk/topic/15-how-do-i-create-a-page-that-redirects-to-its-first-child/

Field ''redirects_to_first_child'' erstellen und im Template einfügen.
<syntaxhighlight lang="php">
<?php
if($page->numChildren && $page->redirects_to_first_child)
$session->redirect($page->child()->url);
?>
</syntaxhighlight>
Erzeugt 301 Weiterleitung

Anderer Ansatz wäre evtl. den Link bei der Menügenerierung direkt zu generieren. finde ich persönlich besser siehe ''Link to subpage und Platzhalter'' Beispiel. Allerdings sollte man dann vielleicht die Seite trotzdem per 301 Weiterleiten, falls die URL mal direkt aufgerufen wird oder bei Google gelistet ist.

==== Redirect zu anderer Seite in der Navigation ====
https://processwire.com/talk/topic/762-howto-menu-item-that-links-to-another-page/

1. Create a new field and call it 'redirect_url' or something like that, and use the 'URL' fieldtype.

2. Add that field to your template where you'd want to use it, or create a new template just for the purpose, like a template named 'redirect'.

3. Edit the page that you want to be a symlink and populate the 'redirect_url' field with the URL you want it to redirect to.

4. In your nav-generation code that links to the pages, do something like this:

<syntaxhighlight lang="php">
<?php
$url = $subpage->get("redirect_url|url"); // use redirect_url if there, otherwise use url
echo "<a href='$url'>{$subpage->title}</a>";
</syntaxhighlight>
5. You might also want to add this to your template that has the 'redirect_url' field: just in case there's anything linking to it directly. That way it'll send people to the right place either way:

<?php
if($page->redirect_url) $session->redirect($page->redirect_url);

=== Breadcrumb ===
<pre>

<div class='breadcrumbs'><?php
// breadcrumbs are the current page's parents
foreach($page->parents() as $item) {
echo "<span><a href='$item->url'>$item->title</a></span> ";
}
// optionally output the current page as the last item
echo "<span>$page->title</span> ";
?></div>
</pre>

=== One Level Navigation Bar ===
[[ProcessWire - One Level Navigation]]
=== Nächste Seite / Next Page Navigation ===
Beispiel 1
<syntaxhighlight lang="php">
if($page->next->id){
$next = '
<div class="next">
<i>Next:</i> 
<a class="ajax-link" name="'.$page->next->title.'" href="'. $page->next->url .'">
'. $page->next->title .'<span class="fa fa-arrow-right"><span>
</a>
</div>';
}
</syntaxhighlight>

Beispiel 2 (mit zurück zur Elternseite)
<syntaxhighlight lang="php">
$next = '';
if($page->next->id){
$next = '
<a href="'.$page->next->url.'">
<i class="fa fa-angle-right"></i>
</a>
';
}

$prev = '';
if($page->prev->id){
$prev = '
<a href="'.$page->prev->url.'" class="w-inline-block paginaton-but">
<i class="fa fa-angle-left"></i>
</a>';
}

$pagination = '
<div class="container pagination">
<div class="row">

<div class="col col-md-4">
<div class="align-center">
'.$prev.'
</div>
</div>

<div class="col col-md-4">
<div class="align-center">
<a href="'.$page->parent->url.'">
<i class="fa fa-th"></i>
</a>
</div>
</div>

<div class="col col-md-4">
<div class="align-right center">
'.$next.'
</div>
</div>
</div>

</div>
';

echo $pagination;
</syntaxhighlight>

=== Zurück zur Elternseite ===
<syntaxhighlight lang="php">
<div class="back"><a href="'.$page->parent()->url.'">zurück</a></div>
</syntaxhighlight>

=== Kindseiten mit $page->children ===
<?=$page->children?>
Output
5723,4958,5937

Beispiel
<syntaxhighlight lang="php">
<ul>
<?php
foreach($page->children as $child)
echo "<li><a href='{$child->url}'>{$child->title}</a></li>";
?> 
</ul>
</syntaxhighlight>
Ergebnis:
<pre>
<ul> 
<li><a href='/about/contact/'>Contact Us</a></li>
<li><a href='/about/press/'>Press Releases</a></li>
<li><a href='/about/staff/'>Our Staff</a></li> 
</ul>
</pre>
=== Children Tree ===
<syntaxhighlight lang="php">
function listChildrenTree($children, $current, $w) {

echo "<ul>";

foreach($children as $page) {

$class = '';
if($page === $current || $current->parents->slice(1)->has($page) ) {
$class = "class='on' style='font-weight:bold'";
}

$rootid = $w->pages->get("/")->id;

echo "<li><a href='{$page->url}' $class>";
if($page->id == $rootid) echo "<img src='" . $w->config->urls->templates . "styles/images/home.png' width='24' height='28' alt='' />";
echo "{$page->title}</a> ";

if($page->numChildren && $page->id != $rootid) listChildrenTree($page->children, $current, $w);

echo "</li>";
}
echo "</ul>";
}

$children = $pages->get("/")->children();
$children->prepend($pages->get("/"));

listChildrenTree($children, $page, $wire);
</syntaxhighlight>

== Bootstrap Navigation ==
<syntaxhighlight lang="php">
<?php namespace ProcessWire;
// Markup to use wicht navigation_type field (normal=1, no-link=2,subpage=3)
?>

<?php

// bundle up the first level pages and prepend the root home page
$homepage = $pages->get(1);
$pa = $homepage->children;
$pa = $pa->prepend($homepage);

// Set the ball rolling...
$myMenu = renderChildrenOf($pa);
$wrapper = '
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Menü</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
|
</div>
</div>
</div>';
$myMenu = wrap($myMenu,$wrapper);
echo $myMenu;

/*
Navigation for ProcessWire using the Bootstrap 2.2.2 markup
This menu was written by Soma based on work by NetCarver and a bit thrown in by Joss
Bootstrap 3 update by Damienov, with multi level dropdown support fix
*/
function renderChildrenOf($pa, $output = '', $level = 0)
{
$output = '';
$level++;

foreach ($pa as $child) {
$atoggle = '';
$class = '';

if ($child->numChildren && count($child->parents) == 1) {
$class .= 'dropdown';
$atoggle .= ' class="dropdown-toggle" data-toggle="dropdown"';
} else if ($child->numChildren && count($child->parents) > 1 ) {
$class .= 'dropdown-submenu';
$atoggle .= ' class="dropdown-toggle"';
} else if ($child->numChildren && $child->id != 1) {
$class .= 'dropdown-menu';
}

// Makes the current page and it's top level parent add an active class
$class .= ($child === wire("page") || $child === wire("page")->rootParent) ? " active" : '';
$class = strlen($class) ? " class='" . trim($class) . "'" : '';

if ($child->numChildren && count($child->parents) == 1) {
// Add Caret if have children
$output .= "<li$class><a href='$child->url'$atoggle>$child->title <b class='caret'></b></a>";
} else if ($child->numChildren && count($child->parents) > 1) {
$output .= "<li$class><a tabindex='-1' href='$child->url'$atoggle>$child->title</a>";
} else {
$output .= "<li$class><a href='$child->url'$atoggle>$child->title</a>";
}

// If this child is itself a parent and not the root page, then render it's children in their own menu too...
if ($child->numChildren && $child->id != 1) {
$output .= renderChildrenOf($child->children, $output, $level);
}
$output .= '</li>';
}
$outerclass = ($level == 1) ? "nav navbar-nav" : 'dropdown-menu';
return "<ul class='$outerclass'>$output</ul>";
}

?>
</syntaxhighlight>

== Modul: MarkupSimpleNavigation==
[[Processwire Modul - MarkupSimpleNavigation]]

== Weitere Menübeispiele ==
=== Standard Tree Navigation ===
Für viele Zwecke ausreichend und leicht anpassbar, die klassische verschachtelte Liste.

=== Menüauswahl Hauptmenü / Metamenü / Footer-Navigation ===
Beispiel 1
Backend Feld menus anlegen Options:

1=Main Menu
2=Meta Menu

topnav.inc
<syntaxhighlight lang="php">
$pa = $homepage->and($homepage->children("menus.id=1"));//only if main menu is checked
$options = array('level' => '1', 'ulClass' => 'sf-menu', 'liClass' => '');
echo "<div>".renderNavTreeType($pa, $maxDepth = 1, $fieldNames = '', $options)."</div>";
</syntaxhighlight>

'''Beispiel 2 (älter)'''

Checkbox anlegen (footer_nav), und dann das Seitenarray etwa so modifizieren.
<pre>
$footer_nav = $pages->find("parent=1, footer_checkbox=1");
$main_nav = $pages->find("parent=1, footer_checkbox!=1");
</pre>

=== Zweispaltige Navigation aus Kindseiten ===
Verbesserungsvorschlag: Anstatt if lieber zwei for Schleifen -> bessere Performance
<syntaxhighlight lang="php">
// Childrens
$n = count($page->children);
$m = ceil($n/2);
$c = 0;

// NAVIGATION & SLIDER Items
$listItem = '';
$navList = '';
$col1 = '<ul class="nav-list col1">';
$col2 = '<ul class="nav-list col2">';
foreach ($page->children as $item) {
if($item->id == $page->rootParent->id) {
$listItem = '<li class="current">';
} else {
$listItem = '<li>';
}
$listItem .= '<a class="ajax-link" href="'.$item->url.'">'.$item->title.'</a></li>';
($c < $m) ? $col1 .= $listItem : $col2 .= $listItem;
$c++;
}
$col1 .= '</ul>';
$col1 .= '</ul>';
$navList = $col1.$col2;
</syntaxhighlight>

Mehrspaltige Navigationen lassen sich auch mit der slice Funktion erstellen:

<syntaxhighlight lang="php">
$categories = $pages->get('/about/sites/categories/')->children();
foreach($categories->slices(3) as $items) {
echo "<div class='uk-width-1-3'><ul>";
echo $items->each("<li><a href='{url}'>{title}</a>");
echo "</ul></div>";
}
</syntaxhighlight>

=== Pushy Menu ===
<syntaxhighlight lang="php">
/**
* Given a group of pages, render a <ul> navigation tree
*
* This is here to demonstrate an example of a more intermediate level
* shared function and usage is completely optional. This is very similar to
* the renderNav() function above except that it can output more than one
* level of navigation (recursively) and can include other fields in the output.
* Assumes there is a field navigation_type to decide how a list item is
* rendered
*
* @param array|PageArray $items
* @param int $maxDepth How many levels of navigation below current should it go?
* @param string $fieldNames Any extra field names to display (separate multiple fields with a space)
* @param array $options extra options for classes configuration etc.
* @return string
*
*/
function renderPushyMenu($items, $maxDepth = 0, $fieldNames = '', $options = array('level' => 0, 'ulClass' => '', 'liClass' => '', 'aClass' => '') ) {

// if we were given a single Page rather than a group of them, we'll pretend they
// gave us a group of them (a group/array of 1)
if($items instanceof Page) $items = array($items);
$out = '';
$c = 0;
$liClasses = array();
$ulClasses = array();
$level = 0;
$liClass = '';
$ulClass = '';

if(!empty($options['level'])) $level = $options['level'];
if(!empty($options['ulClass'])) {
$ulClasses[] = $options['ulClass'];
$ulClass = $options['ulClass'];
}

if(!empty($options['liClass'])) {
$liClasses[] = $options['liClass'];
$liClass = $options['liClass'];
}

// cycle through all the items
foreach($items as $item) {
//$level = count($page->parents);
// LI ITEM
$classes = $liClasses;
//if($item->id == wire('page')->id) $classes[] = 'cur';
if($item->hasChildren) {
// BUTTON instead of Link
$out .= '<li class="pushy-submenu"><button>'.$item->title.'</button>';
}else{
$classes[] = 'level-'.$level;
$out .= '<li class="'.implode($classes,' ').'">';
unset($classes);

// A ITEM
$navigation_type = $item->navigation_type->id;
$classes = $liClasses;
switch ( $navigation_type ) {
case 2: // do not link
$out .= '<span class="spacer">'.$item->title.'</span>';
break;
case 3: // link to subpage
if( $item->hasChildren() ){
$out .= '<a href="'.$item->child->url.'" class="ajax-link">'.$item->title.'</a>';
}else{
$out .= "<span class='spacer'>$item->title</span>";
}
break;
default:
$out .= '<a href="'.$item->url.'" class="ajax-link">'.$item->title.'</a>';
break;
}
unset($classes);
}
// if there are extra field names specified, render markup for each one in a <div>
// having a class name the same as the field name
if($fieldNames) foreach(explode(' ', $fieldNames) as $fieldName) {
$value = $item->get($fieldName);
if($value) $out .= " <div class='$fieldName'>$value</div>";
}

// if the item has children and we're allowed to output tree navigation (maxDepth)
// then call this same function again for the item's children
if($item->hasChildren() && $maxDepth) {
//if($class == 'nav') $class = 'nav nav-tree';
$nextLevelOptions = array('level' => $level+1, 'ulClass' => '', 'liClass' => $liClass);
$out .= renderNavTreeType($item->children, $maxDepth-1, $fieldNames, $nextLevelOptions);
}

// close the list item
$out .= "</li>\n";
}

// if output was generated above, wrap it in a <ul>

if($out) $out = "\n".'<ul class="'.implode($ulClasses,' ').'">'."\n".$out.'</ul>'."\n";

// return the markup we generated above
return $out;
}

</syntaxhighlight>

== Do not link / link to subpage ==
=== MarkupSimpleNavigation XTemplate + Redirect Beispiel ===

https://github.com/s...default-options

'''Menü Platzhalter'''
<syntaxhighlight lang="php">
"xtemplate" => "folder|placeholder", // specify one or more templates
"xitem_tpl" => "<span>{title}</span>", // default markup for page with this template
"xitem_current_tpl" => "<span>{title}</span>"
echo $nav->render(array(
'max_levels'=>2,
'selector'=>"limit=10",
'xtemplates' => 'placeholder|folder'
));
</syntaxhighlight>

'''Redirect Template'''

You could also have a template "redirect" with only a title and a page field (single page) to select any page you want to go.

Then in the code you should be able to write
<syntaxhighlight lang="php">
array('item_tpl' => '<a href="{redirect_page|url}">{title}</a>')
</syntaxhighlight>
So it would take the url of the referenced page in the page field if found, or if not it takes the url of the page itself. Assuming the page field is named "redirect_page".

=== In der Navi ===
Zusätzliches Feld (Options) im Backend mit Namen navigation_type

Beispiel
<syntaxhighlight lang="php">
/**
* Given a group of pages, render a <ul> navigation tree
* If there is a field navigation_type the vals have following meaning
* 1 = Normal
* 2 = Do not link
* 3 = Link to subpage
*
* @param array|PageArray $items
* @param int $maxDepth How many levels of navigation below current should it go?
* @param string $fieldNames Any extra field names to display (separate multiple fields with a space)
* @param string $class CSS class name for containing <ul>
* @return string
*
*/
function renderNavTreeType($items, $maxDepth = 0, $fieldNames = '', $options = array('level' => 0, 'ulClass' => 'nav', 'liClass' => '', 'aClass' => '') ) {

// if we were given a single Page rather than a group of them, we'll pretend they
// gave us a group of them (a group/array of 1)
if($items instanceof Page) $items = array($items);

// $out is where we store the markup we are creating in this function
$out = '';
$c = 0;
$liClasses = array();
$ulClasses = array();
$level = 0;
$liClass = '';
$ulClass = '';

if(!empty($options['level'])) $level = $options['level'];
if(!empty($options['ulClass'])) {
$ulClasses[] = $options['ulClass'];
$ulClass = $options['ulClass'];
}

if(!empty($options['liClass'])) {
$liClasses[] = $options['liClass'];
$liClass = $options['liClass'];
}

// cycle through all the items
foreach($items as $item) {
//$level = count($page->parents);
// LI ITEM
$classes = $liClasses;
if($item->id == wire('page')->id) $classes[] = 'cur';
if($item->hasChildren) $classes[] = 'has_children';
$classes[] = 'level-'.$level;
$out .= '<li class="'.implode($classes,' ').'">';
unset($classes);

// markup for the link
$navigation_type = $item->navigation_type->id;
$classes = $liClasses;
switch ( $navigation_type ) {
case 2: // do not link
$out .= '<span class="spacer">'.$item->title.'</span>';
break;
case 3: // link to subpage
if( $item->hasChildren() ){
$out .= '<a href="'.$item->child->url.'" class="ajax-link">'.$item->title.'</a>';
}else{
$out .= "<span class='spacer'>$item->title</span>";
}
break;
default:
$out .= '<a href="'.$item->url.'" class="ajax-link">'.$item->title.'</a>';
break;
}
unset($classes);
// if there are extra field names specified, render markup for each one in a <div>
// having a class name the same as the field name
if($fieldNames) foreach(explode(' ', $fieldNames) as $fieldName) {
$value = $item->get($fieldName);
if($value) $out .= " <div class='$fieldName'>$value</div>";
}

// if the item has children and we're allowed to output tree navigation (maxDepth)
// then call this same function again for the item's children
if($item->hasChildren() && $maxDepth) {
//if($class == 'nav') $class = 'nav nav-tree';
$nextLevelOptions = array('level' => $level+1, 'ulClass' => '', 'liClass' => $liClass);
$out .= renderNavTreeType($item->children, $maxDepth-1, $fieldNames, $nextLevelOptions);
}

// close the list item
$out .= "</li>\n";
}

// if output was generated above, wrap it in a <ul>

if($out) $out = "\n".'<ul class="'.implode($ulClasses,' ').'">'."\n".$out.'</ul>'."\n";

// return the markup we generated above
return $out;
}
</syntaxhighlight>

=== Redirect über das Template ===
Sinnvoll wenn die URL direkt aufgerufen wird:

$session->redirect($page->redirect_page->url);
or how about "redirect-to-firstchild".

$session->redirect($page->children->first()->url);

== Beispiele für Funktionen (z.B. in _func.php)==
'''Beispiele für Funktionen die Navigationen erzeugen. '''
=== One Level ===
==== Original ProcessWire Demo Beispiel ====

=== Nested List ausgehend von einer Seite (meistens Homepage) ===
<syntaxhighlight lang="php">
<?php namespace ProcessWire;

/**
* Given a group of pages, render a ONE LEVEL NAVBAR
*
* @param array|PageArray $items
* @return string
*
*/
function renderNavMain($pa,$pageId){
if($pa instanceof Page) $pa = array($pa);
$out = '<nav class="menu menu--ferdinand"><ul class="nav navbar-nav menu__list">';
foreach($pa as $item) {
if($item->id == $pageId) {
$out .= "<li class=\"menu__item menu__item--current cur\">";
} else {
$out .= "<li class=\"menu__item\">";
}
// if template isotope-parent add first isotope-child name as hash
if($item->template->name == 'isotope-parent'){
$out .= '<a class="menu__link" href="'.$item->url.'#'.$item->child->name.'">'.$item->title.'</a></li>';
}else $out .= '<a class="menu__link" href="'.$item->url.'">'.$item->title.'</a></li>';
}
$out .= "</ul></nav>";
return $out;
}

/**
* Given a group of pages render a standard ISOTOP MARKUP
*
* @param array|PageArray $items
* @return string
*
*/
function renderNavIsotope($pa){
if($pa instanceof Page) $pa = array($pa);
$out = '<ul class="submenu">';
foreach($pa as $item){
$out .= '<li><a href="#'.$item->name.'" class="isotope-link">'.$item->title.'</a></li>';
}
$out .= "</ul>";
return $out;
}

/**
* Given a group of pages, render a simple <ul> navigation
*
* This is here to demonstrate an example of a simple shared function.
* Usage is completely optional.
*
* @param PageArray $items
* @return string
*
*/
function renderNav(PageArray $items) {

// $out is where we store the markup we are creating in this function
$out = '';

// cycle through all the items
foreach($items as $item) {

// render markup for each navigation item as an <li>
if($item->id == wire('page')->id) {
// if current item is the same as the page being viewed, add a "current" class to it
$out .= "<li class='current'>";
} else {
// otherwise just a regular list item
$out .= "<li>";
}

// markup for the link
$out .= "<a href='$item->url'>$item->title</a> ";

// if the item has summary text, include that too
if($item->summary) $out .= "<div class='summary'>$item->summary</div>";

// close the list item
$out .= "</li>";
}

// if output was generated above, wrap it in a <ul>
if($out) $out = "<ul class='nav'>$out</ul>\n";

// return the markup we generated above
return $out;
}

/**
* Given a group of pages, render a <ul> navigation tree
*
* This is here to demonstrate an example of a more intermediate level
* shared function and usage is completely optional. This is very similar to
* the renderNav() function above except that it can output more than one
* level of navigation (recursively) and can include other fields in the output.
*
* @param array|PageArray $items
* @param int $maxDepth How many levels of navigation below current should it go?
* @param string $fieldNames Any extra field names to display (separate multiple fields with a space)
* @param string $class CSS class name for containing <ul>
* @return string
*
*/
function renderNavTree($items, $maxDepth = 0, $fieldNames = '', $class = 'nav') {

// if we were given a single Page rather than a group of them, we'll pretend they
// gave us a group of them (a group/array of 1)
if($items instanceof Page) $items = array($items);

// $out is where we store the markup we are creating in this function
$out = '';

// cycle through all the items
foreach($items as $item) {

// markup for the list item...
// if current item is the same as the page being viewed, add a "current" class to it
$out .= $item->id == wire('page')->id ? "<li class='current'>" : "<li>";

// markup for the link
$out .= "<a href='$item->url'>$item->title</a>";

// if there are extra field names specified, render markup for each one in a <div>
// having a class name the same as the field name
if($fieldNames) foreach(explode(' ', $fieldNames) as $fieldName) {
$value = $item->get($fieldName);
if($value) $out .= " <div class='$fieldName'>$value</div>";
}

// if the item has children and we're allowed to output tree navigation (maxDepth)
// then call this same function again for the item's children
if($item->hasChildren() && $maxDepth) {
if($class == 'nav') $class = 'nav nav-tree';
$out .= renderNavTree($item->children, $maxDepth-1, $fieldNames, $class);
}

// close the list item
$out .= "</li>";
}

// if output was generated above, wrap it in a <ul>
if($out) $out = "<ul class='$class'>$out</ul>\n";

// return the markup we generated above
return $out;
}

</syntaxhighlight>

== Komplette Beispiele ==
[[ProcessWire - Navigation Beispiele]]

ProcessWire - Navigation Snippets

2021-05-12T07:31:13Z

109.192.169.230: /* Zweispaltige Navigation aus Kindseiten */

== TODO Seite aufräumen ==
== Siehe auch ==
[[Processwire Module: MarkupSimpleNavigation]] automatisch Navigation aus Seitenbaum erstellen
[[Aligator (ProcessWire)]] - automatische Navigation, gut wenn manipuliert werden muss.
[[Menu Builder (ProcessWire)]] - Menüs im Backend erstellen (Wordpress like)

== Navigation in Pagewire - Einführung ==
=== Navigationstypen allgemein ===
Es gibt verschiedene '''Typen von Navigationen'''. In Processwire hat man ein '''Pages Objekt''', indem auch Zugriff auf Kind- und Elternseiten möglich sind. Es bildet also immer die Sitestruktur ab. Daher übergibt man an die unten aufgeführten Funktionen entweder die Homepage oder die aktuelle Seite.

Unter dem Aspekt auf welcher Seite man sich befindet kann man unterscheiden zwischen:
* '''absolute Navigation''' normalerweise ausgehend von der Rootseite. diese ist dann auf allen Seiten gleich.
** z.B. alle Seiten des ersten Levels stehen in der Hauptnavigation egal auf welcher Seite ich im Moment bin
** z.B. verschachtelte Liste mit 2 oder mehr Leveln für Dropdown Navigationen wie Superfish, Megamenüs (mit zusätzlichen Infos...) oder Bootstrap Navigationen.
** Sitemap
* '''Navigation relativ zur Seite''' Diese kann sich von Seite zu Seite unterscheiden.
** Alle '''Seiten der aktuellen Ebene''' (oft kombiniert mit Breadcrumb / Hier-bin-ich) )
** Hauptebene '''und''' aktueller Level
** Alle Ebenen '''bis zur aktuellen Seite + deren Unterseiten''' falls vorhanden.
In letzten Fall könnte man auch Varianten bauen in denen eine Verschachtelte Liste erzeugt wird aber nur bestimmte Teile absolut Positioniert angezeigt werden und andere versteckt werden. Manchmal möchte man bestimmte Level aber auch an anderer Position zeigen (z.B. Sidebar)
In der Praxis hat man in der Regel
* Mindestens eine Hauptnavigation mit allen Seiten der 1. Ebene oder eine Hauptnavigation mit mehreren Ebenen für Dropdown Navigationen, mobile Navigation oder auch Sitemapartige Navigationen für den Footer (oft mit kleinen Beschreibungen).
* Eine Metanavigation mit Service Seiten wie Kontakt, Impressum etc. oft ist diese im Footer.

=== Unterschiede zwischen Verstecken, Veröffentlichen, Sperren ===
In Processwire sind diese Begriffe mit Userrechten verknüpft. Eine unveröffentlichte Seite kann also durchaus im Frontend aufgerufen werden (es sei denn man regelt das anders.) Vielmehr geht es darum das man User Rollen so gestalten kann, dass man z.B. einem User nur erlaubt unveröffentlichte Seiten zu editieren.

Denoch gibt es auch ein paar weitere Unterschiede.

Gesperrt -> Man kann die Seite nicht zum Editieren aufrufen. Über die Url kann Sie aufgerufen werden.

Unpublished -> Die Seite kann sobald sie gespeichert ist auch aufgerufen werden, WENN der User berechtigt ist. Nicht für Guest User (der normale Viewer)

TODO checken ob die Tabelle so für nicht angemeldete User stimmt.
{| class="wikitable"
|-
! !! Im Menü ($pages->find) !! Über URL erreichbar($pages->get) !! Ausgabe im Frontend !!
|-
| Unpublished / Unveröffentlicht || Nein || Nur User mit passenden Rechten. Gäste -> leere Seite ||
|-
| Hidden / Versteckt || Nein || Ja || Ja - leere Seite (keine Feldausgabe)
|-
| Locked / Gesperrt || Ja || Ja || Ja
|-
| Trash || Nein || Nein ||
|}
==== Seiten auf unveröffentlicht stellen ====
https://processwire.com/talk/topic/29-how-to-unpublish-a-page-without-deleting-it/

Was soll man tun wenn man eine Seite tatsächlich nicht mehr anzeigen will, sie aber noch nicht wegwerfen will?
Ryan schlägt folgendes vor:
* Mülleimer
* Remove Guest Role in Template
*

== Basics ==
=== Basic Navigation ===
<pre>
<?php
// get the homepage object
$homePage = $pages->get("/");
// get PageArray of homepage object and child page objects
$navItems = $homePage->and($homePage->children);
?>
Now you have a PageArray with the required items, you can iterate over them one at a time, and print the title of the page and the link to the page itself and wrap the whole thing in your list tag.

<ul class="nav">

<?php
// get the homepage object
$homePage = $pages->get("/");
// get PageArray of homepage object and child page objects
$navItems = $homePage->and($homePage->children);
// or if you don't want the home link
// $navItems = $homePage->children;
// iterate over the $navItems PageArray
foreach ($navItems as $navItem):
?>

<li class="nav-item">
<a class="nav-link" href="<?php echo $navItem->url; ?>"><?php echo $navItem->title; ?></a>
</li>

<?php endforeach; ?>

</ul>
</pre>
==== Basic mit active Class ====
<pre>
<ul class="nav">

<?php
// get the homepage object
$homePage = $pages->get("/");
// get PageArray of homepage object and child page objects
$navItems = $homePage->and($homePage->children);
// or if you don't want the home link
// $navItems = $homePage->children;
// iterate over the $navItems PageArray
foreach ($navItems as $navItem):

// if the id of the page currently being
// iterated equals the id of the current page
$activeClass = ($navItem->id == $page->id) ? " active" : "";
?>

<li class="nav-item">
<a class="nav-link<?php echo $activeClass; ?>" href="<?php echo $navItem->url; ?>"><?php echo $navItem->title; ?></a>
</li>

<?php endforeach; ?>

</ul>
</pre>
==== Child Menu ====
<pre>

<ul class="sub-menu">

<?php
// get children of the parent of the current page
$childPages = $page->parent->children;

// iterate over the $navItems PageArray
foreach ($childPages as $childPage):

// if the id of the page currently being
// iterated equals the id of the current page
$activeClass = ($navItem->id == $page->id) ? " active" : "";
?>

<li class="nav-item">
<a class="nav-link<?php echo $activeClass; ?>" href="<?php echo $childPage->url; ?>"><?php echo $childPage->title; ?></a>
</li>

<?php endforeach; ?>

</ul>
</pre>

=== Page Level ===
In which level in page tree we are?
$level = count($page->parents);

=== Link to Subpage und Platzhalter (Spacer) ===
Kann man gut für Superfish Menüs etc. benutzen. Bildet das Verhalten von Shortcuts und Spacern aus TYPO3 nach.

Anpassung der renderNavTree() Funktion von Ryan Cramer. Options Field Installieren und als globales Feld "navigation_type" mit den Optionen
<pre>
1=normal|Normal
2=doNotLink|Do not link
3=linkToFirstChild|Link to first childpage
</pre>
konfigurieren. Dann Funktion etwa so anpassen:
<pre>
...
// cycle through all the items
foreach($items as $item) {

// markup for the list item...
// if current item is the same as the page being viewed, add a "current" class to it
$out .= $item->id == wire('page')->id ? "<li class='current'>" : "<li>";

// markup for the link
$navigation_type = $item->navigation_type->id;
switch ( $navigation_type ) {
case 2: // do not link
$out .= "<span class='spacer'>$item->title</span>";
break;
case 3: // link to subpage
if( $item->hasChildren() ){
$out .= '<a href="'.$item->child->url.'">'.$item->title.'</a>';
}else{
$out .= "<span class='spacer'>$item->title</span>";
}
break;
default:
$out .= "<a href='$item->url'>$item->title</a>";
break;
}
...
</pre>

=== Redirect (301) ===
==== Redirect zu erster Unterseite ====
https://processwire.com/talk/topic/15-how-do-i-create-a-page-that-redirects-to-its-first-child/

Field ''redirects_to_first_child'' erstellen und im Template einfügen.
<syntaxhighlight lang="php">
<?php
if($page->numChildren && $page->redirects_to_first_child)
$session->redirect($page->child()->url);
?>
</syntaxhighlight>
Erzeugt 301 Weiterleitung

Anderer Ansatz wäre evtl. den Link bei der Menügenerierung direkt zu generieren. finde ich persönlich besser siehe ''Link to subpage und Platzhalter'' Beispiel. Allerdings sollte man dann vielleicht die Seite trotzdem per 301 Weiterleiten, falls die URL mal direkt aufgerufen wird oder bei Google gelistet ist.

==== Redirect zu anderer Seite in der Navigation ====
https://processwire.com/talk/topic/762-howto-menu-item-that-links-to-another-page/

1. Create a new field and call it 'redirect_url' or something like that, and use the 'URL' fieldtype.

2. Add that field to your template where you'd want to use it, or create a new template just for the purpose, like a template named 'redirect'.

3. Edit the page that you want to be a symlink and populate the 'redirect_url' field with the URL you want it to redirect to.

4. In your nav-generation code that links to the pages, do something like this:

<syntaxhighlight lang="php">
<?php
$url = $subpage->get("redirect_url|url"); // use redirect_url if there, otherwise use url
echo "<a href='$url'>{$subpage->title}</a>";
</syntaxhighlight>
5. You might also want to add this to your template that has the 'redirect_url' field: just in case there's anything linking to it directly. That way it'll send people to the right place either way:

<?php
if($page->redirect_url) $session->redirect($page->redirect_url);

=== Breadcrumb ===
<pre>

<div class='breadcrumbs'><?php
// breadcrumbs are the current page's parents
foreach($page->parents() as $item) {
echo "<span><a href='$item->url'>$item->title</a></span> ";
}
// optionally output the current page as the last item
echo "<span>$page->title</span> ";
?></div>
</pre>

=== One Level Navigation Bar ===
[[ProcessWire - One Level Navigation]]
=== Nächste Seite / Next Page Navigation ===
Beispiel 1
<syntaxhighlight lang="php">
if($page->next->id){
$next = '
<div class="next">
<i>Next:</i> 
<a class="ajax-link" name="'.$page->next->title.'" href="'. $page->next->url .'">
'. $page->next->title .'<span class="fa fa-arrow-right"><span>
</a>
</div>';
}
</syntaxhighlight>

Beispiel 2 (mit zurück zur Elternseite)
<syntaxhighlight lang="php">
$next = '';
if($page->next->id){
$next = '
<a href="'.$page->next->url.'">
<i class="fa fa-angle-right"></i>
</a>
';
}

$prev = '';
if($page->prev->id){
$prev = '
<a href="'.$page->prev->url.'" class="w-inline-block paginaton-but">
<i class="fa fa-angle-left"></i>
</a>';
}

$pagination = '
<div class="container pagination">
<div class="row">

<div class="col col-md-4">
<div class="align-center">
'.$prev.'
</div>
</div>

<div class="col col-md-4">
<div class="align-center">
<a href="'.$page->parent->url.'">
<i class="fa fa-th"></i>
</a>
</div>
</div>

<div class="col col-md-4">
<div class="align-right center">
'.$next.'
</div>
</div>
</div>

</div>
';

echo $pagination;
</syntaxhighlight>

=== Zurück zur Elternseite ===
<syntaxhighlight lang="php">
<div class="back"><a href="'.$page->parent()->url.'">zurück</a></div>
</syntaxhighlight>

=== Kindseiten mit $page->children ===
<?=$page->children?>
Output
5723,4958,5937

Beispiel
<syntaxhighlight lang="php">
<ul>
<?php
foreach($page->children as $child)
echo "<li><a href='{$child->url}'>{$child->title}</a></li>";
?> 
</ul>
</syntaxhighlight>
Ergebnis:
<pre>
<ul> 
<li><a href='/about/contact/'>Contact Us</a></li>
<li><a href='/about/press/'>Press Releases</a></li>
<li><a href='/about/staff/'>Our Staff</a></li> 
</ul>
</pre>
=== Children Tree ===
<syntaxhighlight lang="php">
function listChildrenTree($children, $current, $w) {

echo "<ul>";

foreach($children as $page) {

$class = '';
if($page === $current || $current->parents->slice(1)->has($page) ) {
$class = "class='on' style='font-weight:bold'";
}

$rootid = $w->pages->get("/")->id;

echo "<li><a href='{$page->url}' $class>";
if($page->id == $rootid) echo "<img src='" . $w->config->urls->templates . "styles/images/home.png' width='24' height='28' alt='' />";
echo "{$page->title}</a> ";

if($page->numChildren && $page->id != $rootid) listChildrenTree($page->children, $current, $w);

echo "</li>";
}
echo "</ul>";
}

$children = $pages->get("/")->children();
$children->prepend($pages->get("/"));

listChildrenTree($children, $page, $wire);
</syntaxhighlight>

== Bootstrap Navigation ==
<syntaxhighlight lang="php">
<?php namespace ProcessWire;
// Markup to use wicht navigation_type field (normal=1, no-link=2,subpage=3)
?>

<?php

// bundle up the first level pages and prepend the root home page
$homepage = $pages->get(1);
$pa = $homepage->children;
$pa = $pa->prepend($homepage);

// Set the ball rolling...
$myMenu = renderChildrenOf($pa);
$wrapper = '
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Menü</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
|
</div>
</div>
</div>';
$myMenu = wrap($myMenu,$wrapper);
echo $myMenu;

/*
Navigation for ProcessWire using the Bootstrap 2.2.2 markup
This menu was written by Soma based on work by NetCarver and a bit thrown in by Joss
Bootstrap 3 update by Damienov, with multi level dropdown support fix
*/
function renderChildrenOf($pa, $output = '', $level = 0)
{
$output = '';
$level++;

foreach ($pa as $child) {
$atoggle = '';
$class = '';

if ($child->numChildren && count($child->parents) == 1) {
$class .= 'dropdown';
$atoggle .= ' class="dropdown-toggle" data-toggle="dropdown"';
} else if ($child->numChildren && count($child->parents) > 1 ) {
$class .= 'dropdown-submenu';
$atoggle .= ' class="dropdown-toggle"';
} else if ($child->numChildren && $child->id != 1) {
$class .= 'dropdown-menu';
}

// Makes the current page and it's top level parent add an active class
$class .= ($child === wire("page") || $child === wire("page")->rootParent) ? " active" : '';
$class = strlen($class) ? " class='" . trim($class) . "'" : '';

if ($child->numChildren && count($child->parents) == 1) {
// Add Caret if have children
$output .= "<li$class><a href='$child->url'$atoggle>$child->title <b class='caret'></b></a>";
} else if ($child->numChildren && count($child->parents) > 1) {
$output .= "<li$class><a tabindex='-1' href='$child->url'$atoggle>$child->title</a>";
} else {
$output .= "<li$class><a href='$child->url'$atoggle>$child->title</a>";
}

// If this child is itself a parent and not the root page, then render it's children in their own menu too...
if ($child->numChildren && $child->id != 1) {
$output .= renderChildrenOf($child->children, $output, $level);
}
$output .= '</li>';
}
$outerclass = ($level == 1) ? "nav navbar-nav" : 'dropdown-menu';
return "<ul class='$outerclass'>$output</ul>";
}

?>
</syntaxhighlight>

== Modul: MarkupSimpleNavigation==
[[Processwire Modul - MarkupSimpleNavigation]]

== Weitere Menübeispiele ==
=== Standard Tree Navigation ===
Für viele Zwecke ausreichend und leicht anpassbar, die klassische verschachtelte Liste.

=== Menüauswahl Hauptmenü / Metamenü / Footer-Navigation ===
Beispiel 1
Backend Feld menus anlegen Options:

1=Main Menu
2=Meta Menu

topnav.inc
<syntaxhighlight lang="php">
$pa = $homepage->and($homepage->children("menus.id=1"));//only if main menu is checked
$options = array('level' => '1', 'ulClass' => 'sf-menu', 'liClass' => '');
echo "<div>".renderNavTreeType($pa, $maxDepth = 1, $fieldNames = '', $options)."</div>";
</syntaxhighlight>

'''Beispiel 2 (älter)'''

Checkbox anlegen (footer_nav), und dann das Seitenarray etwa so modifizieren.
<pre>
$footer_nav = $pages->find("parent=1, footer_checkbox=1");
$main_nav = $pages->find("parent=1, footer_checkbox!=1");
</pre>

=== Zweispaltige Navigation aus Kindseiten ===
Verbesserungsvorschlag: Anstatt if lieber zwei for Schleifen -> bessere Performance
<syntaxhighlight lang="php">
// Childrens
$n = count($page->children);
$m = ceil($n/2);
$c = 0;

// NAVIGATION & SLIDER Items
$listItem = '';
$navList = '';
$col1 = '<ul class="nav-list col1">';
$col2 = '<ul class="nav-list col2">';
foreach ($page->children as $item) {
if($item->id == $page->rootParent->id) {
$listItem = '<li class="current">';
} else {
$listItem = '<li>';
}
$listItem .= '<a class="ajax-link" href="'.$item->url.'">'.$item->title.'</a></li>';
($c < $m) ? $col1 .= $listItem : $col2 .= $listItem;
$c++;
}
$col1 .= '</ul>';
$col1 .= '</ul>';
$navList = $col1.$col2;
</syntaxhighlight>

Mehrspaltige Navigationen lassen sich auch mit der slice Funktion erstellen:

<syntaxhighlight lang="php">
$categories = $pages->get('/about/sites/categories/')->children();
foreach($categories->slices(3) as $items) {
echo "<div class='uk-width-1-3'><ul>";
echo $items->each("<li><a href='{url}'>{title}</a>");
echo "</ul></div>";
}
</syntaxhighlight>

=== Pushy Menu ===
<syntaxhighlight lang="php">
/**
* Given a group of pages, render a <ul> navigation tree
*
* This is here to demonstrate an example of a more intermediate level
* shared function and usage is completely optional. This is very similar to
* the renderNav() function above except that it can output more than one
* level of navigation (recursively) and can include other fields in the output.
* Assumes there is a field navigation_type to decide how a list item is
* rendered
*
* @param array|PageArray $items
* @param int $maxDepth How many levels of navigation below current should it go?
* @param string $fieldNames Any extra field names to display (separate multiple fields with a space)
* @param array $options extra options for classes configuration etc.
* @return string
*
*/
function renderPushyMenu($items, $maxDepth = 0, $fieldNames = '', $options = array('level' => 0, 'ulClass' => '', 'liClass' => '', 'aClass' => '') ) {

// if we were given a single Page rather than a group of them, we'll pretend they
// gave us a group of them (a group/array of 1)
if($items instanceof Page) $items = array($items);
$out = '';
$c = 0;
$liClasses = array();
$ulClasses = array();
$level = 0;
$liClass = '';
$ulClass = '';

if(!empty($options['level'])) $level = $options['level'];
if(!empty($options['ulClass'])) {
$ulClasses[] = $options['ulClass'];
$ulClass = $options['ulClass'];
}

if(!empty($options['liClass'])) {
$liClasses[] = $options['liClass'];
$liClass = $options['liClass'];
}

// cycle through all the items
foreach($items as $item) {
//$level = count($page->parents);
// LI ITEM
$classes = $liClasses;
//if($item->id == wire('page')->id) $classes[] = 'cur';
if($item->hasChildren) {
// BUTTON instead of Link
$out .= '<li class="pushy-submenu"><button>'.$item->title.'</button>';
}else{
$classes[] = 'level-'.$level;
$out .= '<li class="'.implode($classes,' ').'">';
unset($classes);

// A ITEM
$navigation_type = $item->navigation_type->id;
$classes = $liClasses;
switch ( $navigation_type ) {
case 2: // do not link
$out .= '<span class="spacer">'.$item->title.'</span>';
break;
case 3: // link to subpage
if( $item->hasChildren() ){
$out .= '<a href="'.$item->child->url.'" class="ajax-link">'.$item->title.'</a>';
}else{
$out .= "<span class='spacer'>$item->title</span>";
}
break;
default:
$out .= '<a href="'.$item->url.'" class="ajax-link">'.$item->title.'</a>';
break;
}
unset($classes);
}
// if there are extra field names specified, render markup for each one in a <div>
// having a class name the same as the field name
if($fieldNames) foreach(explode(' ', $fieldNames) as $fieldName) {
$value = $item->get($fieldName);
if($value) $out .= " <div class='$fieldName'>$value</div>";
}

// if the item has children and we're allowed to output tree navigation (maxDepth)
// then call this same function again for the item's children
if($item->hasChildren() && $maxDepth) {
//if($class == 'nav') $class = 'nav nav-tree';
$nextLevelOptions = array('level' => $level+1, 'ulClass' => '', 'liClass' => $liClass);
$out .= renderNavTreeType($item->children, $maxDepth-1, $fieldNames, $nextLevelOptions);
}

// close the list item
$out .= "</li>\n";
}

// if output was generated above, wrap it in a <ul>

if($out) $out = "\n".'<ul class="'.implode($ulClasses,' ').'">'."\n".$out.'</ul>'."\n";

// return the markup we generated above
return $out;
}

</syntaxhighlight>

== Do not link / link to subpage ==
=== MarkupSimpleNavigation XTemplate + Redirect Beispiel ===

https://github.com/s...default-options

'''Menü Platzhalter'''
<syntaxhighlight lang="php">
"xtemplate" => "folder|placeholder", // specify one or more templates
"xitem_tpl" => "<span>{title}</span>", // default markup for page with this template
"xitem_current_tpl" => "<span>{title}</span>"
echo $nav->render(array(
'max_levels'=>2,
'selector'=>"limit=10",
'xtemplates' => 'placeholder|folder'
));
</syntaxhighlight>

'''Redirect Template'''

You could also have a template "redirect" with only a title and a page field (single page) to select any page you want to go.

Then in the code you should be able to write
<syntaxhighlight lang="php">
array('item_tpl' => '<a href="{redirect_page|url}">{title}</a>')
</syntaxhighlight>
So it would take the url of the referenced page in the page field if found, or if not it takes the url of the page itself. Assuming the page field is named "redirect_page".

=== In der Navi ===
Zusätzliches Feld (Options) im Backend mit Namen navigation_type

Beispiel
<syntaxhighlight lang="php">
/**
* Given a group of pages, render a <ul> navigation tree
* If there is a field navigation_type the vals have following meaning
* 1 = Normal
* 2 = Do not link
* 3 = Link to subpage
*
* @param array|PageArray $items
* @param int $maxDepth How many levels of navigation below current should it go?
* @param string $fieldNames Any extra field names to display (separate multiple fields with a space)
* @param string $class CSS class name for containing <ul>
* @return string
*
*/
function renderNavTreeType($items, $maxDepth = 0, $fieldNames = '', $options = array('level' => 0, 'ulClass' => 'nav', 'liClass' => '', 'aClass' => '') ) {

// if we were given a single Page rather than a group of them, we'll pretend they
// gave us a group of them (a group/array of 1)
if($items instanceof Page) $items = array($items);

// $out is where we store the markup we are creating in this function
$out = '';
$c = 0;
$liClasses = array();
$ulClasses = array();
$level = 0;
$liClass = '';
$ulClass = '';

if(!empty($options['level'])) $level = $options['level'];
if(!empty($options['ulClass'])) {
$ulClasses[] = $options['ulClass'];
$ulClass = $options['ulClass'];
}

if(!empty($options['liClass'])) {
$liClasses[] = $options['liClass'];
$liClass = $options['liClass'];
}

// cycle through all the items
foreach($items as $item) {
//$level = count($page->parents);
// LI ITEM
$classes = $liClasses;
if($item->id == wire('page')->id) $classes[] = 'cur';
if($item->hasChildren) $classes[] = 'has_children';
$classes[] = 'level-'.$level;
$out .= '<li class="'.implode($classes,' ').'">';
unset($classes);

// markup for the link
$navigation_type = $item->navigation_type->id;
$classes = $liClasses;
switch ( $navigation_type ) {
case 2: // do not link
$out .= '<span class="spacer">'.$item->title.'</span>';
break;
case 3: // link to subpage
if( $item->hasChildren() ){
$out .= '<a href="'.$item->child->url.'" class="ajax-link">'.$item->title.'</a>';
}else{
$out .= "<span class='spacer'>$item->title</span>";
}
break;
default:
$out .= '<a href="'.$item->url.'" class="ajax-link">'.$item->title.'</a>';
break;
}
unset($classes);
// if there are extra field names specified, render markup for each one in a <div>
// having a class name the same as the field name
if($fieldNames) foreach(explode(' ', $fieldNames) as $fieldName) {
$value = $item->get($fieldName);
if($value) $out .= " <div class='$fieldName'>$value</div>";
}

// if the item has children and we're allowed to output tree navigation (maxDepth)
// then call this same function again for the item's children
if($item->hasChildren() && $maxDepth) {
//if($class == 'nav') $class = 'nav nav-tree';
$nextLevelOptions = array('level' => $level+1, 'ulClass' => '', 'liClass' => $liClass);
$out .= renderNavTreeType($item->children, $maxDepth-1, $fieldNames, $nextLevelOptions);
}

// close the list item
$out .= "</li>\n";
}

// if output was generated above, wrap it in a <ul>

if($out) $out = "\n".'<ul class="'.implode($ulClasses,' ').'">'."\n".$out.'</ul>'."\n";

// return the markup we generated above
return $out;
}
</syntaxhighlight>

=== Redirect über das Template ===
Sinnvoll wenn die URL direkt aufgerufen wird:

$session->redirect($page->redirect_page->url);
or how about "redirect-to-firstchild".

$session->redirect($page->children->first()->url);

== Beispiele für Funktionen (z.B. in _func.php)==
'''Beispiele für Funktionen die Navigationen erzeugen. '''
=== One Level ===
==== Original ProcessWire Demo Beispiel ====

=== Nested List ausgehend von einer Seite (meistens Homepage) ===
<syntaxhighlight lang="php">
<?php namespace ProcessWire;

/**
* Given a group of pages, render a ONE LEVEL NAVBAR
*
* @param array|PageArray $items
* @return string
*
*/
function renderNavMain($pa,$pageId){
if($pa instanceof Page) $pa = array($pa);
$out = '<nav class="menu menu--ferdinand"><ul class="nav navbar-nav menu__list">';
foreach($pa as $item) {
if($item->id == $pageId) {
$out .= "<li class=\"menu__item menu__item--current cur\">";
} else {
$out .= "<li class=\"menu__item\">";
}
// if template isotope-parent add first isotope-child name as hash
if($item->template->name == 'isotope-parent'){
$out .= '<a class="menu__link" href="'.$item->url.'#'.$item->child->name.'">'.$item->title.'</a></li>';
}else $out .= '<a class="menu__link" href="'.$item->url.'">'.$item->title.'</a></li>';
}
$out .= "</ul></nav>";
return $out;
}

/**
* Given a group of pages render a standard ISOTOP MARKUP
*
* @param array|PageArray $items
* @return string
*
*/
function renderNavIsotope($pa){
if($pa instanceof Page) $pa = array($pa);
$out = '<ul class="submenu">';
foreach($pa as $item){
$out .= '<li><a href="#'.$item->name.'" class="isotope-link">'.$item->title.'</a></li>';
}
$out .= "</ul>";
return $out;
}

/**
* Given a group of pages, render a simple <ul> navigation
*
* This is here to demonstrate an example of a simple shared function.
* Usage is completely optional.
*
* @param PageArray $items
* @return string
*
*/
function renderNav(PageArray $items) {

// $out is where we store the markup we are creating in this function
$out = '';

// cycle through all the items
foreach($items as $item) {

// render markup for each navigation item as an <li>
if($item->id == wire('page')->id) {
// if current item is the same as the page being viewed, add a "current" class to it
$out .= "<li class='current'>";
} else {
// otherwise just a regular list item
$out .= "<li>";
}

// markup for the link
$out .= "<a href='$item->url'>$item->title</a> ";

// if the item has summary text, include that too
if($item->summary) $out .= "<div class='summary'>$item->summary</div>";

// close the list item
$out .= "</li>";
}

// if output was generated above, wrap it in a <ul>
if($out) $out = "<ul class='nav'>$out</ul>\n";

// return the markup we generated above
return $out;
}

/**
* Given a group of pages, render a <ul> navigation tree
*
* This is here to demonstrate an example of a more intermediate level
* shared function and usage is completely optional. This is very similar to
* the renderNav() function above except that it can output more than one
* level of navigation (recursively) and can include other fields in the output.
*
* @param array|PageArray $items
* @param int $maxDepth How many levels of navigation below current should it go?
* @param string $fieldNames Any extra field names to display (separate multiple fields with a space)
* @param string $class CSS class name for containing <ul>
* @return string
*
*/
function renderNavTree($items, $maxDepth = 0, $fieldNames = '', $class = 'nav') {

// if we were given a single Page rather than a group of them, we'll pretend they
// gave us a group of them (a group/array of 1)
if($items instanceof Page) $items = array($items);

// $out is where we store the markup we are creating in this function
$out = '';

// cycle through all the items
foreach($items as $item) {

// markup for the list item...
// if current item is the same as the page being viewed, add a "current" class to it
$out .= $item->id == wire('page')->id ? "<li class='current'>" : "<li>";

// markup for the link
$out .= "<a href='$item->url'>$item->title</a>";

// if there are extra field names specified, render markup for each one in a <div>
// having a class name the same as the field name
if($fieldNames) foreach(explode(' ', $fieldNames) as $fieldName) {
$value = $item->get($fieldName);
if($value) $out .= " <div class='$fieldName'>$value</div>";
}

// if the item has children and we're allowed to output tree navigation (maxDepth)
// then call this same function again for the item's children
if($item->hasChildren() && $maxDepth) {
if($class == 'nav') $class = 'nav nav-tree';
$out .= renderNavTree($item->children, $maxDepth-1, $fieldNames, $class);
}

// close the list item
$out .= "</li>";
}

// if output was generated above, wrap it in a <ul>
if($out) $out = "<ul class='$class'>$out</ul>\n";

// return the markup we generated above
return $out;
}

</syntaxhighlight>

== Komplette Beispiele ==
[[ProcessWire - Navigation Beispiele]]

GSAP - ScrollTrigger

2021-05-11T10:48:05Z

109.192.169.230:

Update: Die beste Möglichkeit Scrolling mit Animationen zu verbinden ist mit dem neuen (2020) ScrollTrigger Plugin.
https://www.youtube.com/watch?v=X7IBa7vZjmo Intro mit Beispielen
https://greensock.com/scrolltrigger Main Page
https://greensock.com/docs/v3/Plugins/ScrollTrigger Documentation
https://greensock.com/st-mistakes/ Häufige Fehler (auch mit each Schleifen)

Obsolet: https://codepen.io/osublake/pen/a633d0c9e6e2b951496d7f1eb4fd8fb6 (ohne ScrollMagic)

== Quickstart ==
Eine gute Methode vorzugehen:
* Timeline-Animation ohne ScrollTrigger bauen
* ScrollTrigger Konfiguration in die Timeline einbauen.

== MatchMedia ==
Mit MatchMedia kann man unterschiedliche ScrollTrigger für unterschiedliche Bildschirme nutzen.
https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia()
MatchMedia verwaltet bei Resize Events auch die Timelines, killt diese wenn nötig oder erzeugt neue. Das erleichtert unglaublich viel Arbeit.

Vorgehen

* Timeline Animation erstellen
* ScrollTrigger Konfiguration in Timeline aufsetzen
* MatchMedia erstellen und Timeline Animation einsetzen.

Ähnlich wie bei MediaQueries umschließt MatchMedia die Animation. Genauer gesagt man übergibt in der MatchMedia Funktion alles was in diesem Query ausgeführt werden soll. MatchMedia überwacht aber auch Veränderungen und setzt alle Animationen zurück, wenn der Query nicht mehr passt. Timelines etc. werden also wieder gekillt und der Urzustand wieder hergestellt.

=== MatchMedia aufsetzen ===
Im Konfigurationsobjekt von MatchMedia übergeben wir als Schlüssel der das MediaQuery enthält. Als Wert übergeben wie eine Funktion. In dieser Funktion werden alle Timelines / Animationen gesetzt die für das Query gelten.

<syntaxhighlight lang="javascript">
ScrollTrigger.matchMedia({
"(minWidth: 800px)": function(){
// all animations for 800px and up go here
},
"(maxWidth: 799px)": function(){
// all animations for smaller screens than 799px go here
},
"all": function(){
// animations valid for all viewport sizes go here
}
});
</syntaxhighlight>

=== Probleme mit Inline Styles und mediaQuery beheben - ScrollTrigger.saveStyles() ===
Manchmal kommt es vor, dass eine '''Animation einen Inline Style setzt, der ein mediaQuery in CSS "überschreibt"'''. Wenn man dieses Verhalten nicht möchte und lieber den '''Zustand beim Laden der Seite herstellen''' möchte kann man die Funktion saveStyles nutzen. Mit saveStyles kann man vor der Animation den Zustand von DOM-Objekten speichern. GSAP setzt diese dann wieder zurück wenn der MatchMedia Zweig nicht mehr zutrifft.
ScrollTrigger.saveStyles('.myElement, .myOtherElement);

== Beispiele Tipps etc. ==
=== Horizontal Scroll ===
https://codepen.io/GreenSock/pen/896549f0a83297debd9111fe9b205a97

Mit Tablet Swipe:
https://greensock.com/forums/topic/28016-horizontal-scroll-with-draggable-syncing-the-two/?tab=comments#comment-138080
https://codepen.io/GreenSock/pen/ZELQqeJ?editors=0010

ScrollMagic

2021-05-11T10:46:50Z

109.192.169.230:

Plugin zum Steuern von Events und Animationen abhängig von der Scrollposition. Kombiniert mit GSAP Animationen sehr mächtig.

Benötigt man nicht mehr mit [[GSAP - ScrollTrigger]]
== Links ==
https://scrollmagic.io
https://scrollmagic.io/docs/

== ScrollMagic und GSAP ==
Timeline Controlling mit ScrollMagic
=== ScrollMagic mit GSAP Basics ===
# GSAP Timeline Animation erstellen
# MagicScroll Controller erstellen.
# MagicScroll Szene definieren und GSAP-Timeline an den MagicScroll Tween übergeben (dafür ist das animation.gsap Plugin von MagicScroll notwendig)
==== ScrollMagic Basisbeispiele ====
var controller = new ScrollMagic.Controller();
Szenen definieren wie und an welcher Stelle der Controller reagieren soll. Der Szene übergibt man Eigenschaften

var scene = new ScrollMagic.Scene();
var scene = new ScrollMagic.Scene({
offset: 100, // start scene after scrolling for 100px
duration: 400 // pin the element for 400px of scrolling
})

Dann übergibst du die Szene an den Controller. Auch mehrere Szenen (mit Komma getrennt) sind möglich.

controller.addScene(scene);
Alternativ kannst du die Szene direkt aus dem Scene Objekt mit der addTo() Funktion zum Controller hinzufügen

<syntaxhighlight lang="javascript">
var scene = new ScrollMagic.Scene({
triggerElement: '#trigger1'
})
.addTo(controller); // Add Scene to ScrollMagic Controller

var scene2 = new ScrollMagic.Scene({
triggerElement: '#trigger2'
})
.addTo(controller); // Add Scene to ScrollMagic Controller
</syntaxhighlight>

==== Trigger Animation ====
Im ersten Fall wird die Animation an einer bestimmten '''Scroll Position ausgelöst'''. '''Die Animation selbst läuft nach dem Start automatisch ab.''' Folgendermaßen definieren wir die Szene.
<syntaxhighlight lang="javascript">
// Create a new ScrollMagic Scene
var scene = new ScrollMagic.Scene({
triggerElement: "#trigger1",
duration: 0, // 0 because duration is handled by gsap
triggerHook: 0.5, // 0.5 -> trigger position at middle of browser window
offset: 0
})
</syntaxhighlight>
In der ScrollMagic Scene ist die '''Dauer auf 0 gesetzt'''. Das bedeutet die Dauer wird von der GSAP Timeline bestimmt.

==== Animation by Scroll ====
Im zweiten Beispiel soll die Timeline '''über die Scrollposition gesteuert''' werden. Das geht ganz einfach indem wir in der ScrollMagic Szene eine '''Scrolldauer''' übergeben. Scrolldauer bedeutet ein '''Zahlenwert der als Pixel interpretiert wird'''. Oder ein '''Prozentwert (als String) der für "Prozent der Viewport-Höhe steht'''.

duration: "25%", // 50% means scrolling half window. Number i.e. 300 means while scrolling 300 pixel

==== Pinned Animation ====
ScrollMagic liefert mit der setPin() Funktion eine einfache Möglichkeit ein Element auf dem Screen zu fixieren, solange die Animation läuft. In diesem Beispiel wurde einfach die Zeile

.setPin("#animation2 .animation") // pin this element
hinzugefügt.

'''Pinned = Expanded Content'''

Beachte, dass die Section dieser Animation höher ist, als die der vorigen, obwohl es die gleiche Animation ist. Das liegt daran, dass '''die angepinnte Animation sich Platz verschafft''', indem sie den nachfolgenden Inhalt nach unten verschiebt.

Wenn du das nicht möchtest kannst du der setPin() Funktion die Eigenschaft pushFollowers: false mitgeben.

scene.setPin("#pin", {pushFollowers: false});

GSAP - Snippets

2021-05-11T10:45:20Z

109.192.169.230: /* ScrollTrigger */

== Links ==
[[GSAP]]
https://greensock.com/cheatsheet/
https://greensock.com/get-started
https://codepen.io/GreenSock/
https://css-tricks.com/writing-smarter-animation-code/ *****
https://greensock.com/forums/topic/17401-multiple-timelinemax-oncomplete-function-help/
Cool Stuff
https://greensock.com/forums/topic/18128-svg-stroke-dasharray-quick-tip/
Read On
https://greensock.com/forums/topic/22793-how-to-work-with-new-labels-object-in-gsap-3/

== Einfache Animationen ==

gsap.to(".logo", {duration: 2, x: 300}); // Dies nennt sich eine Timeline. 300px nach rechts bewegen in 2s mit Standardwerten (ease out...)
gsap.to(".logo", {duration: 2, x: 300, backgroundColor: "#c2c4c8"}); // CSS Eigenschaften die normal ein - haben, werden als Camelcase geschrieben.
// Eigenschaften mit Zeichen in Anführungsstrichen. Fast alles lässt sich Animieren.
gsap.to(".logo", {duration: 2, x: 300, backgroundColor: "#c2c4c8", borderRadius: "50%", border: "4px solid white"});

=== Ease In Out ===

https://greensock.com/docs/v3/Eases
gsap.to(".logo", {duration: 1, x:300, ease: "power2.inOut"});

Ease Möglichkeiten

//OLD ==> NEW
Elastic.easeOut ==> "elastic.out" //or just "elastic" because ".out" is the default flavor
Elastic.easeIn ==> "elastic.in"
Elastic.easeInOut ==> "elastic.inOut"
Elastic.easeOut.config(1, 0.5) ==> "elastic.out(1, 0.5)" //or just "elastic(1, 0.5)"

//and the other configurable eases are much easier!:
SteppedEase.config(5) ==> "steps(5)"
SlowMo.ease.config(0.5, 0.8) ==> "slow(0.5, 0.8)"
RoughEase.ease.config({points:40}) ==> "rough(40)"
ExpoScaleEase.config(0.5, 3) ==> "expoScale(0.5, 3)"

== Staggering ==
<syntaxhighlight lang="javascript">
gsap.to(".class", {
x:"+=100",
duration:1,
stagger: 0.5 //simple stagger of 0.5 seconds
});

//or get advanced:
gsap.to(".class", {
x:"+=100",
duration:1,
stagger: {
amount:2,
from:"center",
grid:"auto",
onComplete: myFunction //define callbacks inside the stagger to make them apply to each sub-tween
}
});
</syntaxhighlight>

== Relative position prefix ==
Relative “>” and “<” position prefix
This feature helps with positioning animations in a timeline. It puts a tween relative to the previous tween’s start or end time and removes the need to add labels through your code.

gsap.method('selector',{}, "<" ) //Inserts a tween at the start of the previous tween

gsap.method('selector',{}, ">" ) //Inserts a tween at the end of the previous

== Keyframes ==

Anstatt mehrerer Tweens kann man auch mehrere TweenProperties als keyframes kombinieren und hat weniger Tipparbeit.
<syntaxhighlight lang="javascript">
gsap.to(".class", {keyframes: [ //<-- an array of keyframes!
{x:100, duration:1},
{y:200, duration:1, delay:0.5}, //create a 0.5 second gap
{rotation:360, duration:2, delay:-0.25} //overlap by 0.25 seconds
]});
</syntaxhighlight>

== Timelines ==
=== Reset Timeline ===
If you want to set the values to the original position set in the animation you can move the the playhead's position before you kill it:

tl.pause(0).kill(true);
ScrollTrigger.getById("trigger1").kill(true); // you have to do a extra kill for ScrollTrigger if used

If you want to remove all inline styles you can use clearProps:

tl.kill(true);
ScrollTrigger.getById("trigger1").kill(true);
gsap.set("#element", {clearProps: true});

=== Globale Timeline kontrollieren (timeScale)===
<pre>
gsap.globalTimeline.timeScale(0.1); //slow everything down
gsap.globalTimeline.pause(); //stop everything, though you might want to use gsap.exportRoot() instead so that you can exclude delayedCalls()
</pre>

== Rotation ==
=== Richtung der Rotation ===
rotation:"270_short" //animates in the shortest direction!
rotation:"270_cw" //animates clockwise
rotation:"270_ccw" //animates counter-clockwise

== Scroll To ==
<syntaxhighlight lang="javascript">
document.querySelector("button").addEventListener("click", function() {
gsap.to(window, { duration: 0.75, scrollTo: ".target" });
});
</syntaxhighlight>

== GSAP Scroll Trigger ==
Update: Die beste Möglichkeit ist mit dem neuen ScrollTrigger Plugin.
[[GSAP - ScrollTrigger]]
https://www.youtube.com/watch?v=X7IBa7vZjmo Intro mit Beispielen
https://greensock.com/scrolltrigger Main Page
https://greensock.com/docs/v3/Plugins/ScrollTrigger Documentation
https://greensock.com/st-mistakes/ Häufige Fehler (auch mit each Schleifen)

Obsolet: https://codepen.io/osublake/pen/a633d0c9e6e2b951496d7f1eb4fd8fb6 (ohne ScrollMagic)

== Good Practice and Time Savers ==
=== Timeline schneller abspielen ===
tl.timeScale(3).repeat(2);
=== Bestimmten Teil abspielen ===
tl.play("myLabel");
wobei die Labels so definiert werden:
.addLabel("out3");
oder
.to("#myElement",{duration:1, rotation:90}, "in3");

=== Schleifen ===
Geeignet für gleiche Animation auf mehreren Elementen hintereinander. Dabei übergeben wir in einer Schleife ein DOM Element und erstellen in einer anonymen Funktion den Tween.
<syntaxhighlight lang="javascript">
$(".fade-in").each(function(){
var tween = gsap.from($(this), {duration: 0.5, scale: 0.7, y: '+=30', ease: Linear.easeNone });
// possible with ScrollMagic
var scene = new ScrollMagic.Scene({
triggerElement: this,
})
.setTween(tween);
});
</syntaxhighlight>

=== Default Werte ===
<syntaxhighlight lang="javascript">
gsap.timeline({defaults:{ease:"power2.out", duration:5}})
.to(".selector1", {x:200})
.to(".selector2", {y:500})
</syntaxhighlight>
=== Nesting Timelines ===

=== Functions to create timelines ===

== Responsive Animations & Media Queries==
https://greensock.com/forums/topic/18719-how-to-manage-gsap-animation-in-mobile-device/
https://greensock.com/forums/topic/18280-truly-responsive-animations/
https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia()

== Plugins ==
=== SVGMorph ===
gsap.to("#circle", {duration: 1, morphSVG:"#hippo"});

== ScrollTrigger ==
[[GSAP - ScrollTrigger]]

https://codepen.io/noeldelgado/pen/BaogqYy
<syntaxhighlight lang="javascript">
// Array erstellen um Animation auf viele Elemente anzuwenden
var panels = gsap.utils.toArray(".panel");
let container = document.querySelector('.scroll-container')

tl = gsap.timeline();
tl.to(panels, { //each panel
xPercent: -100 * (panels.length -1), // move complete width i.e. -500%
scrollTrigger: {
trigger: ".scroll-container",
pin: true,
markers: true,
end: () => "+=" + document.querySelector(".scroll-container").offsetWidth,
}
});

// ODER

panels.forEach((panel, i) => {
gsap.to(panel, {
//...
}
})
</syntaxhighlight>

== Helpers ==
=== gsap loader ===
<syntaxhighlight lang="javascript">
gsap.registerPlugin(ScrollTrigger);

const images = gsap.utils.toArray('img');
const loader = document.querySelector('.loader--text');
const updateProgress = (instance) =>
loader.textContent = `${Math.round(instance.progressedCount * 100 / images.length)}%`;

const showDemo = () => {
document.body.style.overflow = 'auto';
document.scrollingElement.scrollTo(0, 0);
gsap.to(document.querySelector('.loader'), { autoAlpha: 0 });
// do some cool stuff
gsap.utils.toArray('section').forEach((section, index) => {
const w = section.querySelector('.wrapper');
const [x, xEnd] = (index % 2) ? ['100%', (w.scrollWidth - section.offsetWidth) * -1] : [w.scrollWidth * -1, 0];
gsap.fromTo(w, { x }, {
x: xEnd,
scrollTrigger: {
trigger: section,
scrub: 0.5
}
});
});
}
// check how much is loaded
imagesLoaded(images).on('progress', updateProgress).on('always', showDemo);
</syntaxhighlight>

Outdated Browser

2021-05-07T16:09:53Z

109.192.169.230: /* IE 10 / IE 11 */

== IE 10 / IE 11 ==
<syntaxhighlight lang="css">
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
#outdated{
display: block!important;
margin: 2em auto;
max-width: 640px;
}
#page{
display: none!important;
}

}
</syntaxhighlight>

Oder:

https://getbutterfly.com/how-to-show-an-outdated-browser-alert-on-internet-explorer-11/

Next, as the title says, here’s how to detect an IE 11 browser:

<syntaxhighlight lang="javascript">
// Method #1: Detect IE 10 and IE 11
function isIE() {
// IE 10 and IE 11
return /Trident\/|MSIE/.test(window.navigator.userAgent);
}
</syntaxhighlight>

Or IE 11-only:

<syntaxhighlight lang="javascript">
let isIE11 = (function () {
// true on IE11, false on Edge and other IEs/browsers.
let isIE11 = !!window.MSInputMethodContext && !!document.documentMode,
ua = window.navigator.userAgent;

if (ua.indexOf("AppleWebKit") > 0) {
return false;
} else if (ua.indexOf("Lunascape") > 0) {
return false;
} else if (ua.indexOf("Sleipnir") > 0) {
return false;
}

array = /(msie|rv:?)\s?([\d\.]+)/.exec(ua);
version = (array) ? array[2] : '';

return (version === 11) ? true : false;
});
</syntaxhighlight>

Next, we need to display an outdated/unsupported browser alert:

<syntaxhighlight lang="javascript">
let showBrowserAlert = (function () {
if (document.querySelector('.unsupported-browser')) {
let d = document.getElementsByClassName('unsupported-browser');

is_IE11 = isIE11();

if (is_IE11) {
d[0].innerHTML = '<b>Unsupported Browser!</b> This website will offer limited functionality in this browser. We only support the recent versions of major browsers like Chrome, Firefox, Safari, and Edge.';
d[0].style.display = 'block';
}
}
});

document.addEventListener('DOMContentLoaded', showBrowserAlert);
</syntaxhighlight>

Don’t forget to add an empty
<div class="unsupported-browser"></div>
right after the opening <body>.

Outdated Browser

2021-05-07T16:09:26Z

109.192.169.230: Die Seite wurde neu angelegt: „== IE 10 / IE 11 == <syntaxhighlight lang="css"> @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { /* IE10+ specific st…“

== IE 10 / IE 11 ==
<syntaxhighlight lang="css">
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
#outdated{
display: block!important;
margin: 2em auto;
max-width: 640px;
}
#page{
display: none!important;
}

}
</syntaxhighlight>

Oder:

https://getbutterfly.com/how-to-show-an-outdated-browser-alert-on-internet-explorer-11/

Next, as the title says, here’s how to detect an IE 11 browser:

<syntaxhighlight lang="javascript">
// Method #1: Detect IE 10 and IE 11
function isIE() {
// IE 10 and IE 11
return /Trident\/|MSIE/.test(window.navigator.userAgent);
}
</syntaxhighlight>

Or IE 11-only:

<syntaxhighlight lang="javascript">
let isIE11 = (function () {
// true on IE11, false on Edge and other IEs/browsers.
let isIE11 = !!window.MSInputMethodContext && !!document.documentMode,
ua = window.navigator.userAgent;

if (ua.indexOf("AppleWebKit") > 0) {
return false;
} else if (ua.indexOf("Lunascape") > 0) {
return false;
} else if (ua.indexOf("Sleipnir") > 0) {
return false;
}

array = /(msie|rv:?)\s?([\d\.]+)/.exec(ua);
version = (array) ? array[2] : '';

return (version === 11) ? true : false;
});
</syntaxhighlight>

Next, we need to display an outdated/unsupported browser alert:

<syntaxhighlight lang="javascript">
let showBrowserAlert = (function () {
if (document.querySelector('.unsupported-browser')) {
let d = document.getElementsByClassName('unsupported-browser');

is_IE11 = isIE11();

if (is_IE11) {
d[0].innerHTML = '<b>Unsupported Browser!</b> This website will offer limited functionality in this browser. We only support the recent versions of major browsers like Chrome, Firefox, Safari, and Edge.';
d[0].style.display = 'block';
}
}
});

document.addEventListener('DOMContentLoaded', showBrowserAlert);
</syntaxhighlight>

Don’t forget to add an empty <div class="unsupported-browser"></div> right after the opening <body>.

Processwire - Working with Video

2021-05-05T07:30:09Z

109.192.169.230:

== Allgemeines zu HTML5 Video ==
Autostart von Videos mit Ton ist in vielen Browsern wegen der Sicherheitsbeschränkungen nicht möglich. Hier muss man im JavaScript Fallbackmöglichkeiten vorsehen (siehe Codepen Beispiel oder DEKRA GB)

== Beispiel - HTML5 Video über Dateiname ==
Große Videos lassen sich besser mit FTP hochladen. Z.B. in ein definiertes Verzeichnis und man gibt einfach den Dateinamen an:
<syntaxhighlight lang="php">
// Video specs
$videoButtonUrl = $config->urls->templates.'assets/bVideo.svg';
$videoPauseUrl = $config->urls->templates.'assets/bPause.svg';
$videoFolder = $config->urls->templates.'assets/videos/';
$videoPoster = '';
if($page->video_poster){
$videoPoster = $page->video_poster->width(800)->url;
}
$vid = 'v-'.$page->id;
$bid = 'vb-'.$page->id;
preg_match('^(?:https?:\/\/)^',$page->video_name,$match);
if($match){ // link
$videoUrl = $page->video_name;
// z.B. http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4
}else{
$videoUrl = $videoFolder.$page->video_name;
}
$videoMarkup = '
<video id="'.$vid.'" data-toggle="'.$bid.'" class="na-16-9"
src="'.$videoUrl.'"
preload="true"
poster="'.$videoPoster.'"
playsinline>
Entschuldigung, dein Browser kann keine Inline Videos abspielen. Schau das Video hier an:<br>
<a href="'.$videoUrl.'" target="_blank">ZUM VIDEO</a>
</video>

<div class="video-button" id="'.$bid.'">
<img class="b-play" src="'.$videoButtonUrl.'" style="width: 100px;" alt="" srcset="">
<img class="b-pause" src="'.$videoPauseUrl.'" style="width: 100px;" alt="" srcset="">
</div>
';
</php>
</syntaxhighlight>
== Beispiel - HTML5 Video mit Fallback ==

=== Beispiel: Umfangreiche Konfiguration in Isotope Matrix ===
Basiert auf Isotope Elements in 3B. Die Isotope Matrix wird hier nicht im Detail erklärt.

* Processwire Modul: '''FieldtypeSelectFile''' installieren (funktioniert auch auf 3.x angegeben ist nur bis 2.7 in 09/2017). InputfieldSelectFile wird automatisch mitinstalliert.
* Feld iso_elem_videos mit Typ File anlegen (Das Beispiel nutzt das RepeaterMatrix Pro Modul. Aber es geht natürlich auch in anderen Feldern. Siehe unten Felderübersicht)
* Bei Details: Valid File Extensions: mp4 ogv mpeg mov webm
* In der Repeater Matrix 'iso_elem_matrix' neuen Inhaltstyp anlegen (Name: video_box, Label: Video Box)
* Als Felder iso_elem_size, iso_elem_image, iso_elem_videos auswählen.
* Templates erweitern bzw. anlegen (siehe unten)

=== Templates ===
==== layout_blocks.inc ====
<syntaxhighlight lang="php">
<?php namespace ProcessWire;
/* Shows layout blocks
* uses repeater Matrix field
*/

function renderLayoutBlocks($page){
$out = '';
foreach($page->iso_elem_matrix as $item) {
switch ($item->type) { // type refers to name field
case 'portfolio_box':
$out .= $item->render(); // looks for templates/fields/iso_elem_matrix/portfolio_box.php
break;
//...
case 'video_box':
$out .= $item->render();
break;
//..
default:
$out .= '<div class="message">Keine Renderdefinition gefunden für den Typ: '.$item->type.'</div>';
break;
}
}
return $out;
}
</syntaxhighlight>
==== video_box.php ====
Wird durch das render Statement in layout_block.inc automatisch ausgeführt.

site/templates/fields/iso_elem_matrix/video_box.php

Gekürztes Beispiel
<syntaxhighlight lang="php">
<?php namespace ProcessWire;
$pathToVideos = $config->urls->templates.'img/video/';
$out = '';
$templateName = $page->getForPage()->template->name;
if($templateName == "isotope-child") $isotopeFilterClass = $page->getForpage()->name;// class if template is isotope-child
else $isotopeFilterClass = "home";// for all other templates we want to show content imediately (home class inits first isotope element)
$myImage = "";
$myPoster = "";
$myUrl = "";
$has_link = 0;
$sizeClass = "";
// Element size
switch ($page->iso_elem_size) {
case '1': // small 1-1
$sizeClass = "size-s";
$aspectClass = "a-1-1";
$imgW = 400; //image width
$imgH = 400;
$icoW = 200; //icon width
break;
case '2': // medium 2-1
$sizeClass = "size-m";
//...
default: // big 2-2
$sizeClass = "size-l";
$aspectClass = "a-1-1";
$imgW = 800;
$imgH = 800;
$icoW = 200;
break;
}
// Image
if($page->iso_elem_image){
$imgOptions = array(
'quality' => 80,
'upscaling' => false
);
$myImage = $page->iso_elem_image->size($imgW,$imgH,$imgOptions);
$myPoster = ' poster="'.$myImage->url.'"';
}
// Video

$videoMarkup = '';
if ($page->iso_elem_videos->count()) {
foreach($page->iso_elem_videos as $file){
$videoMarkup .= '<source src="'.$file->url.'" type="video/'.$file->ext.'">';
}
}

// Video Container Markup
$videoMarkup = '
<div class="element-with-video-bg jquery-background-video-wrapper stretch" >
<video data-bgvideo="true" class="my-background-video jquery-background-video" loop autoplay muted'.$myPoster.'>
'.$videoMarkup.'
</video>
</div>
';

ob_start();
?>


<div class="element video-box <?=$sizeClass?> <?=$isotopeFilterClass?>">
<div class="aspect-wrapper transition <?=$aspectClass?>">
<div class="element-wrapper">
<div class="portfolio-item stretch" style="overflow:hidden">
<?=$videoMarkup?>
</div>
</div>
</div>
</div>

<?php
$out = ob_get_contents();
ob_end_clean();

return $out;

</syntaxhighlight>

==== Felder ====
iso_elem_videos -> Type Select File (Ein oder mehrere Videos)
iso_elem_image -> Type Image (Fallback)
iso_elem_size -> Type Integer (Select Field)
iso_elem_matrix -> RepeaterMatrix

Processwire - Working with Video

2021-05-05T07:28:26Z

109.192.169.230: /* Beispiel - HTML5 Video über Dateiname */

== Beispiel - HTML5 Video über Dateiname ==
Große Videos lassen sich besser mit FTP hochladen. Z.B. in ein definiertes Verzeichnis und man gibt einfach den Dateinamen an:
<syntaxhighlight lang="php">
// Video specs
$videoButtonUrl = $config->urls->templates.'assets/bVideo.svg';
$videoPauseUrl = $config->urls->templates.'assets/bPause.svg';
$videoFolder = $config->urls->templates.'assets/videos/';
$videoPoster = '';
if($page->video_poster){
$videoPoster = $page->video_poster->width(800)->url;
}
$vid = 'v-'.$page->id;
$bid = 'vb-'.$page->id;
preg_match('^(?:https?:\/\/)^',$page->video_name,$match);
if($match){ // link
$videoUrl = $page->video_name;
// z.B. http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4
}else{
$videoUrl = $videoFolder.$page->video_name;
}
$videoMarkup = '
<video id="'.$vid.'" data-toggle="'.$bid.'" class="na-16-9"
src="'.$videoUrl.'"
preload="true"
poster="'.$videoPoster.'"
playsinline>
Entschuldigung, dein Browser kann keine Inline Videos abspielen. Schau das Video hier an:<br>
<a href="'.$videoUrl.'" target="_blank">ZUM VIDEO</a>
</video>

<div class="video-button" id="'.$bid.'">
<img class="b-play" src="'.$videoButtonUrl.'" style="width: 100px;" alt="" srcset="">
<img class="b-pause" src="'.$videoPauseUrl.'" style="width: 100px;" alt="" srcset="">
</div>
';
</php>
</syntaxhighlight>
== Beispiel - HTML5 Video mit Fallback ==

=== Beispiel: Umfangreiche Konfiguration in Isotope Matrix ===
Basiert auf Isotope Elements in 3B. Die Isotope Matrix wird hier nicht im Detail erklärt.

* Processwire Modul: '''FieldtypeSelectFile''' installieren (funktioniert auch auf 3.x angegeben ist nur bis 2.7 in 09/2017). InputfieldSelectFile wird automatisch mitinstalliert.
* Feld iso_elem_videos mit Typ File anlegen (Das Beispiel nutzt das RepeaterMatrix Pro Modul. Aber es geht natürlich auch in anderen Feldern. Siehe unten Felderübersicht)
* Bei Details: Valid File Extensions: mp4 ogv mpeg mov webm
* In der Repeater Matrix 'iso_elem_matrix' neuen Inhaltstyp anlegen (Name: video_box, Label: Video Box)
* Als Felder iso_elem_size, iso_elem_image, iso_elem_videos auswählen.
* Templates erweitern bzw. anlegen (siehe unten)

=== Templates ===
==== layout_blocks.inc ====
<syntaxhighlight lang="php">
<?php namespace ProcessWire;
/* Shows layout blocks
* uses repeater Matrix field
*/

function renderLayoutBlocks($page){
$out = '';
foreach($page->iso_elem_matrix as $item) {
switch ($item->type) { // type refers to name field
case 'portfolio_box':
$out .= $item->render(); // looks for templates/fields/iso_elem_matrix/portfolio_box.php
break;
//...
case 'video_box':
$out .= $item->render();
break;
//..
default:
$out .= '<div class="message">Keine Renderdefinition gefunden für den Typ: '.$item->type.'</div>';
break;
}
}
return $out;
}
</syntaxhighlight>
==== video_box.php ====
Wird durch das render Statement in layout_block.inc automatisch ausgeführt.

site/templates/fields/iso_elem_matrix/video_box.php

Gekürztes Beispiel
<syntaxhighlight lang="php">
<?php namespace ProcessWire;
$pathToVideos = $config->urls->templates.'img/video/';
$out = '';
$templateName = $page->getForPage()->template->name;
if($templateName == "isotope-child") $isotopeFilterClass = $page->getForpage()->name;// class if template is isotope-child
else $isotopeFilterClass = "home";// for all other templates we want to show content imediately (home class inits first isotope element)
$myImage = "";
$myPoster = "";
$myUrl = "";
$has_link = 0;
$sizeClass = "";
// Element size
switch ($page->iso_elem_size) {
case '1': // small 1-1
$sizeClass = "size-s";
$aspectClass = "a-1-1";
$imgW = 400; //image width
$imgH = 400;
$icoW = 200; //icon width
break;
case '2': // medium 2-1
$sizeClass = "size-m";
//...
default: // big 2-2
$sizeClass = "size-l";
$aspectClass = "a-1-1";
$imgW = 800;
$imgH = 800;
$icoW = 200;
break;
}
// Image
if($page->iso_elem_image){
$imgOptions = array(
'quality' => 80,
'upscaling' => false
);
$myImage = $page->iso_elem_image->size($imgW,$imgH,$imgOptions);
$myPoster = ' poster="'.$myImage->url.'"';
}
// Video

$videoMarkup = '';
if ($page->iso_elem_videos->count()) {
foreach($page->iso_elem_videos as $file){
$videoMarkup .= '<source src="'.$file->url.'" type="video/'.$file->ext.'">';
}
}

// Video Container Markup
$videoMarkup = '
<div class="element-with-video-bg jquery-background-video-wrapper stretch" >
<video data-bgvideo="true" class="my-background-video jquery-background-video" loop autoplay muted'.$myPoster.'>
'.$videoMarkup.'
</video>
</div>
';

ob_start();
?>


<div class="element video-box <?=$sizeClass?> <?=$isotopeFilterClass?>">
<div class="aspect-wrapper transition <?=$aspectClass?>">
<div class="element-wrapper">
<div class="portfolio-item stretch" style="overflow:hidden">
<?=$videoMarkup?>
</div>
</div>
</div>
</div>

<?php
$out = ob_get_contents();
ob_end_clean();

return $out;

</syntaxhighlight>

==== Felder ====
iso_elem_videos -> Type Select File (Ein oder mehrere Videos)
iso_elem_image -> Type Image (Fallback)
iso_elem_size -> Type Integer (Select Field)
iso_elem_matrix -> RepeaterMatrix

Processwire - Working with Video

2021-05-05T07:28:03Z

109.192.169.230: /* HTML5 Video mit Fallback */

== Beispiel - HTML5 Video über Dateiname ==
Große Videos lassen sich besser mit FTP hochladen. Z.B. in ein definiertes Verzeichnis und man gibt einfach den Dateinamen an:
<syntaxhighlight lang="php">
// Video specs
$videoButtonUrl = $config->urls->templates.'assets/bVideo.svg';
$videoPauseUrl = $config->urls->templates.'assets/bPause.svg';
$videoFolder = $config->urls->templates.'assets/videos/';
$videoPoster = '';
if($page->video_poster){
$videoPoster = $page->video_poster->width(800)->url;
}
$vid = 'v-'.$page->id;
$bid = 'vb-'.$page->id;
preg_match('^(?:https?:\/\/)^',$page->video_name,$match);
if($match){ // link
$videoUrl = $page->video_name;
// z.B. http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4
}else{
$videoUrl = $videoFolder.$page->video_name;
}
$videoMarkup = '
<video id="'.$vid.'" data-toggle="'.$bid.'" class="na-16-9"
src="'.$videoUrl.'"
preload="true"
poster="'.$videoPoster.'"
playsinline>
Entschuldigung, dein Browser kann keine Inline Videos abspielen. Schau das Video hier an:<br>
<a href="'.$videoUrl.'" target="_blank">ZUM VIDEO</a>
</video>

<div class="video-button" id="'.$bid.'">
<img class="b-play" src="'.$videoButtonUrl.'" style="width: 100px;" alt="" srcset="">
<img class="b-pause" src="'.$videoPauseUrl.'" style="width: 100px;" alt="" srcset="">
</div>
';
</php>
== Beispiel - HTML5 Video mit Fallback ==

=== Beispiel: Umfangreiche Konfiguration in Isotope Matrix ===
Basiert auf Isotope Elements in 3B. Die Isotope Matrix wird hier nicht im Detail erklärt.

* Processwire Modul: '''FieldtypeSelectFile''' installieren (funktioniert auch auf 3.x angegeben ist nur bis 2.7 in 09/2017). InputfieldSelectFile wird automatisch mitinstalliert.
* Feld iso_elem_videos mit Typ File anlegen (Das Beispiel nutzt das RepeaterMatrix Pro Modul. Aber es geht natürlich auch in anderen Feldern. Siehe unten Felderübersicht)
* Bei Details: Valid File Extensions: mp4 ogv mpeg mov webm
* In der Repeater Matrix 'iso_elem_matrix' neuen Inhaltstyp anlegen (Name: video_box, Label: Video Box)
* Als Felder iso_elem_size, iso_elem_image, iso_elem_videos auswählen.
* Templates erweitern bzw. anlegen (siehe unten)

=== Templates ===
==== layout_blocks.inc ====
<syntaxhighlight lang="php">
<?php namespace ProcessWire;
/* Shows layout blocks
* uses repeater Matrix field
*/

function renderLayoutBlocks($page){
$out = '';
foreach($page->iso_elem_matrix as $item) {
switch ($item->type) { // type refers to name field
case 'portfolio_box':
$out .= $item->render(); // looks for templates/fields/iso_elem_matrix/portfolio_box.php
break;
//...
case 'video_box':
$out .= $item->render();
break;
//..
default:
$out .= '<div class="message">Keine Renderdefinition gefunden für den Typ: '.$item->type.'</div>';
break;
}
}
return $out;
}
</syntaxhighlight>
==== video_box.php ====
Wird durch das render Statement in layout_block.inc automatisch ausgeführt.

site/templates/fields/iso_elem_matrix/video_box.php

Gekürztes Beispiel
<syntaxhighlight lang="php">
<?php namespace ProcessWire;
$pathToVideos = $config->urls->templates.'img/video/';
$out = '';
$templateName = $page->getForPage()->template->name;
if($templateName == "isotope-child") $isotopeFilterClass = $page->getForpage()->name;// class if template is isotope-child
else $isotopeFilterClass = "home";// for all other templates we want to show content imediately (home class inits first isotope element)
$myImage = "";
$myPoster = "";
$myUrl = "";
$has_link = 0;
$sizeClass = "";
// Element size
switch ($page->iso_elem_size) {
case '1': // small 1-1
$sizeClass = "size-s";
$aspectClass = "a-1-1";
$imgW = 400; //image width
$imgH = 400;
$icoW = 200; //icon width
break;
case '2': // medium 2-1
$sizeClass = "size-m";
//...
default: // big 2-2
$sizeClass = "size-l";
$aspectClass = "a-1-1";
$imgW = 800;
$imgH = 800;
$icoW = 200;
break;
}
// Image
if($page->iso_elem_image){
$imgOptions = array(
'quality' => 80,
'upscaling' => false
);
$myImage = $page->iso_elem_image->size($imgW,$imgH,$imgOptions);
$myPoster = ' poster="'.$myImage->url.'"';
}
// Video

$videoMarkup = '';
if ($page->iso_elem_videos->count()) {
foreach($page->iso_elem_videos as $file){
$videoMarkup .= '<source src="'.$file->url.'" type="video/'.$file->ext.'">';
}
}

// Video Container Markup
$videoMarkup = '
<div class="element-with-video-bg jquery-background-video-wrapper stretch" >
<video data-bgvideo="true" class="my-background-video jquery-background-video" loop autoplay muted'.$myPoster.'>
'.$videoMarkup.'
</video>
</div>
';

ob_start();
?>


<div class="element video-box <?=$sizeClass?> <?=$isotopeFilterClass?>">
<div class="aspect-wrapper transition <?=$aspectClass?>">
<div class="element-wrapper">
<div class="portfolio-item stretch" style="overflow:hidden">
<?=$videoMarkup?>
</div>
</div>
</div>
</div>

<?php
$out = ob_get_contents();
ob_end_clean();

return $out;

</syntaxhighlight>

==== Felder ====
iso_elem_videos -> Type Select File (Ein oder mehrere Videos)
iso_elem_image -> Type Image (Fallback)
iso_elem_size -> Type Integer (Select Field)
iso_elem_matrix -> RepeaterMatrix

Processwire - Working with Video

2021-05-05T07:26:28Z

109.192.169.230: /* = layout_blocks.inc */

== HTML5 Video mit Fallback ==

=== Beispiel: Umfangreiche Konfiguration in Isotope Matrix ===
Basiert auf Isotope Elements in 3B. Die Isotope Matrix wird hier nicht im Detail erklärt.

* Processwire Modul: '''FieldtypeSelectFile''' installieren (funktioniert auch auf 3.x angegeben ist nur bis 2.7 in 09/2017). InputfieldSelectFile wird automatisch mitinstalliert.
* Feld iso_elem_videos mit Typ File anlegen (Das Beispiel nutzt das RepeaterMatrix Pro Modul. Aber es geht natürlich auch in anderen Feldern. Siehe unten Felderübersicht)
* Bei Details: Valid File Extensions: mp4 ogv mpeg mov webm
* In der Repeater Matrix 'iso_elem_matrix' neuen Inhaltstyp anlegen (Name: video_box, Label: Video Box)
* Als Felder iso_elem_size, iso_elem_image, iso_elem_videos auswählen.
* Templates erweitern bzw. anlegen (siehe unten)

=== Templates ===
==== layout_blocks.inc ====
<syntaxhighlight lang="php">
<?php namespace ProcessWire;
/* Shows layout blocks
* uses repeater Matrix field
*/

function renderLayoutBlocks($page){
$out = '';
foreach($page->iso_elem_matrix as $item) {
switch ($item->type) { // type refers to name field
case 'portfolio_box':
$out .= $item->render(); // looks for templates/fields/iso_elem_matrix/portfolio_box.php
break;
//...
case 'video_box':
$out .= $item->render();
break;
//..
default:
$out .= '<div class="message">Keine Renderdefinition gefunden für den Typ: '.$item->type.'</div>';
break;
}
}
return $out;
}
</syntaxhighlight>
==== video_box.php ====
Wird durch das render Statement in layout_block.inc automatisch ausgeführt.

site/templates/fields/iso_elem_matrix/video_box.php

Gekürztes Beispiel
<syntaxhighlight lang="php">
<?php namespace ProcessWire;
$pathToVideos = $config->urls->templates.'img/video/';
$out = '';
$templateName = $page->getForPage()->template->name;
if($templateName == "isotope-child") $isotopeFilterClass = $page->getForpage()->name;// class if template is isotope-child
else $isotopeFilterClass = "home";// for all other templates we want to show content imediately (home class inits first isotope element)
$myImage = "";
$myPoster = "";
$myUrl = "";
$has_link = 0;
$sizeClass = "";
// Element size
switch ($page->iso_elem_size) {
case '1': // small 1-1
$sizeClass = "size-s";
$aspectClass = "a-1-1";
$imgW = 400; //image width
$imgH = 400;
$icoW = 200; //icon width
break;
case '2': // medium 2-1
$sizeClass = "size-m";
//...
default: // big 2-2
$sizeClass = "size-l";
$aspectClass = "a-1-1";
$imgW = 800;
$imgH = 800;
$icoW = 200;
break;
}
// Image
if($page->iso_elem_image){
$imgOptions = array(
'quality' => 80,
'upscaling' => false
);
$myImage = $page->iso_elem_image->size($imgW,$imgH,$imgOptions);
$myPoster = ' poster="'.$myImage->url.'"';
}
// Video

$videoMarkup = '';
if ($page->iso_elem_videos->count()) {
foreach($page->iso_elem_videos as $file){
$videoMarkup .= '<source src="'.$file->url.'" type="video/'.$file->ext.'">';
}
}

// Video Container Markup
$videoMarkup = '
<div class="element-with-video-bg jquery-background-video-wrapper stretch" >
<video data-bgvideo="true" class="my-background-video jquery-background-video" loop autoplay muted'.$myPoster.'>
'.$videoMarkup.'
</video>
</div>
';

ob_start();
?>


<div class="element video-box <?=$sizeClass?> <?=$isotopeFilterClass?>">
<div class="aspect-wrapper transition <?=$aspectClass?>">
<div class="element-wrapper">
<div class="portfolio-item stretch" style="overflow:hidden">
<?=$videoMarkup?>
</div>
</div>
</div>
</div>

<?php
$out = ob_get_contents();
ob_end_clean();

return $out;

</syntaxhighlight>

==== Felder ====
iso_elem_videos -> Type Select File (Ein oder mehrere Videos)
iso_elem_image -> Type Image (Fallback)
iso_elem_size -> Type Integer (Select Field)
iso_elem_matrix -> RepeaterMatrix

Htaccess

2021-04-30T04:27:50Z

109.192.169.230: /* Weiterleitungen (Redirects) */

== Anwendung von .htaccess - Dateien ==
=== Weiterführende Links: ===
https://jweiland.net/know-how/internet/htaccess-konfigurieren.html#c2756

http://httpd.apache.org/docs/1.3/howto/htaccess.html

von: http://www.uni-duesseldorf.de/Service/Webmaster/htaccess.php3 Juli 2006

Referenz: Apache Manual: http://www.uni-duesseldorf.de/apache-manual/

[[Apache Mod Rewrite Syntax]]

=== Wozu braucht man das ?===
An wen ein HTTP-Server Dokumente herausgibt, welche spezielle Verarbeitung er u.U. bei einer spezifischen Anforderung (einem request) durchführt - all das wird zunächst durch eine von der Server-Software abhängigen Konfiguration bestimmt, die ein Administrator - ein Webmaster - eingerichtet hat.

Oft ist es aber wünschenswert, daß einzelne Verantwortliche für eine Dokumentenhierarchie auf dem Web-Server selbst ohne Intervention des Webmasters Setzungen vornehmen können, daß z.B. auf einzelne Dokumente oder alle in einem bestimmten Verzeichnis nur ein Zugriff aus bestimmten Domains oder mit verifiziertem Usernamen möglich ist.

Beim Apache-HTTP-Server wie seinem Vorgänger, dem NCSA-httpd, gibt es diese Möglichkeiten durch die Einrichtung von .htaccess-Dateien in dem jeweiligen Verzeichnis. In der folgenden Darstellung wird als Referenz jeweils ein Verweis auf den entsprechenden Abschnitt in der lokale Kopie der Apache-Dokumentation für die Version 1.2 gegeben.

'''Achtung:''' In der Server-Konfiguration kann ein anderer Name als .htaccess vereinbart sein (AccesFileName-Direkt ive).

'''Zweiter Hinweis:''' Die Datei muß für den HTTP-Server lesbar sein, z.B. dadurch erreicht, daß sie öffentlich lesbar ist:

chmod 644 .htaccess

=== Zugriffsbeschränkung auf eine Domain ===
==== für alle Dateien in einem Verzeichnis ====
'''.htaccess'''

order deny,allow
deny from all
allow from .uni-duesseldorf.de 134.99

Alle Dateien in dem Verzeichnis werden nur an Clients ausgeliefert, die eine IP-Adresse beginnend mit 134.99 oder einen Hostnamen endend mit uni-duesseldorf.de besitzen; anderenfalls erfolgt eine Fehlermeldung des Servers (403 Forbidden).

Natürlich genügt in vielen Fällen eine der Alternativen. Beachten Sie dabei die Unterschiede:

* Die Angabe des Domain-Namens allein schließt - bewußt oder nicht - den Zugriff von PC's aus, die nicht im Domain Name System (DNS) registriert sind.
* Die Angabe des IP-Subnetzes allein kann andere ausschließen, die organisatorisch zur gleichen Domain gehören, technisch aber in einem anderen Subnetz hängen.

Wie lässt sich diese Zugriffsbeschränkung testen? Normalerweise benötigt man dazu einen Internet-Zugang über einen anderen Provider (T-Online, AOL, Compuserve etc.). Oder man benutzt einen Browser auf dem Server selbst z.B. in folgender Weise:

lynx http://localhost/Service/Webmaster/htaccess.phtml

Der Zugriff erfolgt dann über das Loopback-Interface mit der IP-Adresse 127.0.0.1.

Referenz: order, deny, allow.

==== für einzelne Dateien ====
'''.htaccess'''

<Files huh*.html>
order deny,allow
deny from all
allow from .uni-duesseldorf.de 134.99
</Files>

Die Zugriffsbeschränkung wie oben gilt jetzt nur für die Dateien, deren Namen auf das hinter Files angegebene Muster passen. Es kann ein einzelner Name angegeben werden oder ein Muster mit den Wildcard-Zeichen ? für ein beliebiges einzelnes Zeichen oder * für eine beliebige Folge von Zeichen.

Schließlich sind auch feinere Muster über reguläre Ausdrücke möglich. Die Syntax der Files-Direktive dafür ist:

<Files ~ "regexp">

Referenz: <Files>, order, deny, allow.

=== Zugriffsbeschränkung über Passwort ===
==== für ein Verzeichnis ====
'''.htaccess'''

AuthType Basic
AuthName MeyersLeute
AuthUserFile /home/meyer/passwd
require valid-user

Dokumente in einem Verzeichnis mit dieser .htaccess-Datei (oder einem Unterverzeichnis) können erst nach Eingabe eines gültigen Benutzernamen und Passwortes gelesen werden. Der Wert hinter AuthName wird vom Browser in der Dialog-Box für die Passwortabfrage angezeigt und dient gleichzeitig dazu, andere Dokumente mit dem gleichen Schutz zu erkennen und einmal eingelesene Werte für Username und Password ohne erneute Abfrage unmittelbar zu verwenden.

Hinter AuthUserFile steht der Pfad der Passwortdatei, die die Benutzernamen und (verschlüsselten) Passwörter enthält. Sie sieht etwa so aus:

/home/meyer/passwd

meyer:xm.kPd4VJc3Fo
mueller:eJFQCL8GftDXI

Auch die Passwortdatei muß für den HTTP-Server lesbar sein. Gerade deshalb sollte sie niemals in demselben Bereich liegen wie die vom Server bedienten Dokumente, da sonst zumindest die gültigen Benutzernamen lesbar wären. (Aus diesem Grund müssen Sie aber u.U. daran denken, auch das entsprechende Verzeichnis - wie /home/meyer im Beispiel - für den HTTP-Server zumindest suchbar zu setzen, also etwa:

chmod 711 /home/meyer

Angelegt und gepflegt werden kann die Passwortdatei mit dem Programm htpasswd:

htpasswd -c /home/meyer/passwd meyer
htpasswd /home/meyer/passwd mueller

Referenz: AuthType, AuthName, AuthUserFile, require.

==== für einzelne Dateien ====
'''.htaccess'''

AuthType Basic
AuthName MeyersLeute
AuthUserFile /home/meyer/passwd
<Files Huh*.html>
require user meyer mueller
</Files>

Die Kombination von 2. und 3. - Passwortschutz für einzelne Dateien in dem aktuellen Verzeichnis. Beim require wird hier noch eine andere Alternative gezeigt: die Aufzählung einzelner Benutzernamen aus der Passwortdatei. Wenn neue Benutzer in der Passwortdatei ergänzt werden, haben diese noch keinen Zugriff auf die so geschützten Seiten.

Wenn die gleiche Liste von Benutzern an mehreren Stellen verwendet werden soll, ist die Definition der Liste über eine Gruppendatei empfehlenswert. Für diese dritte Alternative bzgl. der require-Direktive sind fogende Änderungen notwendig:

1. In der .htaccess-Datei wird eine Gruppendatei angegeben:
AuthGrouprFile /home/meyer/groups
Für den Ort der Ablage dieser Datei gelten dieselben Erwägungen wie für die Passwortdatei oben.
2. In der require-Direktive wird jetzt auf eine Gruppendefinition in der Gruppendatei Bezug genommen:
require group meyers
3. Die Gruppendatei ist eine einfache Textdatei mit je einer Gruppendefinition pro Zeile in folgender Form:

/home/meyer/groups
meyers: meyer mueller

Referenz: AuthType, AuthName, AuthUserFile, AuthGroupFile, <Files>, require.

===Spezielle Optionen===
==== automatischer Index (Directory Listing)====
ausführliche Infos hier: [[htaccess - Directory Listing]]

'''.htaccess'''
Options +Indexes

Mittels der Options-Direktive können - so von der globalen Server-Konfiguration her erlaubt - Voreinstellungen für Verarbeitungsoptionen für das aktuelle Verzeichnis und Unterverzeichnisse überschrieben werden.

Die gezeigte Variante weist den Server an, bei der Referenz auf das aktuelle Verzeichnis oder ein Unterverzeichnis ein Directory-Listing als Index-Datei automatisch zu generieren. Er macht dies allerdings nur, wenn nicht schon eine Index-Datei (mit vordefiniertem Namen wie index.html) vorhanden ist. Ggf. kann man die hier bekannten Namen mit der Direktive

DirectoryIndex Welcome.html

einschränken.

Referenz: Options, DirectoryIndex.

==== Automatischer Index mit User Auth ====
(Quelle Weiland s.o.)
Directory Listing

Soll über einer geschützen Unterseite (z.B. fileadmin/downloads) des Internetauftritts ein Directory Listing realisiert werden, dann sollte die .htaccess wie folgt eingestellt werden:

AuthType Basic
AuthName "system - "
Options +Indexes
IndexOptions +FancyIndexing
AuthUserFile /*ihr_serverpfad/projektpfad/filadmin/downloads/.htpasswd
AuthGroupFile /dev/null
require valid-user

* ihr_serverpfad finden Sie in Ihrem Kundenmenu unter Technische Infos oder durch Eingabe des Befehls $PWD in der Shell.

Den User mit verschlüseltem Passwort in dem Fall in der .htpasswd vorhanden sein.

Die Unterseite mit dem Directory Listing muss von der TYPO3 index.php ausgeschlossen werden und erreichen Sie über die .htaccess in dem Projektverzeichnis mit folgenden Angaben nach der RewriteEngine On:

RewriteRule ^fileadmin/downloads/$ - [L]
RewriteRule ^fileadmin/downloads/.*$ - [L]

==== Startdatei festlegen ====
Mit dem vorigen Beispiel kann man auch festlegen welche Dateien beim Aufruf eines Verzeichnisses (oder der Webadresse) an den Browser geliefert werden sollen. Manchmal hat man den Fall das die Startdatei eines CMS index.php heißt und bei Wartungsarbeiten die Datei index.html aufgerufen werden soll.

DirectoryIndex index.html index.php start.html

weist den Apache an falls vorhanden die Datei index.html aufzurufen, wenn nicht die index.php und so weiter.

Bei Wartungsarbeiten kann man nun einfach eine index.html aufspielen die bei Aufruf der Domain angezeigt wird.

==== PHP - Werte setzen ====
Wenn der Server das erlaubt kann man es folgendermaßen machen:
===== PHP Memory Limit =====
php_value memory_limit 256M
===== PHP Execution Time =====
php_value max_execution_time 240

==== Error Reporting ====
===== Produktiv Betrieb =====
(Fehler unterdrückt aber protokolliert)

php_value error_reporting 2047
php_value display_errors 0
php_value log_errors 1
php_value error_log /eigener/pfad/fehler.log

===== Entwicklung =====
hier sollte display_errors auf 1 stehen

siehe auch [[PHP - Error Reporting / Fehlerbehandlung]]

siehe auch [[TYPO3 - Error Reporting / Fehlerbehandlung]]

==== Skripte sperren ====
z.B. bei Überlastung durch ein Skript (hier im Beispiel meineDomain.de/ajax/

<pre>
RewriteEngine On
RewriteCond %{REQUEST_URI} (.*)ajax(.*) [NC]
RewriteRule ^(.*) - [F]
</pre>

== Browser Caching ==
Beispiel:
<pre>
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/html "access plus 500 seconds"
ExpiresByType image/gif "access plus 14 days"
ExpiresByType image/ico "access plus 14 days"
ExpiresByType image/jpeg "access plus 14 days"
ExpiresByType image/jpg "access plus 14 days"
ExpiresByType image/png "access plus 14 days"
ExpiresByType text/css "access plus 14 days"
ExpiresByType text/javascript "access plus 14 days"
ExpiresByType application/x-javascript "access plus 14 days"
ExpiresByType application/javascript "access plus 14 days"
</IfModule>
</pre>
== Zugriff auf Ordner ==
=== Sperren ===
<pre>
# This file restricts access to the fileadmin/user_upload/_import_export_ directory. It is
# meant to protect temporary files which could contain sensible
# information. Please do not touch.

# Apache < 2.3
<IfModule !mod_authz_core.c>
Order allow,deny
Deny from all
Satisfy All
</IfModule>

# Apache ≥ 2.3
<IfModule mod_authz_core.c>
Require all denied
</IfModule>
</pre>

== Weiterleitung mit .htaccess ==
=== Beispiele mit Fokus auf TYPO3 ===
Quelle Weiland (s.o.)
====Weiterleitungen (Redirects)====
===== Common Cases ===
Einzelne Unterseiten weiterleiten

Aufrufe einer Unterseite (z.B. a.html) auf eine andere Unterseite (z.B. b.html) innerhalb der selben Domain weiterleiten.
Redirect 301 /a.html /b.html

Ganzen Ordner / Verzeichnis weiterleiten

Aufrufe eines Ordners (z.B. /a) auf einen anderen Ordner innerhalb der selben Domain (z.B. /b) weiterleiten. Die Weiterleitung wirkt sich auch auf alle Dateien innerhalb des Ordners /a aus, so wird z.B. der Aufruf von /a/test.html auf /b/test.html weitergeleitet.
Redirect 301 /a /b

Domain Weiterleitung: Ganze Domain umleiten

Aufrufe einer Unterseite (URL) von Domain A auf die selbe Unterseite (URL) unter Domain B weiterleiten.
z.B. domain-a.de/test.html auf domain-b.de/test.html weiterleiten wobei dies nicht nur für test.html, sondern auch für alle weiteren Unterseiten gilt.
Redirect 301 / http://www.domain-b.de/

Alternative Lösung mittels RewriteCond / RewriteRule:
RewriteEngine on
RewriteCond %{HTTP_HOST} domain-a.de$ [NC]
RewriteRule ^(.*) http://www.domain-b.de/$1 [R=301,L]

URLs ohne www. auf URLs mit www. weiterleiten

Standard Domain definieren und Aufrufe einer URL ohne die Subdomain www. auf die entsprechende URL mit www. weiterleiten um z.B. doppelte Inhalte für Suchmaschinen zu vermeiden.
RewriteEngine on
RewriteCond %{HTTP_HOST} ^domain.de$ [NC]
RewriteRule (.*) http://www.domain.de/$1 [R=301,L]

Alle Unterseiten auf Startseite weiterleiten

Alle Aufrufe auf Unterseiten einer Domain mit Ausnahme der index.html, der Style.css sowie aller Dateien im Ordner /img/ auf die Startseite weiterleiten.
RewriteEngine on
RewriteBase /
RewriteCond %{REQUEST_URI} !^/(index\.html|style\.css)?$ [NC]
RewriteCond %{REQUEST_URI} !^/img(/|$) [NC]
RewriteRule ^.*$ /index.html [L,R=301]
URL mit Parameter weiterleiten

Aufrufe von URLs welche einen bestimmten Parameter (z.B. test) enthalten, unabhängig von dessen Wert, auf ein Verzeichnis (z.B. /verzeichnis/) oder eine Unterseite weiterleiten.
RewriteEngine on
RewriteCond %{QUERY_STRING} ^test=(.*)$
RewriteRule ^(.*)$ /verzeichnis/? [R=301,L]

URLs mit einem bestimmten Parameterwert weiterleiten (In diesem Fall Wert "test" für den Parameter "s" auf das Verzeichnis "test" weiterleiten).
RewriteEngine on
RewriteCond %{QUERY_STRING} ^s=test$
RewriteRule ^(.*)$ /test/? [R=301,L]
Parameter aus URL entfernen

Aufrufe von URLs welche einen bestimmten Parameter (z.B. www.domain.de/verzeichnis/?test=...) enthalten, unabhängig von dessen Wert, auf die selbe URL ohne Parameter am Ende (z.B. www.domain.de/verzeichnis/) weiterleiten bzw. den den Parameter aus der URL entfernen. Falls die Regel nur für einen bestimmten Parameter Wert gelten soll, kann der Code analog zum vorherigen Beispiel modifiziert werden.
RewriteEngine on
RewriteCond %{QUERY_STRING} test=(.*)$
RewriteRule ^(.*)$ /$1? [R=301,L]

===== Allgemeines =====

Die Weiterleitung von Domains und Anfragen zu einzelnen Webseiten ist eine der Hauptanwendungen der .htaccess Datei. Das notwendige Apache Modul mod_rewrite ist in unseren Hosting Tarifen vorhanden.

Die Weiterleitung muss jedoch in der .htaccess Datei zunächst mit folgendem Eintrag aktiviert werden (in den weiteren Beispielen haben wir diese Zeile weggelassen):

RewriteEngine On
301 oder 302 Weiterleitung?

Der Weiterleitung (Redirect) sollte man noch einen Statuscode mitgeben: 301 oder 302. Worin liegt der Unterschied?

301: die Weiterleitung ist dauerhaft, z.B. weil die Navigationsstruktur einer Webseite umgestellt wurde

302: die Weiterleitung erfolgt nur vorübergehend, anschließend gilt wieder die bisherige Adresse

Am Ende der RewriteRule Zeile wird der Code für die Weiterleitung (Redirect) in eckigen Klammern angegeben. Mit dem zusätzlichen Parameter L (Letzter, Last) kann man festlegen, dass die weiteren Anweisungen in der .htaccess Datei ignoriert werden sollen. Hierzu ein Beispiel:

RewriteRule ^neues\.html$ /aktuelles.html [R=301,L]
Damit wird die Seite domain.tld/neues.html dauerhaft auf domain.tlld/aktuelles.htmlweitergeleitet.

Die Schreibweise der Rewrite Regeln basiert dabei auf "Regulären Ausdrücken" (Regular Expressions, regex).

Mit den Zeichen ^ und $ wird Anfang und Ende der umzuleitenden Seite gekennzeichnet. Der Punkt . steht in regulären Ausdrücken für ein beliebiges Zeichen, wenn wir wirklich einen Punkt meinen, dann wird dies mit einem Backslash \ gekennzeichnet (\ bedeutet also: exakt das nächste Zeichen).

====Besonderheit: Anker auf einer Seite====

Auf einer Webseite können "Anker" als Sprungmarke gesetzt sein. Beim Aufruf wird im Browser nicht auf den Anfang der Seite sondern direkt zum Ankerpunkt gesprungen. Der Anker wird durch ein Hash-Zeichen # in der URL gefolgt vom Namen der Sprungmarke gekennzeichnet. Beispiel für eine Adresse mit Anker:

domain.tld/aktuelles.html#artikel25
Soll per .htaccess Weiterleitung direkt auf eine Sprungmarke verwiesen werden, muss der zusätzliche Parameter NE (No Encoding) in eckigen Klammern angegeben werden:

RewriteRule ^neues\.html$ /aktuelles.html#artikel25 [R=301,L,NE]
Domain auf verschlüsselte Verbindung umleiten

Sollen alle Seiten einer Domain ausschließlich über eine SSL-Verbindung aufgerufen werden, so kann dies über einen Eintrag in der .htaccess Datei im Startverzeichnis der Domain eingerichtet werden:

RewriteCond %{SERVER_PORT} !^443$
RewriteRule (.*) https://%{HTTP_HOST}/$1 [L]
In der ersten Zeile wird die Funktion zum Umschreiben von URLs im Apache Webserver aktiviert. In der zweiten Zeile wird die Bedingung definiert "Wenn der Aufruf nicht auf Port 443 erfolgt" (Port 443 wird für SSL-Verschlüsselung verwendet, Port 80 für unverschlüsselte Aufrufe). Zeile 3 ist die Regel für das Umschreiben der URL. Wenn die Bedingung aus Zeile 2 zutrifft, werden die Aufrufe einer beliebigen Seite auf die gleiche Domain (${HTTP_HOST}) jedoch über das https:// Protokoll umgeleitet. Mit /$1 wird die ursprüngliche URL (z.B. impressum.html) an den Domainnamen angefügt. Mit dem Parameter [L] wird angegeben, dass das Umschreiben der URLs hier enden soll, weitere Zeilen in der .htaccess Datei werden also ignoriert.

====Domain name-of-domain.net nach name-der-domain.de umleiten====

Oftmals werden für ein Projekt mehrere Domains registriert, um verschiedene Schreibweisen abzudecken. Nach außen wird eine Hauptdomain kommunziert (Beispiel: name-der-domain.de als Hautpdomain, dazu name-of-domain.net als Zusatzdomains).

Mit folgendem Eintrag in der .htaccess Datei werden alle Aufrufe für name-of-domain.net nach name-der-domain.de weitergeleitet:

RewriteCond %{HTTP_HOST} ^(www\.)?name-of-domain\.net$ [NC]
RewriteRule ^(.*)$ http://www.name-der-domain.de/$1 [R=301,L]
Die Weiterleitung nach name-der-domain.de erfolgt dabei mit dem Statuscode 301 (permanent), so dass auch in Suchmaschinen auf Dauer nur diese erscheint. Dadurch werden Probleme mit "doppeltem Inhalt" (Duplicate Content) vermieden. Alle bei der ursprünglichen Domain übermittelten Parameter werden an die Zieldomain weitergegeben.

====Einer Domain immer www. voranstellen====

Mit folgendem Eintrag in der .htaccess Datei werden alle Aufrufe für eine Domain ohne www auf die Variante mit www weitergeleitet:

RewriteCond %{HTTP_HOST} ^name-der-domain\.de$ [NC]
RewriteRule ^(.*)$ http://www.name-der-domain.de/$1 [R=301,L]
Die Weiterleitung nach www.name-der-domain.de erfolgt dabei mit dem Statuscode 301 (permanent), so dass auch in Suchmaschinen auf Dauer nur diese erscheint.

====Domain auf eine Seite leiten====

Bestimmte Domains oder Subdomains sollen entweder mit oder ohne www auf eine bestimmte Unterseite weitergeleitet werden.

Dazu fügen Sie folgende Zeilen in Ihre .htaccess ein:

#Ohne realurl:
RewriteCond %{HTTP_HOST} ^(www\.)?name-der-domain\.de
RewriteRule ^$ /index.php?id=85

#oder realurl/simulatestatic mit html Suffix:
RewriteCond %{HTTP_HOST} ^(www\.)?name-der-domain\.de
RewriteRule ^$ /unterseite.html

#oder realurl ohne html Suffix:

RewriteCond %{HTTP_HOST} ^(www\.)?name-der-domain\.de
RewriteRule ^$ /unterseite/

====Weiterleitung auf eine andere Domain zu einer Unterseite====

RewriteCond %{HTTP_HOST} ^(www\.)?name-of-domain\.net [NC]
RewriteRule ^(.*)$ http://www.name-der-domain.de/unterseite.hmtl [R=301,L]
Redirect mit ? in der URL

http://www.domainname.de/index.php?id=7
soll nach

http://www.domainname.de/impressum.html
umgeleitet werden. Das Problem ist das ? in der alten URL und muss per QUERY_STRING in der Condition abgefragt werden.
Lösung:

RewriteCond %{QUERY_STRING} ^id=7$
RewriteRule ^.*$ http://www.domainname.de/impressum.html? [L,R=301]
Wichtig ist auch der Browser-Cache. Der sollte unbedingt geleert werden, denn wenn ein Aufruf noch im Cache drin ist kann dadurch u.U. immer auf die falsche Seite leiten.

So verhindert man, dass alte durch einen Umzug oder Neuprogrammierung nicht mehr vorhandene URLs in den Suchmaschinen zu einem schlechteren Ranking
=== Weitere Beispiele (älter) ===

Hinweis: eine Alternative hierfür ist eine PHP Weiterleitung ([[PHP - Tipps und Tricks]])
Quelle Dr.Web 28.12.2006

Sie können sowohl Zugriffe auf bestimmte Dateien als auch auf Verzeichnisse bequem weiterleiten. Das klappt innerhalb der eigenen Domain, aber auch mit externen Verweisen.

Die Datei .htaccess kann mit jedem Text-Editor bearbeitet werden. Eine Umleitung könnte so aussehen:

Redirect /beispielverzeichnis http://www.drweb.de

Ruft jemand die URL http://www.drweb.de/beispielverzeichnis auf landet er ohne weiteren Zwischenstopp direkt auf der Startseite.

Mit Einzeldateien klappt es auch:

Redirect /beispielseite.shtml http://www.drweb.de

oder

Redirect /beispielseite.shtml neueseite.shtml

Wer mag, kann die gesamte Domain auf eine andere umleiten

Redirect / http://www.drweb.de/

Nützlich während Bauarbeiten, bei Reparaturen oder wenn Dateien durch andere ersetzt wurden. Da die Umleitung serverseitig geschieht, spielt der Browser des Besuchers keine Rolle.

Weitere nützliche Beispiele:

Den Domainnamen ohne www auf den mit www umleiten. Es wird der Code 301 mitgegeben.
<pre>
RewriteEngine on
RewriteCond %{HTTP_HOST} !^www\. [NC]
RewriteRule ^(.*)$ http://www.%{HTTP_HOST}/$1 [L,R=301]
</pre>
=== Weiterleitung auf sichere Verbindung (https) ===
== Umleitung auf https ==
Sichere Seiten sind seid 2019 Standard und quasi Pflicht. Mit diesem Code kann man von http auf https weiterleiten und gibt einen 301 (Moved Permanently) Header mit.
<pre>
<IfModule mod_rewrite.c>
# Enable URL rewriting
RewriteEngine On
# Redirect to https
RewriteCond %{SERVER_PORT} !^443$
RewriteRule (.*) https://%{HTTP_HOST}/$1 [R=301,L]
</IfModule>
</pre>

=== Moved Permanently 301 Redirect ===
Quelle:http://www.fladi.de/2008/04/28/howto-webseiten-redirect-mit-301/ (25.7.2008)

Was ist ein 301 redirect?

301 redirect ist die wohl beste Möglichkeit das aktuelle Suchmaschinenranking beim Umzug einer Seite oder des gesamten Webauftritts zu behalten. Der Code “301″ steht für “moved permanently” (dauerhaft verschoben). Ein solches Redirect wird in der .htaccess Datei eintragen. Es trägt die Form (alles in einer Zeile):

redirect 301 pfad/alte/seite/datei.html http://www.domain.de/pfad/neue/seite/datei.html

Beachte, kein “http://www” in das erste Statement zu schreiben. Es muss der komplette Pfad vom Root deines Webservers angegeben werden. Schauen wir uns die Zeile nun nochmal genauer an:

* “redirect 301″ - die eigentliche Anweisung für den Webserver
* “/pfad/alte/seite/datei.html” - die Seite die umgeleitet werden soll
* “http://www.domain.de/pfad/neue/seite.datei.html” - die komplette neue URL

Wie reagiert nun ein Suchmaschinen-Spider auf eine solche Umleitung? Die .htaccess wird ja nicht vom Spider ausgelesen, sondern vom Webserver “ausgeführt”. Der Spider jedoch erkennt den Statuscode, den der Webserver liefert. Beim nächsten Update seiner Datenbank sollte die Suchmaschine nun die alte URL aus dem Index werfen und die neue aufnehmen. Häufig kommt es aber auch vor, dass alte und neue URL gemischt auftauchen. Auch leichte Änderungen im Pagerank können auftreten. Es dauert so ca. 6-8 Wochen bis sich die Änderungen an der Seite auch in den Suchergebnissen niederschlagen.

Weitere Möglichkeiten von 301 redirect:

1. Um ALLE Dateien Deiner Domain mithilfe einer .htaccess umzuleiten kannst Du (auf einem Unix/Linux-Webserver) i.d.R. folgendes verwenden:
redirect 301 ^(.*)$ http://www.domain.de
redirectMatch permanent ^(.*)$ http://www.domain.de

Um Deine alte Startseite (index.html) umzuleiten:
redirect 301 /index.html http://www.domain.de/index.html
redirect permanent /index.html http://www.domain.de/index.html

2. Wenn Du http://domain.de auf http://www.domain.de umleiten möchtest und mod_rewrite auf dem Webserver verfügbar ist, erreichst Du dies durch folgende .htaccess:

Options +FollowSymLinks
RewriteEngine on
RewriteCond %{HTTP_HOST} ^domain\.de
RewriteRule ^(.*)$ http://www.domain.de/$1 [R=permanent,L]

oder

Options +FollowSymLinks
RewriteEngine on
RewriteCond %{HTTP_HOST} ^domain\.de$ [NC]
RewriteRule ^(.*)$ http://www.domain.de/$1 [R=301,L]

3. Alle .html Dateien auf .php Dateien umzuleiten ist durch mod_rewrite auch kein großes Problem:

RewriteEngine on
RewriteBase /
RewriteRule (.*).html$ /$1.php

4. Um ein Verzeichnis und alles darunter umzuleiten:

redirectMatch 301 ^/verzeichnis-alt/(.*) http://www.domain.de/verzeichnis-neu/

=== Warum nicht per META-Tag redirect machen? ===

Die Umleitung per META-Tag erfolgt direkt in der aufgerufenen Seite. Dort wird im HEAD-Teil

<meta http-equiv=”refresh” content=”0; url=http://www.domain.de/”>
eingetragen. Hierbei bewirkt das “content=10″, dass der Browser nach 10 Sekunden die darauffolgende URL aufruft. Wenn man “content=0″ einträgt wird die Umleitung sofort ausgeführt. Ein paar alte Browser unterstützen diese Art der Umleitung nicht. Deshalb ist es besser noch zusätzlich den Link (neue Domain) mit anzugeben.

Technisch gesehen liefert die angefragte Seite, wie auch die Seite auf die umgeleitet wird, einen Statuscode “200 OK” zurück. Es sind also zwei unabhängige Seiten. Dementsprechend versucht die Suchmaschinen auch beide Seiten zu indizieren. Hier genau liegt aber das Problem. Denn der Spider des Suchmaschinenbetreibers erkennt die Umleitung und wertet Deine Seite deshalb u.U. ab, da es sich um eine beliebte SPAM-Methode handelt. So könnte man 1000 Domains mit solchen Seiten und jeder Menge Keywords einrichten. Echte Besucher (kein Spider) werden umgeleitet auf die eigentliche Seite. Indiziert wird aber nicht nur die eigentliche Seite sondern auch die 1000 Domains mit Keywords, die meist gar nichts mit dem eingentlichen Inhalt zu tun haben.

Beim 301 redirect wird hingegen nur die echte Zielseite in den Index aufgenommen und durch den Statuscode kann der Suchmaschinenbetreiber zusätzlich noch die veralteten Seite aus dem Index werfen. Dies ist also der beste Weg um alte Seiten auf neue umzuleiten und gleichzeitig wird auch der Page Rank mit übertragen.

===Weiterleitung über IP===
<pre>
Options +FollowSymlinks
RewriteEngine on

#IP Bedingung
RewriteCond %{REMOTE_HOST} ^85\.13\.128\.137

#Zielseite erlauben
RewriteCond %{REQUEST_URI} !/ip-remote\.php$

#Umleiten
#RewriteRule ^/* http://demo.webmynet.de/ip-remote.php [R,NE,NC]
RewriteRule /(.*)$ /ip-remote.php [R=302,L]
</pre>

== Erlaubte Anweisungen in .htaccess-Dateien ==

http://de.selfhtml.org/servercgi/server/htaccess.htm

Auszug (Datum des Zugriffs: 10.9.2007):
<pre>
Die Anweisung AllowOverride kann nicht innerhalb einer .htaccess notiert werden, sondern wird ausschließlich vom Server-Administrator in der zentralen Konfigurationsdatei vorgegeben. Um den AllowOverride-Wert in Erfahrung zu bringen, benötigen Sie Einsicht in die Serverkonfiguration. Kontaktieren Sie dazu gegebenenfalls Ihren Webhosting-Provider. Dieser kann den Wert auch ändern, falls Sie bestimmte bisher nicht erlaubte Anweisungen verwenden möchten. Im einzelnen gibt es dafür folgende mögliche Werte:

* Mit AllowOverride None wird der Webserver angewiesen, .htaccess-Dateien zu ignorieren. Das ist im Übrigen die Voreinstellung.
* Mit AllowOverride All wird festgelegt, dass in einer .htaccess-Datei (so gut wie) sämtliche zentrale Vorgaben überschrieben und damit abgeändert werden dürfen. Das kann bedeuten, dass Vorhaben, die eigentlich verboten sind (beispielsweise die Ausführung von CGI-Scripts), mit Hilfe einer .htaccess-Datei erlaubt werden. Als Server-Administrator werden Sie diese Anweisung also nur sehr vorsichtig einsetzen.
* Mit AllowOverride Options wird festgelegt, dass in einer .htaccess-Datei nach unten Anweisungen zur Steuerung spezieller Verzeichniseigenschaften zulässig sind.
* Mit AllowOverride Limit wird festgelegt, dass in einer .htaccess-Datei nach unten Zugriffe von bestimmten Hosts erlaubt oder untersagt werden können.
* Mit AllowOverride Indexes wird festgelegt, dass in einer .htaccess-Datei nach unten Anweisungen zur Steuerung von Verzeichnisindizes zulässig sind.
* Mit AllowOverride FileInfo wird festgelegt, dass in einer .htaccess-Datei Anweisungen zur Akzeptanz bestimmter Dokumenttypen zulässig sind - beispielsweie, um nach unten Individuelle Fehlermeldungen ausgeben zu können.
* Mit AllowOverride AuthConfig wird festgelegt, dass in einer .htaccess-Datei Autorisierungsanweisungen stehen dürfen - das betrifft beispielsweise Regelungen zum nach unten Passwortschutz.

Diese Werte können auch miteinander kombiniert werden. All ist der mächtigste Parameter, mit dem alles das zugelassen wird, was die anderen Parameter steuern.
</pre>

Nach dem Ändern muß natürlich der Server neu gestartet werden (bei Debian: apache restart)

==IP Adressen sperren==

Manchmal ist es notwendig, bestimmte IP Adressen vom Aufruf der Webseite auszusperren, z.B. bei einem Angriffsversuch auf die Webseite. Über folgenden Eintrag in der .htaccess Datei (z.B. vor dem Eintrag 'RewriteEngine On') im Startverzeichnis der Seite lassen sich unerwünschte Besucher abweisen:

order allow,deny
deny from 192.168.2.17
deny from 10.10.20.63
allow from all
Bei mehreren IP Adressen wird jede in eine eigene Zeile eingetragen. Die Einstellung gilt auch für alle Unterverzeichnisse. Wenn jemand mit einer gesperrten Adresse versucht, die Seite aufzurufen, erhält er einen 403 Fehlercode.

==HTML5 Videos / bestimmte Dateitypen zulassen ==

Falls es in einzelnen Browsern zu Problemen beim Abspielen von per HTML5 eingebundenen Videos kommt, helfen eventuell folgende Zeilen in der .htaccess Datei im Projektverzeichnis:

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg
AddType video/webm .webm
AddType audio/webm .weba
AddType video/mp4 .mp4
AddType video/x-m4v .m4v

== htaccess für Typo3 ==

http://www.typo3lexikon.de/server/htaccess.html (11/2014)

<pre>
.htaccess für TYPO3
Ich möchte auf dieser Seite nicht erklären wie .htaccess-Dateien erstellt werden. Nein. Davon gibt es schon zu genüge Dokumentationen im Web:

Allgemeines zu htaccess

URLs manipulieren

Reguläre Ausdrücke

htaccess Beispiele

Auf dieser Seite geht es mehr um das Zusammenspiel von TYPO3 und htaccess-Dateien gerade in Bezug unter der Verwendung von der Extension RealUrl. In den nächsten Zeilen werde ich Euch meine htaccess-Datei in Detail näher erklären:

RewriteEngine
Mit RewriteEngine kannst Du das Modifizieren von URLs de- bzw. aktivieren. Erst wenn diese Option aktiviert ist, kannst du z.B. alle Anfragen, die an Deinen Server gesendet werden auf eine völlig andere Webseite umleiten.
RewriteEngine On
Bestimmte Verzeichnisse nicht umschreiben
Wenn Ihr RealUrl installiert habt, dann erhaltet Ihr je nach Konfiguration URLs wie

/meine-seite/kontakt/impressum.html
Dabei sind die vermeintlichen Ordner gar keine echten Ordner auf dem Server, sondern Informationen, die an die index.php weitergeleitet werden, um dann die gewünschte Seite aufrufen zu können. Was aber, wenn wir wirklich mal einen Ordner auf dem Server öffnen wollen? Dann darf dieser Name des Ordner NICHT an die index.php weitergeleitet werden. Um das zu erreichen verwende ich das Script aus der RealUrl-Dokumentation:
RewriteRule ^typo3$ - [L]
RewriteRule ^typo3/.*$ - [L]
RewriteRule ^uploads/.*$ - [L]
RewriteRule ^fileadmin/.*$ - [L]
RewriteRule ^typo3conf/.*$ - [L]
Hinweis
[L] bedeutet, dass nach dieser Umschreibung der URL keine weiteren Umschreibungen mehr ausgeführt werden.

Der Bindestrich (-) bedeutet, dass keine Umschreibung der URL stattfinden soll.

Doppelter Content
Wer von Euch seine Seite schon mal mit www.seitwert.de bewertet hat, wird bestimmt schon mal über den Eintrag bzgl. doppelten Content/Inhalt gestoßen sein. So kommt es je nach Konfiguration vor, dass eine Seite wie sfroemken.de das Gleiche anzeigt wie www.sfroemken.de. Dieses "Problem" kann sich auch negativ auf die Position in den Suchergebnissen auswirken. Aber auch das lässt sich mit Hilfe der htaccess-Datei bereinigen:

RewriteCond %{HTTP_HOST} ^sfroemken\.de$ [NC]
RewriteRule ^(.*)$ www.sfroemken.de/$1 [R=301,L]
Erklärung
%{HTTP_HOST} kann in diesem Fall sfroemken.de oder aber auch www.sfroemken.de sein. Mit RewriteCond könnt Ihr nun überprüfen, ob der HTTP_HOST mit dem Wert sfroemken.de übereinstimmt. Dank [NC] soll die Groß- und Kleinschreibung bei diesem Vergleich nicht berücksichtigt werden.

Wenn RewriteCond nun ein true zurück gibt, dann wird die Modifikation in RewriteRule ausgeführt. Alles was durch die Klammern markiert wurde, kann im zweiten Parameter mit $1 wiederverwendet werden. [R=301]: Das R steht für redirect und die 301 ist ein bestimmter Servercode, mit dem bestimmt wird, dass es sich bei dieser Weiterleitung um eine parmanente Weiterleitung handelt.

So wird aus

sfroemken.de/kontakt/index.php
ein

www.sfroemken.de/kontakt/index.php
Subdomains
Bei Subdomains müssen wir das genau andersrum machen. Dort gibt es kein www. Da www.seitwert.de aber trotzdem überprüft, ob die Domain auch mit einem www davor erreichbar ist, müssen wir das folgendermaßen abfangen:

RewriteCond %{HTTP_HOST} ^www\.typo3\.sfroemken\.de$ [NC]
RewriteRule ^(.*)$ typo3.sfroemken.de/$1 [R=301,L]
Ordner
Leider haben sich viele Surfer daran gewöhnt Ordner auf einem Server ohne abschließendem Slash (/) anzugeben. Damit dieser Slash automatisch hinten dran gemacht wird, können wir folgendes Script verwenden:
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule (.*[^/])$ %{HTTP_HOST}/$1/ [L,R]
Erklärung
Die ersten beiden RewriteCond fragen ab, ob es sich bei der aufzurufenden URL nicht um eine Datei handelt und nicht um einen symbolischen Link. Wenn beides zutrifft, kann getrost ein zusätzlicher Slash hinten angefügt werden.

Achtung
Wenn Ihr RealUrl so konfiguriert habt, dass Ihr URLs wie

/kontakt/impressum.html
erhaltet, dann muss das Script noch etwas angepasst werden, dann ansonsten erhaltet Ihr eine URL wie diese hier:

/kontakt/impressum.html/
Hier das angepasste Script:

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-l
RewriteCond %{REQUEST_FILENAME} (^.htm$|^.html$)
RewriteRule (.*[^/])$ %{HTTP_HOST}/$1/ [L,R]
Heißt: Wenn die URL mit .htm oder .html endet, dann soll der zusätzliche Slash NICHT hinten dran gemacht werden.

Index-Dateien in Ordnern
Je nach Projekt und Ordner kann es vorkommen, dass Du trotz RealUrl die Index-Dateien in bestimmten Ordnern ausführen möchtest:

/fileadmin/projekt/download/index.php
Allerdings wird derzeit noch diese URL an die TYPO3-eigene index.php im Rootverzeichnis weitergeleitet. Um auch das zu unterbinden sind folgende 6 Zeilen vorgesehen:
RewriteCond %{REQUEST_FILENAME}/index.html -f
RewriteRule / %{REQUEST_URI}/index.html [L]
RewriteCond %{REQUEST_FILENAME}/index.htm -f
RewriteRule / %{REQUEST_URI}/index.htm [L]
RewriteCond %{REQUEST_FILENAME}/index.php -f
RewriteRule / %{REQUEST_URI}/index.php [L]
URL-Modifikation für RealUrl
Dieses Script ist das wichtigste Script überhaupt für RealUrl. Hier wird nun endlich gesagt, dass alle Teile aus der URL an die TYPO3-eigene index.php weitergeleitet werden sollen zur Weiterverarbeitung durch RealUrl.
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule .* index.php
Hinweis
Je nach Art Eurer TYPO3-Installation könnte es sein, dass Eure index.php ein symbolischer Link ist. In diesem Fall müsst Ihr die letzt Zeile folgendermaßen ändern:

RewriteRule .* /index.php
Scripmerger
Dieses Script benötigt Ihr nur, wenn Ihr die Extension scriptmerger verwenden wollt:
# Expires Header + Removal of ETag
<FilesMatch "\.(ico|png|gif|js|css|jpg|jpeg|swf)">
<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 7 days"
ExpiresDefault "access plus 2 months"
</IfModule>

# ETag
FileETag MTime Size
<IfModule mod_headers.c>
FileETag none
Header unset Last-Modified
</IfModule>
</FilesMatch>

# Compressed Content
<FilesMatch "\.gz\.(js|css)">
<IfModule mod_headers.c>
Header set Content-Encoding gzip
</IfModule>
</FilesMatch>
</pre>
=== Shell Restriction auf all-inkl Server ===
Ab TYPO3 6 moniert das Install Tool das exec nicht augeführt werden darf. Es funktioniert wenn man die cgi Version von PHP nimmt. Das kann man per htaccess oder im KAS Backend einstellen.

Beispiele.
<pre>
AddHandler php55-cgi .php (sofern vom Server unterstützt)
AddHandler php54-cgi .php (sofern vom Server unterstützt)
AddHandler php53-cgi .php
AddHandler php52-cgi .php
AddHandler php5-cgi .php (Version entsprechend der PHP Apache-Modul Version)
</pre>

=== PHP Version auf Weiland Servern ===
Über die PHP-Versionsauswahl im Kundenmenü können Sie die PHP-Version für eine Domain ändern. Folgende Anleitung erklärt, wie Sie die PHP Version für einzelne Verzeichnisse (und deren Unterverzeichnisse) ändern können.

Das Verzeichnis kann dabei nur eine höhere PHP-Version erhalten, als die PHP-Version, die für die Domain im Kundenmenü eingestellt ist.

Das bedeutet: Ist für die Domain PHP 5.6 im Kundenmenü eingestellt, können Sie für einzelne Verzeichnisse PHP 7.0 und höher einstellen, nicht jedoch niedrigere Versionen wie PHP 5.5. *

Außerdem darf für die Domain kein Fast-CGI aktiviert sein.

Um die PHP-Version für ein Verzeichnis zu ändern, legen Sie eine .htaccess-Datei mit folgender Anweisung in dem Verzeichnis ab. Die Anweisung ist abhängig von der PHP-Version, die Sie aktivieren möchten:
AddType application/x-httpd-php72 .php

SVG

2021-04-28T20:09:00Z

109.192.169.230: Die Seite wurde neu angelegt: „== Reuse SVG Code == <syntaxhighlight lang="html5">  <svg style="width:220px;" viewBox="0 0 593 90" xmlns="http://www.w3.org/2000/svg" fi…“

== Reuse SVG Code ==
<syntaxhighlight lang="html5">


<svg style="width:220px;" viewBox="0 0 593 90" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2">
<use xlink:href="#svg-wortmarke"></use>
</svg>


<svg viewBox="0 0 593 90" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2">
<g id="svg-wortmarke">
<path d="M53.61.853h12.325v37.588h18.058V.853h12.33V88.47h-12.33V50.89H65.935v37.58H53.61V.853zM276.29.853h38.196v12.325h-25.633v23.68h20.379v12.324h-20.38v26.959h27.217V88.47H276.29V.853zM552.43.853h38.204v12.325h-25.629v23.68h20.37v12.324h-20.37v26.959h27.213V88.47H552.43V.853zM42.71 21.352H30.39c.25-6.838-3.413-9.034-8.784-9.034-5.613 0-9.28 1.342-9.28 7.692v49.3c0 6.342 3.667 7.683 9.28 7.683 5.37 0 9.033-2.195 8.783-9.029H42.71c0 14.404-8.292 21.354-21.354 21.354C8.914 89.318.002 83.34.002 69.31v-49.3C.002 5.98 8.914-.007 21.356-.007c13.062 0 21.354 6.954 21.354 21.359M121.36.853h18.796l15.37 87.617H142.96l-3.42-20.138h-17.572c-1.096 6.225-2.316 14.038-3.416 20.138h-12.567L121.36.853zm15.988 55.042c-2.563-15.504-4.146-24.17-6.588-40.03-2.2 13.422-4.4 26.36-6.592 40.03h13.18zM163.6 88.467V.85h23.063c13.058 0 21.354 6.596 21.354 20.138v14.637c0 8.663-3.784 14.65-9.638 17.82 4.884 11.11 10.371 24.038 15.254 35.022h-12.937l-14.033-32.709h-10.738v32.709H163.6zm23.063-45.034c5.37 0 9.154-1.95 9.029-7.808V20.988c.125-5.734-3.78-7.809-9.271-7.809h-10.496v30.254h10.738zM262.72 21.352h-12.325c.25-6.838-3.413-9.034-8.783-9.034-5.613 0-9.275 1.342-9.275 7.692v49.3c0 6.342 3.662 7.683 9.275 7.683 5.37 0 9.033-1.95 8.783-7.929V49.177h-10.004V36.852h22.329v32.212c0 13.667-8.296 20.254-21.35 20.254-12.446 0-21.358-5.979-21.358-20.008v-49.3c0-14.03 8.912-20.017 21.358-20.017 13.054 0 21.35 6.954 21.35 21.359M325.25 88.467V.85h23.058c13.063 0 21.359 6.596 21.359 20.138v14.637c0 8.663-3.784 14.65-9.642 17.82 4.883 11.11 10.37 24.038 15.254 35.022h-12.937l-14.034-32.709h-10.733v32.709H325.25zm23.058-45.034c5.367 0 9.155-1.95 9.03-7.808V20.988c.125-5.734-3.775-7.809-9.271-7.809h-10.492v30.254h10.733zM427.51 21.352h-12.325c.254-6.838-3.413-9.034-8.78-9.034-5.616 0-9.278 1.342-9.278 7.692v49.3c0 6.342 3.662 7.683 9.279 7.683 5.366 0 9.033-2.195 8.779-9.029h12.325c0 14.404-8.296 21.354-21.35 21.354-12.446 0-21.358-5.979-21.358-20.008v-49.3c0-14.03 8.912-20.017 21.358-20.017 13.054 0 21.35 6.954 21.35 21.359M450.72.85v68.582c0 6.338 3.658 7.563 9.275 7.563 5.246 0 9.03-1.825 8.783-7.93V.85h12.325v68.217c0 13.787-8.295 20.254-21.354 20.254-12.45 0-21.358-5.858-21.358-19.888V.85h12.329zM495.78.853h22.82c12.81 0 19.888 7.204 19.888 19.892v8.542c0 5.129-.12 11.47-7.808 13.179 7.446 1.346 9.517 7.57 9.517 14.275v11.841c0 12.692-7.196 19.888-19.888 19.888H495.78V.853zm30.383 19.284c-.116-4.513-2.195-6.959-7.562-6.959h-10.492v23.68h10.492c5.367 0 7.446-2.442 7.562-6.959v-9.762zm1.588 35.87c-.121-4.508-2.071-6.825-7.442-6.825h-12.2v26.959h12.2c5.371 0 7.321-2.438 7.442-6.954v-13.18z" fill="#fff" fill-rule="nonzero"/>
</g>
</svg>
</syntaxhighlight>

GSAP - ScrollTrigger

2021-04-23T07:49:19Z

109.192.169.230: /* MatchMedia aufsetzen */

GSAP - ScrollTrigger

2021-04-23T07:41:30Z

109.192.169.230: /* MatchMedia aufsetzen */

GSAP - ScrollTrigger

2021-04-23T07:38:42Z

109.192.169.230: /* MatchMedia aufsetzen */

GSAP - ScrollTrigger

2021-04-23T07:38:13Z

109.192.169.230: /* MatchMedia */

GSAP - ScrollTrigger

2021-04-23T07:09:44Z

109.192.169.230: