Vorlage:Button/Doku

Diese Vorlage erlaubt es auf einfache Weise (ohne HTML- oder CSS-Kenntnisse) Buttons zu erstellen, welche die Verlinkung beliebiger Inhalte auf Wikivoyage, sowie auf externen Seiten erlauben. Damit können z. B. Projekt- und Benutzerseiten visuell ansprechend präsentiert werden.

Zur grafischen Gestaltung stehen viele vordefinierte Icons zur Verfügung, alternativ können beliebige lokal gespeicherte oder auf Commons verfügbare Grafiken eingebunden werden. Weiterhin stellt die Vorlage drei verschiedene Farbschemata in mehreren Variationen zur Verfügung. Der Linktext kann beliebig mit Wikitext und/oder HTML/CSS gestaltet werden.

Parameter

Name	Erklärung
Link bzw. 1	Gibt das Linkziel an. Erlaubt ist entweder ein Wikilink (ohne die doppelten Klammern [[…]]), z. B. einfach "Link = Europa" um zum Artikel Europa zu gelangen, oder ein externer Link (ohne die einfachen Klammern […]), z. B. einfach "Link = http://test.de" um auf http://test.de zu verlinken.
Text bzw. 2	Der Text, den der Button enthalten soll. Der Linktext kann beliebig mit Wikitext und/oder HTML/CSS gestaltet werden. Es ist auch eine leere Angabe Text= möglich, wenn der Button nur ein Icon oder Bild enthalten soll.
Titel (optional)	Der Text, welcher als Tooltip erscheinen soll. Standardmäßig wird der Seitentitel (Wikilink) bzw. die URL (externer Link) angezeigt.
Icon (optional)	Der Name eines vordefinierten Icons, welches auf dem Button erscheinen soll (z. B. "Icon = refresh" für  ) → Liste der Icons
Bild (optional)	Ein lokal oder auf Commons vorhandenes Bild, welches auf dem Button angezeigt werden soll. Die Einbindung erfolgt mit Wikisyntax (z. B. Bild = [[Datei:checkmark.svg|16px]] für ).
Farbe (optional)	Gibt ein Farbschema für den Button vor (z. B. "Farbe = blau"). Mögliche Werte sind rot/blau/grün, rot2/blau2/grün2, sowie rot3/blau3/grün3 (siehe Beispiele).
Padding (optional)	Gibt den Abstand zwischen Inhalt (Text, Bild, Icon) und dem Rand des Buttons an. "Padding = 5px" ergibt fünf Pixel breite Ränder auf allen Seiten. Werden zwei Werte angegeben ("Padding = 5px 5px") gelten diese für oben/unten bzw. links/rechts, Werden vier Werte angegeben ("Padding = 5px 5px 5px 5px") gelten diese für oben, rechts, unten bzw. links

Beispiele

Weitere Beispiele finden sich auf der Testseite.

Grundlegende Verwendung

• Wikilinks, Interwikilinks und externe Links:
  {{Button|Link=Europa|Text=Link zum Artikel Europa}}
  Link zum Artikel Europa
  {{Button|Link=:en:Europe|Text=Link zum Artikel Europe im englischen Wikivoyage}}
{{Button|Link=http://test.de|Text=Link auf http://test.de}}
  Link auf http://test.de
• Standardparameter "Link" und "Text" können benannt und unbenannt sein:
  {{Button|Europa|Link zum Artikel Europa}} oder
  {{Button|1=Europa|2=Link zum Artikel Europa}} oder
  {{Button|Link=Europa|Text=Link zum Artikel Europa}}
  Link zu Europa
• Tooltips:
  {{Button|Link=Europa|Text=Europa|Titel=Link zum Artikel Europa im deutschen Wikivoyage}}
  Europa (bitte über den Button hovern)

Fortgeschrittene Verwendung (URL-Parameter)

Um URL-Parameter angeben zu können müssen auch Wikilinks in "externe" URLs umgewandelt werden. Diese können von Hand "zusammengebaut" werden, einfacher und zuverlässiger geht es aber mit der Parserfunktion {{fullurl}}.

Beispielsweise liefert

• {{fullurl:Hauptseite}} die volle URL der Hauptseite: //de.wikivoyage.org/wiki/Hauptseite
• {{fullurl:{{FULLPAGENAME}}}} die volle URL der aktuellen Seite: //de.wikivoyage.org/wiki/Vorlage:Button/Doku

Über den ersten Parameter von {{fullurl}} können URL Parameter and die URL angehängt werden:

• {{fullurl:Hauptseite|action=purge}} liefert //de.wikivoyage.org/w/index.php?title=Hauptseite&action=purge
• {{fullurl:{{FULLPAGENAME}}|action=purge}} liefert //de.wikivoyage.org/w/index.php?title=Vorlage:Button/Doku&action=purge

Damit lässt sich nun einfach ein Button erstellen der den Server-Cache der aktuellen Seite löscht:
{{Button|Link={{fullurl:{{FULLPAGENAME}}|action=purge}}|Text=Cache leeren|Icon=refresh}}
 Cache leeren ← dieser Button leert den Cache der aktuellen Seite

Weitere hilfreiche URL-Parameter die auf diese Weise mit Hilfe eines Buttons einfach zur Verfügung gestellt werden können sind auf Hilfe:URL-Parameter erklärt. Es ist zu beachten, dass URL-Parameter die Leerzeichen oder andere geschützte Zeichen wie & oder ? enthalten mit der Parserfunktion {{urlencode}} encodiert werden müssen!

Icons und Bilder

• Icons
  

  {{Button|…|Icon=mail-closed}}
   Button

  {{Button|…|Text=|Icon=mail-closed}}
   

  
  
• Bilder
  

  {{Button|…|Bild=[[File:checkmark.svg|18px]]}}
  Button

  {{Button|…|Text=|Bild=[[File:checkmark.svg|18px]]}}
  

  
  

Gestaltung

• Padding:
  

  {{Button|…|Padding=0px}}
{{Button|…|Padding=10px}}
{{Button|…|Padding=20px}}
  Button Button Button

  {{Button|…|Padding=20px 0px}}
{{Button|…|Padding=0px 20px}}
  Button Button

  {{Button|…|Padding=10px 0 0 0}}
{{Button|…|Padding=0 0 10px 0}}
{{Button|…|Padding=0 10px 0 0}}
{{Button|…|Padding=0 0 0 10px}}
  Button Button Button Button

  
  
• Farbschemata:
  {{Button|…|Farbe=(Farbname)}}
  rot grün blau
  rot2 grün2 blau2
  rot3 grün3 blau3

Icons

Mögliche Werte für den Parameter Icon:

•   carat-1-n
•   carat-1-ne
•   carat-1-e
•   carat-1-se
•   carat-1-s
•   carat-1-sw
•   carat-1-w
•   carat-1-nw
•   carat-2-n-s
•   carat-2-e-w
•   triangle-1-n
•   triangle-1-ne
•   triangle-1-e
•   triangle-1-se
•   triangle-1-s
•   triangle-1-sw
•   triangle-1-w
•   triangle-1-nw
•   triangle-2-n-s
•   triangle-2-e-w
•   arrow-1-n
•   arrow-1-ne
•   arrow-1-e
•   arrow-1-se
•   arrow-1-s
•   arrow-1-sw
•   arrow-1-w
•   arrow-1-nw
•   arrow-2-n-s
•   arrow-2-ne-sw
•   arrow-2-e-w
•   arrow-2-se-nw
•   arrowstop-1-n
•   arrowstop-1-e
•   arrowstop-1-s
•   arrowstop-1-w
•   arrowthick-1-n
•   arrowthick-1-ne
•   arrowthick-1-e
•   arrowthick-1-se
•   arrowthick-1-s
•   arrowthick-1-sw
•   arrowthick-1-w
•   arrowthick-1-nw
•   arrowthick-2-n-s
•   arrowthick-2-ne-sw
•   arrowthick-2-e-w
•   arrowthick-2-se-nw
•   arrowthickstop-1-n
•   arrowthickstop-1-e
•   arrowthickstop-1-s
•   arrowthickstop-1-w
•   arrowreturnthick-1-w
•   arrowreturnthick-1-n
•   arrowreturnthick-1-e
•   arrowreturnthick-1-s
•   arrowreturn-1-w
•   arrowreturn-1-n
•   arrowreturn-1-e
•   arrowreturn-1-s
•   arrowrefresh-1-w
•   arrowrefresh-1-n
•   arrowrefresh-1-e
•   arrowrefresh-1-s
•   arrow-4
•   arrow-4-diag
•   extlink
•   newwin
•   refresh
•   shuffle
•   transfer-e-w
•   transferthick-e-w
•   folder-collapsed
•   folder-open
•   document
•   document-b
•   note
•   mail-closed
•   mail-open
•   suitcase
•   comment
•   person
•   print
•   trash
•   locked
•   unlocked
•   bookmark
•   tag
•   home
•   flag
•   calculator
•   cart
•   pencil
•   clock
•   disk
•   calendar
•   zoomin
•   zoomout
•   search
•   wrench
•   gear
•   heart
•   star
•   link
•   cancel
•   plus
•   plusthick
•   minus
•   minusthick
•   close
•   closethick
•   key
•   lightbulb
•   scissors
•   clipboard
•   copy
•   contact
•   image
•   video
•   script
•   alert
•   info
•   notice
•   help
•   check
•   bullet
•   radio-off
•   radio-on
•   pin-w
•   pin-s
•   play
•   pause
•   seek-next
•   seek-prev
•   seek-end
•   seek-first
•   stop
•   eject
•   volume-off
•   volume-on
•   power
•   signal-diag
•   signal
•   battery-0
•   battery-1
•   battery-2
•   battery-3
•   circle-plus
•   circle-minus
•   circle-close
•   circle-triangle-e
•   circle-triangle-s
•   circle-triangle-w
•   circle-triangle-n
•   circle-arrow-e
•   circle-arrow-s
•   circle-arrow-w
•   circle-arrow-n
•   circle-zoomin
•   circle-zoomout
•   circle-check
•   circlesmall-plus
•   circlesmall-minus
•   circlesmall-close
•   squaresmall-plus
•   squaresmall-minus
•   squaresmall-close
•   grip-dotted-vertical
•   grip-dotted-horizontal
•   grip-solid-vertical
•   grip-solid-horizontal
•   gripsmall-diagonal-se
•   grip-diagonal-se