我怎样才能有一个在 JQuery 终端中执行命令的链接？

Question

我正在尝试一些链接来执行命令。例如：

function showMenu(consoleObj) {
consoleObj.echo("\t[[!;;]about]      learn more about whatever");
...

我希望“关于”文本是可点击并执行

about

功能，而不是转到外部链接。

供参考，我有任何链接：true，在这里：

$('.terminal').terminal({
anyLinks: true,
menu: function() {
    showMenu(this);
},
...

让你知道，我是个大菜鸟。谢谢！

我已经尝试过：

consoleObj.echo("\t[[!;#fff;;#about]about]      learn more about whatever");

和

consoleObj.echo("\t[[!;#fff;;about]about]      learn more about whatever");

和

consoleObj.echo("\t[[!;#fff;;!about]about]      learn more about whatever");

没有任何效果（他们都将我带到 /about 页面，而不是执行命令）。

Answer 1

您可以通过向格式添加类并添加将执行命令的单击事件来实现此目的。在 url 中添加哈希不会给你带来任何好处，除非你 处理 hashChange 事件。

const consoleObj = $('body').terminal({
  about() {
    this.echo('this is about');
  }
});

consoleObj.echo("\t[[!;#fff;;command]about]      learn more about whatever");

consoleObj.on('click', '.command', function() {
  const command = $(this).text();
  consoleObj.exec(command);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.terminal/js/jquery.terminal.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/jquery.terminal/css/jquery.terminal.min.css" rel="stylesheet"/>