为网站之「开发人员工具」内添加彩蛋教学

8 月162014

作者：超级efly 发布：2014-08-16 13:45 分类：网络阅读：6,188

大家有可能发现于许多其他的大站点内在浏览器的「开发人员工具」可以看到许多例如招聘信息等彩蛋，而今天畅想资源就来教大家如何在你的网站中也添加一个类似的彩蛋等著访客去挖掘吧！

预览

教学

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、现在你就可以在你网站的「开发人员工具」中找到你所加入的彩蛋啦！

预览

教学

参考

历史上的今天

觉得这篇文章有用吗？分享一下让更多人受益吧！

您可能还会对这些文章感兴趣！