在 Hyprland 中安装并配置 Waybar

本文翻译自 https://itsfoss.com/configure-waybar/

如果你经常活跃于各种桌面定制社区，那么你一定听说过 Waybar。

Waybar 是一个高度可定制的 Wayland 状态栏，适用于 Sway 和其他基于 Wlroots 的合成器。

Waybar（未应用 CSS）

Waybar（已应用 CSS）

在本文中，我将向你展示如何在 Hyprland 系统上安装和配置 Waybar。

需要注意的是，你并不一定要安装 Hyprland才能继续。可以忽略与 Hyprland 相关的部分，依然能够为你的系统安装一个不错的状态栏。

在 Linux 系统上安装 Waybar

如果你是 Ubuntu 用户，Waybar 在 Ubuntu 20.04 及更高版本的官方软件库中可用。但由于 Waybar 依赖 Wayland，建议在 22.04 或更高版本中使用。

安装命令如下：

sudo apt install waybar

此外，还可以使用一个更新的软件包 PPA：PPA链接。启用该 PPA，请运行以下命令：

sudo add-apt-repository ppa:nschloe/waybar
sudo apt update
sudo apt install waybar

对于其他系统，比如 Fedora、Arch Linux 等，可以使用本地的软件包管理器安装最新版本的 Waybar：

# Fedora 系统
sudo dnf install waybar

# Arch Linux 系统
sudo pacman -Syu waybar

安装完成后，可以设置状态栏在系统启动时自动启动。

在 Hyprland 中，可以在配置文件 .config/hypr/hyprland.conf 中添加以下内容：

exec-once waybar

配置 Waybar

安装完成后，让我们来看如何配置 Waybar。

📋 不要使用默认设置的 Nano 等文本编辑器编辑该文件，需使用支持 JSONC 的编辑器。

Waybar 使用 JSONC（支持注释的 JSON）来配置其丰富的模块。在编辑配置文件之前，建议使用支持 JSON 的文本编辑器。

我使用了 VS Code 来编辑配置文件。

Waybar 的配置文件位于 .config/waybar/config.jsonc。

Waybar 上显示的内容以模块的形式提供。这意味着你可以根据需求自由选择模块并调整其位置。

默认示例配置

以下是 Waybar 提供的维基页面上的一个简单示例配置，用于理解其结构：

{
    "layer": "top",
    "modules-left": ["sway/workspaces", "sway/mode"],
    "modules-center": ["sway/window"],
    "modules-right": ["battery", "clock"],
    "sway/window": {
        "max-length": 50
    },
    "battery": {
        "format": "{capacity}% {icon}",
        "format-icons": ["", "", "", "", ""]
    },
    "clock": {
        "format-alt": "{:%a, %d. %b  %H:%M}"
    }
}

在上述代码片段中，可以看到几个键值对的配置。以下是它们的说明：

• layer：决定状态栏位于窗口之上还是窗口位于状态栏之上，可设置为 top 或 bottom。
• modules-left：指定左侧显示的模块。
• modules-center：指定中间显示的模块。
• modules-right：指定右侧显示的模块。
• sway/window, battery, clock 等：定义各个模块的具体配置。

从中可以了解到，在位置设置（left/center/right）中，指定要显示模块的名称。

随后，为这些模块分别定义其外观选项。

例如，在“battery”（电池）模块中，指定了其格式为电量百分比和图标，图标在 format-icons 选项中进行了定义。

正如之前提到的，Waybar 中的每个元素都是一个可配置的模块。如果访问 Waybar 维基页面，可以在右侧栏中找到 Waybar 所有模块的完整列表。

如果想添加自定义模块（不是默认模块的一部分），可以使用“custom/module_name”的格式。在状态栏的元素位置和定义模块时都需使用相同的名称“custom/module_name”。

创建一个示例 Waybar 配置

前面已经看过了示例配置，现在从头开始编写一个 Waybar 配置，更好地理解它。

我的配置需求如下：

1. 一个菜单按钮用于打开 Wofi 启动器（左侧）。
2. 一个任务栏显示已打开的窗口（左侧）。
3. 一个 Hyprland 工作区切换器，包含 5 个工作区（中间）。
4. 一个时钟模块，点击后显示日期（中间）。
5. 一个 CPU 核心使用率监控（右侧）。
6. 我的系统运行时间监控（右侧）。
7. 一个网络模块显示下载和上传速度（右侧）。

现在开始配置。

通用 Waybar 设置

首先设置 Waybar 为顶部图层，这样当窗口与其重叠时，窗口会位于其下方。此外，Waybar 将放置在显示器顶部。

// 将 Waybar 设置为顶部图层。
"layer": "top",

// 将 Waybar 放置在屏幕顶部。也可以根据需要设置为 "bottom/left/right"。
"position": "top",

接下来，根据需求布置项目。

// 定义 Waybar 左侧显示的项目。
"modules-left": ["custom/appmenu", "wlr/taskbar"],

// 定义 Waybar 中间显示的项目。
"modules-center": ["hyprland/workspaces", "clock"],

// 定义 Waybar 右侧显示的项目。
"modules-right": ["cpu", "user", "network"],

可以看到，这里使用了一个自定义模块 custom/appmenu，其功能是点击后启动 Wofi。

完成通用设置后，开始定义各个模块。

模块定义

按照之前设定的顺序逐一定义模块。

应用菜单

首先是应用菜单：

"custom/appmenu": {
        	"format": "Menu {icon}",
        	"format-icon": "󰻀",
        	"rotate": 0,
        	"on-click": "~/.config/waybar/runwofi.sh"
    	},

Waybar 菜单按钮（应用 CSS）

此模块为用户自定义模块，支持多种选项。详细内容请参考 Waybar Wiki 中的模块文档。

在这个示例中，通过 format 键设置自定义文本 “Menu”。\{icon\} 表示图标，其内容在 format-icon 键中定义。
on-click 键定义了点击模块时执行的操作，这里指定了一个脚本 runwofi.sh 的路径。

以下是脚本内容：

#!/bin/bash
wofi --show drun

点击后会启动 Wofi 启动器。

任务栏

创建一个简单任务栏。Waybar 提供了内置模块 Taskbar，并支持多个选项：

"wlr/taskbar": {
        	"format": "{icon}",
        	"tooltip": true,
        	"tooltip-format": "{title}",
        	"on-click": "activate",
        	"on-click-middle": "close",
        	"active-first": true
   	 },

Waybar 任务栏（应用 CSS）

工作区切换器

定义工作区切换器：

"hyprland/workspaces": {
		"format": "{name} : {icon}",
		"format-icons": {
			"1": "",
			"2": "",
			"3": "",
			"4": "",
			"5": "",
			"active": "",
			"default": ""
    		},
        "persistent-workspaces": {
      		"Virtual-1": [1, 2, 3, 4, 5]
    		}
        },

CPU 模块

"cpu": {
     		"format": "{icon0} {icon1} {icon2} {icon3}",
     		"format-icons": ["▁", "▂", "▃", "▄", "▅", "▆", "▇", "█"]
	},

网络模块

"network": {
        	"tooltip": true,
        	"rotate": 0,
        	"format-ethernet": " ",
        	"tooltip-format": "Network: <big><b>{essid}</b></big>\nSignal strength: <b>{signaldBm}dBm ({signalStrength}%)</b>\nFrequency: <b>{frequency}MHz</b>\nInterface: <b>{ifname}</b>",
        	"format-linked": " {ifname} (No IP)",
        	"format-disconnected": "󰖪 ",
        	"tooltip-format-disconnected": "Disconnected",
        	"format-alt": "<span foreground='#99ffdd'> {bandwidthDownBytes}</span> <span foreground='#ffcc66'> {bandwidthUpBytes}</span>",
        	"interval": 2
    	}

---

自定义 Waybar 样式

Waybar 支持通过 CSS 文件进行样式配置，CSS 文件路径为 ~/.config/waybar/style.css。通过 CSS 可调整 Waybar 和模块的外观样式。

以下是一些重要的 CSS 标签：

CSS 标签	用途
window#waybar	Waybar 主窗口
.modules-left .modules-center .modules-right	Waybar 的三个部分
#cpu	CPU 模块
#clock	时钟模块
#workspaces	工作区切换器

更多样式的参考，请访问 Waybar CSS 示例。

最后，将所有配置文件保存到 ~/.config/waybar/ 文件夹，并重启系统或重新登录以查看效果！