打造一個美學偏執狂的 Mac 終端機

zsh + oh-my-zsh + Powerlevel9k 徹底美化你的 Terminal

林瀚軒 Han-Hsuan Lin
11 min readNov 12, 2019

--

身為一個開發者,我們需要花費大量的時間在終端機上輸入 Command Line 指令,縱使現在有許多 GUI 工具能代替終端機(Sourcetree 代替 git command line tool 等等),但在許多更底層的應用,或是在 Server 上進行 Coding,終端機仍是不可或缺的。

然而,第一次打開傳說中的終端機,看到的卻是這個畫面:

Mac 預設終端機視窗(Photo: Tom Nelson

What The F……

這是什麼詭異的東西…,不僅功能十分簡陋,美感更可以說是沒有,難道我要看著這個視窗四年、四十年、甚至一輩子?

當然是

那如果是這樣呢:

(Photo: Github — powerlevel9k/powerlevel9k)

嗯……有意思多了
所以,我決定挽起袖子好好的改造我的終端機。然而,如何打造一個具美感、同時富有實用性的終端機呢?讓我們繼續看下去。

準備開始

安裝步驟如下:

1.安裝 Homebrew
2.安裝 zsh
3.安裝 oh-my-zsh
4.安裝 Nerd Font
5.安裝 Powerlevel9k
6.設定 Powerlevel9k

那麼,開始吧。

1. 安裝 Homebrew

Homebrew 是 macOS 的第三方套件管理工具,相當於 Ubuntu/Debian 上的 APT。
如果沒有安裝 Homebrew 的話,可以直接輸入指令進行安裝:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

2. 安裝 zsh

shell 是讓使用者與作業系統核心(Kernel)溝通的介面,也就是你打開終端機後會看到的輸入介面。
Mac 終端機預設的 shell 軟體是 bash,而我們要安裝另外一個 shell 軟體 ——zsh。

安裝 zsh,輸入以下指令:

brew install zsh

完成後,我們將終端機預設的 bash 改成剛剛安裝好的 zsh:

chsh -s $(which zsh)

重新打開終端機,如果進入 zsh 就代表更改成功囉!

3. 安裝 oh-my-zsh

更改成 zsh 之後,是不是發現終端機比以往更簡陋了呢(笑)
別擔心,革命尚未成功。

zsh 是一個可塑性與延展性極大的 shell 軟體,有著非常多的自訂功能,但前提是 —— 你要自己裝。

幸好,oh-my-zsh 這個套件提供了許多外掛與設定檔,來讓 zsh 更好設定與操作。輸入以下指令來安裝:

sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

安裝完成後會看到以下畫面,就代表安裝完成囉!

4. 安裝 Nerd Font

由於我們使用的主題會用到許多特殊的 icon,因此需要安裝特殊的字體。否則就會呈現如下的框框問號:

缺少特殊 icon
安裝特殊字體後

這裡我們選用的是 Nerd Font 這個字體包,它整合了包含本主題需要用到的 Powerline Symbols 在內的各大字體包,形成一個完整的 icon 集

Nerd Font 整合的字體包們

Nerd Font 開發團隊已經將其 icon 整合進許多現有的字體內,我們只要下載安裝後選用即可。這裡選用的是 Coding Font 之中頗受好評的 Hack 字體:

Hack Regular Nerd Font Complete Mono 字體

點擊上面連結後,在頁面中點擊 Download:

下載完成後,點擊字體檔案並安裝:

裝完後,打開終端機的偏好設定 -> 描述檔 -> 目前使用的主題 -> 「文字」標籤,將字體更換為剛剛裝好的字體:

這裡還有很多整合 Nerd Font 的字體,你也可以自己下載一個來安裝。但注意,請盡量安裝名字有 Mono 的等寬字體,顯示上比較不會亂掉喔!

萬事俱備,接下來要進入重頭戲了。

5. 安裝 Powerlevel9k

裝到目前為止,你的終端機應該長這樣:

……有點顏色了,但實在稱不上厲害,對吧?

那是因為 zsh 目前還在使用 oh-my-zsh 的預設主題 robbyrussel,接下來,我們即將安裝本次所使用的主題 —— Powerlevel9k,讓你的終端機一路邁向炫砲的巔峰。

輸入以下指令來下載 Powerlevel9k 主題:

git clone https://github.com/bhilburn/powerlevel9k.git ~/.oh-my-zsh/custom/themes/powerlevel9k

接下來,打開 zsh 的設定檔 ~/.zshrc :

vim ~/.zshrc
zshrc

ZSH_THEME"robbyrussell" 改為 "powerlevel9k/powerlevel9k"

大功告成!!!!!!了嗎?

6. 設定你的 Powerlevel9k

Powerlevel9k 順利跑出來了!但怎麼好像跟我們原先的目標長得不太一樣?那是因為現在顯示的是預設的畫面,powerlevel9k 提供了豐富的指令,能讓我們調整顏色、配置顯示內容、甚至還能加入自訂程式,讓 Command Line 的自由度最大化,現在就來個人化你的 Powerlevel9k 吧!

首先,來設定 Command Line 上會出現的元件。打開你的 ~/.zshrc 加入以下指令:

# 在 Command Line 左邊想要顯示的元件,以空格分隔
POWERLEVEL9K_LEFT_PROMPT_ELEMENTS=(context ram dir dir_writable vcs)
# 在 Command Line 右邊想要顯示的元件,同樣以空格分隔
POWERLEVEL9K_RIGHT_PROMPT_ELEMENTS=(command_execution_time status time)

設定完後會呈現這樣(記得退出終端機重開或執行 exec $SHELL 才會生效喔):

自訂元件後的 Command Line

這些元件的功能分別是:

context :顯示使用者帳號名稱、Host Name 等資訊,或是自訂的文字內容
ram :顯示剩餘的 RAM 空間
dir :顯示目前資料夾路徑
dir_writable :顯示目前資料夾是否可讀寫,如果進入唯讀的資料夾會顯示:

進入唯讀資料夾會顯示鎖頭圖案

vcs :顯示目前資料夾的 Git 資訊,如果進入 Git Project 的資料夾會顯示:

進入 Git Project 會顯示 Git 資訊

command_execution_time :顯示上一個指令執行的時間
status :顯示上一個指令執行的狀態(成功或是顯示錯誤碼)
time :名符其實,顯示時間

除此之外,還有許多實用的元件,你可以在這裡找到它們

接下來來設定顏色吧,在 ~/.zshrc 中加入以下指令:

# Context 元件的顏色
POWERLEVEL9K_CONTEXT_DEFAULT_BACKGROUND='017'
POWERLEVEL9K_CONTEXT_DEFAULT_FOREGROUND='231'
# Ram 元件的顏色
POWERLEVEL9K_RAM_BACKGROUND='025'
POWERLEVEL9K_RAM_FOREGROUND='231'
# Dir 元件的顏色
POWERLEVEL9K_DIR_HOME_BACKGROUND='248'
POWERLEVEL9K_DIR_HOME_FOREGROUND='000'
POWERLEVEL9K_DIR_HOME_SUBFOLDER_BACKGROUND='248'
POWERLEVEL9K_DIR_HOME_SUBFOLDER_FOREGROUND='000'
POWERLEVEL9K_DIR_DEFAULT_BACKGROUND='217'
POWERLEVEL9K_DIR_DEFAULT_FOREGROUND='000'
POWERLEVEL9K_DIR_ETC_BACKGROUND='160'
POWERLEVEL9K_DIR_ETC_FOREGROUND='231'
# Status 元件的顏色
POWERLEVEL9K_STATUS_OK_BACKGROUND='039'
POWERLEVEL9K_STATUS_OK_FOREGROUND='000'

設定完之後會呈現這樣:

顏色美化後的 Command Line

是不是好看許多呢!

顏色指令中的三位數字是色碼,你可以輸入以下指令來找出所有色碼與它的顏色:

for code ({000..255}) print -P -- "$code: %F{$code}This is how your text would look like%f"
轉吧,轉吧,七彩霓虹燈

剛剛我們有提到 Context 的內容可以自行設定,接下來我們就來試試看吧!在 ~/.zshrc 中加入以下指令:

POWERLEVEL9K_CONTEXT_TEMPLATE='你想要顯示的內容'
# 以下這是筆者的設定內容
# POWERLEVEL9K_CONTEXT_TEMPLATE='\uFCA4 Han-Hsuan Lin'

設定完後顯示如下:

自訂的 Context 顯示內容

Command Line 前方成功變成自己想要的字了!

這裡有個不算實用的小技巧:你可以在自訂文字內容中,加入先前安裝的 Nerd Font 字體包之中的 icon,如筆者使用的 \uFCA4,是一個特殊 icon 的 Unicode 編碼,你可以在 Nerd Font Cheatsheet 中尋找喜歡的 icon,找到它的四位數 Unicode 編碼,前方加入 \u ,就能顯示 Nerd Font 的 icon 囉!

至於筆者使用的 icon 是什麼,在此先不多言(笑

最後,有些元件有使用到 Nerd Font 的 icon,但由於不是每個人都會裝 Nerd Font,因此預設為關閉。既然裝了 Nerd Font,就把它們打開吧!

~/.zshrc 中加入以下指令:

POWERLEVEL9K_MODE='nerdfont-complete'
多了幾個 icon 呢!

到這裡,我們已經完成終端機的美化了,有美學偏執狂我/我們,終於不用再忍受簡陋的介面來輸入指令了,可謂可喜可賀,可喜可賀。

其實 Powerlevel9k 能夠自訂的內容非常多元,也相當複雜,因此本篇僅使用較為簡單的方式進行設定,關於設定 Powerlevel9k,筆者未來預計會寫一篇專文來介紹,你也可以研究官方文件,無師自通,期待你也能成為終端機美化的魔人!

--

--

林瀚軒 Han-Hsuan Lin

Frontend Developer, UI/UX Design, Graphic Design. Love to travel and explore.