闲的无聊,给网站增加点特色。如果你的前端工程师或者码农,那么对浏览器的控制台(console)肯定不会陌生,它是调试代码,排查错误的必备工具!以Chrome浏览器为例,通常打开的方式是页面中“右键”-“检查”,也可以用快捷键“F12”或者“Ctrl+Shift+I”。
控制台除了调试页面,还可以输出一些版权信息,甚至是招聘信息。而博主今天折腾的就是控制台输出本站的版权信息。
线形字(图)
在Shell时代,用户与计算机交互的就是一个黑色的窗口,显示着白色的字母。虽然界面简陋,但是人们追求美的心情是永远存在的。与是浪漫的程序猿们就发明了线形字(图)。用各种制表符,描绘出一个漂亮的交互界面。
看看各界大佬们都是怎么玩的:
比如AppNode在安装之前会给出一个漂亮的画面。
每天访问的百度,就给出的则是招聘信息
知乎同样是招聘信息,加了线形图,看起来要更大气一点
添加自己的线型图
自己的博客不需要招聘信息,就只放版权信息喽,我选择的内容是
╔ ╮ ╮╠════╗ ╦╩╦ ╠╗
╚══╩═╝╔══╦═╗ ║ ║ ║
╦════║ ║ ║ ║ ╔═╩╗
║═══╗╚══╬╦╯ ║ ║ ║
╯ ║ ║║╝ ║ ║ ║
╚═══╯╚═╯╚╯ ╩═ ╚══╯
╔╗╔╗╔══╗╔══╗╔══╗╔╗╔╗╔══╗ ╔══╗╔══╗
║╚╝║║╔╗║║╔╗║╚╗╔╝║║║║╠══║ ║╔═╝║╔╗║
╚╗╔╝║╔╗║║║║║ ║║ ║╚╝║║══╣╔╗║╚═╗║║║║
╚╝ ╚╝╚╝╚╝╚╝ ╚╝ ╚══╝╚══╝╚╝╚══╝╚╝╚╝
需要自定义信息的可以从http://www.388g.com/xianti.html获取自己的线形字。
添加到源代码
以我的为例
#编辑模板文件 vim /wwwroot/yantuz.cn/wp-content/themes/dux/header.php #<body>下方添加 <!-- 我自己的线形字 -->
实现效果
添加到控制台
添加到控制台需要编辑js文件,如果想全局输入就要编辑全局JS文件,如果只希望首页输出,只编辑首页即可
#js中添加以下内容 console.log("===我自己的线形字===");
由于线型字是分多行显示的,所以换行部分可以用多次console.log()
输出,也可以只用一次console.log()
,换行部分用\r\n
隔开。博主推荐后者,这样输出出来的文字整体感更强一点。
实现效果