From 520268373dd38f8a9a89eca0e23b7e802a92bc60 Mon Sep 17 00:00:00 2001 From: Xingyu Wang Date: Fri, 30 Jun 2023 10:46:56 +0800 Subject: [PATCH] ATRP @wxy https://linux.cn/article-15955-1.html --- ...️ The Ultimate Guide to i3 Customization in Linux.md | 1777 +++++++++++++++++ ...️ The Ultimate Guide to i3 Customization in Linux.md | 1769 ---------------- 2 files changed, 1777 insertions(+), 1769 deletions(-) create mode 100644 published/20230425.1 ⭐️⭐️⭐️ The Ultimate Guide to i3 Customization in Linux.md delete mode 100644 sources/tech/20230425.1 ⭐️⭐️⭐️ The Ultimate Guide to i3 Customization in Linux.md diff --git a/published/20230425.1 ⭐️⭐️⭐️ The Ultimate Guide to i3 Customization in Linux.md b/published/20230425.1 ⭐️⭐️⭐️ The Ultimate Guide to i3 Customization in Linux.md new file mode 100644 index 0000000000..4735f69b96 --- /dev/null +++ b/published/20230425.1 ⭐️⭐️⭐️ The Ultimate Guide to i3 Customization in Linux.md @@ -0,0 +1,1777 @@ +[#]: subject: "The Ultimate Guide to i3 Customization in Linux" +[#]: via: "https://itsfoss.com/i3-customization/" +[#]: author: "Sagar Sharma https://itsfoss.com/author/sagar/" +[#]: collector: "lkxed" +[#]: translator: "ChatGPT" +[#]: reviewer: "wxy" +[#]: publisher: "wxy" +[#]: url: "https://linux.cn/article-15955-1.html" + +i3 窗口管理器终极定制指南 +====== + +> 在这份超详细的指南中了解如何通过 i3 窗口管理器来自定义系统的外观和体验。 + +你可能在网上(尤其是通过 `r/unixporn` 子区)看到过很多炫酷的截图,用户可以根据个人喜好自定义他们的桌面并与大家分享。 + +这是因为 Linux 允许你自定义桌面体验的方方面面。 + +而结果?就是比任何 Mac 或 Windows 系统**更具视觉和感知效果**。 + +来看一下这个 😌 + +![][1] + +**看起来像一个 Linux Mint 系统吗?** 😲 + +但是你怎样才能做到这样呢?**自定义你的 Linux 桌面外观是很困难的**。 + +答案就在于 **窗口管理器**。如果你能配置好窗口管理器,你就能自定义外观。 + +在本指南中,我将引导你完成使用 **i3 窗口管理器** 进行基本配置。它是 [Linux 上最好的窗口管理器之一][2]。 + +> 💡 “加料Rice” 是一个常用的词汇,用来指代在桌面上进行视觉改进和自定义。**引用自** [/r/unixporn][3] +> (LCTT 译注:“加料”一词来自于购买便宜的亚洲汽车,并给它们安装售后零件,以让它更好地类似于赛车。) + +在遵循本指南之前,你需要了解以下内容: + +- 在本指南中,**我将使用 Arch Linux** 来演示步骤,但你可以使用你喜欢的任何发行版,结果也是一样的。 +- 请记住,本指南是 **对 i3 进行“加料”定制的基础**。 + +在按照本指南进行操作后,你应该得到以下预期结果: + +![如何在 Linux 中配置 i3 窗口管理器、i3blocks 和 i3gaps][4] + +> 📥 为了节省你的时间,我已经在 [GitHub][5] 上上传了与本文相关的所有 i3 配置文件,你可以通过这些文件实现我们在本文中所期望的最终外观。 + +> **[下载 i3 配置文件][5]** + +**首先**,让我们开始安装 **i3 窗口管理器**。 + + +### 在 Linux 上安装 i3 窗口管理器 + +基于 Ubuntu/Debian: + +``` +sudo apt install xorg lightdm lightdm-gtk-greeter i3-wm i3lock i3status i3blocks dmenu terminator +``` + +Arch Linux: + +``` +sudo pacman -S xorg lightdm lightdm-gtk-greeter i3-wm i3lock i3status i3blocks dmenu terminator +``` + +当你完成安装后,使用以下命令启用 lightdm 服务: + +``` +sudo systemctl enable lightdm.service +``` + +然后启动 lightdm 服务: + +``` +sudo systemctl start lightdm.service +``` + +这将启动 lightdm 登录界面,并要求你输入用户名密码。 + +如果你安装了多个桌面环境,你可以从选择菜单中选择 i3: + +![在 Arch Linux 上使用 lightdm 使用 i3 窗口管理器][6] + +当首次登录 i3 时,它会询问你是否要创建一个 i3 配置文件。 + +按下回车键创建一个新的 i3 配置文件: + +![生成 i3 配置文件][7] + +接下来,它会询问你选择 `Win` 或 `Alt` 键哪个作为修饰键(`mod`)。 + +我建议你选择 `Win`(或者 `Super` 键),因为大多数用户已经习惯将其用作快捷键: + +![][8] + +现在你可以开始使用 i3 窗口管理器了。 + +但在我们开始定制之前,让我先介绍一下你如何使用 i3。 + +### i3 窗口管理器的按键绑定 + +让我们从基础知识开始。 + +窗口管理器的基本功能是将多个窗口水平和垂直地组合在一起,这样你就可以同时监视多个进程。 + +结果是这样的: + +![在 Arch Linux 上使用 i3][9] + +你可以使用以下按键绑定执行更多操作: + +| 按键绑定 | 描述 | +| :- | :- | +| `Mod + Enter` | 打开终端。 | +| `Mod + ←` | 切换到左侧窗口。 | +| `Mod + →` | 切换到右侧窗口。 | +| `Mod + ↑` | 切换到上方窗口。 | +| `Mod + ↓` | 切换到下方窗口。 | +| `Mod + Shift + ←` | 将窗口移动到左侧。 | +| `Mod + Shift + →` | 将窗口移动到右侧。 | +| `Mod + Shift + ↑` | 将窗口移动到上方。 | +| `Mod + Shift + ↓` | 将窗口移动到下方。 | +| `Mod + f` | 将焦点窗口切换到全屏模式。 | +| `Mod + v` | 下一个窗口将垂直放置。 | +| `Mod + h` | 下一个窗口将水平放置。 | +| `Mod + s` | 启用堆叠式窗口布局。 | +| `Mod + w` | 启用选项卡式窗口布局。 | +| `Mod + Shift + Space` | 启用浮动窗口(针对焦点窗口)。 | +| `Mod + 鼠标左键单击` | 使用鼠标拖动整个窗口。 | +| `Mod + 0-9` | 切换到另一个工作区。 | +| `Mod + Shift + 0-9` | 将窗口移动到另一个工作区。 | +| `Mod + d` | 打开应用程序启动器(D 菜单)。 | +| `Mod + Shift + q` | 关闭焦点窗口。 | +| `Mod + Shift + c` | 重新加载 i3 配置文件。 | +| `Mod + Shift + r` | 重启 i3 窗口管理器。 | +| `Mod + Shift + e` | 退出 i3 窗口管理器。 | + +我知道按键绑定很多,但如果你每天练习它们,你很快就会习惯。 + +如果你想知道,你可以根据需要更改按键绑定,后面的指南中我会分享如何做到这一点。 + +现在,让我们来看看配置部分。 + +### 在 Arch Linux 中启用 AUR + +如果你刚刚安装了 Arch Linux,可能还没有启用 AUR。 + +这意味着你错过了 Arch Linux 最重要的特性。 + +要 [启用 AUR][10],你需要使用 AUR 包管理器。在这里,我将使用 `yay`。 + +首先,安装 `git`: + +``` +sudo pacman -S git +``` + +现在,克隆 `yay` 存储库并切换到 `yay` 目录: + +``` +git clone https://aur.archlinux.org/yay-git.git && cd yay +``` + +最后,构建包: + +``` +makepkg -si +``` + +还有其他一些 [AUR 包管理器][11],比如 Paru,如果你想使用除 `yay` 之外的其他工具,你可以继续或者探索其他选项。 + +### 更改 i3 窗口管理器的分辨率 + +如果你使用虚拟机运行窗口管理器,可能会遇到问题,尤其是显示分辨率可能被锁定在 `1024x768` 上,就像我一样。 + +因此,你需要执行以下命令,指定所需的显示分辨率: + +``` +xrandr --output [显示名称] --mode [分辨率] +``` + +要找到已连接显示器的名称,你需要使用以下形式的 `xrandr` 命令: + +``` +xrandr | grep -w 'connected' +``` + +![在 i3 中查找已连接显示器][12] + +在我的情况下,显示名称是 `Virtual-1`。 + +因此,如果我想将分辨率更改为 `1920*1080`,我需要执行以下命令: + +``` +xrandr --output Virtual-1 --mode 1920x1080 +``` + +**但这只是暂时生效**。要使其永久生效,你需要在 i3 配置文件中进行更改。 + +首先,打开配置文件: + +``` +nano ~/.config/i3/config +``` + +通过按下 `Alt + /` 来在 `nano` 中 [跳到文件末尾][13],并使用以下语法来永久更改显示分辨率: + +``` +# 显示分辨率 +exec_always xrandr --output [显示名称] --mode [分辨率] +``` + +结果应该是这样的: + +![在 i3 中永久更改显示分辨率][14] + +完成后,[保存更改并退出 nano][15] 文本编辑器。 + +现在,使用 `Mod + Shift + r` 重新启动 i3 窗口管理器,以使你对配置文件所做的更改生效! + +### 在 i3 窗口管理器中更改壁纸 + +默认情况下,i3 的外观比较陈旧,你可能想切换回之前的桌面环境。 + +但是通过更改壁纸,你可以改变整个系统的氛围。 + +在 i3 中有多种方式可以更改壁纸,但在这里,我将向你展示如何使用 `feh` 实用工具。 + +首先,让我们从安装开始: + +对于基于 **Arch 的发行版**: + +``` +sudo pacman -S feh +``` + +对于 **Ubuntu/Debian** 系的发行版: + +``` +sudo apt install feh +``` + +安装完成后,你可以从互联网上下载你喜欢的壁纸。接下来,**打开 i3 配置文件**: + +``` +nano ~/.config/i3/config +``` + +跳到文件的末尾,使用如下所示的 `feh` 命令: + +``` +# 显示壁纸 +exec_always feh --bg-fill /path/to/wallpaper +``` + +在我的情况下,壁纸位于 `Downloads` 目录中,所以我的命令如下: + +![使用 feh 实用工具在 I3 窗口管理器中更改背景][16] + +保存更改并退出 `nano` 文本编辑器。 + +为了使配置文件的更改生效,使用 `Mod + Shift + r` 重新启动 i3 窗口管理器。 + +我的效果如下: + +![在 i3 窗口管理器中更改壁纸][17] + +### 自定义 i3 锁屏界面 + +默认情况下,如果你想锁定系统,你需要执行以下命令: + +``` +i3lock +``` + +锁屏界面如下所示: + +![锁定 i3 窗口管理器][18] + +下面,我将向你展示: + +- 如何创建自定义快捷方式以锁定 i3 会话 +- 如何更改锁屏界面的壁纸 + +为了使锁屏界面更加美观,你需要使用 `i3lock-color` 包。 + +但首先,你需要移除现有的 `i3lock`,因为它会与 `i3lock-color` 冲突: + +在 Arch Linux 上移除它: + +``` +sudo pacman -R i3lock +``` + +对于 Ubuntu/Debian 用户: + +``` +sudo apt remove i3lock +``` + +完成后,你可以使用 AUR 包管理器安装 `i3lock-color`: + +``` +yay i3lock-color +``` + +如果你使用的是基于 Ubuntu 的系统,你需要从头编译它。你可以在他们的 GitHub 页面上找到 [详细的说明][19]。 + +安装完成后,让我们创建一个新目录并创建一个新文件来存储锁屏界面的配置: + +安装好 `i3lock-color` 后,你可以创建一个新目录并创建一个新文件来存储锁屏界面的配置: + +``` +mkdir ~/.config/scripts && nano ~/.config/scripts/lock +``` + +将以下文件内容粘贴到文件中,定义锁屏界面的样式: + +``` +#!/bin/sh + +BLANK='#00000000' +CLEAR='#ffffff22' +DEFAULT='#00897bE6' +TEXT='#00897bE6' +WRONG='#880000bb' +VERIFYING='#00564dE6' + +i3lock \ +--insidever-color=$CLEAR \ +--ringver-color=$VERIFYING \ +\ +--insidewrong-color=$CLEAR \ +--ringwrong-color=$WRONG \ +\ +--inside-color=$BLANK \ +--ring-color=$DEFAULT \ +--line-color=$BLANK \ +--separator-color=$DEFAULT \ +\ +--verif-color=$TEXT \ +--wrong-color=$TEXT \ +--time-color=$TEXT \ +--date-color=$TEXT \ +--layout-color=$TEXT \ +--keyhl-color=$WRONG \ +--bshl-color=$WRONG \ +\ +--screen 1 \ +--blur 9 \ +--clock \ +--indicator \ +--time-str="%H:%M:%S" \ +--date-str="%A, %Y-%m-%d" \ +--keylayout 1 \ +``` + +保存更改并退出文本编辑器。 + +> 📋 在网上可以找到各种不同的 i3 锁屏样式的 bash 脚本。这只是一个示例,对于大多数情况来说是一个较为简单的选项。 + +现在,使用 [chmod 命令][20] 将该文件设置为可执行文件: + +``` +sudo chmod +x .config/scripts/lock +``` + +接下来,你需要对配置文件进行一些更改,以添加该配置文件的路径以使其生效。 + +此外,我将向你展示如何使用自定义键盘快捷键锁定屏幕。 + +首先,打开配置文件: + +``` +nano ~/.config/i3/config +``` + +使用 `Alt + /` 跳至行尾并粘贴以下内容: + +``` +# 锁屏快捷键 +bindsym $mod+x exec /home/$USER/.config/scripts/lock +``` + +在上面的示例中,我将 `mod + x` 作为锁定屏幕的快捷键,你可以选择任何你喜欢的快捷键。 + +最后的配置文件将如下所示: + +![如何在 Arch Linux 中使用 i3lock-color][21] + +相当不错,不是吗? + +### 在 i3 窗口管理器中更改主题和图标 + +我知道你可能会想到这个问题。 + +你为什么需要图标呢?你并不仅仅使用窗口管理器来使用命令行工具。 + +有时候,使用图形界面更加方便,比如使用文件管理器。所以,在处理这些工具时,你希望界面看起来更好看? + +因此,在本部分中,我将向你展示: + +- 如何在 i3 中更改主题 +- 如何在 i3 中更改图标 + +让我们从安装主题开始。 + +在这里,我将使用 `materia-gtk-theme` 和 `papirus` 图标,但你可以使用任何你喜欢的主题和图标。 + +在 Arch 中安装主题,使用以下命令: + +``` +sudo pacman -S materia-gtk-theme papirus-icon-theme +``` + +在 Ubuntu/Debian 系统中: + +``` +sudo apt install materia-gtk-theme papirus-icon-theme +``` + +但仅仅安装还不能完成任务。**你需要像使用 GNOME “调整Tweaks” 应用更改主题一样来应用主题。** + +**在 i3 中,你可以使用 `lxappearance` 工具** 来更改主题和图标。 + +在 Arch 中安装 `lxappearance`,使用以下命令: + +``` +sudo pacman -S lxappearance +``` + +在 Ubuntu/Debian 系统中: + +``` +sudo apt install lxappearance +``` + +安装完成后,使用 `Mod + d` 启动 D 菜单,然后输入 `lxappearance`,并在第一个结果上按回车键。 + +在这里,选择你喜欢的主题。我这里选择 `Materia-dark`。 + +选择主题后,点击应用按钮以应用更改: + +![][22] + +同样地,要更改图标,选择 “图标主题Icon Theme”,选择图标主题,然后点击应用按钮: + +![使用 lxappearance 更改 i3 窗口管理器中的图标][23] + +应用主题和图标后,我的文件管理器如下所示: + +![在 i3 窗口管理器中更改主题和图标][24] + +### 在 i3 窗口管理器中为工作区设置图标 + +默认情况下,工作区仅由数字表示,这并不是你想要使用工作区的最理想方式。 + +因此,在本部分中,我将引导你如何使用合适的图标更改工作区的名称。 + +为了在配置文件中使用图标,首先你需要安装名为 `Awesome` 的新字体: + +对于基于 Arch 的发行版: + +``` +sudo pacman -S ttf-font-awesome +``` + +对于 Ubuntu/Debian 系统: + +``` +sudo apt install fonts-font-awesome +``` + +安装完成后,打开 i3 配置文件: + +``` +nano ~/.config/i3/config +``` + +在这个配置文件中,找到工作区的部分,你将会看到为每个工作区给出的变量: + +![在 i3 配置文件中的工作区变量][25] + +在这个部分,你需要用你想要的名称替换给出的工作区数字。 + +我将把第一个工作区命名为 “programs”,因为**在本教程的后面部分,我将展示如何将特定的应用程序分配到特定的工作区。** + +我主要使用前 5 个工作区,所以我会相应地命名它们: + +``` +# 定义默认工作区的名称,稍后我们将在其中配置键绑定。 +# 我们使用变量来避免在多个地方重复使用名称。 +set $ws1 "1: Terminal" +set $ws2 "2: Firefox" +set $ws3 "3: VMWare" +set $ws4 "4: Spotify" +set $ws5 "5: Shutter" +set $ws6 "6" +set $ws7 "7" +set $ws8 "8" +set $ws9 "9" +set $ws10 "10" +``` + +现在让我们为配置文件中提到的每个应用程序添加图标。 + +你可以 [参考 awesome 字体的备忘单][26] 来找到合适的图标。 + +将图标复制粘贴到名称前面: + +``` +# 定义默认工作区的名称,稍后我们将在其中配置键绑定。 +# 我们使用变量来避免在多个地方重复使用名称。 +set $ws1 "1:  Terminal" +set $ws2 "2:  Firefox" +set $ws3 "3:  VMWare" +set $ws4 "4:  Spotify" +set $ws5 "5:  Shutter" +set $ws6 "6" +set $ws7 "7" +set $ws8 "8" +set $ws9 "9" +set $ws10 "10" +``` + +不要担心它看起来可怕! + +完成后,使用 `Mod + e` 退出 i3,然后再次登录以应用你刚刚所做的更改。 + +我的效果如下图所示: + +![][27] + +字体看起来太小?是时候解决这个问题了! + +### 在 i3 中更改标题窗口和状态栏的字体 + +首先,让我们安装新的字体(我将在这里使用 Ubuntu 字体)。 + +要在 Arch 上安装 Ubuntu 字体,请执行以下操作: + +``` +sudo pacman -S ttf-ubuntu-font-family +``` + +如果你使用的是 Ubuntu,你已经安装了这些字体! + +安装完成后,打开配置文件: + +``` +nano ~/.config/i3/config +``` + +在配置文件中,找到 `font pango:monospace 8` 这一行,这是默认字体。 + +找到那行后,添加字体名称和大小,如下所示: + +``` +font pango:Ubuntu Regular 14 +``` + +然后,使用 `Mod + Shift + r` 重新启动窗口管理器,这样就完成了工作: + +![][28] + +### 在 i3 窗口管理器中分配应用程序到工作区 + +在给工作区命名之后,你会想要将特定的软件分配到相应的工作区中。 + +例如,如果我将第二个工作区命名为 “Firefox”,那么我只想在该工作区中使用 Firefox。 + +那么要如何实现呢? + +为了做到这一点,你需要找到每个要分配的应用程序的类名。 + +**听起来复杂?** 让我告诉你如何做。 + +首先,将应用程序和终端并排打开。例如,在这个例子中,我将 Firefox 和终端并排打开: + +![并排打开应用程序和终端][29] + +现在,在终端中执行 `xprop` 命令,它会改变鼠标指针的形状: + +``` +xprop +``` + +接下来,将鼠标悬停在应用程序上,并在应用程序窗口内的任何位置单击,如图所示: + +![在 i3 窗口管理器中查找类名][30] + +类名将在以下行的最后一个字符串中找到: + +``` +WM_CLASS(STRING) = "Navigator", "firefox" +``` + +在我的情况下,Firefox 浏览器的类名将是 `firefox`。 + +对所有你想要分配到工作区的应用程序重复这个过程。 + +**一旦你知道每个你想要分配到工作区的应用程序的类名,打开配置文件:** + +``` +nano ~/.config/i3/config +``` + +使用 `Alt + /` 将 `nano` 定位到文件末尾,并使用以下语法将应用程序分配到工作区: + +``` +# 分配应用到工作区 +for_window [class="类名"] move to workspace $[工作区变量] +``` + +作为参考,下面是我为不同应用程序分配了 4 个工作区后的配置文件示例: + +![将应用分配到工作区][31] + +现在,无论在哪个工作区打开任何应用程序,它都会自动放置在配置的工作区中。非常方便! 😊 + +### 在 i3 窗口管理器中让终端变透明 + +要启用透明效果,你需要安装 `picom` 合成器并对配置文件进行一些更改。 + +让我们从安装开始。 + +对于基于 Arch 的发行版: + +``` +sudo pacman -S picom +``` + +对于基于 Ubuntu/Debian 的发行版: + +``` +sudo apt install picom +``` + +安装完成后,你需要告诉系统使用 `picom`。 + +首先打开配置文件: + +``` +nano ~/.config/i3/config +``` + +在配置文件的末尾插入以下行: + +``` +# 使用 picom 合成器实现透明效果 +exec_always picom -f +``` + +这里,我使用 `-f` 标志来在切换工作区、打开新应用程序等时启用淡入淡出效果。 + +保存并退出文本编辑器。 + +现在,使用 `Mod + Shift + r` 重新启动 i3。 + +接下来,打开终端,打开 “首选项Preference”,然后选择“配置文件Profiles”,选择“背景Background”,然后选择“透明背景Transparent background”选项。 + +从这里,你可以调整透明度: + +![在 i3 窗口管理器中更改终端背景透明度][32] + +### 在 i3 窗口管理器中自定义状态栏 + +默认情况下,状态栏显示各种信息,但没有图标。 + +因此,在这个部分,我将展示如何从状态栏中删除一些元素以及如何为它们添加图标。 + +但是,在这里,我将在 `/etc/i3status.conf` 中创建一个原始状态栏的副本,以便如果出现任何错误,你可以随时恢复到默认配置。 + +首先,在 `.config` 目录下创建一个新的目录: + +``` +mkdir .config/i3status +``` + +在以下命令中,我使用了 [cp 命令来复制文件][33]: + +``` +sudo cp /etc/i3status.conf ~/.config/i3status/i3status.conf +``` + +接下来,使用 [chown 命令更改所有者][34],以便你可以进行所需的更改: + +``` +sudo chown $USER:$USER ~/.config/i3status/i3status.conf +``` + +现在,你需要通过修改 i3 配置文件来指示窗口管理器使用新的 i3status 配置文件。首先打开配置文件: + +``` +nano ~/.config/i3/config +``` + +在该配置文件中查找 `status_command i3status` 这一行。这是你将提供新状态配置文件路径的行。 + +找到该行后,进行以下更改: + +``` +bar { + status_command i3status -c /home/$USER/.config/i3status/i3status.conf +} +``` + +最终的结果应该如下所示: + +![在 i3 窗口管理器中更改 i3 状态配置路径][35] + +保存更改并退出文本编辑器。 + +现在,让我们从状态栏中删除不必要的指示器。 + +首先,打开 i3status 配置文件: + +``` +nano .config/i3status/i3status.conf +``` + +在这里,你可以将以 `order` 开头的行注释掉,这些行实际上是指示器的变量。 + +**例如,在这里**,我禁用了 `ipv6`、`wireless _first_`、`battery all` 和 `load` 这些对我来说不必要的指示器: + +``` +#order += "ipv6" +#order += "wireless _first_" +order += "ethernet _first_" +#order += "battery all" +order += "disk /" +#order += "load" +order += "memory" +order += "tztime local" +``` + +然后,[在浏览器中打开 awesome font 列表][26],找到与状态栏中列出的项目相关的适当图标。 + +在我的设置中,我删除了以下内容: + +- 删除了显示可用内存的行 +- 删除了显示以太网连接速度的行 + +最终,我的状态栏如下所示: + +![自定义 i3 窗口管理器中的状态栏][36] + +### 在 i3 窗口管理器中改变颜色方案 + +更改 i3 窗口管理器中的颜色方案是这个指南中最重要的部分,因为窗口管理器最吸引人的地方就是你选择的窗口装饰颜色。 + +> 📋 我将为每个颜色声明变量,这样你只需更改变量本身的值,就可以轻松地获得新的颜色方案。 + +首先,打开 i3 配置文件: + +``` +nano ~/.config/i3/config +``` + +使用 `Alt + /` 快捷键到达文件末尾,并使用以下语法添加变量来存储颜色: + +``` +# 窗口的色彩方案 +set $bgcolor #523d64 +set $in-bgcolor #363636 +set $text #ffffff +set $u-bgcolor #ff0000 +set $indicator #a8a3c1 +set $in-text #969696 +# 边框 背景 文本 指示器(显示下一个窗口位置的线条) +client.focused $bgcolor $bgcolor $text $indicator +client.unfocused $in-bgcolor $in-bgcolor $in-text $in-bgcolor +client.focused_inactive $in-bgcolor $in-bgcolor $in-text $in-bgcolor +client.urgent $u-bgcolor $u-bgcolor $text $u-bgcolor +``` + +在这里: + +- `bgcolor` 表示背景色。 +- `in-bgcolor` 表示非活动窗口的背景色。 +- `text` 是文本颜色。 +- `u-bgcolor` 表示紧急操作的背景色。 +- `indicator` 是标示下一个窗口位置的线条的颜色。 +- `in-text` 是非活动窗口的文本颜色。 + +对于本指南,我仅使用了四个基本类别: + +- `client.focused` 定义了焦点窗口的颜色。 +- `client.unfocused` 定义了失去焦点时窗口的装饰。 +- `client.focused_inactive` 当其中一个容器处于焦点但当前没有焦点时,显示的颜色。 +- `client.urgent` 定义了紧急操作时的颜色。 + +> 💡 除了这四个类别,还有更多类别,请参考 [官方 i3 配置手册][37] 以了解更多信息。 + +一旦你对配置文件进行了更改,请使用 `Mod + Shift + r` 重新启动 i3。 + +如果你按照我的颜色方案,设置应该如下所示: + +![更改 I3 窗口管理器中的窗口颜色][38] + +那么,状态栏的颜色怎么办?当然可以改! + +#### 更改 i3 窗口管理器中状态栏的颜色方案 + +在本节中,你将意识到为什么我使用变量来存储颜色,因为我将使用相同的变量来为我的状态栏上色! + +要在状态栏中使用颜色,你需要在 i3 配置文件的 `bar {...}` 部分进行更改。 + +首先,打开配置文件: + +``` +nano ~/.config/i3/config +``` + +在配置文件中查找 `bar {...}` 部分。 + +找到该部分后,创建一个颜色部分,并为状态栏定义颜色和类别,与你为窗口所做的相同: + +``` +bar { + status_command i3status -c /home/$USER/.config/i3status/i3status.conf + colors { + background $bgcolor + separator #191919 + # border background text + focused_workspace $bgcolor $bgcolor $text + inactive_workspace $in-bgcolor $in-bgcolor $text + urgent_workspace $u-bgcolor $u-bgcolor $text + + } +} +``` + +在这里,我使用了 `focused_workspace`、`inactive_workspace` 和 `urgent_workspace` 这三个类别,根据需要定义了相应的颜色。 + +保存更改后,重新启动 i3,状态栏也会显示颜色。 + +### 设置 i3 状态栏的透明度 + +本节将向你展示如何使 i3 状态栏透明。 + +在此之前,让我们先更改 i3 状态栏的字体。 + +这里,我将使用 Droid 字体,使其看起来干净而带有一种极客风格。 + +要在 Arch Linux 上安装 Droid 字体,请使用以下命令: + +``` +sudo pacman -S ttf-droid +``` + +对于 Ubuntu/Debian 系统,请使用以下命令: + +``` +sudo apt install fonts-droid-fallback +``` + +安装完成后,打开配置文件: + +``` +nano ~/.config/i3/config +``` + +进入 `bar {...}` 部分,并按下面的示例输入字体名称和大小: + +``` +font pango: Droid Sans Mono 11 +``` + +![在 i3 状态栏中更改字体][39] + +完成后,请重新启动 i3,字体将会被更改! + +要使状态栏透明,你可以使用现有十六进制代码中的额外两个数字来定义透明度。 + +如果你想要控制透明度,我建议你查看 [此指南,其中提供了从 0 到 100% 透明度的代码范围][40]。 + +为此,我将在配置文件中使用两个新变量。首先,打开配置文件: + +``` +nano ~/.config/i3/config +``` + +在这里,我为背景颜色添加了 60% 的透明度,并为非活跃背景颜色添加了 30% 的透明度: + +``` +set $bgcolor #523d6499 +set $in-bgcolor #3636364D +``` + +如果你仔细观察,我在现有的十六进制颜色代码中添加了两位数字来定义透明度。例如,使用 `99` 来表示 `60%` 的透明度,而使用 `4D` 来表示 `30%` 的透明度。 + +此外,我添加了两个新变量,透明度不同但颜色相同,作为背景使用,使其看起来更好: + +``` +set $focused-ws #523d6480 +set $bar-color #523d640D +``` + +完成后,让我们修改 `bar {...}` 部分来应用透明度。 + +在 `bar {...}` 中添加两行代码: + +``` +i3bar_command i3bar --transparency +tray_output none +``` + +请注意,使用 `tray_output none`,它将不会在托盘中显示任何图标。如果你不希望出现这种行为,则可以跳过此行,只添加第一行以实现透明度。 + +一旦完成,修改状态栏的颜色方案,例如更改背景颜色、边框和活动工作区的背景。 + +修改后,配置文件应如下所示: + +![使 i3 状态栏透明的配置文件(i3 窗口管理器)][41] + +为了使你所做的更改生效,请重新启动 i3,你将得到透明的窗口和状态栏: + +![在 i3 窗口管理器中使状态栏和窗口透明][42] + +### 在窗口管理器中使用 i3blocks + +默认的 i3 状态栏在我看来毫无用处;怎么样让它变得有用起来呢? + +在本部分,我将解释如何添加以下功能: + +- 软件包更新 +- 内存使用情况 +- 磁盘使用情况 +- 音量指示器 +- Spotify 指示器 + +> 📋 要实现这些功能,你需要使用一些脚本,这些脚本将允许你向状态栏添加所需的操作。不用担心,我不会让你手动输入脚本;GitHub 上有各种脚本可供选择,几乎涵盖了你所需的所有方面。 + +但在此之前,你需要进行一些配置,以存储脚本并指示 i3 使用 i3block 的配置,而不是使用 i3bar。 + +如果你在本指南的开头按照给定的说明进行操作,那么 i3blocks 已经安装好了,并且配置文件位于 `/etc/i3blocks.conf`。 + +_如果你希望快速下载块配置文件以进行设置而不阅读其他内容,请点击以下链接:_ + +> **[i3 配置文件][5]** + +在本教程中,我将创建一个副本,使用它代替原始的配置文件,因此首先我们要创建一个目录来存储配置文件的副本: + +``` +mkdir ~/.config/i3blocks +``` + +现在,创建一个原始配置文件的副本: + +``` +sudo cp /etc/i3blocks.conf ~/.config/i3blocks/ +``` + +最后,使用 `chown` 命令更改文件的所有者,以便你进行所需的更改: + +``` +sudo chown $USER:$USER ~/.config/i3blocks/i3blocks.conf +``` + +要启用 i3blocks,在 i3 配置文件中进行一些更改: + +``` +nano ~/.config/i3/config +``` + +进入 `bar {...}` 部分,在这里,你需要将 `status_command` 更改为 `i3blocks` 并添加 i3blocks 配置文件的路径,如下所示: + +![在 i3 窗口管理器中启用 i3blocks][43] + +完成后,使用 `Mod + Shift + r` 重新启动 i3 窗口管理器,整个状态栏都会被更改,并显示如下: + +![i3 窗口管理器中 i3blocks 的默认外观][44] + +不要担心,你将很快使状态栏比以前的 i3bar 更有价值和好看。 + +#### 添加磁盘块 + +如果你想要显示磁盘剩余空间,可以添加此块。 + +在这里,我将使用 `nano` 创建并打开用于磁盘块的配置文件。 + +``` +nano ~/.config/scripts/disk +``` + +然后粘贴以下行: + +``` +#!/usr/bin/env sh +DIR="${DIR:-$BLOCK_INSTANCE}" +DIR="${DIR:-$HOME}" +ALERT_LOW="${ALERT_LOW:-$1}" +ALERT_LOW="${ALERT_LOW:-10}" # color will turn red under this value (default: 10%) + +LOCAL_FLAG="-l" +if [ "$1" = "-n" ] || [ "$2" = "-n" ]; then + LOCAL_FLAG="" +fi + +df -h -P $LOCAL_FLAG "$DIR" | awk -v label="$LABEL" -v alert_low=$ALERT_LOW ' +/\/.*/ { + # full text + print label $4 + # short text + print label $4 + use=$5 + # no need to continue parsing + exit 0 +} +END { + gsub(/%$/,"",use) + if (100 - use < alert_low) { + # color + print "#FF0000" + } +} +' +``` + +保存更改并从文本编辑器中退出。 + +现在,将此文件设置为可执行: + +``` +sudo chmod +x ~/.config/scripts/disk +``` + +接下来,打开 I3blocks 配置文件: + +``` +nano ~/.config/i3blocks/i3blocks.conf +``` + +根据你想要放置磁盘块的位置,粘贴以下行: + +``` +[disk] +command=/home/$USER/.config/scripts/disk +LABEL= +#DIR=$HOME +#ALERT_LOW=10 +interval=30 +``` + +完成后,保存更改并使用 `Mod + Shift + r` 重新启动 i3,状态栏中将显示带有磁盘图标的可用磁盘空间。 + +#### 添加内存块 + +这将是状态栏中指示系统中已使用内存的块。 + +首先,创建并打开一个新文件用于新的块: + +``` +nano ~/.config/scripts/memory +``` + +然后在新文件中粘贴以下行: + +``` +#!/usr/bin/env sh +TYPE="${BLOCK_INSTANCE:-mem}" +PERCENT="${PERCENT:-true}" + +awk -v type=$TYPE -v percent=$PERCENT ' +/^MemTotal:/ { + mem_total=$2 +} +/^MemFree:/ { + mem_free=$2 +} +/^Buffers:/ { + mem_free+=$2 +} +/^Cached:/ { + mem_free+=$2 +} +/^SwapTotal:/ { + swap_total=$2 +} +/^SwapFree:/ { + swap_free=$2 +} +END { + if (type == "swap") { + free=swap_free/1024/1024 + used=(swap_total-swap_free)/1024/1024 + total=swap_total/1024/1024 + } else { + free=mem_free/1024/1024 + used=(mem_total-mem_free)/1024/1024 + total=mem_total/1024/1024 + } + pct=0 + if (total > 0) { + pct=used/total*100 + } + # full text + if (percent == "true" ) { + printf("%.1fG/%.1fG (%.f%%)\n", used, total, pct) + } else { + printf("%.1fG/%.1fG\n", used, total) + } + # short text + printf("%.f%%\n", pct) + # color + if (pct > 90) { + print("#FF0000") + } else if (pct > 80) { + print("#FFAE00") + } else if (pct > 70) { + print("#FFF600") + } +} +' /proc/meminfo +``` + +保存更改并从文本编辑器中退出。 + +现在,要使其生效,你需要使用以下命令将此文件设置为可执行: + +``` +sudo chmod +x ~/.config/scripts/memory +``` + +接下来,打开 i3blocks 配置文件: + +``` +nano ~/.config/i3blocks/i3blocks.conf +``` + +并将以下内容粘贴到你希望在状态栏中显示内存使用情况的位置: + +``` +[memory] +command=/home/$USER/.config/scripts/memory +label= +interval=30 +``` + +保存更改并从文本编辑器中退出。重新启动 i3 以使更改生效! + +#### 添加更新指示块 + +这是最有帮助的指示器,它显示需要更新的旧软件包数量。 + +首先,使用以下命令安装依赖项以使其正常工作: + +``` +sudo pacman -S pacman-contrib +``` + +现在,创建一个新文件来存储脚本: + +``` +nano ~/.config/scripts/arch-update +``` + +然后粘贴以下内容: + +``` +#!/usr/bin/env python3 +import subprocess +from subprocess import check_output +import argparse +import os +import re + + +def create_argparse(): + def _default(name, default='', arg_type=str): + val = default + if name in os.environ: + val = os.environ[name] + return arg_type(val) + + strbool = lambda s: s.lower() in ['t', 'true', '1'] + strlist = lambda s: s.split() + + parser = argparse.ArgumentParser(description='Check for pacman updates') + parser.add_argument( + '-b', + '--base_color', + default = _default('BASE_COLOR', 'green'), + help='base color of the output(default=green)' + ) + parser.add_argument( + '-u', + '--updates_available_color', + default = _default('UPDATE_COLOR', 'yellow'), + help='color of the output, when updates are available(default=yellow)' + ) + parser.add_argument( + '-a', + '--aur', + action = 'store_const', + const = True, + default = _default('AUR', 'False', strbool), + help='Include AUR packages. Attn: Yaourt must be installed' + ) + parser.add_argument( + '-y', + '--aur_yay', + action = 'store_const', + const = True, + default = _default('AUR_YAY', 'False', strbool), + help='Include AUR packages. Attn: Yay must be installed' + ) + parser.add_argument( + '-q', + '--quiet', + action = 'store_const', + const = True, + default = _default('QUIET', 'False', strbool), + help = 'Do not produce output when system is up to date' + ) + parser.add_argument( + '-w', + '--watch', + nargs='*', + default = _default('WATCH', arg_type=strlist), + help='Explicitly watch for specified packages. ' + 'Listed elements are treated as regular expressions for matching.' + ) + return parser.parse_args() + + +def get_updates(): + output = '' + try: + output = check_output(['checkupdates']).decode('utf-8') + except subprocess.CalledProcessError as exc: + # checkupdates exits with 2 and no output if no updates are available. + # we ignore this case and go on + if not (exc.returncode == 2 and not exc.output): + raise exc + if not output: + return [] + + updates = [line.split(' ')[0] + for line in output.split('\n') + if line] + + return updates + + +def get_aur_yaourt_updates(): + output = '' + try: + output = check_output(['yaourt', '-Qua']).decode('utf-8') + except subprocess.CalledProcessError as exc: + # yaourt exits with 1 and no output if no updates are available. + # we ignore this case and go on + if not (exc.returncode == 1 and not exc.output): + raise exc + if not output: + return [] + + aur_updates = [line.split(' ')[0] + for line in output.split('\n') + if line.startswith('aur/')] + + return aur_updates + +def get_aur_yay_updates(): + output = check_output(['yay', '-Qua']).decode('utf-8') + if not output: + return [] + + aur_updates = [line.split(' ')[0] for line in output.split('\n') if line] + + return aur_updates + + +def matching_updates(updates, watch_list): + matches = set() + for u in updates: + for w in watch_list: + if re.match(w, u): + matches.add(u) + + return matches + + +label = os.environ.get("LABEL","") +message = "{0}{2}" +args = create_argparse() + +updates = get_updates() +if args.aur: + updates += get_aur_yaourt_updates() +elif args.aur_yay: + updates += get_aur_yay_updates() + +update_count = len(updates) +if update_count > 0: + if update_count == 1: + info = str(update_count) + ' update available' + short_info = str(update_count) + ' update' + else: + info = str(update_count) + ' updates available' + short_info = str(update_count) + ' updates' + + matches = matching_updates(updates, args.watch) + if matches: + info += ' [{0}]'.format(', '.join(matches)) + short_info += '*' + print(message.format(label, args.updates_available_color, info)) + print(message.format(label, args.updates_available_color, short_info)) +elif not args.quiet: + print(message.format(label, args.base_color, 'system up to date')) +``` + +保存更改并从文本编辑器中退出。 + +现在,使用以下命令将此文件设置为可执行: + +``` +sudo chmod +x ~/.config/scripts/arch-update +``` + +接下来,打开 i3blocks 配置文件: + +``` +nano ~/.config/i3blocks/i3blocks.conf +``` + +并将以下内容粘贴到所需的位置: + +``` +[arch-update] +command=/home/$USER/.config/scripts/arch-update +interval=3600 +markup=pango +LABEL= +``` + +保存更改并重新加载 i3 窗口管理器,它将显示需要更新的软件包数量。 + +如果你正在使用 Ubuntu,你可以 [按照 GitHub 页面上的说明][45] 进行操作。 + +#### 添加音量指示块 + +添加音量指示块需要一些努力,因为你希望它的行为符合预期。你需要实现以下功能: + +- 使用媒体控制键管理音量的键绑定 +- 添加一个指示音量的音量块 + +但要做到这一点,首先你需要安装一些依赖项。 + +如果你使用的是 Arch Linux,请使用以下命令: + +``` +sudo pacman -S pulseaudio-alsa pulseaudio-bluetooth pulseaudio-equalizer pulseaudio-jack alsa-utils playerctl +``` + +如果你使用的是 Ubuntu/Debian 系统,请使用以下命令: + +``` +sudo apt install pulseaudio-module-bluetooth pulseaudio-equalizer pulseaudio-module-jack alsa-utils playerctl +``` + +接下来,让我们看看如何在 i3 窗口管理器中启用媒体控制键。 + +首先,打开 i3 配置文件: + +``` +nano ~/.config/i3/config +``` + +转到文件的末尾,并粘贴以下内容: + +``` +# Key bindings for Media control keys +bindsym XF86AudioPlay exec playerctl play +bindsym XF86AudioPause exec playerctl pause +bindsym XF86AudioNext exec playerctl next +bindsym XF86AudioPrev exec playerctl previous +``` + +现在,让我们为此块创建一个新文件: + +``` +nano ~/.config/scripts/volume +``` + +然后粘贴以下内容: + +``` +#!/usr/bin/env bash +if [[ -z "$MIXER" ]] ; then + MIXER="default" + if command -v pulseaudio >/dev/null 2>&1 && pulseaudio --check ; then + # pulseaudio is running, but not all installations use "pulse" + if amixer -D pulse info >/dev/null 2>&1 ; then + MIXER="pulse" + fi + fi + [ -n "$(lsmod | grep jack)" ] && MIXER="jackplug" + MIXER="${2:-$MIXER}" +fi +if [[ -z "$SCONTROL" ]] ; then + SCONTROL="${BLOCK_INSTANCE:-$(amixer -D $MIXER scontrols | + sed -n "s/Simple mixer control '\([^']*\)',0/\1/p" | + head -n1 + )}" +fi + +# The first parameter sets the step to change the volume by (and units to display) +# This may be in in % or dB (eg. 5% or 3dB) +if [[ -z "$STEP" ]] ; then + STEP="${1:-5%}" +fi + +NATURAL_MAPPING=${NATURAL_MAPPING:-0} +if [[ "$NATURAL_MAPPING" != "0" ]] ; then + AMIXER_PARAMS="-M" +fi + +#------------------------------------------------------------------------ + +capability() { # Return "Capture" if the device is a capture device + amixer $AMIXER_PARAMS -D $MIXER get $SCONTROL | + sed -n "s/ Capabilities:.*cvolume.*/Capture/p" +} + +volume() { + amixer $AMIXER_PARAMS -D $MIXER get $SCONTROL $(capability) +} +``` + +保存更改并退出配置文件。 + +接下来,打开 I3blocks 配置文件: + +``` +nano ~/.config/i3blocks/i3blocks.conf +``` + +然后粘贴以下内容: + +``` +[volume] +command=/home/$USER/.config/scripts/volume +LABEL=♪ +#LABEL=VOL +interval=1 +signal=10 +#STEP=5% +MIXER=default +#SCONTROL=[determined automatically] +#NATURAL_MAPPING=0 +``` + +保存更改并重新加载 i3,从现在开始,音量快捷键将起作用,并且指示器将按预期工作! + +> 💡 如果遇到音频/视频不工作等问题,请使用此命令,它应该解决该问题: + +``` +systemctl --user disable --now pipewire.{socket,service} && systemctl --user mask pipewire.socket +``` + +#### 添加 Spotify 块 + +我将使用 [firatakandere][46] 的脚本来添加此功能。在继续之前,你可以先查看一下该脚本。 + +首先,创建并打开一个用于 Spotify 块的新文件: + +``` +nano ~/.config/scripts/spotify.py +``` + +然后粘贴以下内容: + +``` +#!/usr/bin/python + +import dbus +import os +import sys + + +try: + bus = dbus.SessionBus() + spotify = bus.get_object("org.mpris.MediaPlayer2.spotify", "/org/mpris/MediaPlayer2") + + + if os.environ.get('BLOCK_BUTTON'): + control_iface = dbus.Interface(spotify, 'org.mpris.MediaPlayer2.Player') + if (os.environ['BLOCK_BUTTON'] == '1'): + control_iface.Previous() + elif (os.environ['BLOCK_BUTTON'] == '2'): + control_iface.PlayPause() + elif (os.environ['BLOCK_BUTTON'] == '3'): + control_iface.Next() + + spotify_iface = dbus.Interface(spotify, 'org.freedesktop.DBus.Properties') + props = spotify_iface.Get('org.mpris.MediaPlayer2.Player', 'Metadata') + + if (sys.version_info > (3, 0)): + print(str(props['xesam:artist'][0]) + " - " + str(props['xesam:title'])) + else: + print(props['xesam:artist'][0] + " - " + props['xesam:title']).encode('utf-8') + exit +except dbus.exceptions.DBusException: + exit +``` + +完成后,使用以下命令使其可执行: + +``` +sudo chmod +x ~/.config/scripts/spotify.py +``` + +现在,打开 I3blocks 配置文件: + +``` +nano ~/.config/i3blocks/i3blocks.conf +``` + +然后粘贴以下内容(建议将其粘贴到块的开头): + +``` +[spotify] +label= +command=/home/$USER/.config/scripts/spotify.py +color=#81b71a +interval=5 +``` + +保存更改,退出配置文件,并重新启动 i3。 + +添加了我提到的块后,状态栏将如下所示: + +![在 i3 窗口管理器中定制 i3blocks ][47] + +你可以查看我的主屏幕,其中包含这些块(点击下方的图片查看)。 + +![在 i3 窗口管理器中定制 i3blocks ][48] + +> 📋 如果你对那些默认块(文档和问候语)的位置感到困惑,我用了几个注释将它们禁用以实现所示的外观! + +### 在 Linux 中使用 i3gaps + +如果你想在窗口之间添加间隙,可以使用 `i3gaps`。在颜色方案之后,`i3gaps` 是这个指南中最关键的元素。 + +要使用间隙,你必须对 i3 配置文件进行一些更改。 + +打开 i3 配置文件: + +``` +nano ~/.config/i3/config +``` + +转到文件的末尾,并粘贴以下内容: + +``` +# default gaps +gaps inner 15 +gaps outer 5 + +# gaps +set $mode_gaps Gaps: (o)uter, (i)nner, (h)orizontal, (v)ertical, (t)op, (r)ight, (b)ottom, (l)eft +set $mode_gaps_outer Outer Gaps: +|-|0 (local), Shift + +|-|0 (global) +set $mode_gaps_inner Inner Gaps: +|-|0 (local), Shift + +|-|0 (global) +set $mode_gaps_horiz Horizontal Gaps: +|-|0 (local), Shift + +|-|0 (global) +set $mode_gaps_verti Vertical Gaps: +|-|0 (local), Shift + +|-|0 (global) +set $mode_gaps_top Top Gaps: +|-|0 (local), Shift + +|-|0 (global) +set $mode_gaps_right Right Gaps: +|-|0 (local), Shift + +|-|0 (global) +set $mode_gaps_bottom Bottom Gaps: +|-|0 (local), Shift + +|-|0 (global) +set $mode_gaps_left Left Gaps: +|-|0 (local), Shift + +|-|0 (global) +bindsym $mod+Shift+g mode "$mode_gaps" + +mode "$mode_gaps" { + bindsym o mode "$mode_gaps_outer" + bindsym i mode "$mode_gaps_inner" + bindsym h mode "$mode_gaps_horiz" + bindsym v mode "$mode_gaps_verti" + bindsym t mode "$mode_gaps_top" + bindsym r mode "$mode_gaps_right" + bindsym b mode "$mode_gaps_bottom" + bindsym l mode "$mode_gaps_left" + bindsym Return mode "$mode_gaps" + bindsym Escape mode "default" +} + +mode "$mode_gaps_outer" { + bindsym plus gaps outer current plus 5 + bindsym minus gaps outer current minus 5 + bindsym 0 gaps outer current set 0 + + bindsym Shift+plus gaps outer all plus 5 + bindsym Shift+minus gaps outer all minus 5 + bindsym Shift+0 gaps outer all set 0 + + bindsym Return mode "$mode_gaps" + bindsym Escape mode "default" +} +mode "$mode_gaps_inner" { + bindsym plus gaps inner current plus 5 + bindsym minus gaps inner current minus 5 + bindsym 0 gaps inner current set 0 + + bindsym Shift+plus gaps inner all plus 5 + bindsym Shift+minus gaps inner all minus 5 + bindsym Shift+0 gaps inner all set 0 + + bindsym Return mode "$mode_gaps" + bindsym Escape mode "default" +} +mode "$mode_gaps_horiz" { + bindsym plus gaps horizontal current plus 5 + bindsym minus gaps horizontal current minus 5 + bindsym 0 gaps horizontal current set 0 + + bindsym Shift+plus gaps horizontal all plus 5 + bindsym Shift+minus gaps horizontal all minus 5 + bindsym Shift+0 gaps horizontal all set 0 + + bindsym Return mode "$mode_gaps" + bindsym Escape mode "default" +} +mode "$mode_gaps_verti" { + bindsym plus gaps vertical current plus 5 + bindsym minus gaps vertical current minus 5 + bindsym 0 gaps vertical current set 0 + + bindsym Shift+plus gaps vertical all plus 5 + bindsym Shift+minus gaps vertical all minus 5 + bindsym Shift+0 gaps vertical all set 0 + + bindsym Return mode "$mode_gaps" + bindsym Escape mode "default" +} +mode "$mode_gaps_top" { + bindsym plus gaps top current plus 5 + bindsym minus gaps top current minus 5 + bindsym 0 gaps top current set 0 + + bindsym Shift+plus gaps top all plus 5 + bindsym Shift+minus gaps top all minus 5 + bindsym Shift+0 gaps top all set 0 + + bindsym Return mode "$mode_gaps" + bindsym Escape mode "default" +} +mode "$mode_gaps_right" { + bindsym plus gaps right current plus 5 + bindsym minus gaps right current minus 5 + bindsym 0 gaps right current set 0 + + bindsym Shift+plus gaps right all plus 5 + bindsym Shift+minus gaps right all minus 5 + bindsym Shift+0 gaps right all set 0 + + bindsym Return mode "$mode_gaps" + bindsym Escape mode "default" +} +mode "$mode_gaps_bottom" { + bindsym plus gaps bottom current plus 5 + bindsym minus gaps bottom current minus 5 + bindsym 0 gaps bottom current set 0 + + bindsym Shift+plus gaps bottom all plus 5 + bindsym Shift+minus gaps bottom all minus 5 + bindsym Shift+0 gaps bottom all set 0 + + bindsym Return mode "$mode_gaps" + bindsym Escape mode "default" +} +mode "$mode_gaps_left" { + bindsym plus gaps left current plus 5 + bindsym minus gaps left current minus 5 + bindsym 0 gaps left current set 0 + + bindsym Shift+plus gaps left all plus 5 + bindsym Shift+minus gaps left all minus 5 + bindsym Shift+0 gaps left all set 0 + + bindsym Return mode "$mode_gaps" + bindsym Escape mode "default" +} +``` + +保存更改并退出配置文件。 + +使用 `Mod + Shift + r` 重新加载 i3,并会看到窗口之间的间隙: + +![在 i3 窗口管理器中使用 i3gaps][49] + +但是,如果你想调整间隙的大小怎么办?这非常简单,只需要简单的步骤即可完成: + +- 按下 `Mod + Shift + g` 进入间隙模式 +- 使用给定的选项选择要更改的内容 +- 使用 `+` 或 `-` 增加/减小间隙 +- 完成后,按 `Esc` 键退出间隙模式 + +就是这样! + +### 我们忘记自定义终端了吗? + +不用担心;你可以 [切换到 Zsh][50],这是一个不同的 shell,使终端看起来与众不同,或者探索一些鲜为人知的 [Linux Shell][51]。 + +无论如何,你都可以 [自定义现有终端][52],或选择不同的 [终端模拟器][53]。 + +**我希望你不再畏难如何美化系统!** 😎 + +_如果你有任何建议或想展示你的配置,请在评论部分留言。_ + +*(题图:MJ/2874542d-6a8f-4b27-8e65-477389a0dcca)* + +-------------------------------------------------------------------------------- + +via: https://itsfoss.com/i3-customization/ + +作者:[Sagar Sharma][a] +选题:[lkxed][b] +译者:ChatGPT +校对:[wxy](https://github.com/wxy) + +本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译,[Linux中国](https://linux.cn/) 荣誉推出 + +[a]: https://itsfoss.com/author/sagar/ +[b]: https://github.com/lkxed/ +[1]: https://itsfoss.com/content/images/2023/04/linux-mint-i3.jpg +[2]: https://itsfoss.com/best-window-managers/ +[3]: https://www.reddit.com/r/unixporn +[4]: https://itsfoss.com/content/images/2023/04/How-to-configure-i3-window-manager-with-i3blocks-and-i3gaps-in-linux.png +[5]: https://github.com/itsfoss/text-files/tree/master/i3_config_files +[6]: https://itsfoss.com/content/images/2023/04/use-lightdm-to-use-the-i3-wm-in-arch.png +[7]: https://itsfoss.com/content/images/2023/04/create-configuration-file-for-i3.png +[8]: https://itsfoss.com/content/images/2023/04/choose-the-mod-key-in-i3.png +[9]: https://itsfoss.com/content/images/2023/04/Using-I3-on-arch-linux.png +[10]: https://itsfoss.com/aur-arch-linux/ +[11]: https://itsfoss.com/best-aur-helpers/ +[12]: https://itsfoss.com/content/images/2023/04/find-connected-display-in-I3.png +[13]: https://linuxhandbook.com/beginning-end-file-nano/ +[14]: https://itsfoss.com/content/images/2023/04/change-display-resolution-in-I3-permanently.png +[15]: https://linuxhandbook.com/nano-save-exit/ +[16]: https://itsfoss.com/content/images/2023/04/Use-feh-utility-to-change-background-in-I3-window-manager.png +[17]: https://itsfoss.com/content/images/2023/04/change-wallpaper-in-I3-window-manager.png +[18]: https://itsfoss.com/content/images/2023/04/how-to-lock-the-I3-window-manager.gif +[19]: https://github.com/Raymo111/i3lock-color +[20]: https://linuxhandbook.com/chmod-command/ +[21]: https://itsfoss.com/content/images/2023/04/how-to-use-i3lock-color-in-arch-linux-1.png +[22]: https://itsfoss.com/content/images/2023/04/Change-theme-in-I3-window-manager-using-lxappearance.png +[23]: https://itsfoss.com/content/images/2023/04/Change-icons-in-I3-window-manager-using-lxappearance.png +[24]: https://itsfoss.com/content/images/2023/04/change-theme-and-icon-in-i3-window-manager.png +[25]: https://itsfoss.com/content/images/2023/04/workspace-variables-in-I3-config-file.png +[26]: https://fontawesome.com/v5/cheatsheet +[27]: https://itsfoss.com/content/images/2023/04/workspace-icons.png +[28]: https://itsfoss.com/content/images/2023/04/change-font-of-the-workspace-and-titlebar-in-I3-window-manager.png +[29]: https://itsfoss.com/content/images/2023/04/open-application-and-terminal-side-by-side.png +[30]: https://itsfoss.com/content/images/2023/04/find-the-class-name-in-i3-window-manager.gif +[31]: https://itsfoss.com/content/images/2023/04/Allocate-specific-applications-to-specific-workspaces-in-I3-window-manager.png +[32]: https://itsfoss.com/content/images/2023/04/change-terminal-background-transperency-in-I3-window-manager.png +[33]: https://linuxhandbook.com/cp-command/ +[34]: https://linuxhandbook.com/chown-command/ +[35]: https://itsfoss.com/content/images/2023/04/change-the-path-of-the-i3-status-config-in-I3-window-manager.png +[36]: https://itsfoss.com/content/images/2023/04/Customize-the-status-bar-in-the-I3-window-manager.png +[37]: https://i3wm.org/docs/userguide.html#client_colors +[38]: https://itsfoss.com/content/images/2023/04/change-window-colors-in-I3-window-manager.png +[39]: https://itsfoss.com/content/images/2023/04/change-fonts-in-i3-status-bar.png +[40]: https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4 +[41]: https://itsfoss.com/content/images/2023/04/config-file-to-make-the-I3-bar-transparent-in-I3-window-manager-1.png +[42]: https://itsfoss.com/content/images/2023/04/make-I3-status-bar-and-windows-transparent-in-I3-window-manager-3.png +[43]: https://itsfoss.com/content/images/2023/04/enable-i3blocks-in-i3-window-manager.png +[44]: https://itsfoss.com/content/images/2023/04/the-default-look-of-the-i3blocks-in-i3-window-manager.png +[45]: https://github.com/vivien/i3blocks-contrib/tree/master/apt-upgrades +[46]: https://github.com/firatakandere +[47]: https://itsfoss.com/content/images/2023/04/blocks-i3.jpg +[48]: https://itsfoss.com/content/images/2023/04/Customize-the-I3blocks-in-I3-window-manager.png +[49]: https://itsfoss.com/content/images/2023/04/use-i3gaps-in-i3-window-manager.png +[50]: https://itsfoss.com/zsh-ubuntu/ +[51]: https://itsfoss.com/shells-linux/ +[52]: https://itsfoss.com/customize-linux-terminal/ +[53]: https://itsfoss.com/linux-terminal-emulators/ diff --git a/sources/tech/20230425.1 ⭐️⭐️⭐️ The Ultimate Guide to i3 Customization in Linux.md b/sources/tech/20230425.1 ⭐️⭐️⭐️ The Ultimate Guide to i3 Customization in Linux.md deleted file mode 100644 index 77136be492..0000000000 --- a/sources/tech/20230425.1 ⭐️⭐️⭐️ The Ultimate Guide to i3 Customization in Linux.md +++ /dev/null @@ -1,1769 +0,0 @@ -[#]: subject: "The Ultimate Guide to i3 Customization in Linux" -[#]: via: "https://itsfoss.com/i3-customization/" -[#]: author: "Sagar Sharma https://itsfoss.com/author/sagar/" -[#]: collector: "lkxed" -[#]: translator: " " -[#]: reviewer: " " -[#]: publisher: " " -[#]: url: " " - -The Ultimate Guide to i3 Customization in Linux -====== - -You might have come across dope screenshots (especially via `r/unixporn` Subreddit), where users customize their desktops to their heart's desire and share it with the world. Linux lets you customize every aspect of your desktop experience, which is why it is possible. - -And, the result? Something that **feels and looks way better than any Mac or Windows system.** - -Just look at this 😌 - -![][1] - -**Does it look like a Linux Mint system?** 😲 - -But how can you achieve something like that? **It is tough to customize** the look of your Linux desktop. - -The answer to your questions lies in the **window manager.** If you can configure a window manager, you can customize the look. - -For this guide, I will walk you through a basic configuration you can do with the **i3 window manager.** It is one of the [best window managers for Linux][2]. - -> 💡 "Rice" is a word commonly used to refer to making visual improvements and customizations on one's desktop. **Via** [/r/unixporn][3] - -Things you should know before following this guide: - -- In this guide, **I will use Arch Linux** to demonstrate the steps, but you can use any of your preferred distros and have the same result. -- Remember, this guide will be a basic foundation for the **i3 ricing**. - -And here's the result of what you should expect after following this guide: - -![How to configure i3 window manager with i3blocks and i3gaps in linux][4] - -> 📥 To save you time, I have uploaded all the i3 config files related to the article on [GitHub][5], with which you can achieve the final look of what we intend from this article. - -[Download i3 Config Files][5] - -**First,** let's start with installing the **i3 window manager**. - -### Install i3 Window Manager on Linux - -For **Ubuntu/Debian** base: - -``` -sudo apt install xorg lightdm lightdm-gtk-greeter i3-wm i3lock i3status i3blocks dmenu terminator -``` - -For **Arch Linux**: - -``` -sudo pacman -S xorg lightdm lightdm-gtk-greeter i3-wm i3lock i3status i3blocks dmenu terminator -``` - -Once you are done with the installation, enable the lightdm service using the following command: - -``` -sudo systemctl enable lightdm.service -``` - -And start the lightdm service: - -``` -sudo systemctl start lightdm.service -``` - -That will start the lightdm greeter that will ask you to enter the password for your username. - -And if you have multiple desktop environments installed, you can choose i3 from the selection menu: - -![use lightdm to use the i3 wm in arch][6] - -Once you log in to your first i3 instance, it will ask you whether you want to create an i3 config file. - -Press `Enter` to create a new i3 config file: - -![generate I3 cofig file][7] - -Next, it will ask you to choose between `Win` and `Alt` key, which should behave as `mod` key. - -I would recommend you go with the `Win` (or the Super) key as most of the users are already used to it for shortcuts: - -![][8] - -And your i3 window manager is ready to use. - -But before we jump to the customization part, let me walk you through how you can use the i3 in the first place. - -### Keybindings of i3 Window Manager - -So let's start with the basics. - -The basic functionality of the window manager is to frame multiple windows horizontally and vertically, so you can monitor multiple processes simultaneously. - -And the result looks like this: - -![using i3 on arch linux][9] - -You can do a lot more than this using the following keybindings: - -| Keybiding | Description | -| :- | :- | -| `Mod + Enter` | Open terminal. | -| `Mod + ←` | Focus left. | -| `Mod + →` | Focus right. | -| `Mod + ↑` | Focus up. | -| `Mod + ↓` | Focus down. | -| `Mod + Shift + ←` | Move the window to the left side. | -| `Mod + Shift + →` | Move the window to the right side. | -| `Mod + Shift + ↑` | Move the window up. | -| `Mod + Shift + ↓` | Move the window down. | -| `Mod + f` | Toggle the focused window to full-screen. | -| `Mod + v` | The next window will be placed vertically. | -| `Mod + h` | The next window will be placed horizontally. | -| `Mod + s` | Enables the stacked window layout. | -| `Mod + w` | Enables the tabbed window layout. | -| `Mod + Shift + Space` | Enables the floating window (for focused window). | -| `Mod + Left-mouse-click` | Drag the entire window using the mouse. | -| `Mod + 0-9` | Switch to another workspace. | -| `Mod + Shift + 0-9` | Move the window to another workspace. | -| `Mod + d` | Open the application launcher (D menu). | -| `Mod + Shift + q` | Kills the focused window. | -| `Mod + Shift + c` | Reloads the I3 config file. | -| `Mod + Shift + r` | Restart the I3 WM. | -| `Mod + Shift + e` | Exit I3 WM. | - -I know an overwhelming number of keybindings are available, but if you practice them daily, you'll get used to them in no time. - -And if you are wondering, you can change the keybindings at your convenience, which I will share in the later part of this guide. - -Now, let's have a look at the configuration part. - -### Enable AUR in Arch Linux - -So if you have a fresh installation of Arch Linux, you may not have enabled the AUR. - -This means you are missing out on the most crucial feature of the Arch. - -To [enable the AUR][10], you'd need AUR to utilize the AUR package helper. Here, I will be using the yay. - -First, install the git: - -``` -sudo pacman -S git -``` - -Now, clone the yay repository and change your directory to yay: - -``` -git clone https://aur.archlinux.org/yay-git.git && cd yay -``` - -And finally, build the package: - -``` -makepkg -si -``` - -There are some other [AUR package helpers][11] like Paru, so if you want to use something else apart from yay, you can proceed, or explore other options. - -### Change resolution of i3 WM - -You will face issues, especially if you are using a virtual machine for window manager where the display resolution may be locked at `1024x768`, as is in my case. - -So you will have to execute the following command by specifying the desired display resolution: - -``` -xrandr --output [Display_name] --mode [resolution] -``` - -To find the name of the connected display, you will have to use the xrandr command in the following manner: - -``` -xrandr | grep -w 'connected' -``` - -![find connected display in I3][12] - -In my case, it is `Virtual-1`. - -So if I want to change the resolution to `1920*1080`, I will have to execute the following: - -``` -xrandr --output Virtual-1 --mode 1920x1080 -``` - -**But this will only work temporarily**. To make it permanent, you will have to make changes in the i3 config file. - -First, open the config file: - -``` -nano ~/.config/i3/config -``` - -[Go to the end of the file in nano][13] by pressing `Alt + /` and use the following syntax to change the display resolution permanently: - -``` -# Display Resolution -exec_always xrandr --output [Display_name] --mode [Resolution] -``` - -The result should look like this: - -![change display resolution in I3 permanently][14] - -Once done, [save changes and exit from the nano][15] text editor. - -Now, restart the i3 WM using the `Mod + Shift + r` to take effect from the changes you've made to the config file and that's it! - -### Change wallpaper in the i3 Window manager - -By default, i3 will look dated, and you may want to switch back to your previous desktop environment. - -But by changing the wallpaper itself, you can start changing the whole vibe of the system. - -And there are various ways to change the wallpaper in i3, but here, I will be showing you how you can use the **`feh` utility.** - -First, let's start with the installation itself: - -For **Arch-based distros:** - -``` -sudo pacman -S feh -``` - -For **Ubuntu/Debian based-distros:** - -``` -sudo apt install feh -``` - -Once done, you can download your favorite wallpaper from the internet. Next, **open the i3 config file:** - -``` -nano ~/.config/i3/config -``` - -Go to the end of the file and use the feh command as mentioned: - -``` -# Display Wallpaper -exec_always feh --bg-fill /path/to/wallpaper -``` - -In my case, the wallpaper was in the `Downloads` directory, so my command would look like this: - -![Use feh utility to change background in I3 window manager][16] - -Save changes and exit from the nano text editor. - -To take effect from the changes you made to the config file, restart the i3 window manager using `Mod + Shift + r`. - -Mine looks like this: - -![change wallpaper in the I3 window manager][17] - -### Customize i3 lock screen - -By default, if you want to lock the system, you will have to execute the following command: - -``` -i3lock -``` - -And the lock screen looks like this: - -![lock the i3 window manager][18] - -So here, I will show you: - -- **How to create a custom shortcut to lock the i3 session** -- **How to change the lock screen wallpaper** - -To make the lock screen beautiful, you'd have to use the `i3lock-color` package. - -But first, you'd have to remove the existing `i3lock` as it will conflict with the `i3lock-color`: - -To remove it from Arch: - -``` -sudo pacman -R i3lock -``` - -For Ubuntu/Debian users: - -``` -sudo apt remove i3lock -``` - -Once done, you can install the `i3lock-color` using the AUR helper: - -``` -yay i3lock-color -``` - -And if you're on an Ubuntu base, you'd have to build it from scratch. You can find [detailed instructions on their GitHub page][19]. - -Once you are done with the installation, let's create a new directory and make a new file to store the configuration for the lock screen: - -``` -mkdir ~/.config/scripts && nano ~/.config/scripts/lock -``` - -And paste the following file contents to define the lock screen styling: - -``` -#!/bin/sh - -BLANK='#00000000' -CLEAR='#ffffff22' -DEFAULT='#00897bE6' -TEXT='#00897bE6' -WRONG='#880000bb' -VERIFYING='#00564dE6' - -i3lock \ ---insidever-color=$CLEAR \ ---ringver-color=$VERIFYING \ -\ ---insidewrong-color=$CLEAR \ ---ringwrong-color=$WRONG \ -\ ---inside-color=$BLANK \ ---ring-color=$DEFAULT \ ---line-color=$BLANK \ ---separator-color=$DEFAULT \ -\ ---verif-color=$TEXT \ ---wrong-color=$TEXT \ ---time-color=$TEXT \ ---date-color=$TEXT \ ---layout-color=$TEXT \ ---keyhl-color=$WRONG \ ---bshl-color=$WRONG \ -\ ---screen 1 \ ---blur 9 \ ---clock \ ---indicator \ ---time-str="%H:%M:%S" \ ---date-str="%A, %Y-%m-%d" \ ---keylayout 1 \ -``` - -Save changes and exit from the text editor. - -> 📋 You can find a variety of bash scripts online for different i3 lock screen styles. This is just an example, which should be a minimal option for most. - -Now, make this file executable [using the chmod command][20]: - -``` -sudo chmod +x .config/scripts/lock -``` - -Next, you'd have to introduce some changes to the config file to add the path to this config file to make it work. - -Furthermore, here's where I will show you how you can use the custom keyboard shortcut for the lock screen. - -First, open the config file: - -``` -nano ~/.config/i3/config -``` - -Jump to the end of the line using `Alt + /` and paste the following lines: - -``` -# Shortcut for Lockscreen -bindsym $mod+x exec /home/$USER/.config/scripts/lock -``` - -In the above, I have used `mod + x` as a shortcut to lock the screen, you can use any of your preferred ones. - -And the end would look like this: - -![how to use i3lock color in arch linux][21] - -Pretty neat. Isn't it? - -### Change theme and icons in the i3 Window manager - -I know what you might be thinking. - -Why would you need icons in the first place? But you don't need only to be using CLI tools with the window manager. - -There are times when opting for GUI is more convenient, such as using a file manager. So, when dealing with such utilities, you want to make it look better (and prettier?) - -So in this section, I will show you: - -- **How to change the theme in i3** -- **How to change the icons in i3** - -Let's start with the installation of the theme. - -Here, I will be using the `materia-gtk-theme` and `papirus` icons. But you can use any of your preferred ones. - -To install the theme in Arch, use the following: - -``` -sudo pacman -S materia-gtk-theme papirus-icon-theme -``` - -For Ubuntu/Debian base: - -``` -sudo apt install materia-gtk-theme papirus-icon-theme -``` - -But installing won't get the job done. **You'd have to apply the theme as you use the GNOME tweaks to change the theme.** - -**In i3, you can use the lxappearance utility** to change the theme and icons. - -To install lxappearance in Arch, use the following: - -``` -sudo pacman -S lxappearance -``` - -For Ubuntu/Debian base: - -``` -sudo apt install lxappearance -``` - -Once you are done with the installation, start the dmenu using `Mod + d` and type **lxappearance,** and hit enter on the first result. - -Here, choose the theme of your liking. I'm going with the `Materia-dark` here. - -Select the theme and click on the apply button to apply the changes: - -![][22] - -Similarly, to change the icon, select the `Icon Theme`, choose the icon theme and hit the apply button: - -![Change icons in I3 window manager using lxappearance][23] - -After applying the theme and icons, my file manager looks like this: - -![change theme and icon in i3 window manager][24] - -### Set icons for workspaces in the i3 window manager - -By default, the workspaces are indicated by numbers only, which is not the most ideal way you want to use the workspace. - -So in this section, I will walk you through how you can change the name of the workspaces with appropriate icons. - -To use the icons in the config file, first, you will have to install new fonts named `Awesome`: - -For Arch-based distros: - -``` -sudo pacman -S ttf-font-awesome -``` - -For Ubuntu/Debian base: - -``` -sudo apt install fonts-font-awesome -``` - -Once done, open the i3 config file: - -``` -nano ~/.config/i3/config -``` - -In this config file, look for the workspace section where you will be given variables for each workspace: - -![workspace variables in I3 config file][25] - -In this section, you must interchange the number given to the workspace with what you want to name it. - -I will be naming it as programs as **in the later part of this tutorial, I will show how you can allocate the specific workspace to the specific application.** - -I mostly use the first 5 workspaces, so I will name them accordingly: - -``` -# Define names for default workspaces for which we configure key bindings later on. -# We use variables to avoid repeating the names in multiple places. -set $ws1 "1: Terminal" -set $ws2 "2: Firefox" -set $ws3 "3: VMWare" -set $ws4 "4: Spotify" -set $ws5 "5: Shutter" -set $ws6 "6" -set $ws7 "7" -set $ws8 "8" -set $ws9 "9" -set $ws10 "10" -``` - -Now let's add the icons for each application mentioned in the config file. - -You can [refer to the cheatsheet of the awesome font][26] to find the appropriate icon. - -Copy and paste the icons in front of the name: - -``` -# Define names for default workspaces for which we configure key bindings later> -# We use variables to avoid repeating the names in multiple places. -set $ws1 "1: Terminal" -set $ws2 "2: Firefox" -set $ws3 "3: VMWare" -set $ws4 "4: Spotify" -set $ws5 "5: Shutter" -set $ws6 "6" -set $ws7 "7" -set $ws8 "8" -set $ws9 "9" -set $ws10 "10" -``` - -Don't worry if it looks horrific! - -Once done, exit i3 using the `Mod + e` and log back in again to take effect from the changes you've just made. - -Mine looks like this: - -![][27] - -Do fonts look too small? It's time to address this! - -### Change the font of the title window and bar in the i3 - -First, let's install new fonts. (I will be using Ubuntu fonts here). - -To install the Ubuntu fonts in Arch, use the following: - -``` -sudo pacman -S ttf-ubuntu-font-family -``` - -And if you are on Ubuntu, you already have them installed! - -Once done, open the config file: - -``` -nano ~/.config/i3/config -``` - -In the config file, look for the `font pango:monospace 8` line as this is the default font. - -Once you find that line, add the name of the font and size as shown: - -``` -font pango:Ubuntu Regular 14 -``` - -Now, restart the window manager using the `Mod + Shift + r` and that should do the job: - -![][28] - -### Allocate applications to workspaces in the i3 window manager - -After naming the workspaces, you will want to allocate specific software to that workspace. - -Such as, if I named my second workspace Firefox then I would want to use Firefox only inside that workspace. - -So how do you do that? - -To do so, you must find the name of the class of each application you want to allocate. - -**Sounds complex?** Let me tell you how to do so. - -First, run start the application and terminal side by side. For example, here, I opened the Firefox and terminal side by side: - -![open application and terminal side by side][29] - -Now, execute the xprop command in the terminal, and it will change the cursor shape: - -``` -xprop -``` - -Next, hover the cursor on the application and click anywhere inside the application window as shown: - -![find the class name in i3 window manager][30] - -The class name will be found in the last sting of characters in the following line: - -``` -WM_CLASS(STRING) = "Navigator", "firefox" -``` - -In my case, the class name for the Firefox browser will be `firefox`. - -Repeat the process for all the applications you want to allocate to workspaces. - -**Once you know the class names for every application you want to allocate a workspace, open the configuration file:** - -``` -nano ~/.config/i3/config -``` - -Go to the end of the file in the nano using `Alt + /` and use the following syntax to allocate the applications to the workspace: - -``` -# Allocate applications to workspaces -for_window [class="class_name"] move to workspace $[workspace_variable] -``` - -For reference, here's how my config looks like after allocating 4 workspaces to different applications: - -![Allocate applications to workspaces][31] - -And now, if you open any application from any workspace, it will be placed in to configured workspace automatically. Pretty handy! 😊 - -### Make the terminal transparent in the i3 window manager - -To enable transparency, you must install a picom compositor and make a few changes to the config file. - -So let's start with the installation. - -For Arch-based distro: - -``` -sudo pacman -S picom -``` - -For Ubuntu/Debian base: - -``` -sudo apt install picom -``` - -After the installation, you'd need to instruct the system to use the picom. - -So open the config file first: - -``` -nano ~/.config/i3/config -``` - -Go to the end of the line in the config file and paste the following line: - -``` -# Transparency with picom compositor -exec_always picom -f -``` - -Here, I have used the `-f` flag is used to enable the fading effect while switching between workspaces, opening new applications, etc. - -Save and exit from the text editor. - -Now, restart i3 using `Mod + Shift + r`. - -Next, open the terminal, open Preference, and now, click on the Profiles, select Background, and select the `Transparent background` option. - -From here, you can choose the transparency: - -![change terminal background transperency in I3 window manager][32] - -### Customize the status bar in the i3 WM - -By default, the status bar shows all sorts of information with no icons. - -So in this section, I will be showing how you can remove some elements from the status bar and how you can add icons to them. - -But here, I will be creating a copy of the original status bar available in `/etc/i3status.conf` as if you make any mistake, you can always roll back to the default one. - -First, create a new directory inside the `.config` using the following: - -``` -mkdir .config/i3status -``` - -In the following command, I've used [the cp command to copy files][33]: - -``` -sudo cp /etc/i3status.conf ~/.config/i3status/i3status.conf -``` - -Next, [change the ownership using the chown command][34] which will allow you to make desired changes: - -``` -sudo chown $USER:$USER ~/.config/i3status/i3status.conf -``` - -Now, you must instruct the window manager to use the new i3status config file by modifying the i3 config. So first, open the config file: - -``` -nano ~/.config/i3/config -``` - -In this config file look for the `status_command i3status` line. This is the line where you will be providing the path to the new status config file. - -Once you find that line, make the following changes: - -``` -bar { - status_command i3status -c /home/$USER/.config/i3status/i3status.conf -} -``` - -So, the end result should look like this: - -![change the path of the i3 status config in I3 window manager][35] - -Save changes and exit from the text editor. - -Now, let's remove the unnecessary indicators from the status bar. - -To do so, first, open the i3status config file: - -``` -nano .config/i3status/i3status.conf -``` - -Here, you can comment out the names starting with "order" which are nothing but variables for the indicator. - -**For example, here**, I disabled `ipv6`, `wireless _first_`, `battery all` and `load` as they were unnecessary for me: - -``` -#order += "ipv6" -#order += "wireless _first_" -order += "ethernet _first_" -#order += "battery all" -order += "disk /" -#order += "load" -order += "memory" -order += "tztime local" -``` - -Now, [open the awesome font cheat sheet][26] in the browser and find relevant icons for the items that are listed in the status bar. - -In my setup, I have removed the following: - -- Removed line indicating available RAM -- Removed line showing  speed for my ethernet connection - -And in the end, my bar looks like this: - -![Customize the status bar in the I3 window manager][36] - -### Change the color scheme in the i3 window manager - -This is the most crucial section of this guide, as the most attractive thing in the window manager is the colors you choose to decorate windows. - -> 📋 I will be declaring variables for each color, so it will be easy for you just to change the value of the variable itself, and you'd have a new color scheme in no time. - -So first, open the I3 config file: - -``` -nano ~/.config/i3/config -``` - -And go to the end of the file by using `Alt + /` and use the following syntax to add variables to store colors: - -``` -# Color shemes for windows -set $bgcolor #523d64 -set $in-bgcolor #363636 -set $text #ffffff -set $u-bgcolor #ff0000 -set $indicator #a8a3c1 -set $in-text #969696 -# border background text indicator (a line which shows where the next window will be placed) -client.focused $bgcolor $bgcolor $text $indicator -client.unfocused $in-bgcolor $in-bgcolor $in-text $in-bgcolor -client.focused_inactive $in-bgcolor $in-bgcolor $in-text $in-bgcolor -client.urgent $u-bgcolor $u-bgcolor $text $u-bgcolor -``` - -Here, - -- `bgcolor` indicates the background color. -- `in-bgcolor` indicates background color for inactive windows. -- `text` is for the text color. -- `u-bgcolor` indicates the background for urgent action. -- `indicator` is color for the line, which indicates where the next window will be placed. -- `in-text` text color when inactive. - -And for this guide, I have only used 4 basic classes which are: - -- `client.focused` defines colors for the focused windows. -- `client.unfocused` decides how to decorate windows when not focused. -- `client.focused_inactive` shows colors when one of the containers is focused but does not have the focus at the moment. -- `client.urgent` defines colors when urgent action is needed. - -> 💡 There are more classes than these four; you can refer to the [official i3 configuration manual][37] to learn more. - -Once you make changes to the config file, restart the I3 using `Mod + Shift + r`. - -And if you followed my color scheme, the setup should look like this: - -![change window colors in I3 window manager][38] - -But what about the changing colors for the status bar? Why not! - -#### Changing the color scheme for the status bar in i3 - -In this section, you'd realize why I used variables to store colors, as I will use the same variables to color my status bar! - -To use colors in the status bar, you will have to make changes in the `bar {...}` section of the I3 config file. - -First, open the configuration file: - -``` -nano ~/.config/i3/config -``` - -In the configuration file, look for the `bar {...}` section. - -Once you find the section, create a color section and define colors and classes for the status bar as the same you did for Windows: - -``` -bar { - status_command i3status -c /home/$USER/.config/i3status/i3status.conf - colors { - background $bgcolor - separator #191919 - # border background text - focused_workspace $bgcolor $bgcolor $text - inactive_workspace $in-bgcolor $in-bgcolor $text - urgent_workspace $u-bgcolor $u-bgcolor $text - - } -} -``` - -Here, I have used 3 classes: `focused_workspace`, `inactive_workspace`, and `urgent_workspace` which will define the colors accordingly. - -Once you make changes, save them and restart the I3 and the status bar will have colors too. - -### Make i3 bar transparent - -This section will show you how to make the i3 bar transparent. - -But before that, let's change the fonts for the i3 bar. - -Here, I will use the droid fonts to make it look clean and with a nerdy theme. - -To install droid fonts in Arch, use the following: - -``` -sudo pacman -S ttf-droid -``` - -And for Ubuntu/Debian base: - -``` -sudo apt install fonts-droid-fallback -``` - -Once done, open the config file: - -``` -nano ~/.config/i3/config -``` - -And go to the `bar {...}` section and enter the font name with the size as shown: - -``` -font pango: Droid Sans Mono 11 -``` - -![change fonts in i3 status bar][39] - -Once done, restart the i3, and the fonts will be changed! - -To make the bar transparent, you can use the extra two digits in the existing hexadecimal code to define the transparency. - -And if you want to control transparency, I would recommend you check out this [guide which gives codes ranging from 0 to 100% transparency][40]. - -For this purpose, I will use two new variables in the config file. So first, open the config file: - -``` -nano ~/.config/i3/config -``` - -Here, I changed and added a transparency of 60% to the background color and added 30% transparency to the inactive background color: - -``` -set $bgcolor #523d6499 -set $in-bgcolor #3636364D -``` - -If you notice closely, I've added two-digit numbers in the existing hex color code defining transparency. Such as `99` is used for `60%` transparency whereas `4D` is used for the `30%` transparency. - -Also, I added two new variables with different transparency and the same color as a background to make it look better: - -``` -set $focused-ws #523d6480 -set $bar-color #523d640D -``` - -Once you do so, let's change the bar section to apply transparency. - -Here, you'd have to add two new lines in the `bar {...}`: - -``` -i3bar_command i3bar --transparency -tray_output none -``` - -Remember, using the `tray_output none` line, it won't show any icons in the tray so if you don't want this behavior, skip this and only add the 1st line for transparency. - -Once done, change the color scheme for the bar such as changing the background color,  border, and background for the focused workspace. - -After making changes, the config should look like this: - -![config file to make the I3 bar transparent in I3 window manager][41] - -To take effect from the changes you've made, restart the i3 and you'd have transparent windows and bar: - -![make I3 status bar and windows transparent in I3 window manager][42] - -### Use i3 Blocks in the window manager - -The default bar you get with i3 is useless (in my opinion); how about making it functional? - -In this part, I will explain how you can add: - -- **Package updates** -- **Memory usage** -- **Disk usage** -- **Volume indicator** -- **Spotify indicator** - -> 📋 To do so, you will have to use some scripts that will allow you to add desired actions to your bar. Don't worry; I won't ask you to type scripts manually; various scripts are available on GitHub, covering almost every aspect you'd ever want. - -But before that, you'd have to make some arrangements to store scripts and instruct i3 to use the configuration of i3block instead of i3bar. - -If you followed the given instructions at the beginning of this guide, the i3blocks is already installed, and the config file is located at `/etc/i3blocks.conf`. - -_Want to download the block config files to quickly set them up without reading the rest? Considering you know what you are doing by now, you can download them here:_ - -[i3 Config Files][5] - -For this tutorial, I will create a copy and use that instead of the original config file so let's create a directory first to store the copy of the config file: - -``` -mkdir ~/.config/i3blocks -``` - -Now, create a copy for the original config file: - -``` -sudo cp /etc/i3blocks.conf ~/.config/i3blocks/ -``` - -And finally, use the chown command to change the owner of the file which will let you make the desired changes: - -``` -sudo chown $USER:$USER ~/.config/i3blocks/i3blocks.conf -``` - -To enable the i3blocks, you have to make some changes to the i3 config file: - -``` -nano ~/.config/i3/config -``` - -Go to the `bar {...}` section and here, you'd have to change the status_command with `i3blocks` and add the path to the i3blocks config file as shown: - -![enable i3blocks in i3 window manager][43] - -Once done, restart the I3 window manager using `Mod + Shift + r` and the entire status bar will be changed and look like this: - -![the default look of the i3blocks in i3 window manager][44] - -Don't worry; you will make it more valuable and good-looking than your previous i3bar in no time. - -#### Adding disk block - -Add this block if you want to display the space left on the disk. - -Here, I will use the nano to create and open the config file for the disk block. - -``` -nano ~/.config/scripts/disk -``` - -And paste the following lines: - -``` -#!/usr/bin/env sh -DIR="${DIR:-$BLOCK_INSTANCE}" -DIR="${DIR:-$HOME}" -ALERT_LOW="${ALERT_LOW:-$1}" -ALERT_LOW="${ALERT_LOW:-10}" # color will turn red under this value (default: 10%) - -LOCAL_FLAG="-l" -if [ "$1" = "-n" ] || [ "$2" = "-n" ]; then - LOCAL_FLAG="" -fi - -df -h -P $LOCAL_FLAG "$DIR" | awk -v label="$LABEL" -v alert_low=$ALERT_LOW ' -/\/.*/ { - # full text - print label $4 - # short text - print label $4 - use=$5 - # no need to continue parsing - exit 0 -} -END { - gsub(/%$/,"",use) - if (100 - use < alert_low) { - # color - print "#FF0000" - } -} -' -``` - -Save changes and exit from the text editor. - -Now, make this file executable: - -``` -sudo chmod +x ~/.config/scripts/disk -``` - -Next, open the I3blocks config file : - -``` -nano ~/.config/i3blocks/i3blocks.conf -``` - -And paste the following lines according to whether you want to place the disk block: - -``` -[disk] -command=/home/$USER/.config/scripts/disk -LABEL= -#DIR=$HOME -#ALERT_LOW=10 -interval=30 -``` - -Once done, save the changes and restart the I3 using `Mod + Shift + r` and the available disk space will reflect with the disk icon in the status bar. - -#### Adding memory block - -This will be a block in the status bar indicating the memory used in the system. - -First, create and open a new file for a new block: - -``` -nano ~/.config/scripts/memory -``` - -And paste the following line in the new file: - -``` -#!/usr/bin/env sh -TYPE="${BLOCK_INSTANCE:-mem}" -PERCENT="${PERCENT:-true}" - -awk -v type=$TYPE -v percent=$PERCENT ' -/^MemTotal:/ { - mem_total=$2 -} -/^MemFree:/ { - mem_free=$2 -} -/^Buffers:/ { - mem_free+=$2 -} -/^Cached:/ { - mem_free+=$2 -} -/^SwapTotal:/ { - swap_total=$2 -} -/^SwapFree:/ { - swap_free=$2 -} -END { - if (type == "swap") { - free=swap_free/1024/1024 - used=(swap_total-swap_free)/1024/1024 - total=swap_total/1024/1024 - } else { - free=mem_free/1024/1024 - used=(mem_total-mem_free)/1024/1024 - total=mem_total/1024/1024 - } - pct=0 - if (total > 0) { - pct=used/total*100 - } - # full text - if (percent == "true" ) { - printf("%.1fG/%.1fG (%.f%%)\n", used, total, pct) - } else { - printf("%.1fG/%.1fG\n", used, total) - } - # short text - printf("%.f%%\n", pct) - # color - if (pct > 90) { - print("#FF0000") - } else if (pct > 80) { - print("#FFAE00") - } else if (pct > 70) { - print("#FFF600") - } -} -' /proc/meminfo -``` - -Save changes and exit from the text editor. - -Now, to make this work, you'd have to make this file executable using the following command: - -``` -sudo chmod +x ~/.config/scripts/memory -``` - -Next, open the I3blocks config file: - -``` -nano ~/.config/i3blocks/i3blocks.conf -``` - -And paste the following at the place where you want to show the RAM consumption in the status bar: - -``` -[memory] -command=/home/$USER/.config/scripts/memory -label= -interval=30 -``` - -Save changes and exit from the text editor. Restart i3 to take effect from the changes! - -#### Adding the update indicator block - -This is the most helpful indicator, as it shows the number of old packages that need to be updated. - -First, install use the following command to install dependencies to make this work: - -``` -sudo pacman -S pacman-contrib -``` - -Now, create a new file that will be used to store the script: - -``` -nano ~/.config/scripts/arch-update -``` - -And paste the following: - -``` -#!/usr/bin/env python3 -import subprocess -from subprocess import check_output -import argparse -import os -import re - - -def create_argparse(): - def _default(name, default='', arg_type=str): - val = default - if name in os.environ: - val = os.environ[name] - return arg_type(val) - - strbool = lambda s: s.lower() in ['t', 'true', '1'] - strlist = lambda s: s.split() - - parser = argparse.ArgumentParser(description='Check for pacman updates') - parser.add_argument( - '-b', - '--base_color', - default = _default('BASE_COLOR', 'green'), - help='base color of the output(default=green)' - ) - parser.add_argument( - '-u', - '--updates_available_color', - default = _default('UPDATE_COLOR', 'yellow'), - help='color of the output, when updates are available(default=yellow)' - ) - parser.add_argument( - '-a', - '--aur', - action = 'store_const', - const = True, - default = _default('AUR', 'False', strbool), - help='Include AUR packages. Attn: Yaourt must be installed' - ) - parser.add_argument( - '-y', - '--aur_yay', - action = 'store_const', - const = True, - default = _default('AUR_YAY', 'False', strbool), - help='Include AUR packages. Attn: Yay must be installed' - ) - parser.add_argument( - '-q', - '--quiet', - action = 'store_const', - const = True, - default = _default('QUIET', 'False', strbool), - help = 'Do not produce output when system is up to date' - ) - parser.add_argument( - '-w', - '--watch', - nargs='*', - default = _default('WATCH', arg_type=strlist), - help='Explicitly watch for specified packages. ' - 'Listed elements are treated as regular expressions for matching.' - ) - return parser.parse_args() - - -def get_updates(): - output = '' - try: - output = check_output(['checkupdates']).decode('utf-8') - except subprocess.CalledProcessError as exc: - # checkupdates exits with 2 and no output if no updates are available. - # we ignore this case and go on - if not (exc.returncode == 2 and not exc.output): - raise exc - if not output: - return [] - - updates = [line.split(' ')[0] - for line in output.split('\n') - if line] - - return updates - - -def get_aur_yaourt_updates(): - output = '' - try: - output = check_output(['yaourt', '-Qua']).decode('utf-8') - except subprocess.CalledProcessError as exc: - # yaourt exits with 1 and no output if no updates are available. - # we ignore this case and go on - if not (exc.returncode == 1 and not exc.output): - raise exc - if not output: - return [] - - aur_updates = [line.split(' ')[0] - for line in output.split('\n') - if line.startswith('aur/')] - - return aur_updates - -def get_aur_yay_updates(): - output = check_output(['yay', '-Qua']).decode('utf-8') - if not output: - return [] - - aur_updates = [line.split(' ')[0] for line in output.split('\n') if line] - - return aur_updates - - -def matching_updates(updates, watch_list): - matches = set() - for u in updates: - for w in watch_list: - if re.match(w, u): - matches.add(u) - - return matches - - -label = os.environ.get("LABEL","") -message = "{0}{2}" -args = create_argparse() - -updates = get_updates() -if args.aur: - updates += get_aur_yaourt_updates() -elif args.aur_yay: - updates += get_aur_yay_updates() - -update_count = len(updates) -if update_count > 0: - if update_count == 1: - info = str(update_count) + ' update available' - short_info = str(update_count) + ' update' - else: - info = str(update_count) + ' updates available' - short_info = str(update_count) + ' updates' - - matches = matching_updates(updates, args.watch) - if matches: - info += ' [{0}]'.format(', '.join(matches)) - short_info += '*' - print(message.format(label, args.updates_available_color, info)) - print(message.format(label, args.updates_available_color, short_info)) -elif not args.quiet: - print(message.format(label, args.base_color, 'system up to date')) -``` - -Save changes and exit from the text editor. - -Now, make this file executable using the following: - -``` -sudo chmod +x ~/.config/scripts/arch-update -``` - -Next, open the i3blocks config file: - -``` -nano ~/.config/i3blocks/i3blocks.conf -``` - -And paste the following lines at desired space: - -``` -[arch-update] -command=/home/$USER/.config/scripts/arch-update -interval=3600 -markup=pango -LABEL= -``` - -Save the changes and reload the i3 window manager, and it will show the number of packages that need to be updated. - -And if you are using Ubuntu, you can [follow these instructions on the GitHub page][45]. - -#### Adding volume indicator block - -Adding a volume indicator block takes a little bit more effort as you want to behave as you would expect. So, the things that you need to achieve with the block are: - -- **Adding key bindings to manage volume with media control keys** -- **Adding a volume block indicating the volume** - -But to do so, first, you'd have to install some dependencies. - -So if you are using Arch,  use the following: - -``` -sudo pacman -S pulseaudio-alsa pulseaudio-bluetooth pulseaudio-equalizer pulseaudio-jack alsa-utils playerctl -``` - -And if you're using Ubuntu/Debian base, use the following: - -``` -sudo apt install pulseaudio-module-bluetooth pulseaudio-equalizer pulseaudio-module-jack alsa-utils playerctl -``` - -Now, let's look at how you can enable the media control keys in the i3 window manager. - -First, open the i3 config file: - -``` -nano ~/.config/i3/config -``` - -Go to the end of the file and paste the following: - -``` -# Key bindings for Media control keys -bindsym XF86AudioPlay exec playerctl play -bindsym XF86AudioPause exec playerctl pause -bindsym XF86AudioNext exec playerctl next -bindsym XF86AudioPrev exec playerctl previous -``` - -Now, let's create a new file for this block: - -``` -nano ~/.config/scripts/volume -``` - -And paste the following: - -``` -#!/usr/bin/env bash -if [[ -z "$MIXER" ]] ; then - MIXER="default" - if command -v pulseaudio >/dev/null 2>&1 && pulseaudio --check ; then - # pulseaudio is running, but not all installations use "pulse" - if amixer -D pulse info >/dev/null 2>&1 ; then - MIXER="pulse" - fi - fi - [ -n "$(lsmod | grep jack)" ] && MIXER="jackplug" - MIXER="${2:-$MIXER}" -fi -if [[ -z "$SCONTROL" ]] ; then - SCONTROL="${BLOCK_INSTANCE:-$(amixer -D $MIXER scontrols | - sed -n "s/Simple mixer control '\([^']*\)',0/\1/p" | - head -n1 - )}" -fi - -# The first parameter sets the step to change the volume by (and units to display) -# This may be in in % or dB (eg. 5% or 3dB) -if [[ -z "$STEP" ]] ; then - STEP="${1:-5%}" -fi - -NATURAL_MAPPING=${NATURAL_MAPPING:-0} -if [[ "$NATURAL_MAPPING" != "0" ]] ; then - AMIXER_PARAMS="-M" -fi - -#------------------------------------------------------------------------ - -capability() { # Return "Capture" if the device is a capture device - amixer $AMIXER_PARAMS -D $MIXER get $SCONTROL | - sed -n "s/ Capabilities:.*cvolume.*/Capture/p" -} - -volume() { - amixer $AMIXER_PARAMS -D $MIXER get $SCONTROL $(capability) -} -``` - -Save changes and exit from the config file. - -Next, open the I3blocks config file: - -``` -nano ~/.config/i3blocks/i3blocks.conf -``` - -And paste the following: - -``` -[volume] -command=/home/$USER/.config/scripts/volume -LABEL=♪ -#LABEL=VOL -interval=1 -signal=10 -#STEP=5% -MIXER=default -#SCONTROL=[determined automatically] -#NATURAL_MAPPING=0 -``` - -Save changes and reload the I3 and from now on, the volume shortcuts will work and the indicator will work as expected! - -💡 - -If you face issues like audio/video not working, use this command and it should solve the problem: - -``` -systemctl --user disable --now pipewire.{socket,service} && systemctl --user mask pipewire.socket -``` - -#### Adding Spotify block - -I will be using a script from [firatakandere][46] to add this. You can check it out before going through it. - -First, create and open a new file for the Spotify block: - -``` -nano ~/.config/scripts/spotify.py -``` - -And paste the following: - -``` -#!/usr/bin/python - -import dbus -import os -import sys - - -try: - bus = dbus.SessionBus() - spotify = bus.get_object("org.mpris.MediaPlayer2.spotify", "/org/mpris/MediaPlayer2") - - - if os.environ.get('BLOCK_BUTTON'): - control_iface = dbus.Interface(spotify, 'org.mpris.MediaPlayer2.Player') - if (os.environ['BLOCK_BUTTON'] == '1'): - control_iface.Previous() - elif (os.environ['BLOCK_BUTTON'] == '2'): - control_iface.PlayPause() - elif (os.environ['BLOCK_BUTTON'] == '3'): - control_iface.Next() - - spotify_iface = dbus.Interface(spotify, 'org.freedesktop.DBus.Properties') - props = spotify_iface.Get('org.mpris.MediaPlayer2.Player', 'Metadata') - - if (sys.version_info > (3, 0)): - print(str(props['xesam:artist'][0]) + " - " + str(props['xesam:title'])) - else: - print(props['xesam:artist'][0] + " - " + props['xesam:title']).encode('utf-8') - exit -except dbus.exceptions.DBusException: - exit -``` - -Once done, use the following command to make it executable: - -``` -sudo chmod +x ~/.config/scripts/spotify.py -``` - -Now, open the I3blocks config file: - -``` -nano ~/.config/i3blocks/i3blocks.conf -``` - -And paste the following lines (I would recommend you paste them at the beginning of the block): - -``` -[spotify] -label= -command=/home/$USER/.config/scripts/spotify.py -color=#81b71a -interval=5 -``` - -Save changes, exit from the config file, and restart the I3. - -Once you added the blocks I mentioned, the bar will look like this: - -![][47] - -You can take a look at my home screen with the blocks (by clicking on the image below). - -![Customize the I3blocks in I3 window manager][48] - -> 📋 If you're confused about where those default blocks (documentation and greetings) are, it took me several comments to disable them to achieve the shown look! - -### Use I3 gaps in Linux - -If you want to have gaps between the windows, you can use `i3gaps` and after color schemes, `I3gaps` is the most crucial element in this guide. - -To use the gaps, you must make some changes in the i3 config file. - -So open the I3 config file: - -``` -nano ~/.config/i3/config -``` - -Go to the end of the file and paste the following: - -``` -# default gaps -gaps inner 15 -gaps outer 5 - -# gaps -set $mode_gaps Gaps: (o)uter, (i)nner, (h)orizontal, (v)ertical, (t)op, (r)ight, (b)ottom, (l)eft -set $mode_gaps_outer Outer Gaps: +|-|0 (local), Shift + +|-|0 (global) -set $mode_gaps_inner Inner Gaps: +|-|0 (local), Shift + +|-|0 (global) -set $mode_gaps_horiz Horizontal Gaps: +|-|0 (local), Shift + +|-|0 (global) -set $mode_gaps_verti Vertical Gaps: +|-|0 (local), Shift + +|-|0 (global) -set $mode_gaps_top Top Gaps: +|-|0 (local), Shift + +|-|0 (global) -set $mode_gaps_right Right Gaps: +|-|0 (local), Shift + +|-|0 (global) -set $mode_gaps_bottom Bottom Gaps: +|-|0 (local), Shift + +|-|0 (global) -set $mode_gaps_left Left Gaps: +|-|0 (local), Shift + +|-|0 (global) -bindsym $mod+Shift+g mode "$mode_gaps" - -mode "$mode_gaps" { - bindsym o mode "$mode_gaps_outer" - bindsym i mode "$mode_gaps_inner" - bindsym h mode "$mode_gaps_horiz" - bindsym v mode "$mode_gaps_verti" - bindsym t mode "$mode_gaps_top" - bindsym r mode "$mode_gaps_right" - bindsym b mode "$mode_gaps_bottom" - bindsym l mode "$mode_gaps_left" - bindsym Return mode "$mode_gaps" - bindsym Escape mode "default" -} - -mode "$mode_gaps_outer" { - bindsym plus gaps outer current plus 5 - bindsym minus gaps outer current minus 5 - bindsym 0 gaps outer current set 0 - - bindsym Shift+plus gaps outer all plus 5 - bindsym Shift+minus gaps outer all minus 5 - bindsym Shift+0 gaps outer all set 0 - - bindsym Return mode "$mode_gaps" - bindsym Escape mode "default" -} -mode "$mode_gaps_inner" { - bindsym plus gaps inner current plus 5 - bindsym minus gaps inner current minus 5 - bindsym 0 gaps inner current set 0 - - bindsym Shift+plus gaps inner all plus 5 - bindsym Shift+minus gaps inner all minus 5 - bindsym Shift+0 gaps inner all set 0 - - bindsym Return mode "$mode_gaps" - bindsym Escape mode "default" -} -mode "$mode_gaps_horiz" { - bindsym plus gaps horizontal current plus 5 - bindsym minus gaps horizontal current minus 5 - bindsym 0 gaps horizontal current set 0 - - bindsym Shift+plus gaps horizontal all plus 5 - bindsym Shift+minus gaps horizontal all minus 5 - bindsym Shift+0 gaps horizontal all set 0 - - bindsym Return mode "$mode_gaps" - bindsym Escape mode "default" -} -mode "$mode_gaps_verti" { - bindsym plus gaps vertical current plus 5 - bindsym minus gaps vertical current minus 5 - bindsym 0 gaps vertical current set 0 - - bindsym Shift+plus gaps vertical all plus 5 - bindsym Shift+minus gaps vertical all minus 5 - bindsym Shift+0 gaps vertical all set 0 - - bindsym Return mode "$mode_gaps" - bindsym Escape mode "default" -} -mode "$mode_gaps_top" { - bindsym plus gaps top current plus 5 - bindsym minus gaps top current minus 5 - bindsym 0 gaps top current set 0 - - bindsym Shift+plus gaps top all plus 5 - bindsym Shift+minus gaps top all minus 5 - bindsym Shift+0 gaps top all set 0 - - bindsym Return mode "$mode_gaps" - bindsym Escape mode "default" -} -mode "$mode_gaps_right" { - bindsym plus gaps right current plus 5 - bindsym minus gaps right current minus 5 - bindsym 0 gaps right current set 0 - - bindsym Shift+plus gaps right all plus 5 - bindsym Shift+minus gaps right all minus 5 - bindsym Shift+0 gaps right all set 0 - - bindsym Return mode "$mode_gaps" - bindsym Escape mode "default" -} -mode "$mode_gaps_bottom" { - bindsym plus gaps bottom current plus 5 - bindsym minus gaps bottom current minus 5 - bindsym 0 gaps bottom current set 0 - - bindsym Shift+plus gaps bottom all plus 5 - bindsym Shift+minus gaps bottom all minus 5 - bindsym Shift+0 gaps bottom all set 0 - - bindsym Return mode "$mode_gaps" - bindsym Escape mode "default" -} -mode "$mode_gaps_left" { - bindsym plus gaps left current plus 5 - bindsym minus gaps left current minus 5 - bindsym 0 gaps left current set 0 - - bindsym Shift+plus gaps left all plus 5 - bindsym Shift+minus gaps left all minus 5 - bindsym Shift+0 gaps left all set 0 - - bindsym Return mode "$mode_gaps" - bindsym Escape mode "default" -} -``` - -Save changes and exit from the config file. - -Reload i3 using `Mod + Shift + r` and you'd see the gaps between windows: - -![use i3gaps in i3 window manager][49] - -But what if you want to resize the gaps? It is quite simple and can be done in simple steps: - -- Press `Mod + Shift + g` to enter the gaps mode -- Choose what you want to change by using the given options -- Use `+` or `-` to increase/decrease gaps -- Once done, press the `Esc` key to exit the gaps mode - -And that's it! - -### Did we forget to customize the Terminal? - -Fret not; you can [switch to ZSH][50], a different shell, to make the terminal look different or explore some lesser-known [Linux shells][51]. - -Either way, you can [customize the existing terminal][52] or pick different [terminal emulators][53]. - -**I hope you will no longer fear ricing!** 😎 - -_If you have any suggestions or want to show off your setup, please do so in the comments section._ - --------------------------------------------------------------------------------- - -via: https://itsfoss.com/i3-customization/ - -作者:[Sagar Sharma][a] -选题:[lkxed][b] -译者:[译者ID](https://github.com/译者ID) -校对:[校对者ID](https://github.com/校对者ID) - -本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译,[Linux中国](https://linux.cn/) 荣誉推出 - -[a]: https://itsfoss.com/author/sagar/ -[b]: https://github.com/lkxed/ -[1]: https://itsfoss.com/content/images/2023/04/linux-mint-i3.jpg -[2]: https://itsfoss.com/best-window-managers/ -[3]: https://www.reddit.com/r/unixporn?ref=itsfoss.com -[4]: https://itsfoss.com/content/images/2023/04/How-to-configure-i3-window-manager-with-i3blocks-and-i3gaps-in-linux.png -[5]: https://github.com/itsfoss/text-files/tree/master/i3_config_files?ref=itsfoss.com -[6]: https://itsfoss.com/content/images/2023/04/use-lightdm-to-use-the-i3-wm-in-arch.png -[7]: https://itsfoss.com/content/images/2023/04/create-configuration-file-for-i3.png -[8]: https://itsfoss.com/content/images/2023/04/choose-the-mod-key-in-i3.png -[9]: https://itsfoss.com/content/images/2023/04/Using-I3-on-arch-linux.png -[10]: https://itsfoss.com/aur-arch-linux/ -[11]: https://itsfoss.com/best-aur-helpers/ -[12]: https://itsfoss.com/content/images/2023/04/find-connected-display-in-I3.png -[13]: https://linuxhandbook.com/beginning-end-file-nano/?ref=itsfoss.com -[14]: https://itsfoss.com/content/images/2023/04/change-display-resolution-in-I3-permanently.png -[15]: https://linuxhandbook.com/nano-save-exit/?ref=itsfoss.com -[16]: https://itsfoss.com/content/images/2023/04/Use-feh-utility-to-change-background-in-I3-window-manager.png -[17]: https://itsfoss.com/content/images/2023/04/change-wallpaper-in-I3-window-manager.png -[18]: https://itsfoss.com/content/images/2023/04/how-to-lock-the-I3-window-manager.gif -[19]: https://github.com/Raymo111/i3lock-color?ref=itsfoss.com -[20]: https://linuxhandbook.com/chmod-command/?ref=itsfoss.com -[21]: https://itsfoss.com/content/images/2023/04/how-to-use-i3lock-color-in-arch-linux-1.png -[22]: https://itsfoss.com/content/images/2023/04/Change-theme-in-I3-window-manager-using-lxappearance.png -[23]: https://itsfoss.com/content/images/2023/04/Change-icons-in-I3-window-manager-using-lxappearance.png -[24]: https://itsfoss.com/content/images/2023/04/change-theme-and-icon-in-i3-window-manager.png -[25]: https://itsfoss.com/content/images/2023/04/workspace-variables-in-I3-config-file.png -[26]: https://fontawesome.com/v5/cheatsheet?ref=itsfoss.com -[27]: https://itsfoss.com/content/images/2023/04/workspace-icons.png -[28]: https://itsfoss.com/content/images/2023/04/change-font-of-the-workspace-and-titlebar-in-I3-window-manager.png -[29]: https://itsfoss.com/content/images/2023/04/open-application-and-terminal-side-by-side.png -[30]: https://itsfoss.com/content/images/2023/04/find-the-class-name-in-i3-window-manager.gif -[31]: https://itsfoss.com/content/images/2023/04/Allocate-specific-applications-to-specific-workspaces-in-I3-window-manager.png -[32]: https://itsfoss.com/content/images/2023/04/change-terminal-background-transperency-in-I3-window-manager.png -[33]: https://linuxhandbook.com/cp-command/?ref=itsfoss.com -[34]: https://linuxhandbook.com/chown-command/?ref=itsfoss.com -[35]: https://itsfoss.com/content/images/2023/04/change-the-path-of-the-i3-status-config-in-I3-window-manager.png -[36]: https://itsfoss.com/content/images/2023/04/Customize-the-status-bar-in-the-I3-window-manager.png -[37]: https://i3wm.org/docs/userguide.html?ref=itsfoss.com#client_colors -[38]: https://itsfoss.com/content/images/2023/04/change-window-colors-in-I3-window-manager.png -[39]: https://itsfoss.com/content/images/2023/04/change-fonts-in-i3-status-bar.png -[40]: https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4?ref=itsfoss.com -[41]: https://itsfoss.com/content/images/2023/04/config-file-to-make-the-I3-bar-transparent-in-I3-window-manager-1.png -[42]: https://itsfoss.com/content/images/2023/04/make-I3-status-bar-and-windows-transparent-in-I3-window-manager-3.png -[43]: https://itsfoss.com/content/images/2023/04/enable-i3blocks-in-i3-window-manager.png -[44]: https://itsfoss.com/content/images/2023/04/the-default-look-of-the-i3blocks-in-i3-window-manager.png -[45]: https://github.com/vivien/i3blocks-contrib/tree/master/apt-upgrades?ref=itsfoss.com -[46]: https://github.com/firatakandere?ref=itsfoss.com -[47]: https://itsfoss.com/content/images/2023/04/blocks-i3.jpg -[48]: https://itsfoss.com/content/images/2023/04/Customize-the-I3blocks-in-I3-window-manager.png -[49]: https://itsfoss.com/content/images/2023/04/use-i3gaps-in-i3-window-manager.png -[50]: https://itsfoss.com/zsh-ubuntu/ -[51]: https://itsfoss.com/shells-linux/ -[52]: https://itsfoss.com/customize-linux-terminal/ -[53]: https://itsfoss.com/linux-terminal-emulators/