CSS border 繪製三角形的原理 CSS 的 border 屬性在元素寬高為零時,會顯示出四個三角形。這是因為四邊 border 的交界處本來就是斜角切割的,只是在正常情況下因為元素有寬高,這個特性並不明顯。
原理示意 當元素的 width 和 height 都是 0 時:
1 2 3 4 5 6 7 8 .triangle-demo { width: 0; height: 0; border-top: 50px solid red; border-right: 50px solid blue; border-bottom: 50px solid green; border-left: 50px solid yellow; } 你會看到四個三角形分別指向四個方向,各佔一角。
製作各方向三角形 要製作指向某方向的三角形,就把該方向的對面 border 設為有色,其他三邊設為 transparent:
向上三角形(▲) 1 2 3 4 5 6 7 .triangle-up { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 40px solid #333; /* 底部有色 = 三角形朝上 */ } 向下三角形(▼) 1 2 3 4 5 6 7 .
最近想記錄我在筆電上面的終端機設定
但以經放著多天,最近在最有空的時候準備整理一下
本來想用圖片整理,但logdown不能上傳圖片
未來會考慮用hexo來用…
不過在用hexo之後,剛好看到asciinema可以錄制command指令
想說先用這個東西來試試
之前有做TSL加密自動化憑證
但是遇到一些問題
例否我更新Linux導至Certbot壞掉
但重安裝Certbot就沒有這個問題
除了我有設定防火牆問題
但還是失敗
不過最後還是找到原因,記錄一下
enhancd 是一個增強版的 cd 指令,能夠記錄你曾經造訪過的所有目錄,並在你輸入 cd 時,透過互動式的模糊搜尋介面讓你快速跳到目標目錄,不需要輸入完整路徑。
fzf(fuzzy finder)是一個功能強大的命令列模糊搜尋工具,以 Go 語言編寫,速度極快。它不只是一個搜尋工具,更提供完整的 shell 整合,讓你用 Ctrl+R 搜尋歷史指令、Ctrl+T 搜尋檔案、Alt+C 快速切換目錄,大幅提升命令列操作效率。
fzy 是一個輕量的命令列模糊搜尋(fuzzy finder)工具,設計簡潔,能快速從大量文字清單中互動式地選取一個項目。它特別適合搭配其他指令使用,讓選擇檔案、切換分支、搜尋歷史紀錄等操作變得更直覺。
常常因為要做cd ../..而煩腦嗎
發現有人介紹zplug其中一個套件 bd
這指令跟cd是相反的
bd 指令簡介 bd 是一個 zsh 外掛,全名取自「back directory」的概念。當你在深層目錄中工作時,不需要一直打 ../../../..,只要輸入 bd 目錄名稱 就能直接跳回上層某個指定的目錄。
使用範例 假設目前所在路徑為:
1 /home/user/projects/myapp/src/components/buttons 不需要記住要打幾個 ../,直接:
1 2 3 bd projects # 跳回 /home/user/projects bd myapp # 跳回 /home/user/projects/myapp bd src # 跳回 /home/user/projects/myapp/src 更自然的導覽體驗,特別適合在深層巢狀目錄(如 node_modules 或 Java 套件結構)中工作。
zplug 是什麼? zplug 是一套快速、靈活的 zsh 套件管理工具,功能類似 vim 的 vim-plug 或 npm,可以用來安裝、管理 zsh 外掛。
安裝 zplug 1 2 3 4 5 # macOS(Homebrew) brew install zplug # 手動安裝 curl -sL --proto-redir -all,https https://raw.
oh-my-zsh有一個指令補全功能
再我裝zsh在elementary OS 上面少這個功能
就不太習慣XD
好來我找到了
在oh-my-zsh/completion.zsh at master · robbyrussell/oh-my-zsh抓下來(檔案抓下來,對照設定檔錄徑)
.zshrc設定
1 2 # TAB 補完選單 source ~/.zplug/completion.zsh 就能完成了
URL
oh-my-zsh/completion.zsh at master · robbyrussell/oh-my-zsh
Installing zsh-autosuggestions - asciinema
[2018 鐵人賽] 簡潔高效的 PHP & Laravel 工作術:從 elementary OS 下手的聰明改造提案 #11
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 source ~/.