发布于 2026-01-06 0 阅读
0

Easter Egg 🐇🥚 Hunt Anyone? - Add ASCII Art to the console log DEV Easter Egg How Do I Add That To My Site? Change The Font The Easter Egg Hunt 🐇🥚🔍 Resources

复活节彩蛋🐇🥚寻宝游戏,有人想玩吗? - 在控制台日志中添加 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
.///////:-        -/////////-         .::.

Enter fullscreen mode Exit fullscreen mode
访问 dev.to 时,打开开发者工具,在控制台日志中输出。

我觉得这看起来棒极了。

我该如何将它添加到我的网站?

首先我们需要一种方法将文本转换为 ASCII 艺术,我使用了以下 npm 包figlet-cli,它可以在命令行中执行。

注:还有其他软件包或应用程序可用。

https://www.npmjs.com/package/figlet-cli

npx figlet-cli "Raven Code"
Enter fullscreen mode Exit fullscreen mode
注意:我们使用 npx 进行安装,因为我们不需要将其作为全局包安装。

这将使用默认字体生成以下输出。

  ____                          ____          _      
 |  _ \ __ ___   _____ _ __    / ___|___   __| | ___
 | |_) / _` \ \ / / _ \ '_ \  | |   / _ \ / _` |/ _ \
 |  _ < (_| |\ V /  __/ | | | | |__| (_) | (_| |  __/
 |_| \_\__,_| \_/ \___|_| |_|  \____\___/ \__,_|\___|
Enter fullscreen mode Exit fullscreen mode

现在要将此内容输出到控制台,我们必须使用\反斜杠转义特殊字符,并在每一行末尾加上\n\换行符\n和反斜杠,以表明该字符串跨越多行。

console.log(
      "     ____                          ____          _\n\
    |  _ \\ __ ___   _____ _ __    / ___|___   __| | ___\n\
    | |_) / _` \\ \\ / / _ \\ '_ \\  | |   / _ \\ / _` |/ _ \\\n\
    |  _ < (_| |\\ V /  __/ | | | | |__| (_) | (_| |  __/\n\
    |_| \\_\\__,_| \\_/ \\___|_| |_|  \\____\\___/ \\__,_|\\___|"
    )
Enter fullscreen mode Exit fullscreen mode
注意:在 ES6 中可以使用 `Template Literals`,因为它支持多行字符串,而且您不需要 \n\ 语法。

更改字体

figlet-cli软件包支持其他命令行参数,其中一个参数是-f标志位。指定此选项可确定用于生成 ASCII 艺术字的字体。

要查看支持的字体列表,请使用以下命令:

npx figlet-cli -l
Enter fullscreen mode Exit fullscreen mode

要使用名为 的字体ANSI Shadow,请使用以下命令:

npx figlet-cli -f "ANSI Shadow" "Raven Code"
Enter fullscreen mode Exit fullscreen mode

这将使用该字体生成以下输出ANSI Shadow

██████╗  █████╗ ██╗   ██╗███████╗███╗   ██╗     ██████╗ ██████╗ ██████╗ ███████╗
██╔══██╗██╔══██╗██║   ██║██╔════╝████╗  ██║    ██╔════╝██╔═══██╗██╔══██╗██╔════╝
██████╔╝███████║██║   ██║█████╗  ██╔██╗ ██║    ██║     ██║   ██║██║  ██║█████╗
██╔══██╗██╔══██║╚██╗ ██╔╝██╔══╝  ██║╚██╗██║    ██║     ██║   ██║██║  ██║██╔══╝
██║  ██║██║  ██║ ╚████╔╝ ███████╗██║ ╚████║    ╚██████╗╚██████╔╝██████╔╝███████╗
Enter fullscreen mode Exit fullscreen mode

还在等什么?快发挥你的创意吧!

超强创意

如果你想更进一步,将图像转换为 ASCII 艺术,那么可以看看ascii-artnpm 包。

https://www.npmjs.com/package/ascii-art

同样,可以通过npx以下命令进行安装:

npx ascii-art image path/to/image.png
Enter fullscreen mode Exit fullscreen mode
注意:此软件包也支持将文本转换为 ASCII 艺术字。但是,字体支持似乎有限。

你可以使用此功能生成 ASCII 艺术作品作为你的徽标,并将其输出到 console.log。

复活节彩蛋寻宝活动🐇🥚🔍

让我们来一场线上复活节彩蛋寻宝游戏吧!找出那些藏有复活节彩蛋的网站,并在下方评论区列出你认为最好的彩蛋。开始寻宝吧!

资源

https://dev.to
https://www.npmjs.com/package/figlet-cli
https://github.com/khrome/ascii-art

文章来源:https://dev.to/deadlybyte/easter-egg-hunt-anyone-add-ascii-art-to-the-console-log-4emg