# 打造優美的Terminal Fluent Terminal
###### tags: `Windows` `Terminal`
## 前言
> 先看看效果吧
todo:: 公司網路不能上傳 待補
## powerShell
> 本日主角 優美的Terminal 從此開始改動
### 安裝
> https://docs.microsoft.com/zh-tw/skypeforbusiness/set-up-your-computer-for-windows-powershell/download-and-install-windows-powershell-5-1
## 套件管理系統
選一套安裝就好
- [CHOCOLATEY](https://chocolatey.org/)
- [Scoop](https://scoop.sh/)
> 這兩套是windows 套件管理系統 看個人喜好進行安裝 跟 mac [Homebrew](https://brew.sh/index_zh-tw) 異曲同工之妙
### 安裝
- Chocolatey
```bash=
Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))
```
- Scoop
```bash=
scoop install curl
```
```bash=
Invoke-Expression (New-Object System.Net.WebClient).DownloadString('https://get.scoop.sh')
# or shorter
iwr -useb get.scoop.sh | iex
```
## [Fluent-terminal](https://github.com/felixse/FluentTerminal)
### 安裝
- choco
```bash=
choco install fluent-terminal
```
記得輸入```A``` 同意全部
- Scoop
```bash=
scoop install 7zip git
scoop bucket add nonportable
scoop install fluent-terminal-np
```
## [Oh-my-posh](https://ohmyposh.dev/)
長得很像 Mac的 Oh-my-zsh 有很多主題可以選擇 也可以自由的客製化 想顯示的terminal 資訊
### 安裝
```bash=
Install-Module posh-git -Scope CurrentUser
Install-Module oh-my-posh -Scope CurrentUser
```
### 配置
修改powerShell setting
若是電腦沒有配置設定文件 請先輸入
```bash=
if (!(Test-Path -Path $PROFILE)) {New-Item -Type File -Path $PROFILE -Force}
```
產生一份powerShell的設定檔
使用vscode進行修改
```bash=
code $PROFILE # 如果不是用 VSCode 請用自己的編輯器開（如 notepad)
```
打開後請輸入以下設定檔
```
Import-Module posh-git # 引入上方安裝的套件
Import-Module oh-my-posh # 引入 oh my posh
Set-PoshPrompt -Theme Agnoster # 要用的 Theme
Set-Item -Path Env:Username -Value ($Env:Username = "ken") # your pc username，用來隱藏本機名 Username = ken
```
## 字體
由於這些主題有些icons 是基本電腦沒有支援的icons 若是沒有安裝正確的電力字體會產生一堆?的icons
推薦安裝 oh-my-posh推薦的字體
- [Nerd Fonts](https://www.nerdfonts.com/)
- [Meslo LGM NF](https://github.com/ryanoasis/nerd-fonts/releases/download/v2.1.0/Meslo.zip)
> Meslo LGM NF 點了直接下載
## FluentTerminal 優美化
待補 圖片說明較快
## 自製 Theme
筆者本身看膩了那些預設主題 所以我也提供一些方法去製作 Theme
```json=
{
"$schema": "https://raw.githubusercontent.com/JanDeDobbeleer/oh-my-posh/main/themes/schema.json",
"blocks": [
{
"type": "prompt",
"alignment": "left",
"segments": [
{
"type": "session",
"style": "plain",
"foreground": "#FFFFFF",
"properties": {
"template": "<#bada55></> <lightYellow>{{.UserName}}</> <red>In</> <cyan>MTK </>",
"prefix": "<#0377C8># </>",
"user_color": "#55ceaa",
"host_color": "#4A9207"
}
},
{
"type": "path",
"style": "plain",
"foreground": "#0973C0",
"properties": {
"folder_icon": "\uF115",
"folder_separator_icon": " \uf061 ",
"style": "full"
}
},
{
"type": "git",
"style": "plain",
"foreground": "#B8B80A",
"properties": {
"prefix": "<#ffffff>on git: </>"
}
}
]
},
{
"type": "prompt",
"alignment": "right",
"segments": [
{
"type": "time",
"style": "plain",
"foreground": "#ffffff",
"properties": {
"prefix": "[",
"postfix": "]"
}
}
]
},
{
"type": "newline"
},
{
"type": "prompt",
"alignment": "left",
"segments": [
{
"type": "root",
"style": "plain",
"foreground": "#CECE04",
"properties": {
"prefix": ""
}
},
{
"type": "python",
"style": "plain",
"foreground": "#100e23",
"properties": {
"prefix": " \uE235 "
}
},
{
"type": "exit",
"style": "plain",
"foreground": "#CB4B16"
},
{
"type": "text",
"style": "plain",
"foreground": "#CC4B16",
"properties": {
"prefix": "",
"text": "\u279C"
}
}
]
}
],
"final_space": true
}
//$schema 是 oh-my-posh 的函式庫 可以想成js 引入 bootstrap的感覺
```
簡單範例說明
```json=
{
"blocks": [ //區塊的定義
{
"type": "prompt",
"alignment": "left", // 方向 terminal 顯示的左右邊區塊
"segments": [// 段落定義
{
"type": "path",
"style": "powerline",
"powerline_symbol": "\uE0B0",
"foreground": "#ffffff",
"background": "#61AFEF",
"properties": {
"prefix": " \uE5FF ",
"style": "folder"
}
}
]
}
]
}
//type 類型請參考 https://ohmyposh.dev/docs/ -> Segments -> 各個類型對應的參數都在上面
```
我認為比較麻煩的是 [session](https://ohmyposh.dev/docs/session)Template 屬性設定
```json=
{
"type": "session",
"style": "plain",
"foreground": "#FFFFFF",
"properties": {
"template": "<#bada55></> <lightYellow>{{.UserName}}</> <red>In</> <cyan>MTK </>",
"prefix": "<#0377C8># </>"
}
},
// 若是使用 Template 大部分的屬性都會失效
// prefix :"string" 開頭顯示的樣式
// template Properties 如何使用?
// A: {{.UserName}}
// 如何改變顏色 預設白色
// <色碼>{{.UserName}}</> <#ffffff>{{.UserName}}</>
```
> 顏色只支援16基本顏色 可以透過vscode去調整基本16色對應的顏色
## 套入vscode
vscode -> setting -> json
```json=
"terminal.integrated.fontFamily": "MesloLGM NF", // terminal font
//fluentTerminal
"terminal.explorerKind": "external",
"terminal.external.windowsExec": "flute", //powershell 改成fluteTerminal
"workbench.colorCustomizations": { // 調整基本色調
"terminal.background":"#131212",
"terminal.foreground":"#dddad6",
"terminal.ansiBlack":"#1D2021",
"terminal.ansiBrightBlack":"#665C54",
"terminal.ansiBrightBlue":"#0D6678",
"terminal.ansiBrightCyan":"#23d692",
"terminal.ansiBrightGreen":"#237e02",
"terminal.ansiBrightMagenta":"#8F4673",
"terminal.ansiBrightRed":"#201312",
"terminal.ansiBrightWhite":"#FDF4C1",
"terminal.ansiBrightYellow":"#FAC03B",
"terminal.ansiCyan":"#F8BBD0",
"terminal.ansiGreen":"#95C085",
"terminal.ansiMagenta":"#8F4673",
"terminal.ansiRed":"#FB543F",
"terminal.ansiWhite":"#A89984",
"terminal.ansiYellow":"#FAC03B",
},
"terminal.integrated.fontSize": 18,
"terminal.integrated.cursorStyle": "underline",
```
Sign in with Wallet
Connect another wallet