美化 console.log 輸出
出版:2018-03-04
console.log() 方法可以說是前端工程師最常用的調試方法之一。當我在研究音樂播放器 Aplayer 源碼的時候,發現其中有一行有趣的代碼,可以在 console 裏面輸出自帶顏色的圖案,故此記錄一下。
簡單來說就是插入 %c
這一個替換符,之後的句子便會加上相對應的樣式。
console.log(
`${"\n"} %c CALPA %c https://calpa.me ${"\n"}${"\n"}`,
"color: #6cf; background: #030307; padding:5px 0;",
"background: #6cf; padding:5px 0;"
);
然後你打開 console 便會看到這個結果:
另外一個例子:
console.log(
"This is %cMy stylish message",
"color: yellow; font-style: italic; background-color: blue;padding: 2px"
);
以上代碼已注入到博客系統中,有興趣查閱代碼的同學可以查看 源碼部分。
Calpa 是一個四天工作的系統架構師,日常幫助客戶構建一站式網站應用,手機應用,雲端架構。
2023 年 9 月,Calpa 收到來自國內外不同 Web3 團隊的邀請,參加韓國的 KBW 2023 和新加坡的 TOKEN 2049 活動。十二月份,Calpa 將參加台北區塊鏈週的 Hackathon 比賽。
Calpa 擅長運用各種前沿技術,包括 TypeScript、React.js 和 Vue.js,開發具有 Responsive Web Design 的網站。另外,他透過運用 aws-cdk 和 TypeScript 技術的融合,實現了基於雲端的「基礎即代碼」(Infrastructure as Code)部署策略,建立了多套高效且具有可伸縮性的全端架構。
同時,Calpa 積極參與各個社群,活躍於香港和台灣的開源社區,分享前沿知識。他曾在 2019 年的香港開源大會中擔任重要講者,為聽眾提供寶貴的工作經驗和深刻見解。此外,Calpa 在 GitHub 上公開分享了個人博客程式碼,已獲得超過 300 顆星星和 60 個分支。
如果您對系統架構有任何問題,或需要進一步交流,請隨時聯絡 Calpa,他非常歡迎討論。