复活节彩蛋🐇🥚寻宝游戏,有人想玩吗? - 在控制台日志中添加 ASCII 艺术
开发者彩蛋
我该如何将它添加到我的网站?
更改字体
复活节彩蛋寻宝活动🐇🥚🔍
资源
复活节将至,我们都想在艰难时期带来一些快乐。何不为您的网站或客户网站添加一个复活节彩蛋🐇🥚呢?
TLDR; - 它快速简便,只需生成 ASCII 艺术并使用即可console.log。
开发者彩蛋
你知道 dev.to 网站上藏着这个彩蛋吗?
如果您曾经F12在访问 dev.to 网站时打开过您最喜欢的浏览器的开发工具(),您可能已经看到控制台日志中显示的 ASCII 艺术。
-oooooooo/- .+ooooooooo: +ooo+ oooo/
+MMMMMMMMMMm+ -NMMMMMMMMMMs +MMMM: /MMMM/
+MMMNyyydMMMMy /MMMMyyyyyyy/ mMMMd mMMMd
+MMMm :MMMM. /MMMN /MMMM/ /MMMM:
+MMMm .MMMM- /MMMN dMMMm mMMMh
+MMMm .MMMM- /MMMMyyyy+ :MMMM/ +MMMM-
+MMMm .MMMM- /MMMMMMMMy hMMMm NMMMy
+MMMm .MMMM- /MMMMoooo: -MMMM+oMMMM-
+MMMm .MMMM- /MMMN yMMMmNMMMy
+MMMm +MMMM. /MMMN .MMMMMMMM.
+MMMMdddNMMMMo /MMMMddddddd+ sMMMMMMs
+MMMMMMMMMNh: .mMMMMMMMMMMs yMMMMs
.///////:- -/////////- .::.
我觉得这看起来棒极了。
我该如何将它添加到我的网站?
首先我们需要一种方法将文本转换为 ASCII 艺术,我使用了以下 npm 包figlet-cli,它可以在命令行中执行。
注:还有其他软件包或应用程序可用。
https://www.npmjs.com/package/figlet-cli
npx figlet-cli "Raven Code"
注意:我们使用 npx 进行安装,因为我们不需要将其作为全局包安装。
这将使用默认字体生成以下输出。
____ ____ _
| _ \ __ ___ _____ _ __ / ___|___ __| | ___
| |_) / _` \ \ / / _ \ '_ \ | | / _ \ / _` |/ _ \
| _ < (_| |\ V / __/ | | | | |__| (_) | (_| | __/
|_| \_\__,_| \_/ \___|_| |_| \____\___/ \__,_|\___|
现在要将此内容输出到控制台,我们必须使用\反斜杠转义特殊字符,并在每一行末尾加上\n\换行符\n和反斜杠,以表明该字符串跨越多行。
console.log(
" ____ ____ _\n\
| _ \\ __ ___ _____ _ __ / ___|___ __| | ___\n\
| |_) / _` \\ \\ / / _ \\ '_ \\ | | / _ \\ / _` |/ _ \\\n\
| _ < (_| |\\ V / __/ | | | | |__| (_) | (_| | __/\n\
|_| \\_\\__,_| \\_/ \\___|_| |_| \\____\\___/ \\__,_|\\___|"
)
注意:在 ES6 中可以使用 `Template Literals`,因为它支持多行字符串,而且您不需要 \n\ 语法。
更改字体
该figlet-cli软件包支持其他命令行参数,其中一个参数是-f标志位。指定此选项可确定用于生成 ASCII 艺术字的字体。
要查看支持的字体列表,请使用以下命令:
npx figlet-cli -l
要使用名为 的字体ANSI Shadow,请使用以下命令:
npx figlet-cli -f "ANSI Shadow" "Raven Code"
这将使用该字体生成以下输出ANSI Shadow。
██████╗ █████╗ ██╗ ██╗███████╗███╗ ██╗ ██████╗ ██████╗ ██████╗ ███████╗
██╔══██╗██╔══██╗██║ ██║██╔════╝████╗ ██║ ██╔════╝██╔═══██╗██╔══██╗██╔════╝
██████╔╝███████║██║ ██║█████╗ ██╔██╗ ██║ ██║ ██║ ██║██║ ██║█████╗
██╔══██╗██╔══██║╚██╗ ██╔╝██╔══╝ ██║╚██╗██║ ██║ ██║ ██║██║ ██║██╔══╝
██║ ██║██║ ██║ ╚████╔╝ ███████╗██║ ╚████║ ╚██████╗╚██████╔╝██████╔╝███████╗
还在等什么?快发挥你的创意吧!
超强创意
如果你想更进一步,将图像转换为 ASCII 艺术,那么可以看看ascii-artnpm 包。
https://www.npmjs.com/package/ascii-art
同样,可以通过npx以下命令进行安装:
npx ascii-art image path/to/image.png
注意:此软件包也支持将文本转换为 ASCII 艺术字。但是,字体支持似乎有限。
你可以使用此功能生成 ASCII 艺术作品作为你的徽标,并将其输出到 console.log。
复活节彩蛋寻宝活动🐇🥚🔍
让我们来一场线上复活节彩蛋寻宝游戏吧!找出那些藏有复活节彩蛋的网站,并在下方评论区列出你认为最好的彩蛋。开始寻宝吧!
资源
https://dev.to
https://www.npmjs.com/package/figlet-cli
https://github.com/khrome/ascii-art