『 纸上得来终觉浅,绝知此事要躬行 』


I3wm 配置思路

2021.01.28 | 本文总阅读量

之前看到了一份 i3wm nord 配色的主题展示图,瞬间激起我重新捏一套 i3 配置的欲望,本文主要阐述我在 gentoo 上配置一份基于 nord 配色的 i3 主题的思路和流程。

1 我的环境

  • Gentoo linux

  • i3-gaps

  • rofi

  • polybar

  • alacritty

  • feh

  • i3lock-color

  • picom

    我的配置环境是 gentoo linux,所以会增加一些开启 use 的额外操作,其他发行版可忽略。

2 具体配置

2.1 安装基本软件

$ sudo emerge -aq i3-gaps 

i3-gaps 可以在窗口间提供间隔,虽然会挤占一部分屏幕空间,但是非常美观。

$ sudo emerge -aq feh

feh 是一个简单的图片查看器和壁纸设置软件。

$ sudo emerge -aq polybar 

polybar 是一个优秀的 bar 组件,支持 font awesomenerd fontweather icons 等多种字体,但注意它不支持图片,所以无法提供任务栏这样的 module

它最突出的优点就是将显示内容模块化,例如显示网速和显示时间等模块,还支持鼠标点击和滚轮操作,这是 i3bar 等没有的。

建议开启以下 use

  • alsa 或者 pulseaudio

    提供声音模块支持,以便显示和切换当前音量

  • i3wm

    提供 i3wm 模块支持,以便显示 i3wmworkspace 并支持切换

  • ipc

    提供 polybar 内建的命令支持,包括显示和隐藏 polybar

  • network

    提供网络模块支持,用来显示网速

  • mpd

    这个和 ncmpcpp 配套,用来显示和切换当前音乐

$ sudo emerge -aq rofi

rofi 是一个很优秀的应用选择器,比 dmenu 多出不少功能,例如 ssh 和切换当前活动窗口等。

建议开启 drunwindowmode 这两个 use,前者可以支持显示拥有 desktop 文件的应用,后者能让 rofi 像个正常窗口一样运行,这对于后面利用 rofi 做一个 powermenu 什么的很有用。

$ sudo emerge -aq alacritty tilda

alacritty 支持 GPU 加速渲染,轻量且配置简洁,配置文件支持 live reloadtilda 是一款纯 gtk 下拉终端,不会引入过多依赖。

$ sudo emerge -aq i3lock-color

i3lock-colori3lock 的一个 fork,它增加了诸如显示时间和模糊背景的支持。

$ sudo emerge -aq picom

picom 是混成器,用来提供透明、阴影和窗口圆角等特效,我没有选择带有模糊特效的分支,因为 kawase blur 性能有些差,想再等等看。

2.2 具体配置

以下主要提供几个选择方案或者直接叙述我的方案

2.2.1 如何进入 i3wm

进入 i3 一般有两种方案,其一是 startx,其二是使用 dm

我推荐后者,startx 需要额外考虑一些环境变量问题。例如 export XDG_SESSION_TYPE="x11" 来告诉某些应用这是 xorg 会话。

针对于 gentoo 用户还可能需要考虑 eval "$(dbus-launch --sh-syntax --exit-with-session)" 来正常启动 dbus

$ sudo emerge -aq sddm
$ systemctl enable sddm

推荐使用 sddm-theme-chili 效果如下图

2.2.2 修改 i3 配置文件

注: Arch linux 的默认配置文件 dmenu 那行有两个示例,所以会冲突,自己修改一下就好了,gentoo 的默认示例是正常的。

配置文件在 ~/.config/i3/config 先设置一下 mod 键,我这里 Mod4 是指 meta,也就是键盘上有 windows logo 的那个键

set $mod Mod4

再设置一下窗口标题栏的字体,我无所谓,保持默认,因为我会把标题栏都去掉

font pango:monospace 8

nm-applet 开起来,用于显示网络托盘图标,需要安装 gnome-extra/nm-applet

exec --no-startup-id nm-applet

我使用的是 pulseaudio,所以我使用 pactl 来调节音量

bindsym XF86AudioRaiseVolume exec --no-startup-id pactl set-sink-volume @[email protected] +5%
bindsym XF86AudioLowerVolume exec --no-startup-id pactl set-sink-volume @[email protected] -5%
bindsym XF86AudioMute exec --no-startup-id pactl set-sink-mute @[email protected] toggle
bindsym XF86AudioMicMute exec --no-startup-id pactl set-source-mute @[email protected] toggle

我使用 xbacklight 来调节亮度,你也可以选择安装其他的

bindsym XF86MonBrightnessUp exec xbacklight -inc 5
bindsym XF86MonBrightnessDown exec xbacklight -dec 5

设置快捷键开启 alacritty

bindsym $mod+Return exec alacritty

设置快捷键开启 rofi

bindsym $mod+d exec --no-startup-id rofi -show drun

设置一下颜色主题,这个比较重要,建议根据自己的配色来微调。 依次是边框颜色、背景色、文本颜色、焦点指示顔色和子窗口的边框颜色。

# Theme colors
# <colorclass> <border> <background> <text> <indicator> <child_border>
client.focused            #84FFFF      #5E81AC     #E5E9F0     #E5E9F0       #ECECEC
client.focused_inactive   #4C556A      #84FFFF     #2E3440     #ECECEC       #ECECEC
client.unfocused          #84FFFF      #84FFFF     #171717     #ECECEC       #ECECEC
client.urgent             #BF616A      #BF616A     #ffffff     #268BD2
client.placeholder        #84FFFF      #909090     #FFFFFF     #268BD2

Hint: 可以采用在线的编辑预览 i3-configurator

bar 那几行注释掉,因为它是启用 i3bar,而我是使用 polybar 的。

#bar {
#        status_command i3status
#}

设置窗口参数

for_window [class="^.*"] border pixel 2 # 把所有的窗口边框设为 2 像素
new_window 1pixel # 去掉标题栏

设置 gaps,参数根据自己屏幕尺寸微调就行

gaps inner 6
gaps outer 4

设置一些需要自启的软件,下面是我的示例

exec --no-startup-id picom --experimental-backends -b # 启动 picom
exec_always --no-startup-id numlockx on # 开启小键盘
exec_always feh --bg-scale "path_to_wallpaper" # 设置壁纸
exec --no-startup-id dunst & # 桌面通知
exec --no-startup-id copyq & # 剪切板管理器
exec --no-startup-id fcitx5 & # fcitx5 输入法
exec_always --no-startup-id $HOME/.config/polybar/launch.sh # 开启 polybar

额外设置一些快捷键

bindsym $mod+Shift+s exec --no-startup-id flameshot gui # 设置火焰截图
bindsym $mod+p exec --no-startup-id polybar-msg cmd toggle # 设置快捷键来显示隐藏 polybar
bindsym $mod+q exec --no-startup-id "$HOME/.config/rofi/powermenu.sh" # 启用基于 rofi 的 powermenu

其他没有提到的设置我都是默认

2.2.3 配置其他的组件

dunst

桌面通知管理器,用到它的时候其实很少,我就简单的配置了一下 ~/.config/dunst/dunstrc

[global]
	monitor = 0
	follow = mouse
	geometry = "320x6-30+60"
	indicate_hidden = yes
	shrink = no
	notification_height = 15
	separator_height = 1
	padding = 10
	horizontal_padding = 10
	frame_width = 2
	frame_color = "#aaaaaa"
	separator_color = frame
	sort = yes
	idle_threshold = 120
	font = Noto Sans Mono SC 14
	line_height = 0
	markup = full
	format = "<span><b>%s %p</b></span>\n%b"
	alignment = left
	show_age_threshold = 60
	word_wrap = yes
	ellipsize = middle
	ignore_newline = no
	stack_duplicates = true
	hide_duplicate_count = false
	show_indicators = yes
	icon_position = left
	max_icon_size = 48
	icon_path = /usr/share/icons/Arc/status/48/:/usr/share/icons/Arc/devices/48/:/usr/share/icons/Papirus/48x48/apps/
	sticky_history = yes
	history_length = 20
	always_run_script = true
	startup_notification = false
	verbosity = mesg
	corner_radius = 5
	force_xinerama = false
	mouse_left_click = do_action
	mouse_middle_click = close_all
	mouse_right_click = close_current


[shortcuts]
	#close = ctrl+space
	#history = ctrl+shift+space
	#context = ctrl+shift+period


[urgency_low]
	# IMPORTANT: colors have to be defined in quotation marks.
	# Otherwise the '#' and following  would be interpreted as a comment.
	background="#2B2F36"
	foreground="#b6a49b"
	timeout = 5


[urgency_normal]
	background="#2B2F36"
	foreground="#b6a49b"
	timeout = 10


[urgency_critical]
	background="#2B2F36"
	foreground="#b6a49b"
	timeout = 0

效果如下

picom

混成器是美化 i3 的重要组件,~/.config/picom/picom.conf

首先我们把一些基本参数设置好

experimental-backends = true; # 实验特性打开,如果你下一行选了 glx 的话(在 i3 config 里依然要加上)
backend = "glx";
glx-no-stencil = true;
glx-no-rebind-pixmap = true;
glx-copy-from-front = false;
use-damage = false; # 解决息屏再亮屏,屏幕闪烁问题,会增加功耗
vsync = true; # 垂直同步

其次我们设置阴影(虽然我现在没有打开) 注: 圆角矩形窗口不建议开黑色阴影,会出现毛刺

shadow = false;
shadow-exclude = [
	"name = 'Notification'",
	"name = 'MPV'",
	"name *= 'Telegram'",
	"name *= 'picom'",
	"name *= 'firefox'",
	"name = 'polybar-main_eDP1'",
	"name *= 'pcmanfm'",
	"name *= 'feeluown'",
	"name *= 'VirtualBox Machine'"
];
shadow-radius = 12;
shadow-offset-x = -5;
shadow-offset-y = -5;
shadow-opacity = 0.5;

再然后设置窗口透明

opacity = 1;
inactive-opacity = 1.0; # 这里可以设置不活动窗口的透明度,辅助显示窗口焦点
frame-opacity = 1.0;
inactive-opacity-override = false;
opacity-rule = [
	# "80:class_g = 'Alacritty'",
	# "80:class_g *?= 'rofi'"
	"95:class_g = 'Code'",
	"90:class_g = 'FeelUOwn'",
	"95:class_g = 'dunst'",
	"90:class_g = 'Tilda'"
];

设置一下淡入淡出效果

fading = true;
fade-delta = 3;
fade-in-step = 0.03;
fade-out-step = 0.03;

最后把一些焦点检测和圆角检测设置好

inactive-dim = 0.0;
mark-wmwin-focused = true;
mark-ovredir-focused = true;
detect-rounded-corners = true;
detect-client-opacity = true;

rofi

这里就不细讲了,我直接捏了几个组件,大家可以直接看文末的配置链接

其一,rofi 主窗口,采用官仓的 material 主题,支持 ssh, window, run, drun 四个模式

├── config.rasi
└── material.rasi

其二,结合 polybar 的一个应用启动器,用鼠标控制,基于 nord 配色

├── colors.rasi
└── launcher.rasi

其三,基于 nordic 配色的一个 powermenu,支持关机、锁屏和注销

├── nordic.rasi
├── powermenu.rasi
└── powermenu.sh

polybar

从别人那里学到的配置结构,感觉清爽多了

├── colors.ini 
├── config.ini
├── fonts.ini
├── include-modules.ini
├── launch.sh
├── modules
└── scripts

示意图不贴了,上面几张图里有,依次的 modules 是:

1. gentoo logo:显示 gentoo logo 并鼠标左键点击唤出 rofi launcher
2. i3 workspace:显示 i3 的工作区,鼠标点击或者滚轮可以切换
3. wlan:显示 wifi 下载速度
4. cpu:显示 cpu占用
5. memory:显示内存占用
6. pulseaudio:显示音量,点击静音,滚轮调节
7. xbacklight:显示亮度,滚轮调节
8. battery:电池,充电时显示动画
9. time:显示时间,鼠标单击显示日期
10. tray:自带的托盘图标区域

i3lock-color

如果喜欢简单素雅,可以直接抄文末链接中的配置,示例如下

也可以简单的用 imagemagick 加一点二次元,比如我比较喜欢的小巫女

或者选用某些组图来轮换显示,比如我喜欢的 touhou

2.3 协调统一应用主题

针对 gtk 应用,选用 nordic-darker 主题,利用 lxapparance 来设置

例如 lutris

针对 qt 应用,选用 nordic-darker 应用样式,利用 kvantum 来设置

例如 qbittorrent

那不吃系统主题的应用怎么办呢?那只有单独设置了,均选用相同配色主题,具体不详述

例如火狐

例如 telegram

2.4 一些 tips

videowallpaper

每次鬼刀交新货会玩玩视频壁纸,利用 xwinwrap 调用 mpv 来硬解视频做壁纸

neofetch

按照惯例需要交一份 neofetch,从某位群友那边学的配置

3 总结

其实大体上的思路就是基于某个配色捏出一整套配置出来,我现在这份还并不算协调,某些配色还有瑕疵。大家可以作为参考,从而捏合出属于自己的配置。

4 参考和我的配置

发表评论