Mac控制檯的漸變色玩一下!

龍藎草發表於2019-05-07

純屬覺得有意思,大佬們勿噴

先看一個效果圖:

image.png

如果你感覺有點意思的話,可以繼續往下看,很簡單搞定!

我們分兩步來說:

  • 1、字元
  • 2、漸變色實現

FIGlet

FIGlet」是基於ASCII字元組成的字元畫,可以根據不同的字元型別來生成不一樣的效果, 目前應該支援314種

幾個效果:

   _____          _      _    _ _             _ 
  / ____|        | |    | |  | | |           | |
 | |     ___   __| | ___| |__| | |_ _ __ ___ | |
 | |    / _ \ / _` |/ _ \  __  | __| '_ ` _ \| |
 | |___| (_) | (_| |  __/ |  | | |_| | | | | | |
  \_____\___/ \__,_|\___|_|  |_|\__|_| |_| |_|_|
複製程式碼
 ▄████▄   ▒█████  ▓█████▄ ▓█████  ██░ ██ ▄▄▄█████▓ ███▄ ▄███▓ ██▓    
▒██▀ ▀█  ▒██▒  ██▒▒██▀ ██▌▓█   ▀ ▓██░ ██▒▓  ██▒ ▓▒▓██▒▀█▀ ██▒▓██▒    
▒▓█    ▄ ▒██░  ██▒░██   █▌▒███   ▒██▀▀██░▒ ▓██░ ▒░▓██    ▓██░▒██░    
▒▓▓▄ ▄██▒▒██   ██░░▓█▄   ▌▒▓█  ▄ ░▓█ ░██ ░ ▓██▓ ░ ▒██    ▒██ ▒██░    
▒ ▓███▀ ░░ ████▓▒░░▒████▓ ░▒████▒░▓█▒░██▓  ▒██▒ ░ ▒██▒   ░██▒░██████▒
░ ░▒ ▒  ░░ ▒░▒░▒░  ▒▒▓  ▒ ░░ ▒░ ░ ▒ ░░▒░▒  ▒ ░░   ░ ▒░   ░  ░░ ▒░▓  ░
  ░  ▒     ░ ▒ ▒░  ░ ▒  ▒  ░ ░  ░ ▒ ░▒░ ░    ░    ░  ░      ░░ ░ ▒  ░
░        ░ ░ ░ ▒   ░ ░  ░    ░    ░  ░░ ░  ░      ░      ░     ░ ░   
░ ░          ░ ░     ░       ░  ░ ░  ░  ░                ░       ░  ░
複製程式碼
   _     _      _     _      _     _      _     _      _     _      _     _      _     _      _     _   
  (c).-.(c)    (c).-.(c)    (c).-.(c)    (c).-.(c)    (c).-.(c)    (c).-.(c)    (c).-.(c)    (c).-.(c)  
   / ._. \      / ._. \      / ._. \      / ._. \      / ._. \      / ._. \      / ._. \      / ._. \   
 __\( Y )/__  __\( Y )/__  __\( Y )/__  __\( Y )/__  __\( Y )/__  __\( Y )/__  __\( Y )/__  __\( Y )/__ 
(_.-/'-'\-._)(_.-/'-'\-._)(_.-/'-'\-._)(_.-/'-'\-._)(_.-/'-'\-._)(_.-/'-'\-._)(_.-/'-'\-._)(_.-/'-'\-._)
   || C ||      || O ||      || D ||      || E ||      || H ||      || T ||      || M ||      || L ||   
 _.' `-' '._  _.' `-' '._  _.' `-' '._  _.' `-' '._  _.' `-' '._  _.' `-' '._  _.' `-' '._  _.' `-' '._ 
(.-./`-'\.-.)(.-./`-'\.-.)(.-./`-'\.-.)(.-./`-'\.-.)(.-./`-'\.-.)(.-./`-'\.-.)(.-./`-'\.-.)(.-./`-'\.-.)
 `-'     `-'  `-'     `-'  `-'     `-'  `-'     `-'  `-'     `-'  `-'     `-'  `-'     `-'  `-'     `-' 
複製程式碼

如何使用呢?

1、通過npm搜尋figlet,會找到npm包

www.npmjs.com/package/fig…

2、安裝npm包

npm install figlet   或者直接安裝  npm install -g figlet-cli
複製程式碼

具體使用方法參照官方文件即可

3、使用文件引數(控制檯操作為例)

  • font

字元型別 預設值:Standard

  • horizontalLayout

水平佈局 預設值: default

  • verticalLayout

垂直佈局 預設值: default

4、控制檯使用(專案使用和瀏覽器使用請看官方文件)

  • 基本命令:
-l, --list           List all the available fonts
-f, --font           A string value that indicates the FIGlet font to use
--horizontal-layout  A string value that indicates the horizontal layout to use
--vertical-layout    A string value that indicates the vertical layout to use
複製程式碼
  • 簡單執行
figlet "codehtml"
複製程式碼

輸出結果:

               _      _     _             _
  ___ ___   __| | ___| |__ | |_ _ __ ___ | |
 / __/ _ \ / _` |/ _ \ '_ \| __| '_ ` _ \| |
| (_| (_) | (_| |  __/ | | | |_| | | | | | |
 \___\___/ \__,_|\___|_| |_|\__|_| |_| |_|_|
複製程式碼
  • 使用字型
figlet -f "Def Leppard"  "codehtml" 
複製程式碼
                     ;
               :      ED.
        .,    t#,     E#Wi                 ,;
       ,Wt   ;##W.    E###G.             f#i .    .                                           i
      i#D.  :#L:WE    E#fD#W;          .E#t  Di   Dt    GEEEEEEEL        ..       :          LE
     f#f   .KG  ,#D   E#t t##L        i#W,   E#i  E#i   ,;;L#K;;.       ,W,     .Et         L#E
   .D#i    EE    ;#f  E#t  .E#K,     L#D.    E#t  E#t      t#E         t##,    ,W#t        G#W.
  :KW,    f#.     t#i E#t    j##f  :K#Wfff;  E#t  E#t      t#E        L###,   j###t       D#K.
  t#f     :#G     GK  E#t    :E#K: i##WLLLLt E########f.   t#E      .E#j##,  G#fE#t      E#K.
   ;#G     ;#L   LW.  E#t   t##L    .E#L     E#j..K#j...   t#E     ;WW; ##,:K#i E#t    .E#E.
    :KE.    t#f f#:   E#t .D#W;       f#E:   E#t  E#t      t#E    j#E.  ##f#W,  E#t   .K#E
     .DW:    f#D#;    E#tiW#G.         ,WW;  E#t  E#t      t#E  .D#L    ###K:   E#t  .K#D
       L#,    G#t     E#K##i            .D#; f#t  f#t      t#E :K#t     ##D.    E#t .W#G
        jt     t      E##D.               tt  ii   ii       fE ...      #G      .. :W##########Wt
                      E#t                                    :          j          :,,,,,,,,,,,,,.
                      L:
複製程式碼

image.png

快速連結:

FIGlet官網

FIGlet維基百科

FIGlet線上生成字符集

lolcat 漸變色

lolcat 是一個 Ruby 軟體包,可從官方 Ruby Gems 託管中獲得。我們使用lolcat結合figlet來實現需要的效果

gem install lolcat
複製程式碼

玩一下:

lolcat --help
複製程式碼

image.png

快速連結:

Ruby Gem Lolcat

Github lolcat

控制檯自己玩一下吧!下面講一下結合的操作,很簡單,因為我是設定在ZSH啟動問候語的位置

Figlet和lolcat結合

完整的命令:

figlet -f "Delta Corps Priest 1" "codehtml" | lolcat
// 很好理解
複製程式碼

如何配置在控制檯啟動問候語裡面?

  • 修改配置檔案
vim ~/.zshrc
複製程式碼
  • 新增命令
# Example aliases
# alias zshconfig="mate ~/.zshrc"
# alias ohmyzsh="mate ~/.oh-my-zsh"
[[ -s $(brew --prefix)/etc/profile.d/autojump.sh ]] && . $(brew --prefix)/etc/profile.d/autojump.sh
# 字符集配置命令
figlet -f "Delta Corps Priest 1" "codehtml" | lolcat
複製程式碼
  • 重啟終端即可

效果圖:

image.png

備註:純屬分享一下好玩的,如有問題請聯絡糾錯

相關文章