一个乐于分享的博客
关注互联网折腾服务器分享码农的日常

属于程序猿的小浪漫 控制台输出线形文字

属于程序猿的小浪漫 控制台输出线形文字

闲的无聊,给网站增加点特色。如果你的前端工程师或者码农,那么对浏览器的控制台(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隔开。博主推荐后者,这样输出出来的文字整体感更强一点。

实现效果

属于程序猿的小浪漫 控制台输出线形文字

转载务必注明出处:岩兔站 » 属于程序猿的小浪漫 控制台输出线形文字
赞 (3) or 打赏

讨论区 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址