Website-Suche

So installieren, konfigurieren und passen Sie die Wegleiste unter Linux an

Waybar ist eine hochgradig anpassbare Wayland-Leiste für Sway und andere Wlroots-basierte Compositoren, wie z. B. Hyprland oder River. Die vielen verfügbaren Funktionen von Waybar sind in Modulen organisiert, die einfach konfiguriert und gestaltet werden können.

In diesem Tutorial lernen wir, wie man Waybar auf einigen der am häufigsten verwendeten Linux-Distributionen installiert und konfiguriert.

In diesem Tutorial lernen Sie:

  • So installieren Sie Waybar
  • So konfigurieren und gestalten Sie die Wegleiste und einige der nützlichsten Module

Installation

Waybar ist eine kostenlose Open-Source-Software; Der Code ist auf GitHub verfügbar, aber alle großen Linux-Distributionen enthalten eine vorkompilierte Version der Leiste, die in ihren offiziellen Repositories installiert werden kann. Um Waybar auf dem neuesten Debian stable (Bookworm) und anderen Debian-basierten Distributionen zu installieren, können wir Folgendes ausführen:

sudo apt install waybar

Auf Fedora können wir stattdessen das Paket "waybar" mit dnf installieren:

sudo dnf install waybar

Die Wegleiste ist auch im Archlinux "Extra"-Repository verfügbar. Wir können es mit pacman installieren:

sudo pacman -Sy waybar

Konfiguration der Wegleiste

Waybar verwendet für seine Konfiguration das Dateiformat JSONC (JSON mit Kommentaren) und sucht an den folgenden Speicherorten in der Reihenfolge der Priorität nach einer Konfigurationsdatei:

  • $XDG_CONFIG_HOME/Wegleiste/Konfiguration
  • ~/.config/waybar/config
  • ~/.waybar/config
  • /etc/xdg/waybar/config

Bevor wir anfangen, über Module und deren Konfiguration zu sprechen, möchten wir die "allgemeine" Waybar-Konfiguration schreiben. Hier ist ein Beispiel:

{
  "layer": "bottom",
  "position": "top",
  "height": 24,
  "spacing": 5,
  "modules-left": ["sway/workspaces","sway/mode"],
  "modules-center": ["sway/window"],
  "modules-right": ["idle_inhibitor","cpu","memory","battery","pulseaudio","clock","tray"]
}

Mit Hilfe des Layer-Schlüssels legen wir fest, ob die Leiste über oder hinter anderen Fenstern angezeigt werden soll. In Umgebungen mit Kachelfenster-Managern wird dies relevant, wenn Dienstprogramme wie "dmenu" verwendet werden, um sicherzustellen, dass das Menüfenster sichtbar ist, wenn es beim Aufruf an der gleichen Position der Leiste erscheint. Gültige Werte sind "top" und "bottom", was der Standardwert ist. Mit der Positionstaste deklarieren wir, auf welcher Seite des Bildschirms der Balken platziert werden soll. Gültige Optionen sind: "oben", "unten", "links", "rechts".

Sowohl der Höhen- als auch der Abstandsschlüssel nehmen einen ganzzahligen Wert an, der die Höhe des Balkens bzw. den Abstand zwischen den Modulen angibt. Schließlich können wir mit den Tasten modules_left, modules_center und modules_right die Module festlegen, die wir in den entsprechenden Segmenten der Leiste verwenden möchten. Jeder dieser Schlüssel akzeptiert ein Array von Modulnamen als Wert.

Waybar-Module

Waybar wird mit einer großen Auswahl an Modulen geliefert. Obwohl es unmöglich ist, alle in diesem Tutorial zu sehen, werfen wir zumindest einen Blick auf diejenigen, die wir in die obige Konfiguration aufgenommen haben.

Das Modul "Sway/Workspaces"

Das Modul sway/workspaces zeigt die Arbeitsbereiche an, die derzeit im Sway-Fenstermanager verwendet werden. Standardmäßig werden nur die Nummern der Arbeitsbereiche angezeigt. Dies kann jedoch mit dem Formatschlüssel und den verfügbaren Platzhaltern geändert werden. Unter den anderen:

  • {value}: wird durch den Namen des Arbeitsbereichs ersetzt, wie er in der Sway-Konfiguration in seiner Gesamtheit definiert ist
  • {name}: wird durch den Wert rechts in der Spalte ersetzt, wenn der Name des Arbeitsbereichs im Format "<number>:<name>" angegeben wird. Wenn der Arbeitsbereichsname z. B. "1:TERMINAL" lautet, zeigt das Modul Folgendes an: "TERMINAL"
  • {output}: wird durch den Ausgang ersetzt, an dem sich der Arbeitsbereich befindet (z.B. HDMI-A-2)

Das Modul "Sway/Mode"

Das Sway/Mode-Modul wird verwendet, um den aktuellen Sway-WM-Modus anzuzeigen (z.B. Modus "resize"). Standardmäßig wird nur der Modusname angezeigt, der der folgenden Konfiguration entspricht:

"sway/mode": { 
  "format": "{}"
},

Das Modul "Sway/Window"

Das Sway/Window-Modul zeigt den Titel des aktuell fokussierten Fensters an. Die Standardkonfiguration stellt sicher, dass nur der Titel des Fensters angezeigt wird, indem der Platzhalter "{title}" als Wert des Formatschlüssels verwendet wird:

"sway/window": { 
  "format": "{title}"
}

Weitere verfügbare Platzhalter sind "{app_id}", das durch die ID der fokussierten App ersetzt wird (z.B.: org.kde.ghostwriter), und "{shell}", das durch die Shell des fokussierten Fensters ersetzt wird: "xwayland" für Fenster, die xwayland verwenden, oder "xdg-shell" für native Wayland-Anwendungen.

Das Modul "Leerlauf-Inhibitor"

Das Leerlauf-Inhibitor-Modul kann verwendet werden, um den sogenannten "Präsentationsmodus" zu aktivieren, bei dem Energiesparaktivitäten wie das Ausblenden und Sperren des Bildschirms unterbrochen werden. Ein Klick auf das in der Wegleiste angezeigte Modul schaltet den Status des Präsentationsmodus um. Hier ist ein Konfigurationsbeispiel:

"idle_inhibitor": { 
  "format": "{icon}", 
  "format-icons": { 
    "activated": "\uf06e", 
    "deactivated": "\uf070" 
  } 
}

Es gibt zwei Platzhalter, die als Formatwerte verwendet werden können: "{status}", das durch eine Zeichenkette ersetzt wird, die den Status des Leerlauf-Inhibitors darstellt ("actived" vs. "deactivated"), und "{icon}", das durch das entsprechende Symbol ersetzt wird, das im format-icons-Objekt definiert ist.

Font-awesome Fonts bieten eine Reihe von wirklich schönen Unicode-Symbolen, die in der Wegleiste verwendet werden können. Die Schriftarten werden oft im Repository der am häufigsten verwendeten Distributionen verpackt. Unter Debian und Derivaten heißt das Paket beispielsweise "fonts-font-awesome"; auf Fedora kommen die Schriftarten im Paket "fontawesome-fonts" und auf ArchLinux sind sie als "otf-font-awesome" verpackt.

Im Verlauf dieses Tutorials stellen wir Symbole mit ihrer Unicode-Escape-Sequenz dar, um sicherzustellen, dass Sie sie korrekt visualisieren können. In Ihrer Konfiguration können Sie die entsprechenden Zeichen jedoch einfach kopieren und einfügen.

Das Modul "cpu"

Das CPU-Modul ist nützlich, um die CPU-Auslastung im Auge zu behalten. Standardmäßig werden die gemeldeten Daten alle 10 Sekunden aktualisiert, und die Nutzung wird in Prozentform angezeigt. Dies wird über den Formatschlüssel mit dem Platzhalter "{usage}" definiert:

"cpu": { 
  "interval": 10, 
  "format": "CPU: {usage}%" 
},

Einige der anderen Platzhalter, die wir verwenden können, sind:

  • {load}: wird durch die aktuelle CPU-Last ersetzt
  • {avg_frequency}: ersetzt durch die aktuelle CPU-Durchschnittsfrequenz in GHz für alle Kerne
  • {min_frequency}: ersetzt durch die kleinste kleinste Kernfrequenz in GHz
  • {max_frequency}: ersetzt durch die aktuelle maximale Frequenz des Kerns mit der höchsten Frequenz in GHz

Das "memory"-Modul

Das Speichermodul zeigt die RAM- und Auslagerungsauslastung an. Standardmäßig wird nur der Status des ersteren im Prozentformat mit dem Platzhalter "{percentage}" angezeigt. Der Status wird alle 30 Sekunden aktualisiert:

"memory": { 
  "interval": 30, 
  "format": "{percentage}%" 
},

Durch die Verwendung einiger der anderen verfügbaren Placehodler können wir die Menge des Speichers und die Auslagerungsnutzung auf der insgesamt verfügbaren Fläche anzeigen. Hier ist ein Beispiel:

"memory": {
  "interval": 30,
  "format": "RAM: {used:0.1f}GiB/{total:0.1f}GiB ({percentage}%) SWAP: {swapUsed:0.1f}GiB/{swapTotal:0.1f}GiB ({swapPercentage}%)"
},

Der Platzhalter "{used}" wird in der Menge des verwendeten Arbeitsspeichers in GiB erweitert, während "{total}" durch den insgesamt verfügbaren Speicher ersetzt wird. Die Platzhalter "{swapUsed}" und "{swapTotal}" tun dasselbe für swap. In den Platzhaltern haben wir den Formatierungsstil festgelegt: "0.1f" formatiert die Ausgabe so, dass nur ein einziger Dezimalwert angezeigt wird, um die Lesbarkeit zu verbessern.

Das Modul "Batterie"

Das Batteriemodul zeigt die aktuell verfügbare Batterieladung und deren Status an. Hier ist ein Beispiel für die Konfiguration:

"battery": {
  "bat": "BAT0",
  "states": {
    "good": 95,
    "warning": 30,
    "critical": 5
  },
  "format": "BAT0: {capacity}%",
  "format-charging": "BAT0: {capacity}% (charging)",
  "format-plugged": "BAT0: {capacity}% (plugged)",
},

Die bat-Taste wird verwendet, um festzulegen, welchen Batteriemonitor das Modul unter den in /sys/proc/power_supply verfügbaren verwenden soll. Wenn diese Option leer gelassen wird, wird der Wert automatisch erkannt. Sie können es angeben, wenn Ihr Gerät über mehr als einen Akku verfügt. Der Schlüssel states nimmt ein JSON-Objekt als Wert an. Jedes Schlüssel-Wert-Paar darin stellt einen Status und die entsprechende prozentuale Gebührenschwelle dar.

Wir können die Tasten format-charging, format-plugged und format verwenden, um zu definieren, wie Daten formatiert werden, wenn der Akku geladen wird, wenn das Netzteil eingesteckt ist (wenn der Adapter eingesteckt ist, bedeutet das nicht, dass der Akku geladen wird: siehe Ladeschwellen) und in allen anderen Situationen.

Das "clock"-Modul

Wir können das Uhrmodul verwenden, um das aktuelle Datum und die Uhrzeit anzuzeigen. Standardmäßig ist nur die Zeit in der Ausgabe enthalten:

"clock": {
  "format": "{:%H:%M}"
},

Um auch das aktuelle Datum anzuzeigen, könnten wir die folgende Konfiguration verwenden:

"clock": {
  "format": "{:%Y/%m/%d %H:%M}",
},

Um einen kleinen Kalender als Tooltip anzuzeigen, können wir den Schlüssel tooltip-format verwenden, der den folgenden Wert hat:

"clock": {
  "format": "{:%Y/%m/%d %H:%M}",
  "tooltip-format": "<tt><small>{calendar}</tt>",
},

Der Stil des Kalenders kann mit Hilfe des Kalenderobjekts weiter angepasst werden. Um zum Beispiel den Monatsnamen gelb und den aktuellen Tag rot einzufärben, könnten wir schreiben:

"clock": {
  "format": "{:%Y/%m/%d %H:%M}",
  "tooltip-format": "<tt><small>{calendar}</tt>",
  "calendar": {
    "format": {
      "months": "<span color='#ffead3'><b>{}</b></span>",
      "today": "<span color='#ff6699'><b>{}</b></span>"
    }
  }
},

Sie können den Kalender so ziemlich nach Belieben konfigurieren. Einige Konfigurationsbeispiele werden auf der GitHub-Seite des Moduls angezeigt.

Das Modul "pulseaudio"

Das pulseaudio-Modul meldet Informationen über die aktuelle pulseaudio-Lautstärke. In der Standardkonfiguration wird nur der Volumenprozentsatz angezeigt:

"pulseaudio": {
  "format": "{volume}%"
}

Um die Dinge schöner aussehen zu lassen, könnten wir ein Symbol neben dem Prozentwert anzeigen. Wir können definieren, welche Symbole je nach Lautstärke (niedrig bis hoch) verwendet werden sollen, indem wir die Taste format-icons verwenden:

"pulseaudio": { 
  "format": "{volume}% {icon}", 
  "format-icons": { 
    "default": ["\uf026", "\uf027", "\uf028"] 
  }  
},

Indem Sie mit dem Mausrad über das Modul "pulseaudio" in der Waybar scrollen, ist es möglich, die Lautstärke zu erhöhen und zu verringern. Es wäre auch schön, eine schnelle Möglichkeit zu haben, den Ton ganz stummzuschalten. Wir können dies tun, aber einen "pactl"-Befehl angeben (pactl ist ein Dienstprogramm zur Steuerung des Puseaudio-Servers), wenn eines der Ereignisse "on-click", "on-click-right" oder "on-middle-click" registriert ist. Im folgenden Beispiel schalten wir den Ton beim linken Mausklick stumm und starten pavucontrol beim Rechtsklick:

"pulseaudio": {
  "format": "{volume}% {icon}",
  "format-muted": " {volume}%",
  "format-icons": {
    "default": ["\uf026", "\uf027", "\uf028"]
  },
  "on-click": "pactl set-sink-mute @DEFAULT_SINK@ toggle",
  "on-click-right": "pavucontrol"
},

Schließlich möchten wir vielleicht ein Format angeben, das verwendet werden soll, wenn der Ton stummgeschaltet ist. Wir können dies tun, indem wir die Taste für das stummgeschaltete Format verwenden:

"pulseaudio": {
  "format": "{icon} {volume}%",
  "format-icons": {
    "default": ["\uf026", "\uf027", "\uf028"]
  },
  "on-click": "pactl set-sink-mute @DEFAULT_SINK@ toggle",
  "on-click-right": "pavucontrol",
  "format-muted": "\uf00d {volume}%"
},

Das Modul "Tray"

Tray-Bars sind ein grundlegender Bestandteil des traditionellen Desktop-Erlebnisses. Einige Anwendungen sind so konzipiert, dass sie im geschlossenen Fach minimiert werden, und ohne eine solche ist es unmöglich, ihren Zustand zu erreichen. Waybar unterstützt Tray-Funktionen über das Modul "tray".

Einige der Schlüssel, die wir in der Konfiguration des Taskleistenmoduls verwenden können, sind: icons-size, das die Größe der Symbole in der Taskleiste festlegt, und spacing, das den Abstand zwischen den Symbolen definiert. Beide Schlüssel nehmen eine ganze Zahl als Wert an. Hier ist eine typische Tray-Konfiguration:

"tray": {
  "icon-size": 20,
  "spacing": 10
}

Alles zusammenfügen

So sieht unsere vollständige Konfiguration aus, wenn wir alle Elemente zusammenfügen:

{
  "layer": "bottom",
  "position": "top",
  "height": 24,
  "spacing": 5,
  "modules-left": ["sway/workspaces","sway/mode"],
  "modules-center": ["sway/window"],
  "modules-right": ["idle_inhibitor","cpu","memory","battery","pulseaudio","clock","tray"],
  "sway/mode": {
    "format": "{}"
  },
  "sway/window": {
    "format": "{title}"
  },
  "idle_inhibitor": {
    "format": "{icon}",
    "format-icons": {
      "activated": "\uf06e",
      "deactivated": "\uf070"
    }
  },
  "cpu": { 
    "interval": 10, 
    "format": "CPU: {usage}%" 
  },
  "memory": {
    "interval": 30,
    "format": "RAM: {used:0.1f}GiB/{total:0.1f}GiB ({percentage}%) SWAP: {swapUsed:0.1f}GiB/{swapTotal:0.1f}GiB ({swapPercentage}%)"
  },
  "battery": {
    "bat": "BAT0",
    "states": {
      "good": 95,
      "warning": 30,
      "critical": 5
    },
    "format": "BAT0: {capacity}%",
    "format-charging": "BAT0: {capacity}% (charging)",
    "format-plugged": "BAT0: {capacity}% (plugged)",
  },
  "clock": {
    "format": "{:%Y/%m/%d %H:%M}",
    "tooltip-format": "<tt><small>{calendar}</tt>",
    "calendar": {
      "format": {
        "months": "<span color='#ffead3'><b>{}</b></span>",
        "today": "<span color='#ff6699'><b>{}</b></span>"
      }
    }
  },
  "pulseaudio": {
    "format": "{icon} {volume}%",
    "format-icons": {
      "default": ["\uf026", "\uf027", "\uf028"]
    },
    "on-click": "pactl set-sink-mute @DEFAULT_SINK@ toggle",
    "on-click-right": "pavucontrol",
    "format-muted": "\uf00d {volume}%"
  },
  "tray": {
    "icon-size": 20,
    "spacing": 10
  },
}

Formatieren der Wegleiste

Wir können das Aussehen der Wegleiste anpassen, indem wir eine der folgenden CSS-Dateien verwenden:

  • ~/.config/waybar/style.css
  • ~/waybar/style.css
  • /etc/xdg/waybar/style.css

Wir können die verschiedenen Elemente der Leiste mit Hilfe von Selektoren referenzieren. Sehen wir uns einige Beispiele an. Angenommen, wir möchten den Hintergrund und die Textfarben der Wegleiste festlegen. Wir würden die Leiste nach ID referenzieren:

#waybar { 
  background-color: #333333; 
  color: #ffffff; 
}

In diesem anderen Beispiel definieren wir die Hintergrundfarbe des Moduls "idle_inhibitor", wenn der Präsentationsmodus aktiv ist (siehe die Klasse ".activated"):

#idle_inhibitor.activated { 
  background-color: #285577; 
}

Gehen Sie stattdessen folgendermaßen vor, um die Schriftfamilie und ihre Größe global festzulegen:

*{ 
  font-family: FontAwesome, Roboto, Helvetica, Arial, sans-serif; 
  font-size: 13px; 
}

Wirklich einfach und intuitiv. Alle gültigen CSS-Klassen für die Module werden auf der Modulseite aufgelistet. Nur als Beispiel, hier ist der Stil, den ich gerade anwende:

* {
    font-family: FontAwesome, Roboto, Helvetica, Arial, sans-serif;
    font-size: 13px;
}

#waybar {
    background-color: #333333;
    color: #ffffff;
}

button {
    box-shadow: inset 0 -3px transparent;
    border: none;
    border-radius: 0;
    padding: 0 5px;
}

#workspaces button {
    background-color: #5f676a;
    color: #ffffff;
}

#workspaces button:hover {
    background: rgba(0,0,0,0.2);
}

#workspaces button.focused {
    background-color: #285577;
}

#workspaces button.urgent {
    background-color: #900000;
}

#workspaces button.active {
    background-color: #285577;
}

#clock,
#battery,
#cpu,
#memory,
#pulseaudio,
#tray,
#mode,
#idle_inhibitor,
#window,
#workspaces {
    margin: 0 5px;
}


.modules-left > widget:first-child > #workspaces {
    margin-left: 0;
}


.modules-right > widget:last-child > #workspaces {
    margin-right: 0;
}

@keyframes blink {
    to {
        background-color: #ffffff;
        color: #000000;
    }
}

#battery.critical:not(.charging) {
    background-color: #f53c3c;
    color: #ffffff;
    animation-name: blink;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

label:focus {
    background-color: #000000;
}

#tray > .passive {
    -gtk-icon-effect: dim;
}

#tray > .needs-attention {
    -gtk-icon-effect: highlight;
    background-color: #eb4d4b;
}

#idle_inhibitor {
    font-size: 15px;
    background-color: #333333;
    padding: 5px;
}

#idle_inhibitor.activated {
    background-color: #285577;
}

Und so sieht die resultierende Wegleiste aus. Nichts allzu Ausgefallenes, ziemlich hässlich in der Tat, aber hoffentlich gibt es Ihnen eine allgemeine Vorstellung. Die Grenze bei der Anpassung ist so ziemlich Ihre Kreativität:

Schlüsse

In diesem Tutorial haben wir gesehen, wie man Waybar unter Linux installiert, konfiguriert und anpasst. Waybar ist eine wirklich leistungsstarke Wayland-Leiste für Wlroots-basierte Compositoren wie Sway. Wir haben gesehen, wie man eine einfache Konfigurationsdatei erstellt, wie man einige der vielen in Waybar integrierten Module verwendet und schließlich, wie man die Leiste mit einem CSS-Stylesheet gestaltet. Wenn Sie Waybar zum ersten Mal verwenden, können Sie die systemweite Konfigurationsdatei, die als /etc/xdg/waybar/config unter ~/.config/waybar installiert ist, kopieren und als Ausgangspunkt verwenden, um zu vermeiden, dass Sie sie von Grund auf neu konfigurieren müssen.

Verwandte Artikel: