“何同学”把图片转成 ASCII 艺术字, 我用 Figlet 把文本转成ASCII 艺术字来装饰我的命令行工具

用 Figlet 装饰你的命令行工具

Figlet 是什么？

Figlet 是一个工具，可以将文本转换成 ASCII 艺术字体。它支持多种字体和布局，可以用来创建漂亮的命令行输出。

简单点说：🎉 Figlet：它就像一个魔法师，能将平淡无奇的文本瞬间变成炫酷的艺术字体！🎨 让命令行输出更炫酷！

先见识几个好玩的例子

Hello World!

什么？太普通了？那我们来看看更炫酷的字体吧！

3D 的 Hello World!

什么？你要哪种大横幅的 banner？

还有速度感十足的效果

Speed Fast! 快到飞起！都拖影了！

如何使用 Figlet？

准备工作(老配方，先准备)

让我们先新建一个demo目录，文件结构如下

demo
├── package.json # 项目配置文件
└── index.js # 入口文件

安装

首先，要确保你的电脑已经安装了 Node.js 和 npm ，安装好后，打开命令行工具，输入以下命令就可以安装 figlet：

npm install figlet --save

基本使用

在安装完成后，就可以在你的 Node.js 项目中使用它了。以下是一个简单的示例代码：

// index.js
const figlet = require('figlet');
figlet('Hello World!', function(err, data) {
    if (err) {
        console.log('Something went wrong...');
    } else {
        console.log(data);
    }
})

运行

cd demo
node index.js

figlet 有哪些方法可以用？

text

text 方法用于将文本转换成 ASCII 艺术字体，它接受两个参数：要转换的文本和选项对象，并返回一个 Promise 对象

text(string, options): Promise

promise

const figlet = require('figlet');
let figletPromise = figlet.text('Promise  Hello World!', {
    font: 'Big'
})
figletPromise.then((data) => {
    console.log(data);
})

cd demo
node index.js

回调函数

text(string, options, callback(err, data) {} )

const figlet = require('figlet');
figlet.text('Hello World!', { font: 'Big' }, function(err, data) {
    if (err) {
        console.log('Something went wrong...');
    } else {
        console.log(data);
    }
})

textSync

textSync 方法是text方法同步版本，它接受两个参数：要转换的文本和选项对象，并返回转换后的字符串

textSync(string, options)

const figlet = require('figlet');
let text = figlet.textSync('text  sync  Hello  World!', {
    font: 'Big'
})
console.log(text);

说了这么多，开头说的那些炫酷字体呢？没看见啊！Options 选项来啦！

Options 选项干啥的？

用于配置转换后的文本的样式。接下来看看常用的 font 属性：

font：指定要使用的字体，默认为 "Standard"。

来个 3D 的字体，看看效果

const text = figlet.textSync('3D Hello World!', {
    font: '3D-ASCII',
    whitespaceBreak: true
});
console.log(text);

都支持哪些字体呢？可以查看官方文档来查看所有支持的字体。

支持浏览器吗？

支持！

注意：在浏览器中使用 Figlet 需要使用 fetch API 来加载字体文件，因此需要引入 fetch.min.js。

1、下载figlet整个目录，放到你的项目里

demo
└── figlet
└──── lib
└────── figlet.js
└─── fonts # 字体文件 从 https://github.com/patorjk/figlet.js/tree/main/fonts 下载 到本地 或者从 figlet/fonts目录中拷贝出来
└── index.html

2、在index.html中引入fetch.min.js和figlet.js

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/fetch/1.0.0/fetch.min.js"></script>
    <script type="text/javascript" src="./figlet/lib/figlet.js"></script>
    <script>
        const inputText = "Hello World";
        figlet(inputText, "Standard", function (err, text) {
            if (err) {
                console.log("something went wrong...");
                console.dir(err);
                return;
            }
            console.log(text);
        });
    </script>
</body>
</html>

3、打开index.html

我是直接在本地开启了一个服务器，使用live-server工具，你也可以使用其他工具，比如http-server等。

cd demo
npx live-server

总结

🎉 Figlet：它是一个工具，能将平淡无奇的文本瞬间变成炫酷的艺术字体！🎨 让命令行输出更炫酷！支持通过node、浏览器环境使用，Figlet 不仅仅是一个库，它是创造乐趣和个性表达的工具。快去试试，让你的 Node.js 项目变得更有趣吧！🎉🚀

白色无法满足你的需求？可以配合chalk来点彩色的！(非本次内容，扩展内容，想了解可以深入研究下)

chalk意思是粉笔，粉笔可以写字，所以chalk可以给我们的文本上色的。点我去看chalk文档

const figlet = require('figlet');
const chalk = require('chalk');

figlet.text('Thank you !', (err, data) => {
    if (err) throw err;
    console.log(chalk.red(data));
});
figlet.text('Bye ~', (err, data) => {
    if (err) throw err;
    console.log(chalk.green(data));
});