為網站之「開發人員工具」內添加彩蛋教學

8 月162014

作者：超級efly 發布：2014-08-16 13:45 分類：網絡閱讀：7,658

大家有可能發現於許多其他的大站點內在瀏覽器的「開發人員工具」可以看到許多例如招聘信息等彩蛋，而今天暢想資源就來教大家如何在你的網站中也添加一個類似的彩蛋等著訪客去挖掘吧！

預覽

教學

1、首先將下方代碼添加到網頁底部的的最底部 </body> 前或主題所引用之JS文件內（例如「functions.js」等）即可！

提示：對於WordPress站點來說即須添加於主題的「footer.php」文件內！另外如果加入於HTML中要記得帶上 <script> 標簽哦～

注釋：console.log 後的 %c 是代表使用下一個參數內所寫之CSS（例如 color: orange; 等）！

console.log('%c歡迎訪問「暢想資源」！', 'color: orange;');
console.log('%c本站由「超級efly」製作', 'color: purple;');
console.log('%c(C) 超級efly版權所有', 'color: brown; font-weight: bold;');
console.log('%c並且使用部落格程式 WordPress 及主題 Weisay Simple', 'color: green;');
console.log('%c多謝您的訪問與支持！', 'color: blue;');

console.log('%c歡迎訪問「暢想資源」！', 'color: orange;');

console.log('%c本站由「超級efly」製作', 'color: purple;');

console.log('%c並且使用部落格程式 WordPress 及主題 Weisay Simple', 'color: green;');

console.log('%c多謝您的訪問與支持！', 'color: blue;');

2、當然你也可以加入標示為「警告」或「錯誤」類型的彩蛋，不過暢想資源並不推薦大家這麼做～

console.warn('%c本段將會輸出警告標示！', 'color: orange;');
console.error('%c本段將會輸出錯誤標示！', 'color: red;');

1 2	console.warn('%c本段將會輸出警告標示！', 'color: orange;'); console.error('%c本段將會輸出錯誤標示！', 'color: red;');

3、現在你就可以在你網站的「開發人員工具」中找到你所加入的彩蛋啦！

預覽

教學

參考

歷史上的今天

覺得這篇文章有用嗎？分享一下讓更多人受益吧！

您可能還會對這些文章感興趣！