[Blogger筆記] 替網站埋個彩蛋

很多網站都會埋彩蛋
或許是Logo, 或許是招募廣告, 又或許是工程師的抱怨
這次重寫範本我也順便埋了個彩蛋在網頁裡
(有興趣的可以按F12切到Console看看)


Step #0 原理

透過JS裡的console.log()函數來輸出訊息到控制台
可以在Console中輸入以下這段看看效果
console.log('hello world');

Step #1 css

知道原理後我們可以為文字加上一點變化
var text  =   '%c Hi %c 0.0 %c 你好.';
console.log(text, 'color:#337ab7;', '', 'color:red;font-style:italic');
%c 代表使用下一個參數內所寫之CSS

Step #2 多行字串

那麼要怎麼輸出多行字串?
一個很簡單的方式, 寫成註釋, 再轉成字串

function getMultiLine(f) {
 var lines =f.toString(); 
 return lines.substring(lines.indexOf("/*") + 3, lines.lastIndexOf("*/"));   
}

var console_text = function() {  
/*        
%c
I
Want
To
Play
A
Game
*/  
};  
console.log(getMultiLine(console_text),'color:red;font-weight:bold');


Step #3 文字圖

想放圖像的話可以找ASCII圖
推薦幾個網站
Text to ASCII Art Generator: 文字圖像化

Step #4 JS

最後我們要把它寫成JS放進網站中
<script>
 function getMultiLine(f) {
 var lines =f.toString(); 
 return lines.substring(lines.indexOf("/*") + 3, lines.lastIndexOf("*/"));   
 }
 var console_text = function() {  
/* 


　　　▃ 

　　　 ◥▌　 　▃◢◣▃　　 　 ▃▬▂　 　▃◢▀ 

　　　 　◥◣▅▀　　 ◥▌▂▃▲　　 ◥◣▅▀ 

　　　　　 ▋◥▊　　◢▓█▓█▇◣ 　 ▐◤▋ 

　　　　　▌ ◥▉　 ◢▓　▓▓█▓█◣ ▼　▋ 

　 　 　 ▌ 　 ▀▅◢▓▃▓▓█▓■▀▀　　▌ 

　　 　 ▌　　 　▐▀■▆▓■▀▆▲　　　▌ 

　 　 ▐　　 ▅▀▌▓　 ▓▼◢▇▓▓▊▃　 ▐ 

　　 ▐　　◢▋ ▐▓▓　 ▓▌█▓█▓▊ ▐◣ ▐ 

　 　 ▍　◢▊　 █▓▓　▓▊ █▓█▓▌　█◣ ▍ 

　　　▍◢◤ 　 ▐▓▓▓ ▓▊▐▓█▓▓▍◢▀▌ ▍ 

　　▃▼　　　▐▓▓ ▓▓▍▓█▓▓█▀▅ ▀◥▍ 

　　　▎　 　▃▲▓▓ ▓▌▓▓▓▅■　 █◣　 ▎ 

　 　 ▎　 ◢▋ ▐▓▓　▐ ▓◢▓▅█▊ 　 █◣ 　▎ 

　　┃　　◢▊　▐▓▓ ▌▓▓◢▓██ 　　█◣　┃ 

　 ┃ 　　◢▉　 ▐▓▐ ▓▓▓◢▓■　 　 █◣　┃ 

　┃ 　 　◢█　　▐▐ ▓▓▓▓◢█▍　 　◢▌　 ┃ 

　　 　 　◢■　　 ▐ ▓▓▓▓▓▼　　　　◥◣ 

　　　　　◢▍　　　 ▼◢▓▓▓▀　　　　　 ▐◣ 

　　　▂◢◤　　　　 　▀▓■▀ 





*/  
 }
 console.log(getMultiLine(console_text))
</script>

　　　　　　　〈￣ヽ
　,､＿＿＿＿|　 |＿＿＿＿,､
〈　　＿＿＿＿＿＿＿＿＿　ヽ,
　|　|　　　　　　　　　　　　　|　|
　ヽ'　 〈＾ー―――＾ 〉　　 |／
　　　　,､二二二二二＿、
　　　〈＿_　　＿　　＿＿〉
　　　　　 |　 |　 |　 |
　　　　　/　/　 |　 |　　　　|＼
　＿＿_/　/　　|　 |＿＿＿|　ヽ
　＼＿＿/　　　ヽ＿＿＿＿＿）

延伸閱讀
About Sean Chaox
Me

I'm soulless, so I'm recompiling my soul
I'm lifeless, so I'm enriching my life
I'm homeless, so I build this House
I am Sean, welcome to my House

沒有留言:

張貼留言