icon 設計
icon 設計製作概念和重點
簡單且能夠清楚表達意涵(例如:幾何圖形)
先搜尋圖片觀察造型
同層級的 icon 大小和線條粗細要統一
建立外框，來判斷不同 icon 的量體是否平衡
依據目標風格，可加上不同色塊或是調整角度
不要加入過多細節，避免畫面太滿太雜亂
不要選擇太多顏色
在色彩的運用上嘗試替換
細節跟色彩的統一性
適當使用灰階作為配角，襯托出主要顏色
icon 建立群組，較易使用
工具
Illustrator
Photoshop
Sketch
Figma…等
檔案 (illustrator)
將 icon 群組複製到畫面外
新增工作區域
刪除框線
保持背景顏色空白(透明)
檔案轉存
使用工作區域
選擇 png 格式 / SVG 格式
Hello World
Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.
Quick StartCreate a new post1$ hexo new "My New Post"
More info: Writing
Run server1$ hexo server
More info: Server
Generate static files1$ hexo generate
More info: Generating
Deploy to remote sites1$ hexo deploy
More info: Deployment
Hexo
Hexo
Markdown
Markdown(MD)
易讀易寫
很多軟體和服務支援 (Obsidian, Notion, Github, HackMD…等)
資源 Sources
官方文件(中)
官方文件(Eng)
Youtube 教學影片(Eng): Learn Markdown in 30 minutes!
預覽 Preview使用 VS Code 編輯 MD，先打開預覽頁面，可在編輯時同時觀看頁面呈現
預覽頁面開啟方式:
右鍵 –> open preview
快捷鍵: ctrl + shift + v
標題 Title1234567891011# H1## H2### H3#### H4##### H5###### H6
重點標註 Emphasize可以合併使用
粗體
呈現 粗體內容
語法 **粗體內容**
斜體
呈現 斜體內容
語法 *斜體內容*
刪除線
呈現 劃掉內容
語法 ~~劃掉內容~~
引用
呈現
Never Give up, Keep Going.
語法> Never Give up, Keep Going.
...
SASS
CSS 樣板語言 - SASSSass: Syntactically Awesome Style Sheets 是 CSS 的樣板語言
解決 CSS 的缺點
每個樣式最後都要加分號，缺少分號，導致前後樣式都出錯
要加一個大括號包住所有樣式
沒辦法一目了然層級關係
SASS 的特性
最後面不需要分號和大括號，打了反而錯
透過縮排來表示層級關係，元素只要跳一行縮排輸入，每個元素打完換行繼續打下一個元素
表現 class 內部的樣式，例如: .namecard h2，與前面元素同一層級，輸入 & h2 來表示
中間冒號後面記得要空一格
內部文字是在 「元素後」或是「class 後」空一格輸入
變數概念管理色彩 & 內容為網站設定視覺時，通常會有 3-5 個主要用色，反覆用在按鈕、邊框、背景等地方，如要修改主色，卻沒使用變數，必須要「一個一個剪貼將新色碼貼上」或是用「尋找+取代」，很麻煩又浪費時間
變數建立: $變數名稱
顏色變數 $color_word: #2D3748
距離變數 $margin_zero: 0px
內容變數 $title_front: “範例 ...