打造優美的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
• Scoop

這兩套是windows 套件管理系統 看個人喜好進行安裝 跟 mac Homebrew 異曲同工之妙

安裝

• Chocolatey

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

scoop install curl

Invoke-Expression (New-Object System.Net.WebClient).DownloadString('https://get.scoop.sh')

# or shorter
iwr -useb get.scoop.sh | iex

Fluent-terminal

安裝

• choco

choco install fluent-terminal

記得輸入A 同意全部

• Scoop

scoop install 7zip git
scoop bucket add nonportable
scoop install fluent-terminal-np

Oh-my-posh

長得很像 Mac的 Oh-my-zsh 有很多主題可以選擇 也可以自由的客製化 想顯示的terminal 資訊

安裝

Install-Module posh-git -Scope CurrentUser

Install-Module oh-my-posh -Scope CurrentUser

配置

修改powerShell setting

若是電腦沒有配置設定文件　請先輸入

if (!(Test-Path -Path $PROFILE)) {New-Item -Type File -Path $PROFILE -Force}

產生一份powerShell的設定檔

使用vscode進行修改

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
• Meslo LGM NF

Meslo LGM NF 點了直接下載

FluentTerminal 優美化

待補 圖片說明較快

自製 Theme

筆者本身看膩了那些預設主題 所以我也提供一些方法去製作 Theme

{
  "$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的感覺

簡單範例說明

{
  "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 -> 各個類型對應的參數都在上面

我認為比較麻煩的是 sessionTemplate 屬性設定

{
          "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

"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",